From 4900f2e6e346df18b1b5a2ac89da5019644ac98a Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 9 Apr 2012 16:47:35 -0700 Subject: adding a history panel Signed-off-by: Valerio Virgillito --- js/data/panels-data.js | 12 +++ js/panels/Panel.reel/Panel.js | 5 +- js/panels/PanelContainer.reel/PanelContainer.html | 11 ++- .../history-item.reel/history-item.css | 0 .../history-item.reel/history-item.html | 29 ++++++ .../history-item.reel/history-item.js | 32 +++++++ js/panels/history-panel/history.reel/history.css | 34 +++++++ js/panels/history-panel/history.reel/history.html | 106 +++++++++++++++++++++ js/panels/history-panel/history.reel/history.js | 26 +++++ 9 files changed, 253 insertions(+), 2 deletions(-) create mode 100644 js/panels/history-panel/history-item.reel/history-item.css create mode 100644 js/panels/history-panel/history-item.reel/history-item.html create mode 100644 js/panels/history-panel/history-item.reel/history-item.js create mode 100644 js/panels/history-panel/history.reel/history.css create mode 100644 js/panels/history-panel/history.reel/history.html create mode 100644 js/panels/history-panel/history.reel/history.js diff --git a/js/data/panels-data.js b/js/data/panels-data.js index 7a2d817a..f613a3be 100644 --- a/js/data/panels-data.js +++ b/js/data/panels-data.js @@ -93,6 +93,18 @@ exports.PanelsData = Montage.create(Montage, { open: true, modulePath: "js/panels/presets/content.reel", moduleName: "content" + }, + { + name: "History", + minHeight: 100, + height: 100, + maxHeight: null, + flexible: true, + collapsed: true, + scrollable: true, + open: true, + modulePath: "js/panels/history-panel/history.reel", + moduleName: "History" } ] } diff --git a/js/panels/Panel.reel/Panel.js b/js/panels/Panel.reel/Panel.js index 33f9b3a7..613bef4b 100755 --- a/js/panels/Panel.reel/Panel.js +++ b/js/panels/Panel.reel/Panel.js @@ -125,7 +125,10 @@ exports.Panel = Montage.create(Component, { require.async(this.modulePath) .then(function(panelContent) { var componentRequire = panelContent[that.moduleName]; - that.panelContent.content = componentRequire.create(); + var componentInstance = componentRequire.create(); + + componentInstance.ownerComponent = that.ownerComponent; + that.panelContent.content = componentInstance; }) .end(); } diff --git a/js/panels/PanelContainer.reel/PanelContainer.html b/js/panels/PanelContainer.reel/PanelContainer.html index 251e86e4..d3673105 100755 --- a/js/panels/PanelContainer.reel/PanelContainer.html +++ b/js/panels/PanelContainer.reel/PanelContainer.html @@ -62,6 +62,13 @@ } }, + "panel_6": { + "prototype": "js/panels/Panel.reel", + "properties": { + "element": {"#": "panel_6"} + } + }, + "owner": { "module": "js/panels/PanelContainer.reel", "name": "PanelContainer", @@ -74,7 +81,8 @@ "panel_2": {"@": "panel_2"}, "panel_3": {"@": "panel_3"}, "panel_4": {"@": "panel_4"}, - "panel_5": {"@": "panel_5"} + "panel_5": {"@": "panel_5"}, + "panel_6": {"@": "panel_6"} }, "listeners": [ { @@ -104,6 +112,7 @@
+
diff --git a/js/panels/history-panel/history-item.reel/history-item.css b/js/panels/history-panel/history-item.reel/history-item.css new file mode 100644 index 00000000..e69de29b diff --git a/js/panels/history-panel/history-item.reel/history-item.html b/js/panels/history-panel/history-item.reel/history-item.html new file mode 100644 index 00000000..2db27846 --- /dev/null +++ b/js/panels/history-panel/history-item.reel/history-item.html @@ -0,0 +1,29 @@ + + + + + + + + + + + + +
  • + + + \ No newline at end of file diff --git a/js/panels/history-panel/history-item.reel/history-item.js b/js/panels/history-panel/history-item.reel/history-item.js new file mode 100644 index 00000000..8a6e7654 --- /dev/null +++ b/js/panels/history-panel/history-item.reel/history-item.js @@ -0,0 +1,32 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
    +No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
    +(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +     */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.HistoryItem = Montage.create(Component, { + _title: { + value: null + }, + + title: { + get: function() { + return this._title; + }, + set: function(value) { + if(value !== this._title) { + this._title = value; + this.needsDraw = true; + } + } + }, + + draw: { + value: function() { + this.element.innerHTML = this.title; + } + } +}); \ No newline at end of file diff --git a/js/panels/history-panel/history.reel/history.css b/js/panels/history-panel/history.reel/history.css new file mode 100644 index 00000000..44c4c74b --- /dev/null +++ b/js/panels/history-panel/history.reel/history.css @@ -0,0 +1,34 @@ +.history_panel { + height: 100%; + overflow: hidden; +} + +.scroller { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; +} + +.history_panel ul { + padding: 0; + margin: 0; +} + +.history_panel li { + padding: 10px 15px; + list-style: none; +} + +.undo_list li { + background-color: hsl(0, 0%, 94%); + border-top: 1px solid hsl(0, 0%, 100%); + border-bottom: 1px solid hsl(0, 0%, 85%); +} + +.redo_list li { + background-color: hsl(199, 71%, 79%); + border-top: 1px solid hsl(0, 0%, 100%); + border-bottom: 1px solid hsl(0, 0%, 85%); +} \ No newline at end of file diff --git a/js/panels/history-panel/history.reel/history.html b/js/panels/history-panel/history.reel/history.html new file mode 100644 index 00000000..f2e3c6ae --- /dev/null +++ b/js/panels/history-panel/history.reel/history.html @@ -0,0 +1,106 @@ + + + + + + + + + + + + +
    +
    +
      +
    • +
    +
      +
    • +
    +
    +
    + + + \ No newline at end of file diff --git a/js/panels/history-panel/history.reel/history.js b/js/panels/history-panel/history.reel/history.js new file mode 100644 index 00000000..241286fb --- /dev/null +++ b/js/panels/history-panel/history.reel/history.js @@ -0,0 +1,26 @@ +/* +This file contains proprietary software owned by Motorola Mobility, Inc.
    +No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.
    +(c) Copyright 2011 Motorola Mobility, Inc. All Rights Reserved. +     */ + +var Montage = require("montage/core/core").Montage, + Component = require("montage/ui/component").Component; + +exports.History = Montage.create(Component, { + historyList: { + value: null + }, + + didCreate: { + value: function() { + } + }, + + templateDidLoad: { + value: function() { + } + } + + +}); \ No newline at end of file -- cgit v1.2.3 From 48d4dd0f0570f4ac3556f228846ed0fd98a674e5 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 9 Apr 2012 16:47:56 -0700 Subject: setProperties to the montage undo/redo Signed-off-by: Valerio Virgillito --- js/controllers/elements/element-controller.js | 16 +++++-- js/mediators/element-mediator.js | 62 +++++++-------------------- js/tools/SelectionTool.js | 57 ++++++------------------ 3 files changed, 42 insertions(+), 93 deletions(-) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index fda3a3c5..adac1420 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -47,9 +47,19 @@ exports.ElementController = Montage.create(Component, { }, setProperties: { - value: function(el, props, index) { - for(var p in props) { - this.application.ninja.stylesController.setElementStyle(el, p, props[p][index]); + 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]); } } }, diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index a05ca631..738e65fc 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -272,60 +272,28 @@ exports.ElementMediator = Montage.create(Component, { }, /** - Set a property change command for an element or array of elements + Sets a property object for an element or array of elements. The same properties object gets applied to all the elements @param els: Array of elements. Can contain 1 or more elements - @param props: Property/ies object containing both the value and property + @param properties: Properties object containing both the value and property + @param currentProperties: current properties object for undo/redo. Must be an valid object or null @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 */ setProperties: { - value: function(els, props, eventType, source, currentProps, stageRedraw) { - if(eventType === "Changing") { - this._setProperties(els, props, eventType, source); - } else { - var command = Montage.create(Command, { - _els: { value: els }, - _props: { value: props }, - _previous: { value: currentProps }, - _eventType: { value: eventType}, - _source: { value: "undo-redo"}, - description: { value: "Set Properties"}, - receiver: { value: this}, - - execute: { - value: function(senderObject) { - if(senderObject) this._source = senderObject; - this.receiver._setProperties(this._els, this._props, this._eventType, this._source); - this._source = "undo-redo"; - return ""; - } - }, - - unexecute: { - value: function() { - this.receiver._setProperties(this._els, this._previous, this._eventType, this._source); - return ""; - } - } - }); - - NJevent("sendToUndo", command); - command.execute(source); - } - } - }, - - _setProperties: { - value: function(els, props, eventType, source) { - var propsArray; - - for(var i=0, item; item = els[i]; i++) { - item.elementModel.controller["setProperties"](item, props, i); + value: function(elements, properties, currentProperties, eventType, source) { + // Assume elements is an array of elements always + elements.forEach(function(element) { + element.elementModel.controller["setProperties"](element, properties); + }); + + // Add to undo only when a change is requested + if(eventType !== "Changing") { + var undoLabel = "Properties change"; + document.application.undoManager.add(undoLabel, this.setProperties, this, elements, currentProperties, properties, eventType, source); } - NJevent("element" + eventType, {type : "setProperties", source: source, data: {"els": els, "prop": props, "value": props}, redraw: null}); + // Dispatch the element change/changing event. + NJevent("element" + eventType, {type : "setProperties", source: source, data: {"els": elements, "prop": properties, "value": properties}, redraw: null}); } }, diff --git a/js/tools/SelectionTool.js b/js/tools/SelectionTool.js index 94cc6b83..6dec781b 100755 --- a/js/tools/SelectionTool.js +++ b/js/tools/SelectionTool.js @@ -372,46 +372,21 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { } } } - if(addToUndoStack) - { - if(!this._use3DMode) - { + + if(addToUndoStack) { + 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 }, - "Change", - "selectionTool", - { "left" : previousLeft, "top" : previousTop, "width": previousWidth, "height": previousHeight} - ); - } - else - { - ElementsMediator.setProperties(this.application.ninja.selectedElements, - { "left": newLeft, "top": newTop }, - "Change", - "selectionTool", - { "left" : previousLeft, "top" : previousTop } - ); + 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"); } - } - else - { + } else { // TODO - We don't support transform handles in 3d space for now - ElementsMediator.setProperties(this.application.ninja.selectedElements, - { "width": newWidth, "height": newHeight }, - "Change", - "selectionTool", - { "width": previousWidth, "height": previousHeight} - ); - ElementsMediator.set3DProperties(this.application.ninja.selectedElements, - newStyles, - "Change", - "translateTool", - previousStyles - ); + 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); } } // Save previous value for undo/redo @@ -471,13 +446,9 @@ var SelectionTool = exports.SelectionTool = Montage.create(ModifierToolBase, { } } - if(newLeft.length) - { - ElementsMediator.setProperties(this.application.ninja.selectedElements, - { "left": newLeft, "top": newTop }, "Changing", "SelectionTool" ); - } - else - { + if(newLeft.length) { + ElementsMediator.setProperties(this.application.ninja.selectedElements, {"left": newLeft, "top": newTop }, null, "Changing", "SelectionTool" ); + } else { NJevent("elementChanging", {type : "Changing", redraw: false}); } } -- cgit v1.2.3 From 45ae62302b175774c1e1af82ff144ecb2fe770d7 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Mon, 9 Apr 2012 22:58:10 -0700 Subject: setAttribute added to the undo/redo Signed-off-by: Valerio Virgillito --- js/mediators/element-mediator.js | 71 ++++++--------------------------- js/panels/properties.reel/properties.js | 5 ++- 2 files changed, 16 insertions(+), 60 deletions(-) diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index 738e65fc..6ab33eff 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -138,70 +138,25 @@ exports.ElementMediator = Montage.create(Component, { }, /** - Set a property change command for an element or array of elements - @param els: Array of elements. Can contain 1 or more elements - @param p: Property to set - @param value: Value to be set. This is an array of values corresponding to the array of elements - @param eventType: Change/Changing. Will be passed to the dispatched event - @param source: String for the source object making the call - @param currentValue *OPTIONAL*: current value array. If not found the current value is calculated - @param stageRedraw: *OPTIONAL*: True. If set to false the stage will not redraw the selection/outline - */ + Set a property change command for an element or array of elements + @param element: Element + @param attribute: Attribute to set + @param value: Value to be set. + @param currentValue: current value + @param source: String for the source object making the call + */ setAttribute: { - value: function(el, att, value, eventType, source, currentValue) { + value: function(element, attribute, value, currentValue, source) { + element.elementModel.controller["setAttribute"](element, attribute, value); - if(eventType === "Changing") { - this._setAttribute(el, att, value, eventType, source); - } else { - // Calculate currentValue if not found for each element - if(currentValue === null) { - currentValue = el.getAttribute(att); - } - - var command = Montage.create(Command, { - _el: { value: el }, - _att: { value: att }, - _value: { value: value }, - _previous: { value: currentValue }, - _eventType: { value: eventType}, - _source: { value: "undo-redo"}, - description: { value: "Set Attribute"}, - receiver: { value: this}, - - execute: { - value: function(senderObject) { - if(senderObject) this._source = senderObject; - this.receiver._setAttribute(this._el, this._att, this._value, this._eventType, this._source); - this._source = "undo-redo"; - return ""; - } - }, - - unexecute: { - value: function() { - this.receiver._setAttribute(this._el, this._att, this._previous, this._eventType, this._source); - return ""; - } - } - }); - - NJevent("sendToUndo", command); - command.execute(source); - } + // Add to the undo + var undoLabel = "Attribute change"; + document.application.undoManager.add(undoLabel, this.setAttribute, this, element, attribute, currentValue, value, source); + NJevent("attributeChange"); } }, - _setAttribute: { - value: function(el, att, value, eventType, source) { - el.elementModel.controller["setAttribute"](el, att, value); - - NJevent("attribute" + eventType, {type : "setAttribute", source: source, data: {"els": el, "prop": att, "value": value}, 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 diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 625e3eb6..d9dca538 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -113,13 +113,14 @@ exports.Properties = Montage.create(Component, { } if(this.application.ninja.selectedElements.length) { - ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); +// ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, "Change", "pi"); + ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "id", this.elementId.value, this.application.ninja.selectedElements[0].id, "pi"); } else { ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "id", this.elementId.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.id); } } else if(event.target.id === "elementClass") { if(this.application.ninja.selectedElements.length) { - ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, "Change", "pi"); + ElementsMediator.setAttribute(this.application.ninja.selectedElements[0], "class", this.elementClass.value, this.application.ninja.selectedElements[0].className, "pi"); } else { ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass); } -- cgit v1.2.3 From 6885e66a1f668f34699145f0da231c5d4ecbe666 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Tue, 10 Apr 2012 11:07:36 -0700 Subject: some code cleanup Signed-off-by: Valerio Virgillito --- js/controllers/elements/element-controller.js | 90 +++++++++------------------ 1 file changed, 29 insertions(+), 61 deletions(-) diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index adac1420..b8411ac0 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -75,37 +75,29 @@ exports.ElementController = Montage.create(Component, { // borderSide : "top", "right", "bottom", or "left" getColor: { value: function(el, isFill, borderSide) { - var colorObj, - color, - image; + var colorObj, color, image; // Return cached value if one exists - if(isFill) - { - if(el.elementModel.fill) - { + if(isFill) { + if(el.elementModel.fill) { return el.elementModel.fill; } //TODO: Once logic for color and gradient is established, this needs to be revised color = this.getProperty(el, "background-color"); image = this.getProperty(el, "background-image"); - } - else - { + } else { // Try getting border color from specific side first - if(borderSide) - { + if(borderSide) { color = this.getProperty(el, "border-" + borderSide + "-color"); image = this.getProperty(el, "border-" + borderSide + "-image"); } // If no color was found, look up the shared border color - if(!color && !image) - { - if(el.elementModel.stroke) - { + if(!color && !image) { + if(el.elementModel.stroke) { return el.elementModel.stroke; } + color = this.getProperty(el, "border-color"); image = this.getProperty(el, "border-image"); } @@ -122,17 +114,12 @@ exports.ElementController = Montage.create(Component, { } // Update cache - if(isFill) - { + if(isFill) { el.elementModel.fill = colorObj; - } - else if(!borderSide) - { + } else if(!borderSide) { // TODO - Need to update border style and width also el.elementModel.stroke = colorObj; - } - else - { + } else { // TODO - Should update specific border sides too } @@ -143,10 +130,9 @@ exports.ElementController = Montage.create(Component, { setColor: { value: function(el, color, isFill) { var mode = color.mode; - if(isFill) - { - if(mode) - { + + if(isFill) { + if(mode) { switch (mode) { case 'nocolor': this.setProperty(el, "background-image", "none"); @@ -162,12 +148,10 @@ exports.ElementController = Montage.create(Component, { this.setProperty(el, "background-color", color.color.css); } } + el.elementModel.fill = color; - } - else - { - if(mode) - { + } else { + if(mode) { switch (mode) { case 'nocolor': this.setProperty(el, "border-image", "none"); @@ -177,20 +161,16 @@ exports.ElementController = Montage.create(Component, { case 'gradient': this.setProperty(el, "border-image", color.color.css); this.setProperty(el, "border-color", "none"); - if(color.borderInfo) - { - this.setProperty(el, "border-width", color.borderInfo.borderWidth + - color.borderInfo.borderUnits); + if(color.borderInfo) { + this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); this.setProperty(el, "border-style", color.borderInfo.borderStyle); } break; default: this.setProperty(el, "border-image", "none"); this.setProperty(el, "border-color", color.color.css); - if(color.borderInfo) - { - this.setProperty(el, "border-width", color.borderInfo.borderWidth + - color.borderInfo.borderUnits); + if(color.borderInfo) { + this.setProperty(el, "border-width", color.borderInfo.borderWidth + color.borderInfo.borderUnits); this.setProperty(el, "border-style", color.borderInfo.borderStyle); } } @@ -219,8 +199,7 @@ exports.ElementController = Montage.create(Component, { // Routines to get/set 3D properties get3DProperty: { value: function(el, prop) { - if(el.elementModel && el.elementModel.props3D) - { + if(el.elementModel && el.elementModel.props3D) { return el.elementModel.props3D[prop]; } } @@ -228,16 +207,12 @@ exports.ElementController = Montage.create(Component, { getMatrix: { value: function(el) { - if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d) - { + if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.matrix3d) { return el.elementModel.props3D.matrix3d.slice(0); - } - else - { + } else { var mat; - if (el) - { + if (el) { mat = this.application.ninja.stylesController.getMatrixFromElement(el, false); if (!mat) { mat = Matrix.I(4); @@ -252,12 +227,9 @@ exports.ElementController = Montage.create(Component, { getPerspectiveDist: { value: function(el) { - if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.perspectiveDist) - { + if(el.elementModel && el.elementModel.props3D && el.elementModel.props3D.perspectiveDist) { return el.elementModel.props3D.perspectiveDist; - } - else - { + } else { var dist = this.application.ninja.stylesController.getPerspectiveDistFromElement(el, false); if(dist == null) { dist = 1400; @@ -274,16 +246,12 @@ exports.ElementController = Montage.create(Component, { 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) + ")"); + this.application.ninja.stylesController.setElementStyle(el, "-webkit-transform", "perspective(" + dist + ") " + "matrix3d(" + MathUtils.scientificToDecimal(mat, 5) + ")"); el.elementModel.props3D.matrix3d = mat; el.elementModel.props3D.perspectiveDist = dist; - if(update3DModel) - { + if(update3DModel) { this._update3DProperties(el, mat, dist); } } -- cgit v1.2.3 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(-) 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