From 3987b73569e58843f2a91c0c6c4e4132f51ac247 Mon Sep 17 00:00:00 2001 From: Nivesh Rajbhandari Date: Wed, 21 Mar 2012 17:13:56 -0700 Subject: Do not set webkit-transform styles on elements unless 3d is used on them. Signed-off-by: Nivesh Rajbhandari --- js/controllers/elements/element-controller.js | 2 +- js/lib/NJUtils.js | 5 ++- js/mediators/element-mediator.js | 9 +++-- js/tools/SelectionTool.js | 47 +++++++++++++++------------ js/tools/TagTool.js | 15 ++++----- js/tools/drawing-tool-base.js | 2 +- 6 files changed, 45 insertions(+), 35 deletions(-) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 4f360bb9..9cba6d94 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -244,7 +244,7 @@ var ElementController = exports.ElementController = Montage.create(NJComponent, else { var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false); - if(dist === null) { + if(dist == null) { dist = 1400; } diff --git a/js/lib/NJUtils.js b/js/lib/NJUtils.js index f611052b..cb877591 100755 --- a/js/lib/NJUtils.js +++ b/js/lib/NJUtils.js @@ -94,7 +94,10 @@ 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, (selection === "Stage")); + var p3d = Montage.create(Properties3D); + if(selection === "Stage") { + p3d.init(el, true); + } var shapeProps = null; if(isShape) { shapeProps = Montage.create(ShapeModel); diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index d62fa1f8..eac0ca54 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -90,9 +90,12 @@ exports.ElementMediator = Montage.create(NJComponent, { _addElement: { value: function(el, rules, noEvent) { ElementController.addElement(el, rules); - var p3d = this.get3DProperties(el); - if(p3d) { - el.elementModel.controller["set3DProperties"](el, [p3d], 0, true); +// var p3d = this.get3DProperties(el); +// if(p3d) { +// el.elementModel.controller["set3DProperties"](el, [p3d], 0, true); +// } + if(el.elementModel && el.elementModel.props3D) { + el.elementModel.props3D.init(el, false); } if(!noEvent) { this.application.ninja.documentController.activeDocument.needsSave = true; diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index f9411f48..e252e36b 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -318,18 +318,28 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { this._targets.push({elt:elt, mat:curMat, matInv:curMatInv}); if(addToUndoStack) { + var prevX, + prevY, + prevW, + prevH, + _x, + _y, + _w, + _h, + previousMat, + previousStyleStr, + newStyleStr; if(!this._use3DMode) { - var previousMat = this._undoArray[i].mat.slice(0); - var prevX = this._undoArray[i]._x; - var prevY = this._undoArray[i]._y; - var prevW = this._undoArray[i]._w; - var prevH = this._undoArray[i]._h; - var _x = parseInt(ElementsMediator.getProperty(elt, "left")) + curMat[12] - previousMat[12]; - var _y = parseInt(ElementsMediator.getProperty(elt, "top")) + curMat[13] - previousMat[13]; - var _w = parseInt(ElementsMediator.getProperty(elt, "width")); - var _h = parseInt(ElementsMediator.getProperty(elt, "height")); + prevX = this._undoArray[i]._x; + prevY = this._undoArray[i]._y; + prevW = this._undoArray[i]._w; + prevH = this._undoArray[i]._h; + _x = parseInt(ElementsMediator.getProperty(elt, "left")); + _y = parseInt(ElementsMediator.getProperty(elt, "top")); + _w = parseInt(ElementsMediator.getProperty(elt, "width")); + _h = parseInt(ElementsMediator.getProperty(elt, "height")); previousLeft.push(prevX + "px"); previousTop.push(prevY + "px"); @@ -339,27 +349,22 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { newTop.push(_y + "px"); newWidth.push(_w + "px"); newHeight.push(_h + "px"); - - viewUtils.setMatrixForElement(elt, previousMat); - - this._targets[i].mat = previousMat; - this._targets[i].matInv = glmat4.inverse(previousMat, []); } else { - var previousMat = this._undoArray[i].mat.slice(0); - var prevW = this._undoArray[i]._w; - var prevH = this._undoArray[i]._h; - var _w = parseInt(ElementsMediator.getProperty(elt, "width")); - var _h = parseInt(ElementsMediator.getProperty(elt, "height")); + previousMat = this._undoArray[i].mat.slice(0); + prevW = this._undoArray[i]._w; + prevH = this._undoArray[i]._h; + _w = parseInt(ElementsMediator.getProperty(elt, "width")); + _h = parseInt(ElementsMediator.getProperty(elt, "height")); previousWidth.push(prevW + "px"); previousHeight.push(prevH + "px"); newWidth.push(_w + "px"); newHeight.push(_h + "px"); - var previousStyleStr = {dist:this._undoArray[i].dist, + previousStyleStr = {dist:this._undoArray[i].dist, mat:MathUtils.scientificToDecimal(previousMat, 5)}; - var newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt), + newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt), mat:MathUtils.scientificToDecimal(curMat, 5)}; previousStyles.push(previousStyleStr); newStyles.push(newStyleStr); diff --git a/js/tools/TagTool.js b/js/tools/TagTool.js index e3f49bbe..6df49a7b 100755 --- a/js/tools/TagTool.js +++ b/js/tools/TagTool.js @@ -222,21 +222,20 @@ exports.TagTool = Montage.create(DrawingTool, { makeElement: { value: function(w, h, planeMat, midPt,tag) { - var styles; - var left = Math.round(midPt[0] - 0.5 * w); var top = Math.round(midPt[1] - 0.5 * h); - var matStr = DrawingToolBase.getElementMatrix(planeMat, midPt); - - styles = { + var styles = { 'position': 'absolute', 'top' : top + 'px', - 'left' : left + 'px', - '-webkit-transform-style' : 'preserve-3d', - '-webkit-transform' : matStr + 'left' : left + 'px' }; + if(!MathUtils.isIdentityMatrix(planeMat)) { + styles['-webkit-transform-style'] = 'preserve-3d'; + styles['-webkit-transform'] = DrawingToolBase.getElementMatrix(planeMat, midPt); + } + // TODO - for canvas, set both as style and attribute. // Otherwise, we need to create a separate controller for canvas elements if(tag.tagName === "CANVAS") { diff --git a/js/tools/drawing-tool-base.js b/js/tools/drawing-tool-base.js index 8d87605c..84602186 100755 --- a/js/tools/drawing-tool-base.js +++ b/js/tools/drawing-tool-base.js @@ -442,7 +442,7 @@ exports.DrawingToolBase = Montage.create(Montage, { flatMat = divMat; flatMatSafe = MathUtils.scientificToDecimal(flatMat, 10); - return "perspective(" + 1400 + ") matrix3d( " + flatMatSafe + ")"; + return "perspective(" + 1400 + ") matrix3d(" + flatMatSafe + ")"; } }, -- cgit v1.2.3