From 01211be8e96360dcccdc421e5cb19c7708f5dfdd Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Wed, 28 Mar 2012 14:37:49 -0700 Subject: Bug #1073: Panels interact with hottest drag drop Signed-off-by: Armen Kesablyan --- js/panels/drag-drop-composer.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js') diff --git a/js/panels/drag-drop-composer.js b/js/panels/drag-drop-composer.js index b36c8334..4791bd6d 100644 --- a/js/panels/drag-drop-composer.js +++ b/js/panels/drag-drop-composer.js @@ -91,7 +91,9 @@ exports.DragDropComposer = Montage.create(Composer, { e.stopImmediatePropagation(); if (!this._dragover) { this._dragover = true; - this.component.element.classList.add("dragOver"); + if (this.component.application.ninja.componentBeingDragged) { + this.component.element.classList.add("dragOver"); + } } } }, -- cgit v1.2.3 From bff711520b7d21cfffe07c7a14fe8870243ba796 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 29 Mar 2012 14:06:22 -0700 Subject: Resizing Bugs Signed-off-by: Armen Kesablyan --- js/ninja.reel/ninja.js | 53 +++++++++++++++++++++++++------------------------- js/panels/Splitter.js | 13 +++++++++++-- 2 files changed, 37 insertions(+), 29 deletions(-) (limited to 'js') diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index ca094936..c3e00911 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -24,7 +24,7 @@ exports.Ninja = Montage.create(Component, { }, _isResizing: { - value: false + value: null }, _resizedHeight : { value: 0 @@ -40,7 +40,6 @@ exports.Ninja = Montage.create(Component, { set: function(val) { if(this._height != val) { this._height = val; - this.needsDraw = true; } } @@ -60,7 +59,6 @@ exports.Ninja = Montage.create(Component, { set: function(val) { if(this._width != val) { this._width = val; - this.needsDraw = true; } } @@ -71,6 +69,8 @@ exports.Ninja = Montage.create(Component, { this.isResizing = true; this.height = parseInt(this.timeline.element.offsetHeight); this.width = parseInt(this.rightPanelContainer.offsetWidth); + this.rightPanelContainer.classList.add("disableTransition"); + this.timeline.element.classList.add("disableTransition"); this.needsDraw = true; } }, @@ -79,7 +79,6 @@ exports.Ninja = Montage.create(Component, { value:function(e) { this._resizedHeight = e._event.dY; this._resizedWidth = e._event.dX; - console.log("resizing"); this.stage.resizeCanvases = true; this.needsDraw = true; } @@ -87,13 +86,17 @@ exports.Ninja = Montage.create(Component, { handleResizeEnd: { value: function(e) { - this.height -= this._resizedHeight; - this.width -= this._resizedWidth; +// this.height -= this._resizedHeight; +// this.width -= this._resizedWidth; this.stage.resizeCanvases = true; this._resizedHeight = 0; this._resizedWidth = 0; this.isResizing = false; this.needsDraw = true; + this.rightPanelContainer.classList.remove("disableTransition"); + this.timeline.element.classList.remove("disableTransition"); + this.height = this.timeline.element.offsetHeight; + this.width = this.rightPanelContainer.offsetWidth; } }, @@ -106,6 +109,7 @@ exports.Ninja = Montage.create(Component, { this.needsDraw = true; this.timelineSplitter.collapsed = false; this.panelSplitter.collapsed = false; + this.stage.resizeCanvases = true; } }, @@ -167,30 +171,28 @@ exports.Ninja = Montage.create(Component, { willDraw: { value: function() { - if (this.height === null) { - this.height = parseInt(this.timeline.element.offsetHeight); - } - if (this.width === null) { - this.width = parseInt(this.rightPanelContainer.offsetWidth); - } + } }, draw: { value: function() { - if (this.height - this._resizedHeight < 46) { - this.timelineSplitter.collapsed = true; - } else { - this.timelineSplitter.collapsed = false; - } - if (this.width - this._resizedWidth < 30) { - this.panelSplitter.collapsed = true; - } else { - this.panelSplitter.collapsed = false; + if(this.isResizing) { + if (this.height - this._resizedHeight < 46) { + this.timelineSplitter.collapsed = true; + } else { + this.timelineSplitter.collapsed = false; + } + this.timeline.element.style.height = (this.height - this._resizedHeight) + "px"; + + if (this.width - this._resizedWidth < 30) { + this.panelSplitter.collapsed = true; + } else { + this.panelSplitter.collapsed = false; + } + this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px"; } - this.timeline.element.style.height = (this.height - this._resizedHeight) + "px"; - this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px"; } }, @@ -200,10 +202,7 @@ exports.Ninja = Montage.create(Component, { didDraw: { value: function() { - if (!this.isResizing) { - this.height = this.timeline.element.offsetHeight; - this.width = this.rightPanelContainer.offsetWidth; - } + if(!this._didDraw) { if (!this.application.ninja.coreIoApi.ioServiceDetected) { var check = this.application.ninja.coreIoApi.cloudAvailable(); diff --git a/js/panels/Splitter.js b/js/panels/Splitter.js index 6791e0d5..ac45b4ba 100755 --- a/js/panels/Splitter.js +++ b/js/panels/Splitter.js @@ -94,7 +94,11 @@ exports.Splitter = Montage.create(Component, { handleClick : { value: function() { if (!this.disabled) { - this.panel.addEventListener("webkitTransitionEnd", this, false); + if(this.panel.element) { + this.panel.element.addEventListener("webkitTransitionEnd", this, false); + } else { + this.panel.addEventListener("webkitTransitionEnd", this, false); + } this.collapsed = !this.collapsed; this.needsDraw = true; } @@ -103,7 +107,12 @@ exports.Splitter = Montage.create(Component, { handleWebkitTransitionEnd: { value: function() { - this.panel.removeEventListener("webkitTransitionEnd", this, false); + if(this.panel.element) { + this.panel.element.removeEventListener("webkitTransitionEnd", this, false); + } else { + this.panel.removeEventListener("webkitTransitionEnd", this, false); + } + this.application.ninja.stage.resizeCanvases = true; } }, -- cgit v1.2.3 From e6299d0965d669cd296de1b2ffc1b30734ead43b Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Thu, 29 Mar 2012 15:58:36 -0700 Subject: Bug Fix: Height and width of panels not be kept Signed-off-by: Armen Kesablyan --- js/ninja.reel/ninja.js | 24 ++++++++++++++++++++---- 1 file changed, 20 insertions(+), 4 deletions(-) (limited to 'js') diff --git a/js/ninja.reel/ninja.js b/js/ninja.reel/ninja.js index c3e00911..068a44bc 100755 --- a/js/ninja.reel/ninja.js +++ b/js/ninja.reel/ninja.js @@ -35,11 +35,19 @@ exports.Ninja = Montage.create(Component, { height: { get: function() { + if(this._height === null) { + var storedData = this.application.localStorage.getItem("timelinePanel"); + if(storedData && storedData.value) { + this._height = storedData.value; + } + } return this._height; }, set: function(val) { if(this._height != val) { this._height = val; + this.application.localStorage.setItem("timelinePanel", {"version": this.version, "value": val}); + this.needsDraw = true; } } @@ -54,11 +62,19 @@ exports.Ninja = Montage.create(Component, { width: { get: function() { + if(this._width === null) { + var storedData = this.application.localStorage.getItem("rightPanelsContainer"); + if(storedData && storedData.value) { + this._width = storedData.value; + } + } return this._width; }, set: function(val) { if(this._width != val) { this._width = val; + this.application.localStorage.setItem("rightPanelsContainer", {"version": this.version, "value": val}); + this.needsDraw = true; } } @@ -106,10 +122,10 @@ exports.Ninja = Montage.create(Component, { this.height = 140; this._resizedHeight = 0; this._resizedWidth = 0; - this.needsDraw = true; this.timelineSplitter.collapsed = false; this.panelSplitter.collapsed = false; this.stage.resizeCanvases = true; + this.needsDraw = true; } }, @@ -183,16 +199,16 @@ exports.Ninja = Montage.create(Component, { } else { this.timelineSplitter.collapsed = false; } - this.timeline.element.style.height = (this.height - this._resizedHeight) + "px"; if (this.width - this._resizedWidth < 30) { this.panelSplitter.collapsed = true; } else { this.panelSplitter.collapsed = false; } - this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px"; - } + } + this.rightPanelContainer.style.width = (this.width - this._resizedWidth) + "px"; + this.timeline.element.style.height = (this.height - this._resizedHeight) + "px"; } }, -- cgit v1.2.3 From 7aefa059c79c9bef5c7a8a93cdfbd1ce55f69118 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Thu, 29 Mar 2012 16:28:34 -0700 Subject: Presets - Remove style transition when transition doesn't start. Also added temporary fix for aggregating animations (from timeline/presets) --- js/controllers/presets-controller.js | 76 +++++++++++++++++--------- js/panels/presets/default-animation-presets.js | 4 +- 2 files changed, 54 insertions(+), 26 deletions(-) (limited to 'js') diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index 7152ba93..e436023a 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -20,14 +20,39 @@ exports.PresetsController = Montage.create(Component, { addTransition: { value: function(element) { + var transitionDuration; + element.classList.add(this.transitionClass); element.addEventListener("webkitTransitionEnd", this, true); + + + //// TODO: replace this hack when webkit supports transitionStart event + transitionDuration = this.application.ninja.stylesController.getElementStyle(element, '-webkit-transition-duration', true); + element.njTimeout = window.setTimeout(function() { + this.captureWebkitTransitionEnd({ + 'target': element + }); + }.bind(this), this._getMilliseconds(transitionDuration) + 100); + } + }, + + _getMilliseconds : { + value: function(duration) { + if(duration.indexOf('ms') !== -1) { + return parseInt(duration); + } else { + return parseFloat(duration)*1000; + } } }, captureWebkitTransitionEnd : { value : function(e) { var el = e.target; + + //// TODO: replace this hack when webkit supports transitionStart event (see above) + window.clearTimeout(el.njTimeout); + el.classList.remove(this.transitionClass); el.removeEventListener("webkitTransitionEnd", this, true); } @@ -41,30 +66,25 @@ exports.PresetsController = Montage.create(Component, { var stylesController = this.application.ninja.stylesController, selectorBase = presetData.selectorBase, - rules = []; + rules = [], + animationNames = []; selectorBase = stylesController.generateClassName(selectorBase); - presetData.rules.forEach(function(rule, i) { - ///// Treat keyframed rules differently - if(rule.isKeyFrameRule) { - this.application.ninja.stylesController.addRule( - '@-webkit-keyframes ' + presetData.selectorBase, - this.stringifyKeys(rule.keys) - ); - } else { - var suffix = rule.selectorSuffix || ''; - rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); - } - }, this); - selection.forEach(function(element) { - var el = element._element; + var el = element._element, + animationName; if(useTransition) { this.addTransition(el); } + ///// TODO: remove when we find out what to do with competing animations + animationName = stylesController.getElementStyle(el, '-webkit-animation-name'); + if(animationName) { + animationNames.push(animationName); + } + el.classList.add(selectorBase); //// Keep track of elements with presets and don't add duplicates @@ -72,20 +92,26 @@ exports.PresetsController = Montage.create(Component, { }, this); - } - }, - - setCachedPreset : { - value: function(el, presetId, rules) { + presetData.rules.forEach(function(rule, i) { + ///// Treat keyframed rules differently + if(rule.isKeyFrameRule) { + this.application.ninja.stylesController.addRule( + '@-webkit-keyframes ' + presetData.selectorBase, + this.stringifyKeys(rule.keys) + ); + } else { + var suffix = rule.selectorSuffix || ''; - } - }, + ///// TODO: remove when we find out what to do with competing animations + if(rule.styles['-webkit-animation-name']) { + rule.styles['-webkit-animation-name'] += ',' + animationNames.join(','); + } - getPresets : { - value: function(element) { + rules.push(stylesController.addRule('.'+selectorBase + suffix, rule.styles)); + } + }, this); } - }, stringifyKeys : { diff --git a/js/panels/presets/default-animation-presets.js b/js/panels/presets/default-animation-presets.js index b12a94b2..578c1622 100644 --- a/js/panels/presets/default-animation-presets.js +++ b/js/panels/presets/default-animation-presets.js @@ -14,7 +14,9 @@ exports.animationPresets = { "selectorBase" : "border-morph", "rules" : [{ "styles" : { - "-webkit-animation": "border-morph 2s infinite" + "-webkit-animation-name": "border-morph", + "-webkit-animation-duration": "2s", + "-webkit-animation-iteration-count": "infinite" } }, { -- cgit v1.2.3 From 0491907d1cba1534d88c49f2bb4035484831bbe5 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Fri, 30 Mar 2012 09:43:48 -0700 Subject: Presets Controller - Remove unused method call --- js/controllers/presets-controller.js | 3 --- 1 file changed, 3 deletions(-) (limited to 'js') diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index e436023a..9d898a53 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -87,9 +87,6 @@ exports.PresetsController = Montage.create(Component, { el.classList.add(selectorBase); - //// Keep track of elements with presets and don't add duplicates - this.setCachedPreset(el, presetData.id, rules); - }, this); presetData.rules.forEach(function(rule, i) { -- cgit v1.2.3 From b7ca1821ad43403a2a54361ffc6a0cdf9cba0e59 Mon Sep 17 00:00:00 2001 From: Eric Guzman Date: Mon, 2 Apr 2012 15:10:10 -0700 Subject: Animation Presets - Only combine animations if pre-existing animations exist --- js/controllers/presets-controller.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js') diff --git a/js/controllers/presets-controller.js b/js/controllers/presets-controller.js index 9d898a53..975f9f7a 100644 --- a/js/controllers/presets-controller.js +++ b/js/controllers/presets-controller.js @@ -100,7 +100,7 @@ exports.PresetsController = Montage.create(Component, { var suffix = rule.selectorSuffix || ''; ///// TODO: remove when we find out what to do with competing animations - if(rule.styles['-webkit-animation-name']) { + if(rule.styles['-webkit-animation-name'] && animationNames.length) { rule.styles['-webkit-animation-name'] += ',' + animationNames.join(','); } -- cgit v1.2.3 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