From 61bfa439cb41fb0199305a1595ae3c5a179f277c Mon Sep 17 00:00:00 2001 From: Matt Colman Date: Mon, 15 Feb 2016 12:12:05 +1100 Subject: [PATCH 01/11] add devicePixelRatio for retina screens --- src/easeljs/display/DOMElement.js | 25 ++++++++++++++++++++++--- 1 file changed, 22 insertions(+), 3 deletions(-) diff --git a/src/easeljs/display/DOMElement.js b/src/easeljs/display/DOMElement.js index f6eab31e7..b921745bc 100644 --- a/src/easeljs/display/DOMElement.js +++ b/src/easeljs/display/DOMElement.js @@ -36,6 +36,24 @@ this.createjs = this.createjs||{}; (function() { "use strict"; + // @todo - Move into separate file. + function BrowserDetect() { + throw "BrowserDetect cannot be instantiated."; + } + + // Returns 2 on a retina macbook pro for example. + BrowserDetect.getDevicePixelRatio = function() { + var ratio = 1; + // To account for zoom, change to use deviceXDPI instead of systemXDPI + if (window.screen.systemXDPI != null && window.screen.logicalXDPI != null && window.screen.systemXDPI > window.screen.logicalXDPI) { + // Only allow for values > 1 + ratio = window.screen.systemXDPI / window.screen.logicalXDPI; + } else if (window.devicePixelRatio != null) { + ratio = window.devicePixelRatio; + } + return ratio; + } + // constructor: /** @@ -97,6 +115,7 @@ this.createjs = this.createjs||{}; * @protected */ this._oldProps = null; + this._devicePixelRatio = BrowserDetect.getDevicePixelRatio(); } var p = createjs.extend(DOMElement, createjs.DisplayObject); @@ -255,9 +274,9 @@ this.createjs = this.createjs||{}; var n = 10000; // precision if (!oldMtx || !oldMtx.equals(mtx)) { - var str = "matrix(" + (mtx.a*n|0)/n +","+ (mtx.b*n|0)/n +","+ (mtx.c*n|0)/n +","+ (mtx.d*n|0)/n +","+ (mtx.tx+0.5|0); - style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +","+ (mtx.ty+0.5|0) +")"; - style.MozTransform = str +"px,"+ (mtx.ty+0.5|0) +"px)"; + var str = "matrix(" + (mtx.a*n|0)/n/this._devicePixelRatio +","+ (mtx.b*n|0)/n +","+ (mtx.c*n|0)/n +","+ (mtx.d*n|0)/n/this._devicePixelRatio +","+ (mtx.tx+0.5|0)/this._devicePixelRatio; + style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +","+ (mtx.ty+0.5|0)/this._devicePixelRatio +")"; + style.MozTransform = str +"px,"+ (mtx.ty+0.5|0)/this._devicePixelRatio +"px)"; if (!oldProps) { oldProps = this._oldProps = new createjs.DisplayProps(true, NaN); } oldProps.matrix.copy(mtx); } From 236dde3ac8ae75130a603c858c237cfb47a57195 Mon Sep 17 00:00:00 2001 From: Matt Colman Date: Sat, 11 Mar 2017 17:33:42 +1100 Subject: [PATCH 02/11] add getDevicePixelRatio to DOMElement prototype and remove BrowserDetect class --- src/easeljs/display/DOMElement.js | 58 ++++++++++++++----------------- 1 file changed, 26 insertions(+), 32 deletions(-) diff --git a/src/easeljs/display/DOMElement.js b/src/easeljs/display/DOMElement.js index b921745bc..bc9b74dba 100644 --- a/src/easeljs/display/DOMElement.js +++ b/src/easeljs/display/DOMElement.js @@ -36,25 +36,6 @@ this.createjs = this.createjs||{}; (function() { "use strict"; - // @todo - Move into separate file. - function BrowserDetect() { - throw "BrowserDetect cannot be instantiated."; - } - - // Returns 2 on a retina macbook pro for example. - BrowserDetect.getDevicePixelRatio = function() { - var ratio = 1; - // To account for zoom, change to use deviceXDPI instead of systemXDPI - if (window.screen.systemXDPI != null && window.screen.logicalXDPI != null && window.screen.systemXDPI > window.screen.logicalXDPI) { - // Only allow for values > 1 - ratio = window.screen.systemXDPI / window.screen.logicalXDPI; - } else if (window.devicePixelRatio != null) { - ratio = window.devicePixelRatio; - } - return ratio; - } - - // constructor: /** * This class is still experimental, and more advanced use is likely to be buggy. Please report bugs. @@ -90,15 +71,15 @@ this.createjs = this.createjs||{}; */ function DOMElement(htmlElement) { this.DisplayObject_constructor(); - + if (typeof(htmlElement)=="string") { htmlElement = document.getElementById(htmlElement); } this.mouseEnabled = false; - + var style = htmlElement.style; style.position = "absolute"; style.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = "0% 0%"; - - + + // public properties: /** * The DOM object to manage. @@ -106,8 +87,8 @@ this.createjs = this.createjs||{}; * @type HTMLElement */ this.htmlElement = htmlElement; - - + + // private properties: /** * @property _oldMtx @@ -115,7 +96,7 @@ this.createjs = this.createjs||{}; * @protected */ this._oldProps = null; - this._devicePixelRatio = BrowserDetect.getDevicePixelRatio(); + this._devicePixelRatio = this._getDevicePixelRatio(); } var p = createjs.extend(DOMElement, createjs.DisplayObject); @@ -253,7 +234,7 @@ this.createjs = this.createjs||{}; stage&&stage.on("drawend", this._handleDrawEnd, this, true); this.DisplayObject__tick(evtObj); }; - + /** * @method _handleDrawEnd * @param {Event} evt @@ -263,16 +244,16 @@ this.createjs = this.createjs||{}; var o = this.htmlElement; if (!o) { return; } var style = o.style; - + var props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix; - + var visibility = props.visible ? "visible" : "hidden"; if (visibility != style.visibility) { style.visibility = visibility; } if (!props.visible) { return; } - + var oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix; var n = 10000; // precision - + if (!oldMtx || !oldMtx.equals(mtx)) { var str = "matrix(" + (mtx.a*n|0)/n/this._devicePixelRatio +","+ (mtx.b*n|0)/n +","+ (mtx.c*n|0)/n +","+ (mtx.d*n|0)/n/this._devicePixelRatio +","+ (mtx.tx+0.5|0)/this._devicePixelRatio; style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +","+ (mtx.ty+0.5|0)/this._devicePixelRatio +")"; @@ -280,13 +261,26 @@ this.createjs = this.createjs||{}; if (!oldProps) { oldProps = this._oldProps = new createjs.DisplayProps(true, NaN); } oldProps.matrix.copy(mtx); } - + if (oldProps.alpha != props.alpha) { style.opacity = ""+(props.alpha*n|0)/n; oldProps.alpha = props.alpha; } }; + p._getDevicePixelRatio = function() { + var ratio = 1; + // To account for zoom, change to use deviceXDPI instead of systemXDPI + if (window.screen.systemXDPI != null && + window.screen.logicalXDPI != null && + window.screen.systemXDPI > window.screen.logicalXDPI) { + // Only allow for values > 1 + ratio = window.screen.systemXDPI / window.screen.logicalXDPI; + } else if (window.devicePixelRatio != null) { + ratio = window.devicePixelRatio; + } + return ratio; + }; createjs.DOMElement = createjs.promote(DOMElement, "DisplayObject"); }()); From ea4096ae1e0b4ed7a3c74bfced8ef1bf527a55f3 Mon Sep 17 00:00:00 2001 From: Matt Colman Date: Sat, 11 Mar 2017 17:47:55 +1100 Subject: [PATCH 03/11] formatting and docs --- src/easeljs/display/DOMElement.js | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/easeljs/display/DOMElement.js b/src/easeljs/display/DOMElement.js index bc9b74dba..c8d877b68 100644 --- a/src/easeljs/display/DOMElement.js +++ b/src/easeljs/display/DOMElement.js @@ -36,6 +36,7 @@ this.createjs = this.createjs||{}; (function() { "use strict"; + // constructor: /** * This class is still experimental, and more advanced use is likely to be buggy. Please report bugs. @@ -71,15 +72,15 @@ this.createjs = this.createjs||{}; */ function DOMElement(htmlElement) { this.DisplayObject_constructor(); - + if (typeof(htmlElement)=="string") { htmlElement = document.getElementById(htmlElement); } this.mouseEnabled = false; - + var style = htmlElement.style; style.position = "absolute"; style.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = "0% 0%"; - - + + // public properties: /** * The DOM object to manage. @@ -87,8 +88,8 @@ this.createjs = this.createjs||{}; * @type HTMLElement */ this.htmlElement = htmlElement; - - + + // private properties: /** * @property _oldMtx @@ -244,16 +245,16 @@ this.createjs = this.createjs||{}; var o = this.htmlElement; if (!o) { return; } var style = o.style; - + var props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix; - + var visibility = props.visible ? "visible" : "hidden"; if (visibility != style.visibility) { style.visibility = visibility; } if (!props.visible) { return; } - + var oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix; var n = 10000; // precision - + if (!oldMtx || !oldMtx.equals(mtx)) { var str = "matrix(" + (mtx.a*n|0)/n/this._devicePixelRatio +","+ (mtx.b*n|0)/n +","+ (mtx.c*n|0)/n +","+ (mtx.d*n|0)/n/this._devicePixelRatio +","+ (mtx.tx+0.5|0)/this._devicePixelRatio; style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +","+ (mtx.ty+0.5|0)/this._devicePixelRatio +")"; @@ -261,13 +262,17 @@ this.createjs = this.createjs||{}; if (!oldProps) { oldProps = this._oldProps = new createjs.DisplayProps(true, NaN); } oldProps.matrix.copy(mtx); } - + if (oldProps.alpha != props.alpha) { style.opacity = ""+(props.alpha*n|0)/n; oldProps.alpha = props.alpha; } }; + /** + * @method _getDevicePixelRatio + * @protected + */ p._getDevicePixelRatio = function() { var ratio = 1; // To account for zoom, change to use deviceXDPI instead of systemXDPI From 8d5da41541907a32c9b1af94ba51a81708792df0 Mon Sep 17 00:00:00 2001 From: Matt Colman Date: Sat, 11 Mar 2017 17:54:30 +1100 Subject: [PATCH 04/11] formatting --- src/easeljs/display/DOMElement.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/easeljs/display/DOMElement.js b/src/easeljs/display/DOMElement.js index c8d877b68..6f11d1860 100644 --- a/src/easeljs/display/DOMElement.js +++ b/src/easeljs/display/DOMElement.js @@ -72,15 +72,15 @@ this.createjs = this.createjs||{}; */ function DOMElement(htmlElement) { this.DisplayObject_constructor(); - + if (typeof(htmlElement)=="string") { htmlElement = document.getElementById(htmlElement); } this.mouseEnabled = false; - + var style = htmlElement.style; style.position = "absolute"; style.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = "0% 0%"; - - + + // public properties: /** * The DOM object to manage. @@ -88,8 +88,8 @@ this.createjs = this.createjs||{}; * @type HTMLElement */ this.htmlElement = htmlElement; - - + + // private properties: /** * @property _oldMtx @@ -245,16 +245,16 @@ this.createjs = this.createjs||{}; var o = this.htmlElement; if (!o) { return; } var style = o.style; - + var props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix; - + var visibility = props.visible ? "visible" : "hidden"; if (visibility != style.visibility) { style.visibility = visibility; } if (!props.visible) { return; } - + var oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix; var n = 10000; // precision - + if (!oldMtx || !oldMtx.equals(mtx)) { var str = "matrix(" + (mtx.a*n|0)/n/this._devicePixelRatio +","+ (mtx.b*n|0)/n +","+ (mtx.c*n|0)/n +","+ (mtx.d*n|0)/n/this._devicePixelRatio +","+ (mtx.tx+0.5|0)/this._devicePixelRatio; style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +","+ (mtx.ty+0.5|0)/this._devicePixelRatio +")"; @@ -262,7 +262,7 @@ this.createjs = this.createjs||{}; if (!oldProps) { oldProps = this._oldProps = new createjs.DisplayProps(true, NaN); } oldProps.matrix.copy(mtx); } - + if (oldProps.alpha != props.alpha) { style.opacity = ""+(props.alpha*n|0)/n; oldProps.alpha = props.alpha; From 8b1425b8b1b7fa76ce4de7bb4a8d8e59a6307ead Mon Sep 17 00:00:00 2001 From: Matt Colman Date: Sat, 11 Mar 2017 17:55:47 +1100 Subject: [PATCH 05/11] formatting --- src/easeljs/display/DOMElement.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/easeljs/display/DOMElement.js b/src/easeljs/display/DOMElement.js index 6f11d1860..9ce184325 100644 --- a/src/easeljs/display/DOMElement.js +++ b/src/easeljs/display/DOMElement.js @@ -72,10 +72,10 @@ this.createjs = this.createjs||{}; */ function DOMElement(htmlElement) { this.DisplayObject_constructor(); - + if (typeof(htmlElement)=="string") { htmlElement = document.getElementById(htmlElement); } this.mouseEnabled = false; - + var style = htmlElement.style; style.position = "absolute"; style.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = "0% 0%"; From e823fd9d1fcd32eec2bf1c31ff6ad3a591b16e06 Mon Sep 17 00:00:00 2001 From: Matt Colman Date: Sat, 11 Mar 2017 17:56:38 +1100 Subject: [PATCH 06/11] formatting --- src/easeljs/display/DOMElement.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/easeljs/display/DOMElement.js b/src/easeljs/display/DOMElement.js index 9ce184325..352711295 100644 --- a/src/easeljs/display/DOMElement.js +++ b/src/easeljs/display/DOMElement.js @@ -72,7 +72,7 @@ this.createjs = this.createjs||{}; */ function DOMElement(htmlElement) { this.DisplayObject_constructor(); - + if (typeof(htmlElement)=="string") { htmlElement = document.getElementById(htmlElement); } this.mouseEnabled = false; From 88f6f2c2f5040e38480b1eb3720b4810db493e95 Mon Sep 17 00:00:00 2001 From: Matt Colman Date: Sat, 11 Mar 2017 17:58:58 +1100 Subject: [PATCH 07/11] formatting --- src/easeljs/display/DOMElement.js | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/easeljs/display/DOMElement.js b/src/easeljs/display/DOMElement.js index 352711295..d950e3b24 100644 --- a/src/easeljs/display/DOMElement.js +++ b/src/easeljs/display/DOMElement.js @@ -72,15 +72,15 @@ this.createjs = this.createjs||{}; */ function DOMElement(htmlElement) { this.DisplayObject_constructor(); - + if (typeof(htmlElement)=="string") { htmlElement = document.getElementById(htmlElement); } this.mouseEnabled = false; - + var style = htmlElement.style; style.position = "absolute"; style.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = "0% 0%"; - - + + // public properties: /** * The DOM object to manage. @@ -88,8 +88,8 @@ this.createjs = this.createjs||{}; * @type HTMLElement */ this.htmlElement = htmlElement; - - + + // private properties: /** * @property _oldMtx @@ -245,16 +245,16 @@ this.createjs = this.createjs||{}; var o = this.htmlElement; if (!o) { return; } var style = o.style; - + var props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix; - + var visibility = props.visible ? "visible" : "hidden"; if (visibility != style.visibility) { style.visibility = visibility; } if (!props.visible) { return; } - + var oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix; var n = 10000; // precision - + if (!oldMtx || !oldMtx.equals(mtx)) { var str = "matrix(" + (mtx.a*n|0)/n/this._devicePixelRatio +","+ (mtx.b*n|0)/n +","+ (mtx.c*n|0)/n +","+ (mtx.d*n|0)/n/this._devicePixelRatio +","+ (mtx.tx+0.5|0)/this._devicePixelRatio; style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +","+ (mtx.ty+0.5|0)/this._devicePixelRatio +")"; @@ -262,7 +262,7 @@ this.createjs = this.createjs||{}; if (!oldProps) { oldProps = this._oldProps = new createjs.DisplayProps(true, NaN); } oldProps.matrix.copy(mtx); } - + if (oldProps.alpha != props.alpha) { style.opacity = ""+(props.alpha*n|0)/n; oldProps.alpha = props.alpha; From d6a11b003706476cc4cc26dd51dc660ab4dcb935 Mon Sep 17 00:00:00 2001 From: Matt Colman Date: Sat, 11 Mar 2017 18:02:54 +1100 Subject: [PATCH 08/11] formatting --- src/easeljs/display/DOMElement.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/easeljs/display/DOMElement.js b/src/easeljs/display/DOMElement.js index d950e3b24..e80200383 100644 --- a/src/easeljs/display/DOMElement.js +++ b/src/easeljs/display/DOMElement.js @@ -72,15 +72,15 @@ this.createjs = this.createjs||{}; */ function DOMElement(htmlElement) { this.DisplayObject_constructor(); - + if (typeof(htmlElement)=="string") { htmlElement = document.getElementById(htmlElement); } this.mouseEnabled = false; - + var style = htmlElement.style; style.position = "absolute"; style.transformOrigin = style.WebkitTransformOrigin = style.msTransformOrigin = style.MozTransformOrigin = style.OTransformOrigin = "0% 0%"; - - + + // public properties: /** * The DOM object to manage. @@ -235,7 +235,7 @@ this.createjs = this.createjs||{}; stage&&stage.on("drawend", this._handleDrawEnd, this, true); this.DisplayObject__tick(evtObj); }; - + /** * @method _handleDrawEnd * @param {Event} evt @@ -245,13 +245,13 @@ this.createjs = this.createjs||{}; var o = this.htmlElement; if (!o) { return; } var style = o.style; - + var props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix; - + var visibility = props.visible ? "visible" : "hidden"; if (visibility != style.visibility) { style.visibility = visibility; } if (!props.visible) { return; } - + var oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix; var n = 10000; // precision From 65132ee5af3f33964cca14ff6a2e3d7332152648 Mon Sep 17 00:00:00 2001 From: Matt Colman Date: Sat, 11 Mar 2017 18:03:34 +1100 Subject: [PATCH 09/11] formatting --- src/easeljs/display/DOMElement.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/easeljs/display/DOMElement.js b/src/easeljs/display/DOMElement.js index e80200383..91da35a99 100644 --- a/src/easeljs/display/DOMElement.js +++ b/src/easeljs/display/DOMElement.js @@ -88,8 +88,8 @@ this.createjs = this.createjs||{}; * @type HTMLElement */ this.htmlElement = htmlElement; - - + + // private properties: /** * @property _oldMtx From a7d440bf960c2e7b8d57bc8dba859f4b4f94fb2b Mon Sep 17 00:00:00 2001 From: Matt Colman Date: Sat, 11 Mar 2017 18:06:15 +1100 Subject: [PATCH 10/11] formatting --- src/easeljs/display/DOMElement.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/easeljs/display/DOMElement.js b/src/easeljs/display/DOMElement.js index 91da35a99..7b7137fbe 100644 --- a/src/easeljs/display/DOMElement.js +++ b/src/easeljs/display/DOMElement.js @@ -88,8 +88,8 @@ this.createjs = this.createjs||{}; * @type HTMLElement */ this.htmlElement = htmlElement; - - + + // private properties: /** * @property _oldMtx From 6ed2793e6f5b1b2b90500c31beabbe44ce29b56e Mon Sep 17 00:00:00 2001 From: Matt Colman Date: Sat, 11 Mar 2017 18:08:13 +1100 Subject: [PATCH 11/11] formatting --- src/easeljs/display/DOMElement.js | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) diff --git a/src/easeljs/display/DOMElement.js b/src/easeljs/display/DOMElement.js index 7b7137fbe..7ec946c83 100644 --- a/src/easeljs/display/DOMElement.js +++ b/src/easeljs/display/DOMElement.js @@ -275,16 +275,14 @@ this.createjs = this.createjs||{}; */ p._getDevicePixelRatio = function() { var ratio = 1; - // To account for zoom, change to use deviceXDPI instead of systemXDPI - if (window.screen.systemXDPI != null && - window.screen.logicalXDPI != null && - window.screen.systemXDPI > window.screen.logicalXDPI) { - // Only allow for values > 1 - ratio = window.screen.systemXDPI / window.screen.logicalXDPI; - } else if (window.devicePixelRatio != null) { - ratio = window.devicePixelRatio; - } - return ratio; + // To account for zoom, change to use deviceXDPI instead of systemXDPI + if (window.screen.systemXDPI != null && window.screen.logicalXDPI != null && window.screen.systemXDPI > window.screen.logicalXDPI) { + // Only allow for values > 1 + ratio = window.screen.systemXDPI / window.screen.logicalXDPI; + } else if (window.devicePixelRatio != null) { + ratio = window.devicePixelRatio; + } + return ratio; }; createjs.DOMElement = createjs.promote(DOMElement, "DisplayObject");