From f91e64235eb03c889ff4f5577c3e3480cd0d787f Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Fri, 13 Apr 2012 00:30:19 -0700 Subject: removing _undo array and _targets array and use object instead of matching arrays to set properties Signed-off-by: Valerio Virgillito --- js/controllers/elements/canvas-controller.js | 8 - js/controllers/elements/element-controller.js | 19 +- js/controllers/elements/stage-controller.js | 58 +++--- js/mediators/element-mediator.js | 94 ++++------ js/models/element-model.js | 36 +++- js/tools/Rotate3DToolBase.js | 184 +++++++------------ js/tools/RotateStage3DTool.js | 12 +- js/tools/SelectionTool.js | 254 +++++++++++--------------- js/tools/Translate3DToolBase.js | 158 ++++++---------- js/tools/TranslateObject3DTool.js | 17 +- js/tools/modifier-tool-base.js | 35 +--- 11 files changed, 345 insertions(+), 530 deletions(-) (limited to 'js') diff --git a/js/controllers/elements/canvas-controller.js b/js/controllers/elements/canvas-controller.js index b5df3911..7af7e824 100755 --- a/js/controllers/elements/canvas-controller.js +++ b/js/controllers/elements/canvas-controller.js @@ -33,13 +33,5 @@ exports.CanvasController = Montage.create(ElementController, { ElementController.setProperty(el, p, value); } } - }, - - setProperties: { - value: function(el, props, index) { - for(var p in props) { - el.elementModel.controller.setProperty(el, p, props[p][index]); - } - } } }); \ No newline at end of file diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index 0f17dd46..35a543ac 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -48,16 +48,6 @@ exports.ElementController = Montage.create(Component, { setProperties: { value: function(element, properties) { - /* Array of properties is not supported yet - if(Array.isArray(properties)) { - - elements.forEach(function(property) { - this.application.ninja.stylesController.setElementStyle(element, p, props[p][index]); - }); - } else { - } - */ - for(var property in properties) { this.application.ninja.stylesController.setElementStyle(element, property, properties[property]); } @@ -239,15 +229,16 @@ exports.ElementController = Montage.create(Component, { // TODO - perspective distance needs to be passed in as "dist" and matrix3d needs to be passed in as "mat" set3DProperties: { - value: function(el, props, index, update3DModel) { - var dist = props[index]["dist"], - mat = props[index]["mat"]; + value: function(el, props, update3DModel) { + var dist = props["dist"], + mat = props["mat"]; + this.application.ninja.stylesController.setElementStyle(el, "-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", dist); + // 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 f376e40f..3ef7dacc 100755 --- a/js/controllers/elements/stage-controller.js +++ b/js/controllers/elements/stage-controller.js @@ -31,46 +31,34 @@ exports.StageController = Montage.create(ElementController, { } }, + // TODO - perspective distance needs to be passed in as "dist" and matrix3d needs to be passed in as "mat" set3DProperties: { - value: function(el, props, index, update3DModel) { - var dist = props[index]["dist"], - mat = props[index]["mat"]; - this.application.ninja.stylesController.setElementStyle(el, - "-webkit-transform", - "perspective(" + dist + ") " + - "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")", - true); - - el.elementModel.props3D.matrix3d = mat; - el.elementModel.props3D.perspectiveDist = dist; - - // TODO - Move this to matrix class - if(this._isRotated(mat)) - { - this.application.ninja.currentDocument.stageBG.style.display = "none"; - } - else - { - this.application.ninja.stylesController.setElementStyle(this.application.ninja.currentDocument.stageBG, - "-webkit-transform", - "perspective(" + dist + ") " + - "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")", - true); - - this.application.ninja.currentDocument.stageBG.elementModel.props3D.matrix3d = mat; - this.application.ninja.currentDocument.stageBG.elementModel.props3D.perspectiveDist = dist; - this.application.ninja.currentDocument.stageBG.style.display = "block"; - } + value: function(el, props, update3DModel) { + var dist = props["dist"], mat = props["mat"]; + this.application.ninja.stylesController.setElementStyle(el, "-webkit-transform", "perspective(" + dist + ") " + "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")", true); + + el.elementModel.props3D.matrix3d = mat; + el.elementModel.props3D.perspectiveDist = dist; - this.application.ninja.stage.updatedStage = true; + // TODO - Move this to matrix class + if(this._isRotated(mat)) { + this.application.ninja.currentDocument.stageBG.style.display = "none"; + } else { + this.application.ninja.stylesController.setElementStyle(this.application.ninja.currentDocument.stageBG, "-webkit-transform", "perspective(" + dist + ") " + "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")", true); - if(update3DModel) - { - this._update3DProperties(el, mat, dist); + this.application.ninja.currentDocument.stageBG.elementModel.props3D.matrix3d = mat; + this.application.ninja.currentDocument.stageBG.elementModel.props3D.perspectiveDist = dist; + this.application.ninja.currentDocument.stageBG.style.display = "block"; + } + + this.application.ninja.stage.updatedStage = true; + + if(update3DModel) { + this._update3DProperties(el, mat, dist); + } } - } - }, + }, getProperty: { value: function(el, p) { diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 6ab33eff..a5f72462 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -234,8 +234,25 @@ exports.ElementMediator = Montage.create(Component, { @param eventType: Change/Changing. Will be passed to the dispatched event @param source: String for the source object making the call */ + /*value: function(elements, properties, currentProperties, eventType, source) {*/ setProperties: { - value: function(elements, properties, currentProperties, eventType, source) { + value: function(elements, eventType, source) { + + elements.forEach(function(elementObject) { + elementObject.element.elementModel.controller["setProperties"](elementObject.element, elementObject.properties); + }); + + if(eventType !== "Changing") { + var undoLabel = "Properties change"; + elements.forEach(function(elementObject) { + var swap = elementObject.properties; + elementObject.properties = elementObject.previousProperties; + elementObject.previousProperties = swap; + }); + document.application.undoManager.add(undoLabel, this.setProperties, this, elements, eventType, source); + } + + /* // Assume elements is an array of elements always elements.forEach(function(element) { element.elementModel.controller["setProperties"](element, properties); @@ -246,79 +263,34 @@ exports.ElementMediator = Montage.create(Component, { var undoLabel = "Properties change"; document.application.undoManager.add(undoLabel, this.setProperties, this, elements, currentProperties, properties, eventType, source); } + */ + // Map the elements for the event data + var els = elements.map(function(element) { + return element.element; + }); // Dispatch the element change/changing event. - NJevent("element" + eventType, {type : "setProperties", source: source, data: {"els": elements, "prop": properties, "value": properties}, redraw: null}); + NJevent("element" + eventType, {type : "setProperties", source: source, data: {"els": els, "prop": elements[0].properties, "value": elements}, redraw: null}); } }, - /** - Set a property change command for an element or array of elements - @param els: Array of elements. Can contain 1 or more elements - @param props: Property/ies object containing both the value and property - @param eventType: Change/Changing. Will be passed to the dispatched event - @param source: String for the source object making the call - @param currentProps *OPTIONAL*: current properties objects array. If not found it will be calculated - @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline - */ set3DProperties: { - value: function(els, props, eventType, source, currentProps, stageRedraw) { - if(eventType === "Changing") { - this._set3DProperties(els, props, eventType, source); - } else { - // Calculate currentProps if not found for each element - if(!currentProps) { - var that = this; - currentProps = els.map(function(item) { - return that.get3DProperties(item); - }); - } - - var command = Montage.create(Command, { - _els: { value: els }, - _props: { value: props }, - _previous: { value: currentProps }, - _eventType: { value: eventType}, - _source: { value: "undo-redo"}, - description: { value: "Set 3D Properties"}, - receiver: { value: this}, - - execute: { - value: function(senderObject) { - if(senderObject) this._source = senderObject; - this.receiver._set3DProperties(this._els, this._props, this._eventType, this._source); - this._source = "undo-redo"; - return ""; - } - }, - - unexecute: { - value: function() { - this.receiver._set3DProperties(this._els, this._previous, this._eventType, this._source); - return ""; - } - } - }); - - NJevent("sendToUndo", command); - command.execute(source); - } - } - }, - - _set3DProperties: { - value: function(els, props, eventType, source) { + value: function(elements, eventType, source) { var update3DModel = false; if(eventType === "Change") { update3DModel = true; } - for(var i=0, item; item = els[i]; i++) { - item.elementModel.controller["set3DProperties"](item, props, i, update3DModel); + for(var i=0, item; item = elements[i]; i++) { + item.element.elementModel.controller["set3DProperties"](item.element, item.properties, update3DModel); } - NJevent("element" + eventType, {type : "set3DProperties", source: source, data: {"els": els, "prop": "matrix", "value": props}, redraw: null}); + var els = elements.map(function(element) { + return element.element; + }); + + NJevent("element" + eventType, {type : "set3DProperties", source: source, data: {"els": els, "prop": "matrix", "value": elements}, redraw: null}); } }, @@ -529,7 +501,7 @@ exports.ElementMediator = Montage.create(Component, { setMatrix: { value: function(el, mat, isChanging, source) { var dist = el.elementModel.controller["getPerspectiveDist"](el); - el.elementModel.controller["set3DProperties"](el, [{mat:mat, dist:dist}], 0, !isChanging); + el.elementModel.controller["set3DProperties"](el, {mat:mat, dist:dist}, !isChanging); if(isChanging) { NJevent("elementChanging", {type : "setMatrix", source: source, data: {"els": [el], "prop": "matrix", "value": mat}, redraw: null}); diff --git a/js/models/element-model.js b/js/models/element-model.js index 831e8b1e..fa02fd38 100755 --- a/js/models/element-model.js +++ b/js/models/element-model.js @@ -7,6 +7,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage; exports.ElementModel = Montage.create(Montage, { + key: { value: "_model_"}, type: { value: null }, // Tag type that was created selection: { value: null }, // Selection string @@ -43,6 +44,39 @@ exports.ElementModel = Montage.create(Montage, { * Color info */ fill: { value: null }, - stroke: { value: null } + stroke: { value: null }, + + getProperty: { + value: function(property) { + var key = this.key + property; + + if(!this.hasOwnProperty(key)) { + this.defineModelProperty(key, null); + } + + return this[key]; + } + }, + + setProperty: { + value: function(property, value) { + var key = this.key + property; + + if(!this.hasOwnProperty(key)) { + this.defineModelProperty(key, value); + } else { + this[key] = value; + } + } + }, + + defineModelProperty: { + value: function(property, value) { + Montage.defineProperty(this, property, { + enumarable: true, + value:value + }); + } + } }); \ No newline at end of file diff --git a/js/tools/Rotate3DToolBase.js b/js/tools/Rotate3DToolBase.js index 696408bf..ae1856e8 100755 --- a/js/tools/Rotate3DToolBase.js +++ b/js/tools/Rotate3DToolBase.js @@ -44,27 +44,22 @@ exports.Rotate3DToolBase = Montage.create(ModifierToolBase, { modifyElements: { value: function(data, event) { - var mat, - angle, - pt0 = data.pt0, - pt1 = data.pt1; + var mat, angle, pt0 = data.pt0, pt1 = data.pt1; - if(this._handleMode !== null) - { - if(this._activateOriginHandle) - { + if(this._handleMode !== null) { + if(this._activateOriginHandle) { // move the transform origin handle var dx = pt1.x - pt0.x; var dy = pt1.y - pt0.y; this._origin[0] += dx; this._origin[1] += dy; - var len = this._targets.length; - if(len === 1) - { + + if(this.application.ninja.selectedElements.length === 1) { this._startOriginArray[0][0] += dx; this._startOriginArray[0][1] += dy; } + this.downPoint.x = pt1.x; this.downPoint.y = pt1.y; this.DrawHandles(); @@ -133,7 +128,7 @@ exports.Rotate3DToolBase = Montage.create(ModifierToolBase, { } } - if(this._inLocalMode && (this._targets.length === 1) ) + if(this._inLocalMode && (this.application.ninja.selectedElements.length === 1) ) { this._rotateLocally(mat); } @@ -149,12 +144,10 @@ exports.Rotate3DToolBase = Montage.create(ModifierToolBase, { _rotateLocally: { value: function (rotMat) { - var len = this._targets.length; - for(var i = 0; i < len; i++) - { - var item = this._targets[i]; - var elt = item.elt; - var curMat = item.mat; + var len = this.application.ninja.selectedElements.length; + for(var i = 0; i < len; i++) { + var elt = this.application.ninja.selectedElements[i].elementModel.getProperty("elt"); + var curMat = this.application.ninja.selectedElements[i].elementModel.getProperty("mat"); // pre-translate by the transformation center var tMat = Matrix.I(4); @@ -178,19 +171,17 @@ exports.Rotate3DToolBase = Montage.create(ModifierToolBase, { glmat4.multiply(mat, tMat, mat); // while moving, set inline style to improve performance - viewUtils.setMatrixForElement( elt, mat, true ); + viewUtils.setMatrixForElement(this.application.ninja.selectedElements[i], mat, true ); } } }, _rotateGlobally: { value: function (rotMat) { - var len = this._targets.length; - for(var i = 0; i < len; i++) - { - var item = this._targets[i]; - var elt = item.elt; - var curMat = item.mat; + var len = this.application.ninja.selectedElements.length; + for(var i = 0; i < len; i++) { + var elt = this.application.ninja.selectedElements[i].elementModel.getProperty("elt"); + var curMat = this.application.ninja.selectedElements[i].elementModel.getProperty("mat"); // pre-translate by the transformation center var tMat = Matrix.I(4); @@ -213,7 +204,7 @@ exports.Rotate3DToolBase = Montage.create(ModifierToolBase, { glmat4.multiply(mat, curMat, mat); - viewUtils.setMatrixForElement( elt, mat, true ); + viewUtils.setMatrixForElement(this.application.ninja.selectedElements[i], mat, true ); } } }, @@ -254,7 +245,6 @@ exports.Rotate3DToolBase = Montage.create(ModifierToolBase, { captureSelectionDrawn: { value: function(event){ this._origin = null; - this._targets = []; this._startOriginArray = null; var len = this.application.ninja.selectedElements.length; @@ -304,103 +294,75 @@ exports.Rotate3DToolBase = Montage.create(ModifierToolBase, { }, _updateTargets: { - value: function(addToUndoStack) { - var newStyles = [], - previousStyles = [], - len = this.application.ninja.selectedElements.length; - this._targets = []; - for(var i = 0; i < len; i++) - { - var elt = this.application.ninja.selectedElements[i]; -// this._initProps3D(elt); + value: function(addToUndo) { + var mod3dObject = [], self = this; - - var curMat = viewUtils.getMatrixFromElement(elt); - var curMatInv = glmat4.inverse(curMat, []); - - viewUtils.pushViewportObj( elt ); + this.application.ninja.selectedElements.forEach(function(element) { + viewUtils.pushViewportObj(element); var eltCtr = viewUtils.getCenterOfProjection(); viewUtils.popViewportObj(); + eltCtr = viewUtils.localToGlobal(eltCtr, element); - eltCtr = viewUtils.localToGlobal(eltCtr, elt); + element.elementModel.setProperty("ctr", eltCtr); - this._targets.push({elt:elt, mat:curMat, matInv:curMatInv, ctr:eltCtr}); - if(addToUndoStack) - { - var previousStyleStr = {dist:this._undoArray[i].dist, mat:MathUtils.scientificToDecimal(this._undoArray[i].mat.slice(0), 5)}; + if(addToUndo) { + var previousMat = element.elementModel.getProperty("mat").slice(0); + var previousStyleStr = {dist:element.elementModel.getProperty("dist"), mat:MathUtils.scientificToDecimal(previousMat, 5)}; + var newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(element), mat:MathUtils.scientificToDecimal(viewUtils.getMatrixFromElement(element), 5)}; - var newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt), mat:MathUtils.scientificToDecimal(curMat, 5)}; - - previousStyles.push(previousStyleStr); - newStyles.push(newStyleStr); + mod3dObject.push({element:element, properties:newStyleStr, previousProperties: previousStyleStr}); } + + }); + + if(addToUndo) { + ElementsMediator.set3DProperties(mod3dObject, "Change", "rotateTool"); } - if(addToUndoStack) - { - ElementsMediator.set3DProperties(this.application.ninja.selectedElements, - newStyles, - "Change", - "rotateTool", - previousStyles - ); - } - // Save previous value for undo/redo - this._undoArray = []; - for(i = 0, len = this._targets.length; i < len; i++) - { - var elt = this._targets[i].elt; - var _mat = viewUtils.getMatrixFromElement(elt); - var _dist = viewUtils.getPerspectiveDistFromElement(elt); - this._undoArray.push({mat:_mat, dist:_dist}); - } + + this.application.ninja.selectedElements.forEach(function(element) { + element.elementModel.setProperty("mat", viewUtils.getMatrixFromElement(element)); + element.elementModel.setProperty("matInv", glmat4.inverse(element.elementModel.getProperty("mat"), [])); + element.elementModel.setProperty("dist", viewUtils.getPerspectiveDistFromElement(element)); + }); } }, _setTransformOrigin: { value: function(shouldUpdateCenter) { - if(!this._origin) - { + if(!this._origin) { return; } - var len = this._targets.length; - var elt, - eltCtr, - ctrOffset, - matInv; - if( len === 1) - { + + var elt, eltCtr, ctrOffset, matInv; + + if(this.application.ninja.selectedElements.length === 1) { elt = this._target; - if(shouldUpdateCenter) - { - eltCtr = this._targets[0].ctr; + if(shouldUpdateCenter) { + console.log("get crt"); + eltCtr = this.application.ninja.selectedElements[0].elementModel.getProperty("ctr"); ctrOffset = vecUtils.vecSubtract(3, this._origin, eltCtr); - matInv = this._targets[0].matInv; + matInv = this.application.ninja.selectedElements[0].elementModel.getProperty("matInv"); ctrOffset = MathUtils.transformVector(ctrOffset, matInv); elt.elementModel.props3D.m_transformCtr = ctrOffset; - } - else - { + } else { this._startOriginArray = []; - var ctrOffset = this._target.elementModel.props3D.m_transformCtr; - if(!ctrOffset) - { + ctrOffset = this._target.elementModel.props3D.m_transformCtr; + if(!ctrOffset) { ctrOffset = [0,0,0]; } } this._startOriginArray[0] = ctrOffset; - } - else - { + } else { // Update transform ctr for all elements if transform origin was modified this._startOriginArray = []; + var len = this.application.ninja.selectedElements.length; for (var i = 0; i < len; i++) { - elt = this._targets[i].elt; - eltCtr = this._targets[i].ctr; + eltCtr = this.application.ninja.selectedElements[i].elementModel.getProperty("ctr"); ctrOffset = vecUtils.vecSubtract(3, this._origin, eltCtr); - matInv = this._targets[i].matInv; + matInv = this.application.ninja.selectedElements[i].elementModel.getProperty("matInv"); ctrOffset = MathUtils.transformVector(ctrOffset, matInv); this._startOriginArray[i] = ctrOffset; @@ -434,43 +396,27 @@ exports.Rotate3DToolBase = Montage.create(ModifierToolBase, { } }, - Reset : { - value : function() - { - var item, - mat, - dist, - newStyles = [], - previousStyles = [], - len = this.application.ninja.selectedElements.length, - iMat; - for(var i = 0; i < len; i++) - { + Reset: { + value: function() { + var mat, iMat, dist, mod3dObject = [], self = this; + + this.application.ninja.selectedElements.forEach(function(element) { // Reset to the identity matrix - item = this.application.ninja.selectedElements[i]; iMat = Matrix.I(4); - mat = ElementsMediator.getMatrix(item); + mat = ElementsMediator.getMatrix(element); // iMat[12] = mat[12]; // iMat[13] = mat[13]; // iMat[14] = mat[14]; - dist = ElementsMediator.getPerspectiveDist(item); + dist = ElementsMediator.getPerspectiveDist(element); var previousStyleStr = {dist:dist, mat:mat}; - var newStyleStr = {dist:dist, mat:iMat}; - previousStyles.push(previousStyleStr); - newStyles.push(newStyleStr); - - } + mod3dObject.push({element:element, properties:newStyleStr, previousProperties: previousStyleStr}); + }); - ElementsMediator.set3DProperties(this.application.ninja.selectedElements, - newStyles, - "Change", - "rotateTool", - previousStyles - ); + ElementsMediator.set3DProperties(mod3dObject, "Change", "rotateTool"); this.isDrawing = false; this.endDraw(event); diff --git a/js/tools/RotateStage3DTool.js b/js/tools/RotateStage3DTool.js index f5cc4040..adbf1b62 100755 --- a/js/tools/RotateStage3DTool.js +++ b/js/tools/RotateStage3DTool.js @@ -62,7 +62,6 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { _updateTargets: { value: function(addToUndoStack) { - this._targets = []; var elt = this._target; var curMat = viewUtils.getMatrixFromElement(elt); @@ -74,7 +73,9 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { eltCtr = viewUtils.localToGlobal(eltCtr, elt); - this._targets.push({elt:elt, mat:curMat, matInv:curMatInv, ctr:eltCtr}); + elt.elementModel.setProperty("mat", curMat); + elt.elementModel.setProperty("matInv", curMatInv); + elt.elementModel.setProperty("ctr", eltCtr); ElementsMediator.setMatrix(elt, curMat, false, "rotateStage3DTool"); } @@ -83,7 +84,6 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { captureSelectionDrawn: { value: function(event){ this._origin = null; - this._targets = []; this._startOriginArray = null; var stage = this.application.ninja.currentDocument.documentRoot; @@ -93,12 +93,12 @@ exports.RotateStage3DTool = Montage.create(Rotate3DToolBase, { var eltCtr = viewUtils.getCenterOfProjection(); viewUtils.popViewportObj(); - this._targets = []; - var curMat = viewUtils.getMatrixFromElement(stage); var curMatInv = glmat4.inverse(curMat, []); - this._targets.push({elt:stage, mat:curMat, matInv:curMatInv, ctr:eltCtr}); + stage.elementModel.setProperty("mat", curMat); + stage.elementModel.setProperty("matInv", curMatInv); + stage.elementModel.setProperty("ctr", eltCtr); var ctrOffset = stage.elementModel.props3D.m_transformCtr; if(ctrOffset) diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 6dec781b..d9327f33 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -33,19 +33,16 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { _areElementsOnSamePlane : { value: function () { - if(this._targets && this._targets.length) - { - var len = this._targets.length; + if(this.application.ninja.selectedElements.length) { + var len = this.application.ninja.selectedElements.length; var plane = this.application.ninja.stage.stageDeps.snapManager.getDragPlane(); - for(var i = 0; i < len; i++) - { - var elt = this._targets[i].elt; - if(!this.application.ninja.stage.stageDeps.snapManager.elementIsOnPlane(elt, plane)) - { + for(var i = 0; i < len; i++) { + if(!this.application.ninja.stage.stageDeps.snapManager.elementIsOnPlane(this.application.ninja.selectedElements[i], plane)) { return false; } } } + return true; } }, @@ -296,160 +293,126 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { }, _updateTargets: { - value: function(addToUndoStack) { - var newLeft = [], - newTop = [], - newWidth = [], - newHeight = [], - newStyles = [], - previousLeft = [], - previousTop = [], - previousWidth = [], - previousHeight = [], - previousStyles = []; - var len = this.application.ninja.selectedElements.length; - this._targets = []; - for(var i = 0; i < len; i++) { - var elt = this.application.ninja.selectedElements[i]; - - var curMat = viewUtils.getMatrixFromElement(elt); - var curMatInv = glmat4.inverse(curMat, []); - - 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) { - 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"); - previousWidth.push(prevW + "px"); - previousHeight.push(prevH + "px"); - newLeft.push(_x + "px"); - newTop.push(_y + "px"); - newWidth.push(_w + "px"); - newHeight.push(_h + "px"); - } - else - { - 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"); - - previousStyleStr = {dist:this._undoArray[i].dist, - mat:MathUtils.scientificToDecimal(previousMat, 5)}; - newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt), - mat:MathUtils.scientificToDecimal(curMat, 5)}; - previousStyles.push(previousStyleStr); - newStyles.push(newStyleStr); - - this._targets[i].mat = curMat; - this._targets[i].matInv = curMatInv; + value: function(addToUndo) { + var modObject = [], mod3dObject = [], self = this; + + this.application.ninja.selectedElements.forEach(function(element) { + + if(addToUndo) { + if(!self._use3DMode) { + var prevX = element.elementModel.getProperty("x"); + var prevY = element.elementModel.getProperty("y"); + var prevW = element.elementModel.getProperty("w"); + var prevH = element.elementModel.getProperty("h"); + var x = ElementsMediator.getProperty(element, "left"); + var y = ElementsMediator.getProperty(element, "top"); + var w = ElementsMediator.getProperty(element, "width"); + var h = ElementsMediator.getProperty(element, "height"); + + // if we have a delta, that means the transform handles were used and + // we should update the width and height too. Otherwise, just update left and top. + if(this.delta) { + modObject.push({element:element, properties:{left: x, top:y, width: w, height: h}, previousProperties: {left: prevX, top:prevY, width: prevW, height: prevH}}); + } else { + modObject.push({element:element, properties:{left: x, top:y}, previousProperties: {left: prevX, top:prevY}}); + } + + } else { + // Not using the 3d mode + var previousMat = element.elementModel.getProperty("mat").slice(0); + var prevW = element.elementModel.getProperty("w"); + var prevH = element.elementModel.getProperty("h"); + var w = ElementsMediator.getProperty(element, "width"); + var h = ElementsMediator.getProperty(element, "height"); + + var previousStyleStr = {dist:element.elementModel.getProperty("dist"), mat:MathUtils.scientificToDecimal(previousMat, 5)}; + var newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(element), mat:MathUtils.scientificToDecimal(viewUtils.getMatrixFromElement(element), 5)}; + + modObject.push({element:element, properties:{width: w, height:h}, previousProperties: {width: prevW, height:prevH}}); + mod3dObject.push({element:element, properties:newStyleStr, previousProperties: previousStyleStr}); } } - } + }); - if(addToUndoStack) { + // Move them + if(addToUndo) { if(!this._use3DMode) { - // if we have a delta, that means the transform handles were used and - // we should update the width and height too. Otherwise, just update left and top. - if(this._delta) { - ElementsMediator.setProperties(this.application.ninja.selectedElements, {"left": newLeft, "top": newTop, "width": newWidth, "height": newHeight }, - { "left" : previousLeft, "top" : previousTop, "width": previousWidth, "height": previousHeight}, "Change", "selectionTool"); - } else { - ElementsMediator.setProperties(this.application.ninja.selectedElements, {"left": newLeft, "top": newTop }, {"left": previousLeft, "top": previousTop}, "Change", "selectionTool"); - } + ElementsMediator.setProperties(modObject, "Change", "SelectionTool" ); } else { // TODO - We don't support transform handles in 3d space for now - ElementsMediator.setProperties(this.application.ninja.selectedElements, {"width": newWidth, "height": newHeight }, {"width": previousWidth, "height": previousHeight}, "Change", "selectionTool"); - ElementsMediator.set3DProperties(this.application.ninja.selectedElements, newStyles, "Change", "translateTool", previousStyles); + ElementsMediator.setProperties(modObject, "Change", "SelectionTool" ); + ElementsMediator.set3DProperties(mod3dObject, "Change", "translateTool"); + } } - // Save previous value for undo/redo - this._undoArray = []; - for(i = 0, len = this._targets.length; i < len; i++) - { - var item = this._targets[i]; - _x = parseInt(ElementsMediator.getProperty(item.elt, "left")); - _y = parseInt(ElementsMediator.getProperty(item.elt, "top")); - _w = parseInt(ElementsMediator.getProperty(item.elt, "width")); - _h = parseInt(ElementsMediator.getProperty(item.elt, "height")); - var _mat = viewUtils.getMatrixFromElement(item.elt); - var _dist = viewUtils.getPerspectiveDistFromElement(item.elt); - this._undoArray.push({_x:_x, _y:_y, _w:_w, _h:_h, mat:_mat, dist:_dist}); - } + + this.application.ninja.selectedElements.forEach(function(element) { + element.elementModel.setProperty("x", ElementsMediator.getProperty(element, "left")); + element.elementModel.setProperty("y", ElementsMediator.getProperty(element, "top")); + element.elementModel.setProperty("w", ElementsMediator.getProperty(element, "width")); + element.elementModel.setProperty("h", ElementsMediator.getProperty(element, "height")); + element.elementModel.setProperty("mat", viewUtils.getMatrixFromElement(element)); + element.elementModel.setProperty("matInv", glmat4.inverse(element.elementModel.getProperty("mat"), [])); + element.elementModel.setProperty("dist", viewUtils.getPerspectiveDistFromElement(element)); + }); } }, _moveElements: { value: function (transMat) { - var len = this._targets.length, - i, - item, - elt, - curMat, - newLeft = [], - newTop = []; + var elt, curMat, targets = []; - var matInv = glmat4.inverse(this._startMat, []); - var nMat = glmat4.multiply(transMat, this._startMat, [] ); - var qMat = glmat4.multiply(matInv, nMat, []); +// var matInv = glmat4.inverse(this._startMat, []); +// var qMat = glmat4.multiply(matInv, nMat, []); + this._startMat = glmat4.multiply(transMat, this._startMat, [] ); - this._startMat = nMat; + var self = this; - for(i = 0; i < len; i++) - { - item = this._targets[i]; - elt = item.elt; - if(this._use3DMode) - { + this.application.ninja.selectedElements.forEach(function(element) { + if(self._use3DMode) { + curMat = element.elementModel.getProperty("mat"); + + curMat[12] += transMat[12]; + curMat[13] += transMat[13]; + curMat[14] += transMat[14]; + viewUtils.setMatrixForElement( element, curMat, true); + element.elementModel.setProperty("mat", curMat); + } else { + var x = (parseInt(ElementsMediator.getProperty(element, "left")) + transMat[12]) + "px"; + var y = (parseInt(ElementsMediator.getProperty(element, "top")) + transMat[13]) + "px"; + + targets.push({element:element, properties:{left:x , top:y}}); + } + }); + + /* + this._targets.forEach(function(item) { + elt = item.elt; + + if(self._use3DMode) { curMat = item.mat; curMat[12] += transMat[12]; curMat[13] += transMat[13]; curMat[14] += transMat[14]; viewUtils.setMatrixForElement( elt, curMat, true); - this._targets[i].mat = curMat; - } - else - { - var _x = parseInt(ElementsMediator.getProperty(elt, "left")) + transMat[12]; - var _y = parseInt(ElementsMediator.getProperty(elt, "top")) + transMat[13]; + item.mat = curMat; - newLeft.push(_x + "px"); - newTop.push(_y + "px"); + return NJevent("elementChanging", {type : "Changing", redraw: false}); + } else { + var x = (parseInt(ElementsMediator.getProperty(elt, "left")) + transMat[12]) + "px"; + var y = (parseInt(ElementsMediator.getProperty(elt, "top")) + transMat[13]) + "px"; + + targets.push({element:elt, properties:{left:x , top:y}}); } - } + }); + */ - if(newLeft.length) { - ElementsMediator.setProperties(this.application.ninja.selectedElements, {"left": newLeft, "top": newTop }, null, "Changing", "SelectionTool" ); + if(this._use3DMode) { + return NJevent("elementChanging", {type : "Changing", redraw: false}); } else { - NJevent("elementChanging", {type : "Changing", redraw: false}); + ElementsMediator.setProperties(targets, "Changing", "SelectionTool" ); } } }, @@ -457,15 +420,10 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { //------------------------------------------------------------------------- //Routines to modify the selected objects modifyElements : { - value : function(data, event) - { - var delta, - deltaH, - deltaW, - deltaL, - deltaT; - if(this._handleMode !== null) - { + value : function(data, event) { + var delta, deltaH, deltaW, deltaL, deltaT, modObject = []; + + if(this._handleMode !== null) { // 0 7 6 // 1 5 // 2 3 4 @@ -512,6 +470,12 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { deltaW = this._undoArray.map(function(item) { return item._w + delta + "px"}); delta = ~~(data.pt1[1] - data.pt0[1]); deltaH = this._undoArray.map(function(item) { return item._h + delta + "px"}); + /* + this.application.ninja.selectedElements.forEach(function(element) { + var width = parseInt(element.elementModel.getProperty("w")) + delta + "px"; + modObject.push({element:element, properties:{width: width}}); + }); + */ ElementsMediator.setProperties(this.application.ninja.selectedElements, { "width": deltaW, "height": deltaH }, "Changing", "SelectionTool" ); break; case 5: @@ -684,7 +648,7 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { { return; } - if(this._target && this._handles && (this._targets.length === 1)) + if((this.application.ninja.selectedElements.length === 1) && this._handles) { var len = this._handles.length; var i = 0, diff --git a/js/tools/Translate3DToolBase.js b/js/tools/Translate3DToolBase.js index e4f1fb99..04359567 100755 --- a/js/tools/Translate3DToolBase.js +++ b/js/tools/Translate3DToolBase.js @@ -21,8 +21,7 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, _clickedOnStage: { value: false }, HandleDoubleClick : { - value : function() - { + value : function() { } }, @@ -74,7 +73,7 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, var transMat = Matrix.Translation( delta ); //console.log( "Translate: " + delta ); - if(this._inLocalMode && (this._targets.length === 1) ) + if(this._inLocalMode && (this.application.ninja.selectedElements.length === 1) ) { this._translateLocally(transMat); } @@ -86,45 +85,32 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, }, - Reset : { - value : function() - { - var item, - mat, - dist, - newStyles = [], - previousStyles = [], - len = this.application.ninja.selectedElements.length; - for(var i = 0; i < len; i++) - { - // Reset to the identity matrix but retain the rotation values - item = this.application.ninja.selectedElements[i]; - mat = ElementsMediator.getMatrix(item); + Reset: { + value: function() { + var mat, iMat, dist, mod3dObject = [], self = this; + + this.application.ninja.selectedElements.forEach(function(element) { + // Reset to the identity matrix + //item = this.application.ninja.selectedElements[i]; + iMat = Matrix.I(4); + mat = ElementsMediator.getMatrix(element); mat[12] = 0; mat[13] = 0; mat[14] = 0; - dist = ElementsMediator.getPerspectiveDist(item); + dist = ElementsMediator.getPerspectiveDist(element); - var previousStyleStr = {dist:dist, mat:item.mat}; + var previousStyleStr = {dist:dist, mat:element.elementModel.getProperty("mat")}; + var newStyleStr = {dist:dist, mat:iMat}; - var newStyleStr = {dist:dist, mat:mat}; - - previousStyles.push(previousStyleStr); - newStyles.push(newStyleStr); - } + mod3dObject.push({element:element, properties:newStyleStr, previousProperties: previousStyleStr}); + }); - ElementsMediator.set3DProperties(this.application.ninja.selectedElements, - newStyles, - "Change", - "translateTool", - previousStyles - ); + ElementsMediator.set3DProperties(mod3dObject, "Change", "rotateTool"); this.isDrawing = false; this.endDraw(event); - // Need to force stage to draw immediately so the new selection center is calculated this.application.ninja.stage.draw(); // And captureSelectionDrawn to draw the transform handles @@ -151,111 +137,79 @@ exports.Translate3DToolBase = Montage.create(ModifierToolBase, value: function (transMat) { //console.log( "_translateGlobally, startMat: " + this._startMat + ", transMat: " + transMat ); //console.log( "_translateGlobally, transMat: " + transMat ); - var len = this._targets.length, - i = 0, - item, - elt, + var self = this, curMat = viewUtils.getMatrixFromElement( this._target ), matInv = glmat4.inverse(this._startMat, []), - nMat = glmat4.multiply(transMat, this._startMat, [] ), - qMat = glmat4.multiply(matInv, nMat, []); + nMat = glmat4.multiply(transMat, this._startMat, [] ); +// qMat = glmat4.multiply(matInv, nMat, []); - if (this._mode === 1) - { + if(this._mode === 1) { var curInv = glmat4.inverse( curMat, [] ); transMat = glmat4.multiply( nMat, curInv, [] ); } var shouldUpdateStartMat = true; - if(this._clickedOnStage) - { + if(this._clickedOnStage) { shouldUpdateStartMat = false; - } - else if(this._mode !== 1) - { + } else if(this._mode !== 1) { this._startMat = nMat; } - for(i = 0; i < len; i++) - { - item = this._targets[i]; - elt = item.elt; - curMat = item.mat.slice(0); + this.application.ninja.selectedElements.forEach(function(element) { + curMat = element.elementModel.getProperty("mat").slice(0); -// glmat4.multiply(curMat, qMat, curMat); -// -// viewUtils.setMatrixForElement( elt, curMat, true); +// glmat4.multiply(curMat, qMat, curMat); +// viewUtils.setMatrixForElement( elt, curMat, true); curMat[12] += transMat[12]; curMat[13] += transMat[13]; curMat[14] += transMat[14]; - viewUtils.setMatrixForElement( elt, curMat, true); - if(shouldUpdateStartMat) - { + viewUtils.setMatrixForElement(element, curMat, true); + + if(shouldUpdateStartMat) { //console.log( "\t\tshouldUpdateStartMat" ); - this._targets[i].mat = curMat; - } - } + element.elementModel.setProperty("mat", curMat); + } + + }); } }, _updateTargets: { - value: function(addToUndoStack) { -// console.log( "_updateTargets" ); - var newStyles = [], - previousStyles = [], - len = this.application.ninja.selectedElements.length; - this._targets = []; - for(var i = 0; i < len; i++) - { - var elt = this.application.ninja.selectedElements[i]; + value: function(addToUndo) { + var mod3dObject = [], self = this; - var curMat = viewUtils.getMatrixFromElement(elt); - var curMatInv = glmat4.inverse(curMat, []); + this.application.ninja.selectedElements.forEach(function(element) { + if(addToUndo) { + var previousMat = element.elementModel.getProperty("mat").slice(0); + var previousStyleStr = {dist:element.elementModel.getProperty("dist"), mat:MathUtils.scientificToDecimal(previousMat, 5)}; + var newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(element), mat:MathUtils.scientificToDecimal(viewUtils.getMatrixFromElement(element), 5)}; - this._targets.push({elt:elt, mat:curMat, matInv:curMatInv}); - if(addToUndoStack) - { - var previousStyleStr = {dist:this._undoArray[i].dist, mat:MathUtils.scientificToDecimal(this._undoArray[i].mat.slice(0), 5)}; - - var newStyleStr = {dist:viewUtils.getPerspectiveDistFromElement(elt), mat:MathUtils.scientificToDecimal(curMat, 5)}; + mod3dObject.push({element:element, properties:newStyleStr, previousProperties: previousStyleStr}); - previousStyles.push(previousStyleStr); - newStyles.push(newStyleStr); } - } - if(addToUndoStack) - { - ElementsMediator.set3DProperties(this.application.ninja.selectedElements, - newStyles, - "Change", - "translateTool", - previousStyles - ); - if(this._origin && this._delta) - { - if(this._handleMode !== null) - { + }); + + if(addToUndo) { + ElementsMediator.set3DProperties(mod3dObject, "Change", "translateTool"); + + if(this._origin && this._delta) { + if(this._handleMode !== null) { this._origin[this._handleMode] += this._delta; - } - else - { + } else { this._origin[0] += this._delta[0]; this._origin[1] += this._delta[1]; } } + this._delta = null; } - // Save previous value for undo/redo - this._undoArray = []; - for(i = 0, len = this._targets.length; i < len; i++) - { - var elt = this._targets[i].elt; - var _mat = viewUtils.getMatrixFromElement(elt); - var _dist = viewUtils.getPerspectiveDistFromElement(elt); - this._undoArray.push({mat:_mat, dist:_dist}); - } + + this.application.ninja.selectedElements.forEach(function(element) { + element.elementModel.setProperty("mat", viewUtils.getMatrixFromElement(element)); + element.elementModel.setProperty("dist", viewUtils.getPerspectiveDistFromElement(element)); + }); } }, diff --git a/js/tools/TranslateObject3DTool.js b/js/tools/TranslateObject3DTool.js index 8edf1fee..74df6c14 100755 --- a/js/tools/TranslateObject3DTool.js +++ b/js/tools/TranslateObject3DTool.js @@ -65,10 +65,8 @@ exports.TranslateObject3DTool = Montage.create(Translate3DToolBase, { } } - if(this._targets) - { - var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, - new WebKitPoint(event.pageX, event.pageY)); + if(this.application.ninja.selectedElements.length) { + var point = webkitConvertPointFromPageToNode(this.application.ninja.stage.canvas, new WebKitPoint(event.pageX, event.pageY)); // do the snap before setting up the avoid list to allow // a snap on the mouse down @@ -96,11 +94,10 @@ exports.TranslateObject3DTool = Montage.create(Translate3DToolBase, { } // we don't want to snap to selected objects during the drag - var len = this._targets.length; - for(var i=0; i