From 52fac825174d16e3ff6875fc497d3f3cfaf4812c Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 21 Mar 2012 12:02:36 -0700 Subject: Get matrix and perspective distance from styles controller. Signed-off-by: Nivesh Rajbhandari --- js/controllers/styles-controller.js | 66 ++++++++++++++++++++++++++++++++++++- 1 file changed, 65 insertions(+), 1 deletion(-) (limited to 'js/controllers/styles-controller.js') diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index addfc24e..5d5f27ba 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -836,7 +836,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { ///// For a given CSSKeyframesRule, we may add styles to the keyframe at ///// given index. - setKeyframeStyle : { + setKeyframeStyles : { value : function(rule, keyframeIndex, property, value, useImportant) { return this.setStyles(rule.cssRules[keyframeIndex], property, value, useImportant); } @@ -1124,6 +1124,70 @@ var stylesController = exports.StylesController = Montage.create(Component, { } }, + ///// Get Matrix From Element + ///// Returns the matrix from an element's -webkit-transform + //// TODO - This routine should eventually check for other transform styles, i.e., rotateX, translateZ, etc. + + getMatrixFromElement : { + value: function(element, isStage) { + var xformStr = this.getElementStyle(element, "-webkit-transform", false, isStage), + mat; + + if (xformStr) { + var index1 = xformStr.indexOf( "matrix3d("); + if (index1 >= 0) { + index1 += 9; // do not include 'matrix3d(' + var index2 = xformStr.indexOf( ")", index1 ); + if (index2 >= 0) { + var substr = xformStr.substr( index1, (index2-index1)); + if (substr && (substr.length > 0)) { + var numArray = substr.split(','); + var nNums = numArray.length; + if (nNums == 16) { + // gl-matrix wants row order + mat = numArray; + for (var i=0; i<16; i++) { + mat[i] = Number( mat[i] ); + } + } + } + } + } + } + return mat; + } + }, + + ///// Get Perspective Distance From Element + ///// Returns the perspective from an element's -webkit-transform + + getPerspectiveDistFromElement : { + value: function(element, isStage) { + var xformStr = this.getElementStyle(element, "-webkit-transform", false, isStage), + dist; + + if (xformStr) { + var index1 = xformStr.indexOf( "perspective("); + if (index1 >= 0) { + index1 += 12; // do not include 'perspective(' + var index2 = xformStr.indexOf( ")", index1 ); + if (index2 >= 0) { + var substr = xformStr.substr( index1, (index2-index1)); + if (substr && (substr.length > 0)) { + dist = parseInt( substr ); + } + } + } + } else { + xformStr = this.getElementStyle(element, "-webkit-perspective", false, isStage); + if(xformStr) { + dist = parseInt(xformStr); + } + } + return dist; + } + }, + ///// Create Rule From Inline Style ///// Creates a rule for an inline style with a specified, or partially random selector. -- cgit v1.2.3 From 952e0b2c28af081041fa8987c3e865b931d052fa Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Mon, 9 Apr 2012 16:04:24 -0700 Subject: Single perspective fix. Note that rotating multiple objects when the stage is rotated still doesn't work and flatten still doesn't work. Signed-off-by: Nivesh Rajbhandari --- js/controllers/styles-controller.js | 35 +++++++++++++++++++---------------- 1 file changed, 19 insertions(+), 16 deletions(-) (limited to 'js/controllers/styles-controller.js') diff --git a/js/controllers/styles-controller.js b/js/controllers/styles-controller.js index 5d5f27ba..ec4314f9 100755 --- a/js/controllers/styles-controller.js +++ b/js/controllers/styles-controller.js @@ -1130,7 +1130,7 @@ var stylesController = exports.StylesController = Montage.create(Component, { getMatrixFromElement : { value: function(element, isStage) { - var xformStr = this.getElementStyle(element, "-webkit-transform", false, isStage), + var xformStr = this.getElementStyle(element, "-webkit-transform", true, isStage), mat; if (xformStr) { @@ -1163,26 +1163,29 @@ var stylesController = exports.StylesController = Montage.create(Component, { getPerspectiveDistFromElement : { value: function(element, isStage) { - var xformStr = this.getElementStyle(element, "-webkit-transform", false, isStage), + var xformStr = this.getElementStyle(element, "-webkit-perspective", false, isStage), dist; - if (xformStr) { - var index1 = xformStr.indexOf( "perspective("); - if (index1 >= 0) { - index1 += 12; // do not include 'perspective(' - var index2 = xformStr.indexOf( ")", index1 ); - if (index2 >= 0) { - var substr = xformStr.substr( index1, (index2-index1)); - if (substr && (substr.length > 0)) { - dist = parseInt( substr ); + if(xformStr) { + dist = parseInt(xformStr); + } else { + xformStr = this.getElementStyle(element, "-webkit-transform", true, isStage); + if (xformStr) { + var index1 = xformStr.indexOf( "perspective("); + if (index1 >= 0) { + index1 += 12; // do not include 'perspective(' + var index2 = xformStr.indexOf( ")", index1 ); + if (index2 >= 0) { + var substr = xformStr.substr( index1, (index2-index1)); + if (substr && (substr.length > 0)) { + dist = parseInt( substr ); + } } } } - } else { - xformStr = this.getElementStyle(element, "-webkit-perspective", false, isStage); - if(xformStr) { - dist = parseInt(xformStr); - } + } + if(isNaN(dist)) { + dist = null; } return dist; } -- cgit v1.2.3