From 0fd8a4507c2d5e28767e12c76b0e04defbef8925 Mon Sep 17 00:00:00 2001 From: Alexandre Wilhelm Date: Wed, 17 Sep 2014 10:27:26 -0700 Subject: [PATCH 1/8] New: possibility to draw automatically in high DPI in canvas2D Previously, Cappuccino didn't handle retina device when drawing for canvas2D. Now it does. To do that, Cappuccino will firstly calculate the pixel ratio of the current device, then it needs to change the css style of the canvas by multiply it by the current pixel ratio and finally scale the canvas by this pixel ratio. More information about high DPI drawing here : http://www.html5rocks.com/en/tutorials/canvas/hidpi/ Added the method `setAllowsHighDPIDrawing:` and `allowsHighDPIDrawing` to deactivate or activate this feature. Fixed #2175 --- AppKit/CPCompatibility.j | 9 +++++++++ AppKit/CPView.j | 28 ++++++++++++++++++++++++++-- 2 files changed, 35 insertions(+), 2 deletions(-) diff --git a/AppKit/CPCompatibility.j b/AppKit/CPCompatibility.j index c471c1408..09de88aff 100644 --- a/AppKit/CPCompatibility.j +++ b/AppKit/CPCompatibility.j @@ -434,3 +434,12 @@ function CPBrowserCSSProperty(aProperty) return browserProperty.toLowerCase(); } + +function CPBrowserBackingStorePixelRatio(context) +{ + return context.webkitBackingStorePixelRatio || + context.mozBackingStorePixelRatio || + context.msBackingStorePixelRatio || + context.oBackingStorePixelRatio || + context.backingStorePixelRatio || 1; +} diff --git a/AppKit/CPView.j b/AppKit/CPView.j index 3ceb92f6e..2e37d2c3b 100644 --- a/AppKit/CPView.j +++ b/AppKit/CPView.j @@ -126,6 +126,8 @@ var CPViewFlags = { }, CPViewHasCustomDrawRect = 1 << 0, CPViewHasCustomLayoutSubviews = 1 << 1; +var CPViewAllowsHighDPIDrawing = YES; + /*! @ingroup appkit @@ -261,6 +263,24 @@ var CPViewFlags = { }, return [super _binderClassForBinding:aBinding]; } +/*! + Controls wheter the high DPI drawing is actived or not. By default YES. + @param isActive YES to allow the high DPI drawing, otherwise NO. +*/ ++ (void)setAllowsHighDPIDrawing:(BOOL)isActive +{ + CPViewAllowsHighDPIDrawing = isActive; +} + +/*! + Return YES if the high DPI drawing is actived or not, otherwise NO. + @return BOOL - YES if the high DPI drawing is actived or not, otherwise NO. +*/ ++ (BOOL)allowsHighDPIDrawing +{ + return CPViewAllowsHighDPIDrawing; +} + - (void)_setupViewFlags { var theClass = [self class], @@ -2456,7 +2476,10 @@ setBoundsOrigin: #if PLATFORM(DOM) var width = CGRectGetWidth(_frame), - height = CGRectGetHeight(_frame); + height = CGRectGetHeight(_frame), + devicePixelRatio = window.devicePixelRatio || 1, + backingStoreRatio = CPBrowserBackingStorePixelRatio(graphicsPort), + ratio = CPViewAllowsHighDPIDrawing ? (devicePixelRatio / backingStoreRatio) : 1; _DOMContentsElement = graphicsPort.DOMElement; @@ -2466,7 +2489,7 @@ setBoundsOrigin: _DOMContentsElement.style.position = "absolute"; _DOMContentsElement.style.visibility = "visible"; - CPDOMDisplayServerSetSize(_DOMContentsElement, width, height); + CPDOMDisplayServerSetSize(_DOMContentsElement, width * ratio, height * ratio); CPDOMDisplayServerSetStyleLeftTop(_DOMContentsElement, NULL, 0.0, 0.0); CPDOMDisplayServerSetStyleSize(_DOMContentsElement, width, height); @@ -2476,6 +2499,7 @@ setBoundsOrigin: if (CPPlatformHasBug(CPCanvasParentDrawErrorsOnMovementBug)) _DOMElement.style.webkitTransform = 'translateX(0)'; + CGContextScaleCTM(graphicsPort, ratio, ratio); CPDOMDisplayServerAppendChild(_DOMElement, _DOMContentsElement); #endif _graphicsContext = [CPGraphicsContext graphicsContextWithGraphicsPort:graphicsPort flipped:YES]; From 451ac297d44063412f3fafe4b59dc8bd6f79a364 Mon Sep 17 00:00:00 2001 From: Alexandre Wilhelm Date: Wed, 17 Sep 2014 10:52:22 -0700 Subject: [PATCH 2/8] Fixed: change accessors for CPViewHighDPIDrawingEnabled --- AppKit/CPView.j | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/AppKit/CPView.j b/AppKit/CPView.j index 2e37d2c3b..33e577c30 100644 --- a/AppKit/CPView.j +++ b/AppKit/CPView.j @@ -126,7 +126,7 @@ var CPViewFlags = { }, CPViewHasCustomDrawRect = 1 << 0, CPViewHasCustomLayoutSubviews = 1 << 1; -var CPViewAllowsHighDPIDrawing = YES; +var CPViewHighDPIDrawingEnabled = YES; /*! @@ -265,20 +265,20 @@ var CPViewAllowsHighDPIDrawing = YES; /*! Controls wheter the high DPI drawing is actived or not. By default YES. - @param isActive YES to allow the high DPI drawing, otherwise NO. + @param isEnabled YES to allow the high DPI drawing, otherwise NO. */ -+ (void)setAllowsHighDPIDrawing:(BOOL)isActive ++ (void)setHighDPIDrawingEnabled:(BOOL)isEnabled { - CPViewAllowsHighDPIDrawing = isActive; + CPViewHighDPIDrawingEnabled = isEnabled; } /*! Return YES if the high DPI drawing is actived or not, otherwise NO. @return BOOL - YES if the high DPI drawing is actived or not, otherwise NO. */ -+ (BOOL)allowsHighDPIDrawing ++ (BOOL)isHighDPIDrawingEnabled { - return CPViewAllowsHighDPIDrawing; + return CPViewHighDPIDrawingEnabled; } - (void)_setupViewFlags @@ -2479,7 +2479,7 @@ setBoundsOrigin: height = CGRectGetHeight(_frame), devicePixelRatio = window.devicePixelRatio || 1, backingStoreRatio = CPBrowserBackingStorePixelRatio(graphicsPort), - ratio = CPViewAllowsHighDPIDrawing ? (devicePixelRatio / backingStoreRatio) : 1; + ratio = CPViewHighDPIDrawingEnabled ? (devicePixelRatio / backingStoreRatio) : 1; _DOMContentsElement = graphicsPort.DOMElement; From 79ef6f2f75f380b7430dd0e6504a7c45e18b3edd Mon Sep 17 00:00:00 2001 From: Alexandre Wilhelm Date: Wed, 17 Sep 2014 13:35:07 -0700 Subject: [PATCH 3/8] Fixed: dpi drawing didn't work when changing the frame of a view --- AppKit/CPView.j | 18 +++++++++++++----- 1 file changed, 13 insertions(+), 5 deletions(-) diff --git a/AppKit/CPView.j b/AppKit/CPView.j index 33e577c30..28f308fd1 100644 --- a/AppKit/CPView.j +++ b/AppKit/CPView.j @@ -206,6 +206,9 @@ var CPViewHighDPIDrawingEnabled = YES; CGSize _hierarchyScaleSize; CGSize _scaleSize; + // Drawing high DPI + float _highDPIRatio; + // Layout Support BOOL _needsLayout; JSObject _ephemeralSubviews; @@ -1031,7 +1034,7 @@ var CPViewHighDPIDrawingEnabled = YES; if (_DOMContentsElement) { - CPDOMDisplayServerSetSize(_DOMContentsElement, size.width, size.height); + CPDOMDisplayServerSetSize(_DOMContentsElement, size.width * _highDPIRatio, size.height * _highDPIRatio); CPDOMDisplayServerSetStyleSize(_DOMContentsElement, size.width, size.height); } @@ -2478,8 +2481,9 @@ setBoundsOrigin: var width = CGRectGetWidth(_frame), height = CGRectGetHeight(_frame), devicePixelRatio = window.devicePixelRatio || 1, - backingStoreRatio = CPBrowserBackingStorePixelRatio(graphicsPort), - ratio = CPViewHighDPIDrawingEnabled ? (devicePixelRatio / backingStoreRatio) : 1; + backingStoreRatio = CPBrowserBackingStorePixelRatio(graphicsPort); + + _highDPIRatio = CPViewHighDPIDrawingEnabled ? (devicePixelRatio / backingStoreRatio) : 1; _DOMContentsElement = graphicsPort.DOMElement; @@ -2489,7 +2493,7 @@ setBoundsOrigin: _DOMContentsElement.style.position = "absolute"; _DOMContentsElement.style.visibility = "visible"; - CPDOMDisplayServerSetSize(_DOMContentsElement, width * ratio, height * ratio); + CPDOMDisplayServerSetSize(_DOMContentsElement, width * _highDPIRatio, height * _highDPIRatio); CPDOMDisplayServerSetStyleLeftTop(_DOMContentsElement, NULL, 0.0, 0.0); CPDOMDisplayServerSetStyleSize(_DOMContentsElement, width, height); @@ -2499,12 +2503,16 @@ setBoundsOrigin: if (CPPlatformHasBug(CPCanvasParentDrawErrorsOnMovementBug)) _DOMElement.style.webkitTransform = 'translateX(0)'; - CGContextScaleCTM(graphicsPort, ratio, ratio); + // FIXME: should be here + //graphicsPort.setTransform(_highDPIRatio, 0, 0 , _highDPIRatio, 0, 0); CPDOMDisplayServerAppendChild(_DOMElement, _DOMContentsElement); #endif _graphicsContext = [CPGraphicsContext graphicsContextWithGraphicsPort:graphicsPort flipped:YES]; } + // FIXME : should not be here...something wrong somewhere, the context should keep the informations of the above setTransform + [_graphicsContext graphicsPort].setTransform(_highDPIRatio, 0, 0 , _highDPIRatio, 0, 0); + [CPGraphicsContext setCurrentContext:_graphicsContext]; CGContextSaveGState([_graphicsContext graphicsPort]); From eff9c69069cb4b1f248eaa273322adc7565ab361 Mon Sep 17 00:00:00 2001 From: Alexandre Wilhelm Date: Sun, 21 Sep 2014 22:35:50 -0700 Subject: [PATCH 4/8] Fixed: transform matrix for retina displayed is reset when changing the frame of the view --- AppKit/CPView.j | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/AppKit/CPView.j b/AppKit/CPView.j index 28f308fd1..e6e15ee67 100644 --- a/AppKit/CPView.j +++ b/AppKit/CPView.j @@ -1036,6 +1036,9 @@ var CPViewHighDPIDrawingEnabled = YES; { CPDOMDisplayServerSetSize(_DOMContentsElement, size.width * _highDPIRatio, size.height * _highDPIRatio); CPDOMDisplayServerSetStyleSize(_DOMContentsElement, size.width, size.height); + + if (_graphicsContext) + [_graphicsContext graphicsPort].setTransform(_highDPIRatio, 0, 0 , _highDPIRatio, 0, 0); } if (_backgroundType !== BackgroundTrivialColor) @@ -2503,16 +2506,13 @@ setBoundsOrigin: if (CPPlatformHasBug(CPCanvasParentDrawErrorsOnMovementBug)) _DOMElement.style.webkitTransform = 'translateX(0)'; - // FIXME: should be here - //graphicsPort.setTransform(_highDPIRatio, 0, 0 , _highDPIRatio, 0, 0); + graphicsPort.setTransform(_highDPIRatio, 0, 0 , _highDPIRatio, 0, 0); CPDOMDisplayServerAppendChild(_DOMElement, _DOMContentsElement); + graphicsPort._test = @"oirjeio" #endif _graphicsContext = [CPGraphicsContext graphicsContextWithGraphicsPort:graphicsPort flipped:YES]; } - // FIXME : should not be here...something wrong somewhere, the context should keep the informations of the above setTransform - [_graphicsContext graphicsPort].setTransform(_highDPIRatio, 0, 0 , _highDPIRatio, 0, 0); - [CPGraphicsContext setCurrentContext:_graphicsContext]; CGContextSaveGState([_graphicsContext graphicsPort]); From 0255e8980bec9da097e697778fecc82059732cd9 Mon Sep 17 00:00:00 2001 From: Alexandre Wilhelm Date: Sun, 21 Sep 2014 22:38:11 -0700 Subject: [PATCH 5/8] Fixed: remove stupid debug mode --- AppKit/CPView.j | 1 - 1 file changed, 1 deletion(-) diff --git a/AppKit/CPView.j b/AppKit/CPView.j index e6e15ee67..b871e3d24 100644 --- a/AppKit/CPView.j +++ b/AppKit/CPView.j @@ -2508,7 +2508,6 @@ setBoundsOrigin: graphicsPort.setTransform(_highDPIRatio, 0, 0 , _highDPIRatio, 0, 0); CPDOMDisplayServerAppendChild(_DOMElement, _DOMContentsElement); - graphicsPort._test = @"oirjeio" #endif _graphicsContext = [CPGraphicsContext graphicsContextWithGraphicsPort:graphicsPort flipped:YES]; } From a94696e0372fe06db038e15d5bc2f9f6849c60d8 Mon Sep 17 00:00:00 2001 From: Alexandre Wilhelm Date: Sun, 21 Sep 2014 22:46:46 -0700 Subject: [PATCH 6/8] Fixed: refactoring of the retina drawing feature --- AppKit/CPView.j | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/AppKit/CPView.j b/AppKit/CPView.j index b871e3d24..c43a78015 100644 --- a/AppKit/CPView.j +++ b/AppKit/CPView.j @@ -207,6 +207,7 @@ var CPViewHighDPIDrawingEnabled = YES; CGSize _scaleSize; // Drawing high DPI + BOOL _needToSetTransformMatrix; float _highDPIRatio; // Layout Support @@ -1037,8 +1038,7 @@ var CPViewHighDPIDrawingEnabled = YES; CPDOMDisplayServerSetSize(_DOMContentsElement, size.width * _highDPIRatio, size.height * _highDPIRatio); CPDOMDisplayServerSetStyleSize(_DOMContentsElement, size.width, size.height); - if (_graphicsContext) - [_graphicsContext graphicsPort].setTransform(_highDPIRatio, 0, 0 , _highDPIRatio, 0, 0); + _needToSetTransformMatrix = YES; } if (_backgroundType !== BackgroundTrivialColor) @@ -2506,12 +2506,16 @@ setBoundsOrigin: if (CPPlatformHasBug(CPCanvasParentDrawErrorsOnMovementBug)) _DOMElement.style.webkitTransform = 'translateX(0)'; - graphicsPort.setTransform(_highDPIRatio, 0, 0 , _highDPIRatio, 0, 0); CPDOMDisplayServerAppendChild(_DOMElement, _DOMContentsElement); #endif _graphicsContext = [CPGraphicsContext graphicsContextWithGraphicsPort:graphicsPort flipped:YES]; + _needToSetTransformMatrix = YES; } + if (_needToSetTransformMatrix) + [_graphicsContext graphicsPort].setTransform(_highDPIRatio, 0, 0 , _highDPIRatio, 0, 0); + + _needToSetTransformMatrix = NO; [CPGraphicsContext setCurrentContext:_graphicsContext]; CGContextSaveGState([_graphicsContext graphicsPort]); From 93743b11b23e9f119f8dec7c23593ae8809e8cc0 Mon Sep 17 00:00:00 2001 From: Alexandre Wilhelm Date: Mon, 22 Sep 2014 10:13:51 -0700 Subject: [PATCH 7/8] Fixed: typo in documentation in CPView.j --- AppKit/CPView.j | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/AppKit/CPView.j b/AppKit/CPView.j index c43a78015..e171395a3 100644 --- a/AppKit/CPView.j +++ b/AppKit/CPView.j @@ -268,8 +268,8 @@ var CPViewHighDPIDrawingEnabled = YES; } /*! - Controls wheter the high DPI drawing is actived or not. By default YES. - @param isEnabled YES to allow the high DPI drawing, otherwise NO. + Controls whether high DPI drawing is activated or not. Defaults to YES. + @param isEnabled YES to enable high DPI drawing */ + (void)setHighDPIDrawingEnabled:(BOOL)isEnabled { @@ -277,8 +277,8 @@ var CPViewHighDPIDrawingEnabled = YES; } /*! - Return YES if the high DPI drawing is actived or not, otherwise NO. - @return BOOL - YES if the high DPI drawing is actived or not, otherwise NO. + Returns whether high DPI drawing is enabled. + @return BOOL - YES if high DPI drawing is activated, otherwise NO. */ + (BOOL)isHighDPIDrawingEnabled { From d546da8b5fc4e43fabff6b0bf87794b16f404d42 Mon Sep 17 00:00:00 2001 From: Alexandre Wilhelm Date: Thu, 12 Feb 2015 12:49:18 -0800 Subject: [PATCH 8/8] Fixed: issue with scaling a view. The associated canvas now upadtes its size when having a zoom --- AppKit/CPView.j | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/AppKit/CPView.j b/AppKit/CPView.j index b547f7a03..c047da60e 100644 --- a/AppKit/CPView.j +++ b/AppKit/CPView.j @@ -1093,14 +1093,6 @@ var CPViewHighDPIDrawingEnabled = YES; #if PLATFORM(DOM) [self _setDisplayServerSetStyleSize:size]; - if (_DOMContentsElement) - { - CPDOMDisplayServerSetSize(_DOMContentsElement, size.width * _highDPIRatio, size.height * _highDPIRatio); - CPDOMDisplayServerSetStyleSize(_DOMContentsElement, size.width, size.height); - - _needToSetTransformMatrix = YES; - } - if (_backgroundType !== BackgroundTrivialColor) { if (_backgroundType === BackgroundTransparentColor) @@ -1225,7 +1217,16 @@ var CPViewHighDPIDrawingEnabled = YES; { #if PLATFORM(DOM) var scale = [self scaleSize]; + CPDOMDisplayServerSetStyleSize(_DOMElement, aSize.width * 1 / scale.width, aSize.height * 1 / scale.height); + + if (_DOMContentsElement) + { + CPDOMDisplayServerSetSize(_DOMContentsElement, aSize.width * _highDPIRatio * 1 / scale.width, aSize.height * _highDPIRatio * 1 / scale.height); + CPDOMDisplayServerSetStyleSize(_DOMContentsElement, aSize.width * 1 / scale.width, aSize.height * 1 / scale.height); + + _needToSetTransformMatrix = YES; + } #endif } @@ -2584,8 +2585,10 @@ setBoundsOrigin: _needToSetTransformMatrix = YES; } +#if PLATFORM(DOM) if (_needToSetTransformMatrix) [_graphicsContext graphicsPort].setTransform(_highDPIRatio, 0, 0 , _highDPIRatio, 0, 0); +#endif _needToSetTransformMatrix = NO; [CPGraphicsContext setCurrentContext:_graphicsContext];