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/elements/element-controller.js | 59 +++--------------------- js/controllers/elements/stage-controller.js | 7 ++- js/controllers/styles-controller.js | 66 ++++++++++++++++++++++++++- js/helper-classes/3D/view-utils.js | 48 ------------------- js/lib/NJUtils.js | 2 +- js/models/properties-3d.js | 50 ++++++++++---------- 6 files changed, 100 insertions(+), 132 deletions(-) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index b35251ad..4f360bb9 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -223,11 +223,10 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, if (el) { - var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform"); - if (xformStr) - mat = this.transformStringToMat( xformStr ); - if (!mat) + mat = this.application.ninja.stylesController.getMatrixFromElement(el, false); + if (!mat) { mat = Matrix.I(4); + } } el.elementModel.props3D.matrix3d = mat; @@ -244,23 +243,9 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, } else { - var dist = 1400; - - var str = this.getProperty(el, "-webkit-transform"); - if (str) - { - var index1 = str.indexOf( "perspective("); - if (index1 >= 0) - { - index1 += 12; // do not include 'perspective(' - var index2 = str.indexOf( ")", index1 ); - if (index2 >= 0) - { - var substr = str.substr( index1, (index2-index1)); - if (substr && (substr.length > 0)) - dist = MathUtils.styleToNumber( substr ); - } - } + var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false); + if(dist === null) { + dist = 1400; } el.elementModel.props3D.perspectiveDist = dist; @@ -303,36 +288,6 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, elt.elementModel.props3D.z3D = ~~(elt3DInfo.translation[2]); } } - }, - - transformStringToMat: { - value: function( str ) { - var rtnMat; - - var index1 = str.indexOf( "matrix3d("); - if (index1 >= 0) - { - index1 += 9; // do not include 'matrix3d(' - var index2 = str.indexOf( ")", index1 ); - if (index2 >= 0) - { - var substr = str.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 - rtnMat = numArray; - for (var i=0; i<16; i++) - rtnMat[i] = Number( rtnMat[i] ); - } - } - } - } - - return rtnMat; - } } + }); \ No newline at end of file diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js index 97ea3aa5..2734e226 100755 --- a/js/controllers/elements/stage-controller.js +++ b/js/controllers/elements/stage-controller.js @@ -143,11 +143,10 @@ exports.StageController = Montage.create(ElementController, { if (el) { - var xformStr = this.application.ninja.elementMediator.getProperty(el, "-webkit-transform"); - if (xformStr) - mat = this.transformStringToMat( xformStr ); - if (!mat) + mat = this.application.ninja.stylesController.getMatrixFromElement(el, true); + if (!mat) { mat = Matrix.I(4); + } var zoom = this.application.ninja.elementMediator.getProperty(el, "zoom"); if (zoom) 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. diff --git a/js/helper-classes/3D/view-utils.js b/js/helper-classes/3D/view-utils.js index 5a820fc2..41fb8d20 100755 --- a/js/helper-classes/3D/view-utils.js +++ b/js/helper-classes/3D/view-utils.js @@ -1099,54 +1099,6 @@ exports.ViewUtils = Montage.create(Component, { } }, - transformStringToMat: { - value: function( str ) { - var rtnMat; - - var index1 = str.indexOf( "matrix3d("); - if (index1 >= 0) - { - index1 += 9; // do not include 'matrix3d(' - var index2 = str.indexOf( ")", index1 ); - if (index2 >= 0) - { - var substr = str.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 - rtnMat = numArray; - for (var i=0; i<16; i++) - rtnMat[i] = Number( rtnMat[i] ); - - // the matrix as input is column major order. The Matrix - // class expects the numbers in row major order. - /* - var rowArray = new Array; - for (var i=0; i<4; i++) - { - rtnMat.push( numArray[i] ); - var row = new Array; - row.push( Number(numArray[i ]) ); - row.push( Number(numArray[i+ 4]) ); - row.push( Number(numArray[i+ 8]) ); - row.push( Number(numArray[i+12]) ); - rowArray.push( row ); - } - rtnMat = Matrix.create( rowArray ); - */ - } - } - } - } - - return rtnMat; - } - }, - pushViewportObj: { value: function( obj ) { this._viewportObjStack.push( this.m_viewportObj ); diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index 4f1082f9..f611052b 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js @@ -94,7 +94,7 @@ exports.NJUtils = Object.create(Object.prototype, { ///// TODO: find a different place for this function makeElementModel: { value: function(el, selection, controller, isShape) { - var p3d = Montage.create(Properties3D).init(el); + var p3d = Montage.create(Properties3D).init(el, (selection === "Stage")); var shapeProps = null; if(isShape) { shapeProps = Montage.create(ShapeModel); diff --git a/js/models/properties-3d.js b/js/models/properties-3d.js index 0f82dc48..087e794f 100755 --- a/js/models/properties-3d.js +++ b/js/models/properties-3d.js @@ -5,7 +5,8 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot */ var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component; + Component = require("montage/ui/component").Component, + NJUtils = require("js/lib/NJUtils").NJUtils; exports.Properties3D = Montage.create(Component, { @@ -39,16 +40,7 @@ exports.Properties3D = Montage.create(Component, { elementPlane : { value : null, enumerable: true}, init : { - value : function(elt) { - - this.m_azimuth = 0.0; - this.m_altitude = 0.0; - - this.m_endAzimuth = 0.0; - this.m_endAltitude = 0.0; - - this.m_transformCtr = null; - this.perspectiveDist = 1400; + value : function(elt, isStage) { // this.m_upVector = [0,1,0]; // this.m_viewDir = [0,0,1]; @@ -57,23 +49,29 @@ exports.Properties3D = Montage.create(Component, { // this.m_targetPos = [0,0,0]; // this.m_objStartPos = [0,0,0]; -// var mat = this.application.ninja.stage.stageDeps.viewUtils.getMatrixFromElement(elt).slice(0); -// var elt3DInfo = MathUtils.decomposeMatrix2(mat); -// if(elt3DInfo) -// { -// this.xAngle = ~~(elt3DInfo.rotation[0] * MathUtils.RAD_TO_DEG); -// this.yAngle = ~~(elt3DInfo.rotation[1] * MathUtils.RAD_TO_DEG); -// this.zAngle = ~~(elt3DInfo.rotation[2] * MathUtils.RAD_TO_DEG); -// -// this.x3D = ~~(elt3DInfo.translation[0]); -// this.y3D = ~~(elt3DInfo.translation[1]); -// this.z3D = ~~(elt3DInfo.translation[2]); -// -// this.matrix3d = mat; -// } + this.matrix3d = this.application.ninja.stylesController.getMatrixFromElement(elt, isStage); + this.perspectiveDist = this.application.ninja.stylesController.getPerspectiveDistFromElement(elt, isStage); - return this; + if(this.matrix3d) { + var elt3DInfo = MathUtils.decomposeMatrix2(this.matrix3d); + if(elt3DInfo) { + this.xAngle = ~~(elt3DInfo.rotation[0] * MathUtils.RAD_TO_DEG); + this.yAngle = ~~(elt3DInfo.rotation[1] * MathUtils.RAD_TO_DEG); + this.zAngle = ~~(elt3DInfo.rotation[2] * MathUtils.RAD_TO_DEG); + this.x3D = ~~(elt3DInfo.translation[0]); + this.y3D = ~~(elt3DInfo.translation[1]); + this.z3D = ~~(elt3DInfo.translation[2]); + } + } else { + this.matrix3d = Matrix.I(4); + } + + if(this.perspectiveDist === null) { + this.perspectiveDist = 1400; + } + + return this; } }, -- cgit v1.2.3