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/elements/element-controller.js | 10 ++++---- js/controllers/elements/stage-controller.js | 20 +++++++++++++-- js/controllers/styles-controller.js | 35 +++++++++++++++------------ 3 files changed, 42 insertions(+), 23 deletions(-) (limited to 'js/controllers') diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index fda3a3c5..7ab6664f 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -249,10 +249,6 @@ exports.ElementController = Montage.create(Component, { else { var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false); - if(dist == null) { - dist = 1400; - } - el.elementModel.props3D.perspectiveDist = dist; return dist; } @@ -266,9 +262,13 @@ exports.ElementController = Montage.create(Component, { mat = props[index]["mat"]; this.application.ninja.stylesController.setElementStyle(el, "-webkit-transform", - "perspective(" + dist + ") " + "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")"); + // TODO - We don't support perspective on individual elements yet +// this.application.ninja.stylesController.setElementStyle(el, +// "-webkit-perspective", +// dist); + el.elementModel.props3D.matrix3d = mat; el.elementModel.props3D.perspectiveDist = dist; diff --git a/js/controllers/elements/stage-controller.js b/js/controllers/elements/stage-controller.js index dc916b1a..f376e40f 100755 --- a/js/controllers/elements/stage-controller.js +++ b/js/controllers/elements/stage-controller.js @@ -90,7 +90,7 @@ exports.StageController = Montage.create(ElementController, { return el.elementModel.stageView.style.getProperty(p); } default: - return ElementController.getProperty(el, p, false, true); + return ElementController.getProperty(el, p, true, true); //console.log("Undefined Stage property ", p); } } @@ -119,6 +119,7 @@ exports.StageController = Montage.create(ElementController, { break; case "-webkit-transform-style": el.elementModel.stageView.style.setProperty(p, value); + this.application.ninja.stage.updatedStage = true; break; default: console.log("Undefined property ", p, "for the Stage Controller"); @@ -178,5 +179,20 @@ exports.StageController = Montage.create(ElementController, { return mat; } } - } + }, + + getPerspectiveDist: { + value: function(el) { + if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.perspectiveDist) + { + return el.elementModel.props3D.perspectiveDist; + } + else + { + var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, true); + el.elementModel.props3D.perspectiveDist = dist; + return dist; + } + } + }, }); 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 From 3bbf32b285405562471fa594c283e271d347734e Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Thu, 12 Apr 2012 10:52:32 -0700 Subject: Borders are not factored into offset calculations by the browser, so we have to adjust for them. Also, we should set webkit-transform-style to preserve-3d if elements are rotated (until we also support flattened mode). Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js/controllers') diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 7ab6664f..2ac84452 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -264,6 +264,10 @@ exports.ElementController = Montage.create(Component, { "-webkit-transform", "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")"); + this.application.ninja.stylesController.setElementStyle(el, + "-webkit-transform-style", + "preserve-3d"); + // TODO - We don't support perspective on individual elements yet // this.application.ninja.stylesController.setElementStyle(el, // "-webkit-perspective", -- cgit v1.2.3