From a11ef2eed7049835c8bdfa50a2b893632c46eaa0 Mon Sep 17 00:00:00 2001 From: Valerio Virgillito Date: Wed, 4 Apr 2012 11:11:58 -0700 Subject: Squashed commit of Preparing for the montage undo-manager: Architecture changes Reworked the add and remove elements into 1 function which can take 1 or more elements. Removed the _element from the selection array Many other changes related to those 2 changes Undo/Redo shortcuts are now using montage undo/redo manager. Signed-off-by: Valerio Virgillito --- js/components/SliderBase.js | 1 - js/controllers/elements/element-controller.js | 15 +- js/controllers/elements/shapes-controller.js | 5 +- js/controllers/presets-controller.js | 8 +- js/controllers/selection-controller.js | 147 ++++---------- js/helper-classes/3D/draw-utils.js | 79 ++++---- js/helper-classes/3D/snap-manager.js | 16 +- js/lib/drawing/world.js | 13 +- js/lib/nj-base.js | 13 -- js/mediators/drag-drop-mediator.js | 8 +- js/mediators/element-mediator.js | 218 ++++++--------------- js/mediators/keyboard-mediator.js | 37 ++-- js/mediators/mouse-mediator.js | 4 +- js/ninja.reel/ninja.js | 4 +- .../CSSPanel/CSSPanelBase.reel/CSSPanelBase.js | 6 +- .../ComponentsPanelBase.js | 2 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 37 +++- js/panels/Timeline/Tween.reel/Tween.js | 2 +- .../animations-presets.reel/animations-presets.js | 4 +- .../presets/style-presets.reel/style-presets.js | 4 +- .../transitions-presets.js | 4 +- js/panels/properties.reel/properties.js | 16 +- .../sections/three-d-view.reel/three-d-view.js | 2 +- js/stage/layout.js | 18 +- js/stage/stage.reel/stage.js | 5 +- js/tools/BrushTool.js | 2 +- js/tools/LineTool.js | 111 ++++++----- js/tools/PenTool.js | 12 +- js/tools/Rotate3DToolBase.js | 4 +- js/tools/SelectionTool.js | 34 ++-- js/tools/ShapeTool.js | 37 ++-- js/tools/TagTool.js | 6 +- js/tools/TextTool.js | 4 +- js/tools/Translate3DToolBase.js | 2 +- js/tools/modifier-tool-base.js | 2 +- 35 files changed, 359 insertions(+), 523 deletions(-) delete mode 100755 js/lib/nj-base.js (limited to 'js') diff --git a/js/components/SliderBase.js b/js/components/SliderBase.js index 9f007456..8df868a2 100755 --- a/js/components/SliderBase.js +++ b/js/components/SliderBase.js @@ -268,7 +268,6 @@ var SliderBase = exports.SliderBase = Montage.create(Component, { _dispatchActionEvent: { value: function() { -// console.log("dispatching event", this._element.id, this._eventType, this._wasSetByCode); var actionEvent = document.createEvent("CustomEvent"); actionEvent.initEvent(this._eventType, true, true); actionEvent.type = this._eventType; diff --git a/js/controllers/elements/element-controller.js b/js/controllers/elements/element-controller.js index b35251ad..efb33292 100755 --- a/js/controllers/elements/element-controller.js +++ b/js/controllers/elements/element-controller.js @@ -5,22 +5,27 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot */ var Montage = require("montage/core/core").Montage, - NJComponent = require("js/lib/nj-base").NJComponent; + Component = require("montage/ui/component").Component; -var ElementController = exports.ElementController = Montage.create(NJComponent, { +exports.ElementController = Montage.create(Component, { addElement: { value: function(el, styles) { this.application.ninja.currentDocument.documentRoot.appendChild(el); - // Nested elements - - // TODO make sure the CSS is correct before nesting elements + // Nested elements - TODO make sure the CSS is correct before nesting elements // this.application.ninja.currentSelectedContainer.appendChild(el); - this.application.ninja.stylesController.setElementStyles(el, styles); + if(styles) { + this.application.ninja.stylesController.setElementStyles(el, styles); + } } }, + // Remove the element from the DOM and clear the GLWord. removeElement: { value: function(el) { + if(el.elementModel && el.elementModel.shapeModel && el.elementModel.shapeModel.GLWorld) { + el.elementModel.shapeModel.GLWorld.clearTree(); + } el.parentNode.removeChild(el); } }, diff --git a/js/controllers/elements/shapes-controller.js b/js/controllers/elements/shapes-controller.js index ef453bea..c9164e3e 100755 --- a/js/controllers/elements/shapes-controller.js +++ b/js/controllers/elements/shapes-controller.js @@ -72,8 +72,9 @@ exports.ShapesController = Montage.create(CanvasController, { canvas.setAttribute("data-RDGE-id", njModule.NJUtils.generateRandom()); canvas.width = el.width; canvas.height = el.height; - this.application.ninja.elementMediator.replaceElement(el, canvas); - NJevent("elementDeleted", el); + canvas.elementModel = el.elementModel; + this.application.ninja.currentDocument.documentRoot.replaceChild(canvas, el); + NJevent("elementsRemoved", el); el = canvas; this.toggleWebGlMode(el, value); el.elementModel.shapeModel.GLWorld.render(); diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index 7152ba93..0467f73c 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -59,16 +59,14 @@ exports.PresetsController = Montage.create(Component, { }, this); selection.forEach(function(element) { - var el = element._element; - if(useTransition) { - this.addTransition(el); + this.addTransition(element); } - el.classList.add(selectorBase); + element.classList.add(selectorBase); //// Keep track of elements with presets and don't add duplicates - this.setCachedPreset(el, presetData.id, rules); + this.setCachedPreset(element, presetData.id, rules); }, this); diff --git a/js/controllers/selection-controller.js b/js/controllers/selection-controller.js index 53cca029..dbb3f30d 100755 --- a/js/controllers/selection-controller.js +++ b/js/controllers/selection-controller.js @@ -6,8 +6,7 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component, - NJUtils = require("js/lib/NJUtils").NJUtils; + Component = require("montage/ui/component").Component; exports.SelectionController = Montage.create(Component, { @@ -45,13 +44,10 @@ exports.SelectionController = Montage.create(Component, { value: function() { this.eventManager.addEventListener("openDocument", this, false); this.eventManager.addEventListener("elementAdded", this, false); - this.eventManager.addEventListener("elementDeleted", this, false); + this.eventManager.addEventListener("elementsRemoved", this, false); this.eventManager.addEventListener("selectAll", this, false); - this.eventManager.addEventListener("deleteSelection", this, false); this.eventManager.addEventListener("switchDocument", this, false); this.eventManager.addEventListener("closeDocument", this, false); -// defaultEventManager.addEventListener( "undo", this, false); -// defaultEventManager.addEventListener( "redo", this, false); } }, @@ -67,35 +63,25 @@ exports.SelectionController = Montage.create(Component, { initWithDocument: { value: function(currentSelectionArray) { - this._selectedItems = []; this._isDocument = true; if(currentSelectionArray) { if(currentSelectionArray.length >= 1) { - this._selectedItems = currentSelectionArray; this._isDocument = false; - - this.application.ninja.selectedElements = currentSelectionArray; NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument}); - - - } } - // this._selectionContainer = this.application.ninja.currentSelectedContainer; - } }, handleSwitchDocument: { value: function() { if(this.application.ninja.documentController.activeDocument.currentView === "design"){ - this._selectedItems = this.application.ninja.selectedElements.slice(0); - this._isDocument = this._selectedItems.length === 0; + this._isDocument = this.application.ninja.selectedElements.length === 0; NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument} ); } } @@ -107,21 +93,12 @@ exports.SelectionController = Montage.create(Component, { } }, - handleElementDeleted: { + handleElementsRemoved: { value: function(event) { if(!this._isDocument) { - if(this.findSelectedElement(event.detail) !== -1) { - this.executeSelectElement(); - var element = event.detail; - if (element) { - if (element.elementModel) { - if (element.elementModel.shapeModel) { - if (element.elementModel.shapeModel.GLWorld) - element.elementModel.shapeModel.GLWorld.clearTree(); - } - } - } - } + this.application.ninja.selectedElements = []; + this._isDocument = true; + NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument}); } } }, @@ -142,23 +119,19 @@ exports.SelectionController = Montage.create(Component, { } }, - handleDeleteSelection: { - value: function(event) { - this.application.ninja.selectedElements = []; - this._isDocument = true; - NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument}); - } - }, - /** * Select Element. This function will not check that element, it will simply add it to the selection array. */ executeSelectElement: { - value: function(item) { + value: function(element) { this.application.ninja.selectedElements = []; - if(item) { - this.application.ninja.selectedElements.push({_element: item, uuid: item.uuid}); + if(element) { + if(Array.isArray(element)) { + this.application.ninja.selectedElements = Array.prototype.slice.call(element, 0); + } else { + this.application.ninja.selectedElements.push(element); + } this._isDocument = false; } else { this._isDocument = true; @@ -171,23 +144,20 @@ exports.SelectionController = Montage.create(Component, { }, selectElement: { - value: function(item) { + value: function(element) { - if(this.findSelectedElement(item) === -1) { + if(this.findSelectedElement(element) === -1) { - if(this.application.ninja.currentDocument.inExclusion(item) !== -1){ + if(this.application.ninja.currentDocument.inExclusion(element) !== -1){ if(this.isDocument) return; // If the stage is already selected do nothing. - this.executeSelectElement(); // Else execute selection with no item + this.executeSelectElement(); // Else execute selection with no element } else { - -// if(item.parentNode.id === "UserContent") { - if(item.parentNode.uuid === this.selectionContainer.uuid) { - this.executeSelectElement(item); + if(element.parentNode.uuid === this.selectionContainer.uuid) { + this.executeSelectElement(element); } else { - var outerElement = item.parentNode; + var outerElement = element.parentNode; while(outerElement.parentNode && outerElement.parentNode.uuid !== this.selectionContainer.uuid) { - //while(outerElement.parentNode && outerElement.parentNode.id !== "UserContent") { // If element is higher up than current container then return if(outerElement.id === "UserContent") return; // else keep going up the chain @@ -202,13 +172,13 @@ exports.SelectionController = Montage.create(Component, { }, selectElements: { - value: function(items) { - if(items && items.length > 0) { + value: function(elements) { + if(elements && elements.length > 0) { var that = this; this.application.ninja.selectedElements = []; - items.forEach(function(item) { - that.application.ninja.selectedElements.push({_element: item, uuid: item.uuid}); + elements.forEach(function(element) { + that.application.ninja.selectedElements.push(element); that._isDocument = false; }); @@ -218,22 +188,22 @@ exports.SelectionController = Montage.create(Component, { }, shiftSelectElement: { - value: function(item) { - if(this.application.ninja.currentDocument.inExclusion(item) !== -1) return; + value: function(element) { + if(this.application.ninja.currentDocument.inExclusion(element) !== -1) return; - (this.findSelectedElement(item) !== -1 ) ? this.removeElement(item) : this.insertElement(item); + (this.findSelectedElement(element) !== -1 ) ? this.removeElement(element) : this.insertElement(element); } }, insertElement: { - value: function(item) { - if(item) { + value: function(element) { + if(element) { if(this._isDocument) { this.application.ninja.selectedElements = []; this._isDocument = false; } - this.application.ninja.selectedElements.push({_element: item, uuid: item.uuid}); + this.application.ninja.selectedElements.push(element); NJevent("selectionChange", {"elements": this.application.ninja.selectedElements, "isDocument": this._isDocument} ); } @@ -264,53 +234,8 @@ exports.SelectionController = Montage.create(Component, { } }, - - - - - handleUndo: { - value: function(event) { - this._applySelectionAfterUndoRedo(event.detail); - } - }, - - handleRedo: { - value: function(event) { - this._applySelectionAfterUndoRedo(event.detail); - } - }, - - _applySelectionAfterUndoRedo: { - value: function(items) { - if(items) { - if(items instanceof Array) { - if(items.length > 1) - { - this.clearSelection(); - this.setMultipleObjects(items); - documentControllerModule.DocumentController.DispatchElementChangedEvent(items); - } - else if(this._selectedItems.length === 0 || this.findSelectedElement(items) === -1) { - this.setSingleSelection(items[0]); - documentControllerModule.DocumentController.DispatchElementChangedEvent(items[0]); - } - } else { - if(this._selectedItems.length === 0 || this.findSelectedElement(items) === -1) { - this.setSingleSelection(items); - //documentControllerModule.DocumentController.DispatchElementChangedEvent([items]); - } - } - - } else { - this.clearSelection(); - } - } - }, - - isObjectSelected: - { - value: function( elt ) - { + isObjectSelected: { + value: function( elt ) { return this.findSelectedElement(elt) > -1; } }, @@ -323,6 +248,9 @@ exports.SelectionController = Montage.create(Component, { */ findSelectedElement: { value: function(item) { + // TODO do the loop check in the select element and only use the index here + // return this.application.ninja.selectedElements.indexOf(item); + var itemUUID; for(var i=0, uuid; this.application.ninja.selectedElements[i];i++) { @@ -345,9 +273,6 @@ exports.SelectionController = Montage.create(Component, { } return -1; - - // TODO: Not a true object because of the _element. - //return this.application.ninja.selectedElements.indexOf(item); } } diff --git a/js/helper-classes/3D/draw-utils.js b/js/helper-classes/3D/draw-utils.js index d6334e6c..c7c1c08d 100755 --- a/js/helper-classes/3D/draw-utils.js +++ b/js/helper-classes/3D/draw-utils.js @@ -109,8 +109,7 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { this._gridOrigin = [0,0]; // 2D plane space point this.eventManager.addEventListener("elementAdded", this, false); - this.eventManager.addEventListener("elementDeleted", this, false); - this.eventManager.addEventListener("deleteSelection", this, false); + this.eventManager.addEventListener("elementsRemoved", this, false); this.eventManager.addEventListener("elementChange", this, false); this.eventManager.addEventListener("closeDocument", this, false); } @@ -147,38 +146,47 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { handleElementAdded: { value: function(event) { - this.addElement(event.detail); + var elements = event.detail; + + if(Array.isArray(elements)) { + elements.forEach(function(element) { + this.addElement(element); + }, this); + } else { + this.addElement(elements); + } + this.drawWorkingPlane(); } }, - handleElementDeleted: { + handleElementsRemoved: { value: function(event) { - this.removeElement(event.detail); - } - }, + var elements = event.detail; + + if(Array.isArray(elements)) { + elements = Array.prototype.slice.call(elements, 0); + elements.forEach(function(element) { + this.removeElement(element); + }, this); + } else { + this.removeElement(elements._element || elements); + } - handleDeleteSelection: { - value: function(event) { this.drawWorkingPlane(); } }, _shouldUpdatePlanes: { value: function(props) { - if(!props) - { + if(!props) { return false; - } - else if (typeof props === "string") - { + } else if (typeof props === "string") { return (this._updatePlaneProps.indexOf(props) !== -1); } - for (var p in props) - { - if(this._updatePlaneProps.indexOf(p) !== -1) - { + for (var p in props) { + if(this._updatePlaneProps.indexOf(p) !== -1) { return true; } } @@ -199,15 +207,12 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { { var len = els.length, i = 0, - item, - el; + item; for(i=0; i < len; i++) { - item = els[i]; - el = item._element || item; - if(el.elementModel.props3D.elementPlane) + if(els[i].elementModel.props3D.elementPlane) { - el.elementModel.props3D.elementPlane.init(); + els[i].elementModel.props3D.elementPlane.init(); } } @@ -222,17 +227,12 @@ var DrawUtils = exports.DrawUtils = Montage.create(Component, { // Methods /////////////////////////////////////////////////////////////////////// - addElement: - { - value: function( elt ) - { + addElement: { + value: function( elt ) { // check if we already know about this object var n = this._eltArray.length; - for (var i=0; i -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. - */ - -//nj-base: Contains base class definitions to use as Ninja building blocks. -var Montage = require("montage/core/core").Montage, - Component = require("montage/ui/component").Component; - -exports.NJComponent = Montage.create( Component, { - -}); \ No newline at end of file diff --git a/js/mediators/drag-drop-mediator.js b/js/mediators/drag-drop-mediator.js index 8663b06e..9d1b69a9 100755 --- a/js/mediators/drag-drop-mediator.js +++ b/js/mediators/drag-drop-mediator.js @@ -111,6 +111,7 @@ exports.DragDropMediator = Montage.create(Component, { fileName = tempName; } if (save && save.success && save.status === 201) { + var self = this; // if (e.currentTarget.fileType.indexOf('svg') !== -1) { element = NJUtils.makeNJElement('embed', 'SVG', 'block');//TODO: Verify this is proper @@ -121,9 +122,10 @@ exports.DragDropMediator = Montage.create(Component, { element.src = url+'/'+fileName; } //TODO: Remove temp fix for elements to redraw on drop + element.onload = function () { - NJevent("elementAdding", {el: element, data: rules}); - } + self.application.ninja.elementMediator.addElements(element, rules); + }; // rules = { 'position': 'absolute', @@ -133,7 +135,7 @@ exports.DragDropMediator = Montage.create(Component, { '-webkit-transform' : 'perspective(1400) matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)' }; // - NJevent("elementAdding", {el: element, data: rules}); + self.application.ninja.elementMediator.addElements(element, rules); } else { //TODO: HANDLE ERROR ON SAVING FILE TO BE ADDED AS ELEMENT } diff --git a/js/mediators/element-mediator.js b/js/mediators/element-mediator.js index d62fa1f8..09f2aeed 100755 --- a/js/mediators/element-mediator.js +++ b/js/mediators/element-mediator.js @@ -5,147 +5,82 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot */ var Montage = require("montage/core/core").Montage, - NJComponent = require("js/lib/nj-base").NJComponent; + Component = require("montage/ui/component").Component; var ElementController = require("js/controllers/elements/element-controller").ElementController, Command = require("js/controllers/undo-controller").Command, - GroupCommand = require("js/controllers/undo-controller").GroupCommand, NJUtils = require("js/lib/NJUtils").NJUtils; -exports.ElementMediator = Montage.create(NJComponent, { +exports.ElementMediator = Montage.create(Component, { - deleteDelegate: { - value: null - }, - deserializedFromTemplate: { - value: function () { - this.eventManager.addEventListener("elementAdding", this, false); - this.eventManager.addEventListener("deleting", this, false); - } + addDelegate: { + enumerable: false, + value: null }, - // TODO use the specific controller to be able to subclass the functionality - handleElementAdding: { - value: function(event) { - this.addElement(event.detail.el, event.detail.data); - } + deleteDelegate: { + enumerable: false, + value: null }, - handleDeleting: { - value: function(event) { - if(this.deleteDelegate && (typeof this.deleteDelegate.handleDelete === 'function')) { - this.deleteDelegate.handleDelete(); + addElements: { + value: function(elements, rules, notify) { + if(Array.isArray(elements)) { + elements.forEach(function(element) { + element = element; + ElementController.addElement(element, rules); + }); } else { - // Add the Undo/Redo - var els = [], - len = this.application.ninja.selectedElements.length; + ElementController.addElement(elements, rules); - if(len) { - for(var i = 0; i= 0; i--) { - el = items[i]._element || items[i]; - this._removeElement(el); - } + var undoLabel = "add element"; - NJevent( "deleteSelection", items ); - } - } - }, + document.application.undoManager.add(undoLabel, this.addElements, this, elements, null, notify); - _removeElement: { - value: function(el, rules) { - ElementController.removeElement(el, rules); this.application.ninja.documentController.activeDocument.needsSave = true; - NJevent("elementDeleted", el); - } - }, - - replaceElement: { - value: function(el, el2) { - el2.elementModel = el.elementModel; - this.application.ninja.currentDocument.documentRoot.replaceChild(el2, el); - } - }, - getNJProperty: { - value: function(el, p) { - if(el.elementModel) { - if(el.elementModel.hasOwnProperty(p)) { - return el.elementModel[p]; - } else { - console.log("Element Model does not have ", p); - } - } else { - console.log("Element has no Model -- Create one"); - } + NJevent("elementsRemoved", elements); } }, @@ -204,9 +139,7 @@ exports.ElementMediator = Montage.create(NJComponent, { } else { // Calculate currentValue if not found for each element if(currentValue === null) { - console.log("Here"); - var item = el._element || el; - currentValue = item.getAttribute(att); + currentValue = el.getAttribute(att); } var command = Montage.create(Command, { @@ -245,9 +178,7 @@ exports.ElementMediator = Montage.create(NJComponent, { _setAttribute: { value: function(el, att, value, eventType, source) { - var item = el._element || el; - - item.elementModel.controller["setAttribute"](item, att, value); + el.elementModel.controller["setAttribute"](el, att, value); NJevent("attribute" + eventType, {type : "setAttribute", source: source, data: {"els": el, "prop": att, "value": value}, redraw: null}); } @@ -274,7 +205,7 @@ exports.ElementMediator = Montage.create(NJComponent, { if(!currentValue) { var that = this; currentValue = els.map(function(item) { - return that.getProperty((item._element || item), p); + return that.getProperty((item), p); }); } @@ -317,8 +248,7 @@ exports.ElementMediator = Montage.create(NJComponent, { var el; for(var i=0, item; item = els[i]; i++) { - el = item._element || item; - el.elementModel.controller["setProperty"](el, p, value[i]); + item.elementModel.controller["setProperty"](item, p, value[i]); } NJevent("element" + eventType, {type : "setProperty", source: source, data: {"els": els, "prop": p, "value": value}, redraw: null}); @@ -373,11 +303,10 @@ exports.ElementMediator = Montage.create(NJComponent, { _setProperties: { value: function(els, props, eventType, source) { - var el, propsArray; + var propsArray; for(var i=0, item; item = els[i]; i++) { - el = item._element || item; - el.elementModel.controller["setProperties"](el, props, i); + item.elementModel.controller["setProperties"](item, props, i); } NJevent("element" + eventType, {type : "setProperties", source: source, data: {"els": els, "prop": props, "value": props}, redraw: null}); @@ -440,16 +369,14 @@ exports.ElementMediator = Montage.create(NJComponent, { _set3DProperties: { value: function(els, props, eventType, source) { - var el, - update3DModel = false; + var update3DModel = false; - if(eventType === "Change") - { + if(eventType === "Change") { update3DModel = true; } + for(var i=0, item; item = els[i]; i++) { - el = item._element || item; - el.elementModel.controller["set3DProperties"](el, props, i, update3DModel); + item.elementModel.controller["set3DProperties"](item, props, i, update3DModel); } NJevent("element" + eventType, {type : "set3DProperties", source: source, data: {"els": els, "prop": "matrix", "value": props}, redraw: null}); @@ -488,7 +415,7 @@ exports.ElementMediator = Montage.create(NJComponent, { if(!currentValue) { var that = this; currentValue = els.map(function(item) { - return that.getColor(item._element, isFill); + return that.getColor(item, isFill); }); } @@ -528,19 +455,14 @@ exports.ElementMediator = Montage.create(NJComponent, { _setColor: { value: function(els, value, isFill, eventType, source) { - var el; - for(var i=0, item; item = els[i]; i++) { - el = item._element || item; - el.elementModel.controller["setColor"](el, value, isFill); + item.elementModel.controller["setColor"](item, value, isFill); } NJevent("element" + eventType, {type : "setColor", source: source, data: {"els": els, "prop": "color", "value": value, "isFill": isFill}, redraw: null}); } }, - - getStroke: { value: function(el) { if(!el.elementModel) { @@ -570,7 +492,7 @@ exports.ElementMediator = Montage.create(NJComponent, { if(!currentValue) { var that = this; currentValue = els.map(function(item) { - return that.getStroke(item._element); + return that.getStroke(item); }); } @@ -609,11 +531,8 @@ exports.ElementMediator = Montage.create(NJComponent, { _setStroke: { value: function(els, value, eventType, source) { - var el; - for(var i=0, item; item = els[i]; i++) { - el = item._element || item; - el.elementModel.controller["setStroke"](el, value); + item.elementModel.controller["setStroke"](item, value); } NJevent("element" + eventType, {type : "setStroke", source: source, data: {"els": els, "prop": "stroke", "value": value}, redraw: null}); @@ -663,8 +582,7 @@ exports.ElementMediator = Montage.create(NJComponent, { }, getPerspectiveMode: { - value: function(el) - { + value: function(el) { return this.getProperty(el, "-webkit-transform-style"); } }, @@ -674,12 +592,9 @@ exports.ElementMediator = Montage.create(NJComponent, { var dist = el.elementModel.controller["getPerspectiveDist"](el); el.elementModel.controller["set3DProperties"](el, [{mat:mat, dist:dist}], 0, !isChanging); - if(isChanging) - { + if(isChanging) { NJevent("elementChanging", {type : "setMatrix", source: null, data: {"els": [el], "prop": "matrix", "value": mat}, redraw: null}); - } - else - { + } else { NJevent("elementChange", {type : "setMatrix", source: null, data: {"els": [el], "prop": "matrix", "value": mat}, redraw: null}); } } @@ -688,14 +603,7 @@ exports.ElementMediator = Montage.create(NJComponent, { has3D: { value: function(el) { var str = this.getProperty(el, "-webkit-transform"); - if (str && str.length) - { - return true; - } - else - { - return false; - } + return str && str.length; } } diff --git a/js/mediators/keyboard-mediator.js b/js/mediators/keyboard-mediator.js index fc0d0f6a..82596693 100755 --- a/js/mediators/keyboard-mediator.js +++ b/js/mediators/keyboard-mediator.js @@ -99,12 +99,11 @@ exports.KeyboardMediator = Montage.create(Component, { evt.preventDefault(); } - // Check DELETE OR BACKSPACE + // DELETE or BACKSPACE event handler - Removes the current selected elements from the DOM if((evt.keyCode == Keyboard.BACKSPACE) || (evt.keyCode == Keyboard.DELETE)) { evt.stopImmediatePropagation(); evt.preventDefault(); - NJevent("deleting"); - return; + return this.application.ninja.elementMediator.removeElements(document.application.ninja.selectedElements); } @@ -197,9 +196,7 @@ exports.KeyboardMediator = Montage.create(Component, { } if(evt.keyCode === Keyboard.ESCAPE){//ESC key - //console.log("ESC key pressed"); if(this.application.ninja.toolsData) this.application.ninja.toolsData.selectedToolInstance.HandleEscape(evt); - //menuViewManagerModule.MenuViewManager.closeMenu("mainMenuBar"); } @@ -214,37 +211,27 @@ exports.KeyboardMediator = Montage.create(Component, { // Check if cmd+z/ctrl+z for Undo (Windows/Mac) if ((evt.keyCode == Keyboard.Z) && (evt.ctrlKey || evt.metaKey) && !evt.shiftKey) { - NJevent("executeUndo"); - //menuViewManagerModule.MenuViewManager.closeMenu("mainMenuBar"); - return; - } - - // Check if cmd+s/ctrl+s for Save (Windows/Mac) - if ((evt.keyCode == Keyboard.S) && (evt.ctrlKey || evt.metaKey) && !evt.shiftKey) { - try{ - NJevent("executeSave"); - } - catch(e){ - console.warn("Unable to save"); - console.log(e.stack); - } - evt.preventDefault(); + document.application.undoManager.undo(); return; } // Check if cmd+shift+z for Redo (Mac) if ((evt.keyCode == Keyboard.Z) && evt.metaKey && evt.shiftKey) { - NJevent("executeRedo"); - //menuViewManagerModule.MenuViewManager.closeMenu("mainMenuBar"); + document.application.undoManager.redo(); return; } - // Check if ctrl+y for Redo (Windows) + // Check if ctrl+y for Redo (Windows) if ((evt.keyCode == Keyboard.Y) && evt.ctrlKey) { - NJevent("executeRedo"); - //menuViewManagerModule.MenuViewManager.closeMenu("mainMenuBar"); + document.application.undoManager.redo(); return; } + + // Check if cmd+s/ctrl+s for Save (Windows/Mac) + if ((evt.keyCode == Keyboard.S) && (evt.ctrlKey || evt.metaKey) && !evt.shiftKey) { + NJevent("executeSave"); + evt.preventDefault(); + } } }, diff --git a/js/mediators/mouse-mediator.js b/js/mediators/mouse-mediator.js index cef6c6c4..4d1fb62a 100755 --- a/js/mediators/mouse-mediator.js +++ b/js/mediators/mouse-mediator.js @@ -5,9 +5,9 @@ No rights, expressed or implied, whatsoever to this software are provided by Mot */ var Montage = require("montage/core/core").Montage, - NJComponent = require("js/lib/nj-base").NJComponent; + Component = require("montage/ui/component").Component; -exports.MouseMediator = Montage.create( NJComponent, { +exports.MouseMediator = Montage.create(Component, { hasTemplate: { value: false }, diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index ca094936..9cbbc9b9 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -6,6 +6,7 @@ var Montage = require("montage/core/core").Montage, Component = require("montage/ui/component").Component, + UndoManager = require("montage/core/undo-manager").UndoManager, AppData = require("js/data/appdata").AppData; var matrix = require("js/lib/math/matrix"); @@ -121,7 +122,7 @@ exports.Ninja = Montage.create(Component, { templateDidLoad: { value: function() { this.ninjaVersion = window.ninjaVersion.ninja.version; - this.eventManager.addEventListener( "preloadFinish", this, false); + this.undoManager = document.application.undoManager = UndoManager.create(); } }, @@ -140,7 +141,6 @@ exports.Ninja = Montage.create(Component, { window.addEventListener("resize", this, false); -// this.eventManager.addEventListener( "appLoading", this, false); // Don't need this anymore this.eventManager.addEventListener( "selectTool", this, false); this.eventManager.addEventListener( "selectSubTool", this, false); this.eventManager.addEventListener( "onOpenDocument", this, false); diff --git a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js index ecf0f9cd..2a3fc068 100755 --- a/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js +++ b/js/panels/CSSPanel/CSSPanelBase.reel/CSSPanelBase.js @@ -520,9 +520,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre this.inComputedStyleMode = false; // No computed styles mode for multiple items ///// if multiple items are selected, then show common rules - var elements = items.map(function(item) { - return item._element; - }); + var elements = Array.prototype.slice.call(this.application.ninja.selectedElements, 0); ///// show toolbar, but hide computed style button this.sections.styles.toolbar.style.display = ''; @@ -538,7 +536,7 @@ var CSSPanel = exports.CSSPanelBase = (require("montage/core/core").Montage).cre this.sections.styles.statusMsg.classList.add('nj-css-panel-hide'); this.sections.styles.showComputedEl.classList.remove('nj-css-panel-hide');// .style.display = ''; this.sections.styles.toolbar.style.display = ''; - this.showStylesForElement(items[0]._element, null); + this.showStylesForElement(items[0], null); } else { this.sections.styles.statusMsg.classList.add('nj-css-panel-hide'); this._inMultiSelectMode = false; diff --git a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js index 3505393c..e990551b 100755 --- a/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js +++ b/js/panels/Components/ComponentsPanelBase.reel/ComponentsPanelBase.js @@ -302,7 +302,7 @@ var ComponentsPanelBase = exports.ComponentsPanelBase = Montage.create(Component that.application.ninja.currentDocument.setComponentInstance(instance, element); - NJevent("elementAdding", {"el": element, "data":styles}); + that.application.ninja.elementMediator.addElements(element, styles); }); } diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a1e320c4..033d0f79 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -318,7 +318,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { "newLayer", "deleteLayer", "elementAdded", - "elementDeleted", + "elementsRemoved", "selectionChange"], i, arrEventsLength = arrEvents.length; @@ -826,7 +826,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { for(var index=0;index= 0 ;length--) { - if (this.currentLayerSelected.layerData.elementsList[length] === this.deleteElement) { - this.currentLayerSelected.layerData.elementsList.splice(length, 1); - break; + + // Handling deletion of multiple elements. + // TODO: Optimize this double array loop + if(Array.isArray(this.deleteElement)) { + this.deleteElement = Array.prototype.slice.call(this.deleteElement, 0); + lengthVal = this.currentLayerSelected.layerData.elementsList.length - 1; + this.deleteElement.forEach(function(element) { + for (length = lengthVal ;length >= 0 ;length--) { + if (this.currentLayerSelected.layerData.elementsList[length] === element) { + this.currentLayerSelected.layerData.elementsList.splice(length, 1); + break; + } + //length--; + } + }, this); + } else { + lengthVal = this.currentLayerSelected.layerData.elementsList.length - 1; + for (length = lengthVal ;length >= 0 ;length--) { + if (this.currentLayerSelected.layerData.elementsList[length] === this.deleteElement) { + this.currentLayerSelected.layerData.elementsList.splice(length, 1); + break; + } + //length--; } - //length--; } + + } }, diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 2b308d9a..7339139f 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -162,7 +162,7 @@ var Tween = exports.Tween = Montage.create(Component, { if (event.detail.source && event.detail.source !== "tween") { // check for correct element selection - if (this.application.ninja.selectedElements[0]._element != this.parentComponent.parentComponent.animatedElement) { + if (this.application.ninja.selectedElements[0]!= this.parentComponent.parentComponent.animatedElement) { console.log("Wrong element selected for this keyframe track"); } else { // update tweenedProperties and tell containing track to update CSS rule diff --git a/js/panels/presets/animations-presets.reel/animations-presets.js b/js/panels/presets/animations-presets.reel/animations-presets.js index 6a16da54..92437cfd 100644 --- a/js/panels/presets/animations-presets.reel/animations-presets.js +++ b/js/panels/presets/animations-presets.reel/animations-presets.js @@ -23,6 +23,6 @@ exports.AnimationsLibrary = Montage.create(Component, { handleNodeActivation: { value: function(presetData) { this.application.ninja.presetsController.applyPreset(presetData); - } - } + } + } }); diff --git a/js/panels/presets/style-presets.reel/style-presets.js b/js/panels/presets/style-presets.reel/style-presets.js index 6a28e069..5f10bbe3 100644 --- a/js/panels/presets/style-presets.reel/style-presets.js +++ b/js/panels/presets/style-presets.reel/style-presets.js @@ -23,12 +23,12 @@ exports.StylesLibrary = Montage.create(Component, { handleNodeActivation: { value: function(presetData) { this.application.ninja.presetsController.applyPreset(presetData, true); - } + } }, handleDragEnd : { value: function(sourceObject) { console.log(sourceObject); } - } + } }); diff --git a/js/panels/presets/transitions-presets.reel/transitions-presets.js b/js/panels/presets/transitions-presets.reel/transitions-presets.js index ace38dbb..4ca2a662 100644 --- a/js/panels/presets/transitions-presets.reel/transitions-presets.js +++ b/js/panels/presets/transitions-presets.reel/transitions-presets.js @@ -23,6 +23,6 @@ exports.TransitionsLibrary = Montage.create(Component, { handleNodeActivation: { value: function(presetData) { this.application.ninja.presetsController.applyPreset(presetData); - } - } + } + } }); diff --git a/js/panels/properties.reel/properties.js b/js/panels/properties.reel/properties.js index 40e9b86a..d5acd503 100755 --- a/js/panels/properties.reel/properties.js +++ b/js/panels/properties.reel/properties.js @@ -87,7 +87,7 @@ exports.Properties = Montage.create(Component, { this.displayStageProperties(); } else { if(this.application.ninja.selectedElements.length === 1) { - this.displayElementProperties(this.application.ninja.selectedElements[0]._element); + this.displayElementProperties(this.application.ninja.selectedElements[0]); } else { this.displayGroupProperties(this.application.ninja.selectedElements); } @@ -120,7 +120,6 @@ exports.Properties = Montage.create(Component, { } 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"); - console.log(this.application.ninja.selectedElements[0]._element.className); } else { ElementsMediator.setAttribute(this.application.ninja.currentDocument.documentRoot, "class", this.elementClass.value, "Change", "pi", this.application.ninja.currentDocument.documentRoot.elementModel.elementClass); } @@ -138,8 +137,8 @@ exports.Properties = Montage.create(Component, { handleElementChanging: { value: function(event) { -// this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "left")); -// this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0]._element, "top")); +// this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0], "left")); +// this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(this.application.ninja.selectedElements[0], "top")); } }, @@ -148,23 +147,22 @@ exports.Properties = Montage.create(Component, { // console.log("Element Change PI ", event.detail.source); // If the event comes from the pi don't need to update if(event.detail.source && event.detail.source !== "pi") { // TODO - This should only update the properties that were changed. - var el = this.application.ninja.selectedElements[0]._element || this.application.ninja.selectedElements[0]; + var el = this.application.ninja.selectedElements[0]; this.positionSize.leftPosition = parseFloat(ElementsMediator.getProperty(el, "left")); this.positionSize.topPosition = parseFloat(ElementsMediator.getProperty(el, "top")); this.positionSize.heightSize = parseFloat(ElementsMediator.getProperty(el, "height")); this.positionSize.widthSize = parseFloat(ElementsMediator.getProperty(el, "width")); - if(this.threeD.inGlobalMode) - { + if(this.threeD.inGlobalMode) { this.threeD.x3D = ElementsMediator.get3DProperty(el, "x3D"); this.threeD.y3D = ElementsMediator.get3DProperty(el, "y3D"); this.threeD.z3D = ElementsMediator.get3DProperty(el, "z3D"); this.threeD.xAngle = ElementsMediator.get3DProperty(el, "xAngle"); this.threeD.yAngle = ElementsMediator.get3DProperty(el, "yAngle"); this.threeD.zAngle = ElementsMediator.get3DProperty(el, "zAngle"); + } } } - } }, handleSelectionChange: { @@ -173,7 +171,7 @@ exports.Properties = Montage.create(Component, { this.displayStageProperties(); } else { if(this.application.ninja.selectedElements.length === 1) { - this.displayElementProperties(this.application.ninja.selectedElements[0]._element); + this.displayElementProperties(this.application.ninja.selectedElements[0]); } else { this.displayGroupProperties(this.application.ninja.selectedElements); } diff --git a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js index 35591afa..f72d1ff6 100755 --- a/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js +++ b/js/panels/properties.reel/sections/three-d-view.reel/three-d-view.js @@ -231,7 +231,7 @@ exports.ThreeD = Montage.create(Component, { _getSelectedItem: { value: function(els) { if(els.length) { - return els[0]._element || els[0]; + return els[0]; } else { return this.boundObject.application.ninja.currentDocument.documentRoot; } diff --git a/js/stage/layout.js b/js/stage/layout.js index 6be2df1d..ae9260fc 100755 --- a/js/stage/layout.js +++ b/js/stage/layout.js @@ -53,12 +53,8 @@ exports.Layout = Montage.create(Component, { this.ctx.lineWidth = this.ctxLineWidth; this.ctx.fillStyle = this.drawFillColor; -// this.eventManager.addEventListener("elementAdded", this, false); - this.eventManager.addEventListener("elementDeleted", this, false); - this.eventManager.addEventListener("selectionChange", this, false); - - this.eventManager.addEventListener("deleteSelection", this, false); + this.eventManager.addEventListener("elementsRemoved", this, false); } }, @@ -76,7 +72,7 @@ exports.Layout = Montage.create(Component, { }, // Redraw stage only once after all deletion is completed - handleDeleteSelection: { + handleElementsRemoved: { value: function(event) { this.draw(); this.draw3DInfo(false); @@ -110,10 +106,8 @@ exports.Layout = Montage.create(Component, { // Draw the non selected elements if(!event.detail.isDocument) { - var tmp = event.detail.elements.map(function(element){ return element._element}); - this.elementsToDraw = this.domTree.filter(function(value) { - return (tmp.indexOf(value) === -1); + return (event.detail.elements.indexOf(value) === -1); }); } else { this.elementsToDraw = Array.prototype.slice.call(this.domTree, 0); @@ -345,7 +339,11 @@ exports.Layout = Montage.create(Component, { _elementName: { value: function(item) { - return this.application.ninja.elementMediator.getNJProperty(item, "selection"); + if(item.elementModel && item.elementModel.hasOwnProperty("selection")) { + return item.elementModel['selection']; + } else { + return ""; + } } } diff --git a/js/stage/stage.reel/stage.js b/js/stage/stage.reel/stage.js index 00b72490..3500b6a3 100755 --- a/js/stage/stage.reel/stage.js +++ b/js/stage/stage.reel/stage.js @@ -560,8 +560,7 @@ exports.Stage = Montage.create(Component, { elt = this.application.ninja.currentDocument.GetElementFromPoint(point.x + this.scrollLeft,point.y + this.scrollTop); // workaround Chrome 3d bug - if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(elt) !== -1) - { + if(this.application.ninja.toolsData.selectedToolInstance._canSnap && this.application.ninja.currentDocument.inExclusion(elt) !== -1) { return this._getElementUsingSnapping(point); } else { return elt; @@ -605,7 +604,7 @@ exports.Stage = Montage.create(Component, { var selArray = new Array(); for(var i = 0; this.application.ninja.selectedElements[i];i++) { - var curElement = this.application.ninja.selectedElements[i]._element; + var curElement = this.application.ninja.selectedElements[i]; // Add element to array that is used to calculate 3d-bounding box of all elements selArray.push(