From af93c604649d99fc81dc92b042794b0c60fc4f2d Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 14 Mar 2012 09:14:50 -0700 Subject: Optimize Tween component needsDraw calls Signed-off-by: Jonathan Duran --- js/panels/Timeline/Tween.reel/Tween.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js index 77c0dfa8..2b308d9a 100644 --- a/js/panels/Timeline/Tween.reel/Tween.js +++ b/js/panels/Timeline/Tween.reel/Tween.js @@ -44,7 +44,6 @@ var Tween = exports.Tween = Montage.create(Component, { }, set: function(value){ this._spanWidth = value; - this.needsDraw = true; } }, @@ -59,7 +58,6 @@ var Tween = exports.Tween = Montage.create(Component, { }, set:function (value) { this._spanPosition = value; - this.needsDraw = true; } }, @@ -74,7 +72,6 @@ var Tween = exports.Tween = Montage.create(Component, { }, set:function (value) { this._keyFramePosition = value; - this.needsDraw = true; } }, @@ -133,7 +130,6 @@ var Tween = exports.Tween = Montage.create(Component, { }, set:function (value) { this._isTweenAnimated = value; - this.needsDraw = true; } }, @@ -157,6 +153,7 @@ var Tween = exports.Tween = Montage.create(Component, { this.tweenID = this.tweenData.tweenID; this.tweenedProperties = this.tweenData.tweenedProperties; this.isTweenAnimated = this.tweenData.isTweenAnimated; + this.needsDraw = true; } }, -- cgit v1.2.3 From 0893ba7f5d1f03099c7b5f8c53ce750e412023cd Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 15 Mar 2012 13:33:35 -0700 Subject: Fix element delete causes keyframe addition fail Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 1afb9e5a..1875c740 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -859,7 +859,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.currentLayerSelected.layerData.elementsList.splice(length, 1); break; } - length--; + //length--; } } }, -- cgit v1.2.3 From 4afb5b8c94bbdd00821abf93ce6599bade360a8f Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 15 Mar 2012 15:13:56 -0700 Subject: Timeline: Fix for layer selection problems on file open and switch. Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 19 ++++-- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 69 +++++++++++++--------- 2 files changed, 57 insertions(+), 31 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index b41680be..069d3c4b 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -255,12 +255,11 @@ var Layer = exports.Layer = Montage.create(Component, { if (value !== this._isSelected) { // Only concerned about different values if (value === false) { - // If changing from false to true, we need to deselect any associated styles + // If changing from true to false, we need to deselect any associated styles this.selectStyle(false); } this._isSelected = value; this.layerData.isSelected = value; - //this.needsDraw = true; } } @@ -381,7 +380,6 @@ var Layer = exports.Layer = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - //console.log("layer.js _bypassAnimation setter " + newVal) this._bypassAnimation = newVal; } }, @@ -406,7 +404,6 @@ var Layer = exports.Layer = Montage.create(Component, { setData:{ value:function(){ - this.log('layer: setData called') this.layerName = this.layerData.layerName; this.layerID = this.layerData.layerID; this.arrLayerStyles = this.layerData.arrLayerStyles; @@ -424,9 +421,13 @@ var Layer = exports.Layer = Montage.create(Component, { this.dtextScaleX = this.layerData.dtextScaleX; this.dtextScaleY = this.layerData.dtextScaleY; this.dtextRotate = this.layerData.dtextRotate; + this._isFirstDraw = this.layerData._isFirstDraw; this.needsDraw = true; } }, + _isFirstDraw : { + value: true + }, /* END: Models */ @@ -482,6 +483,16 @@ var Layer = exports.Layer = Montage.create(Component, { this.element.classList.remove("selected"); } } + }, + didDraw: { + value: function() { + if ((this.isSelected === true) && (this._isFirstDraw === true)) { + // Once we're done drawing the first time we need to tell the TimelinePanel if + // this layer is supposed to be selected. + this.parentComponent.parentComponent.selectedLayerID = this.layerID; + this._isFirstDraw = false; + } + } }, /* End: Draw cycle */ diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 1875c740..45a90355 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -139,6 +139,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } }, + _selectedLayerID:{ + value: false + }, + selectedLayerID : { + get: function() { + return this._selectedLayerID; + }, + set: function(newVal) { + if (newVal === false) { + // We are clearing the timeline, so just set the value and return. + this._selectedLayerID = newVal; + return; + } + if (newVal !== this._selectedLayerID) { + var selectIndex = this.getLayerIndexByID(newVal); + this._selectedLayerID = newVal; + this._captureSelection = true; + this.selectLayer(selectIndex, true); + } + } + }, + millisecondsOffset:{ value:1000 }, @@ -374,14 +396,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Feed the new array of objects into the repetitions // and select the first layer. + this.temparrLayers[0].layerData.isSelected = true; + this.temparrLayers[0].layerData._isFirstDraw = true; + this.arrLayers=this.temparrLayers; - - // TODO: We need a better solution to this race condition than a timeout. - this._captureSelection = true; - var that = this; - setTimeout(function() { - that.selectLayer(0, true); - }, 1000) + } else { // New document. Create default layer. this.createNewLayer(1); @@ -397,6 +416,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } else { // we do have information stored. Use it. this._boolCacheArrays = false; + this._captureSelection = true; + //var myIndex = 0; + for (var i = 0; i < this.application.ninja.currentDocument.tlArrLayers.length; i++) { + if ( this.application.ninja.currentDocument.tlArrLayers[i].layerData.isSelected === true ) { + this.application.ninja.currentDocument.tlArrLayers[i].layerData._isFirstDraw = true; + } + } + + this.arrLayers = this.application.ninja.currentDocument.tlArrLayers; this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber; this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected; @@ -404,24 +432,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashElementMapToLayer = this.application.ninja.currentDocument.tlElementHashTable; this.hashKey = this.application.ninja.currentDocument.hashKey; this._boolCacheArrays = true; - - // Search through the arrLayers and select the layer that's already selected - var i = 0, - selectMe = 0, - arrLayersLength = this.arrLayers.length; - for (i = 0; i < arrLayersLength; i++) { - if (this.arrLayers[i].isSelected === true) { - selectMe = i; - } - } - - - this._captureSelection = true; - // TODO: Better solution than a timer. - var that = this; - setTimeout(function() { - that.selectLayer(selectMe, true); - }, 300) } } }, @@ -454,6 +464,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._firstTimeLoaded=true; this.end_hottext.value = 25; this.updateTrackContainerWidth(); + this.selectedLayerID = false; // Clear the repetitions if (this.arrLayers.length > 0) { @@ -464,9 +475,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { handleDocumentChange:{ value:function(event){ + // Clear the timeline but not the cache this._boolCacheArrays = false; this.clearTimelinePanel(); this._boolCacheArrays = true; + + // Rebind the document events for the new document context this._bindDocumentEvents(); this.hashInstance = this.createLayerHashTable(); @@ -1008,11 +1022,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { if(this.selectedKeyframes){ this.deselectTweens(); } + for (i = 0; i < arrLayersLength; i++) { if (i === layerIndex) { - this.arrLayers[i].isSelected = true; + this.arrLayers[i].layerData.isSelected = true; } else { - this.arrLayers[i].isSelected = false; + this.arrLayers[i].layerData.isSelected = false; } } -- cgit v1.2.3 From 47c7ba7a500082af0268b39ebbbbe926fa284920 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Thu, 15 Mar 2012 16:02:22 -0700 Subject: Timeline: remove comment. Signed-off-by: Jonathan Duran --- js/panels/Timeline/Layer.reel/Layer.js | 1 + .../Timeline/TimelinePanel.reel/TimelinePanel.js | 19 ++++++++----------- 2 files changed, 9 insertions(+), 11 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 069d3c4b..5206ae16 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -260,6 +260,7 @@ var Layer = exports.Layer = Montage.create(Component, { } this._isSelected = value; this.layerData.isSelected = value; + this.needsDraw = true; } } diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 45a90355..a1e320c4 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -416,7 +416,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } else { // we do have information stored. Use it. this._boolCacheArrays = false; - this._captureSelection = true; //var myIndex = 0; for (var i = 0; i < this.application.ninja.currentDocument.tlArrLayers.length; i++) { if ( this.application.ninja.currentDocument.tlArrLayers[i].layerData.isSelected === true ) { @@ -431,7 +430,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this.hashInstance = this.application.ninja.currentDocument.tlLayerHashTable; this.hashElementMapToLayer = this.application.ninja.currentDocument.tlElementHashTable; this.hashKey = this.application.ninja.currentDocument.hashKey; - this._boolCacheArrays = true; + } } }, @@ -687,6 +686,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { thingToPush.layerData.layerID = this.currentLayerNumber; thingToPush.parentElementUUID = this.hashKey; thingToPush.parentElement = this.application.ninja.currentSelectedContainer; + thingToPush.layerData.isSelected = true; + thingToPush.layerData._isFirstDraw = true; + + for (var i = 0; i < this.arrLayers.length; i++) { + this.arrLayers[i].layerData.isSelected = false; + this.arrLayers[i].layerData._isFirstDraw = false; + } if (!!this.layerRepetition.selectedIndexes) { // There is a selected layer, so we need to splice the new @@ -713,14 +719,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoIndex = thingToPush.layerData.layerID; this._LayerUndoStatus = true; - this._captureSelection = true; - - // TODO: Find a better solution than a timout here. - var that = this; - setTimeout(function() { - that.selectLayer(indexToSelect, true); - }, 500); - } } @@ -1031,7 +1029,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } - this.layerRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex]; if(userSelection){ -- cgit v1.2.3 From 94a4be4b7b77f4c1498e8fb65e00d73ccbd56813 Mon Sep 17 00:00:00 2001 From: Armen Kesablyan Date: Fri, 23 Mar 2012 14:33:41 -0700 Subject: Resizers updated Signed-off-by: Armen Kesablyan --- js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css index 129b9771..067285ae 100644 --- a/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css +++ b/js/panels/Timeline/TimelinePanel.reel/css/TimelinePanel.css @@ -10,12 +10,12 @@ height: 100%; } .maintimeline{ - border-style: double; -webkit-box-flex: 1; display: -webkit-box; - -webkit-box-orient: horizontal + -webkit-box-orient: horizontal; height : 100%; position: relative; + margin-top:1px; } .leftinside{ height: 100%; -- 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 --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 37 ++++++++++++++++------ js/panels/Timeline/Tween.reel/Tween.js | 2 +- 2 files changed, 29 insertions(+), 10 deletions(-) (limited to 'js/panels/Timeline') 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 -- cgit v1.2.3