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 ++++++++++++++++++++++++------------ 1 file changed, 51 insertions(+), 25 deletions(-) (limited to 'js/controllers') 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 : { -- 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/controllers') 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/controllers') 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/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 +++++++------------------- 4 files changed, 52 insertions(+), 123 deletions(-) (limited to 'js/controllers') 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); } } -- cgit v1.2.3