From 21c941bd1fe55e511a72bfa5dc3019748158bd4a Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 15 Mar 2012 15:00:45 -0700 Subject: Timeline: Fix for layer selection problems on file open and switch. --- 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 1afb9e5a..212b933e 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 134abd9a23c3ef3ef687051b5da7b94339ae8cad Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 15 Mar 2012 15:59:01 -0700 Subject: Timeline: Remove selection timer on add new layer method. --- js/panels/Timeline/Layer.reel/Layer.js | 1 + js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 15 ++++++++++----- 2 files changed, 11 insertions(+), 5 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..57288395 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 @@ -712,7 +718,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoObject = thingToPush; this._LayerUndoIndex = thingToPush.layerData.layerID; this._LayerUndoStatus = true; - +/* this._captureSelection = true; // TODO: Find a better solution than a timout here. @@ -720,7 +726,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { setTimeout(function() { that.selectLayer(indexToSelect, true); }, 500); - +*/ } } @@ -1031,7 +1037,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } } - this.layerRepetition.selectedIndexes = [layerIndex]; this.currentLayerSelected = this.arrLayers[layerIndex]; if(userSelection){ -- cgit v1.2.3 From d27d40ea28d41af1d64e75d74f5adb3126be0f53 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 15 Mar 2012 16:00:40 -0700 Subject: Timeline: remove comment. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 10 +--------- 1 file changed, 1 insertion(+), 9 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 57288395..a1e320c4 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -718,15 +718,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoObject = thingToPush; 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); -*/ + } } -- cgit v1.2.3 From 3bebf2b279d8f4da0439a4e3de1254c4292d0cac Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 16 Mar 2012 13:39:11 -0700 Subject: Timeline: Hook up data binding for changes on subproperties. --- js/panels/Timeline/Layer.reel/Layer.js | 54 +++++++++++++- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 15 +++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1 - .../Timeline/TimelineTrack.reel/TimelineTrack.js | 85 ++++++++++++++++------ 4 files changed, 127 insertions(+), 28 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 5206ae16..b54d6ce0 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -314,9 +314,11 @@ var Layer = exports.Layer = Montage.create(Component, { return this._isMainCollapsed; }, set: function(newVal) { - this.log('layer.js: isMainCollapsed: ' + newVal); if (newVal !== this._isMainCollapsed) { + this.log('layer.js: isMainCollapsed: ' + newVal); this._isMainCollapsed = newVal; + this.layerData.isMainCollapsed = newVal; + // this.triggerOutgoingBinding(); } } }, @@ -333,6 +335,8 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._isTransformCollapsed) { this._isTransformCollapsed = newVal; + this.layerData.isTransformCollapsed = newVal; + this.triggerOutgoingBinding(); //this.needsDraw = true; } } @@ -350,6 +354,8 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._isPositionCollapsed) { this._isPositionCollapsed = newVal; + this.layerData.isPositionCollapsed = newVal; + this.triggerOutgoingBinding(); //this.needsDraw = true; } } @@ -367,6 +373,8 @@ var Layer = exports.Layer = Montage.create(Component, { set: function(newVal) { if (newVal !== this._isStyleCollapsed) { this._isStyleCollapsed = newVal; + this.layerData.isStyleCollapsed = newVal; + this.triggerOutgoingBinding(); //this.needsDraw = true; } } @@ -381,7 +389,11 @@ var Layer = exports.Layer = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - this._bypassAnimation = newVal; + if (newVal !== this._bypassAnimation) { + this._bypassAnimation = newVal; + this.layerData.bypassAnimation = newVal; + //this.triggerOutgoingBinding(); + } } }, @@ -426,6 +438,36 @@ var Layer = exports.Layer = Montage.create(Component, { this.needsDraw = true; } }, + + /* Data binding point and outgoing binding trigger method */ + _bindingPoint : { + serializable: true, + value : {} + }, + bindingPoint: { + serializable: true, + get: function() { + return this._bindingPoint; + }, + set: function(newVal) { + if (newVal !== this._bindingPoint) { + this._bindingPoint = newVal; + this.setData(); + } + } + }, + + triggerOutgoingBinding : { + value: function() { + if (this.layerData.triggerBinding === true) { + this.layerData.triggerBinding = false; + } else { + this.layerData.triggerBinding = true; + } + } + }, + + // Is this the first draw? _isFirstDraw : { value: true }, @@ -700,44 +742,52 @@ var Layer = exports.Layer = Montage.create(Component, { value: function(event) { this.mainCollapser.bypassAnimation = false; this.bypassAnimation = false; + this.layerData.bypassAnimation = false; if (this.isMainCollapsed) { this.isMainCollapsed = false; } else { this.isMainCollapsed = true; } + this.triggerOutgoingBinding(); } }, handlePositionCollapserClick : { value: function(event) { this.positionCollapser.bypassAnimation = false; this.bypassAnimation = false; + this.layerData.bypassAnimation = false; if (this.isPositionCollapsed) { this.isPositionCollapsed = false; } else { this.isPositionCollapsed = true; } + this.triggerOutgoingBinding(); } }, handleTransformCollapserClick : { value: function(event) { this.transformCollapser.bypassAnimation = false; this.bypassAnimation = false; + this.layerData.bypassAnimation = false; if (this.isTransformCollapsed) { this.isTransformCollapsed = false; } else { this.isTransformCollapsed = true; } + this.triggerOutgoingBinding(); } }, handleStyleCollapserClick : { value: function(event) { this.styleCollapser.bypassAnimation = false; this.bypassAnimation = false; + this.layerData.bypassAnimation = false; if (this.isStyleCollapsed) { this.isStyleCollapsed = false; } else { this.isStyleCollapsed = true; } + this.triggerOutgoingBinding(); } }, /* End: Event handlers */ diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 14c5f1c8..34860ae7 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html @@ -77,7 +77,12 @@ "boundObject" : {"@" : "repetition1"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", "oneway" : false - } + }, + "bindingPoint" : { + "boundObject" : {"@" : "repetition1"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding", + "oneway" : false + } } }, @@ -107,7 +112,13 @@ "boundObject" : {"@" : "repetition2"}, "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData", "oneway" : false + }, + "bindingPoint" : { + "boundObject" : {"@" : "repetition2"}, + "boundObjectPropertyPath" : "objectAtCurrentIteration.layerData.triggerBinding", + "oneway" : false } + } }, "endHottext" : { @@ -197,4 +208,4 @@ - \ No newline at end of file + diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a1e320c4..be5aace4 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -718,7 +718,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { this._LayerUndoObject = thingToPush; this._LayerUndoIndex = thingToPush.layerData.layerID; this._LayerUndoStatus = true; - } } diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index c6b67c9c..b9a4574c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -26,8 +26,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._trackID; }, set:function (value) { - this._trackID = value; - //this.needsDraw = true; + if (value !== this._trackID) { + this._trackID = value; + } } }, @@ -40,11 +41,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._isMainCollapsed; }, set:function (newVal) { - this.log('TimelineTrack.js: isMainCollapsed: ', newVal); if (newVal !== this._isMainCollapsed) { this._isMainCollapsed = newVal; } - } }, _isTransformCollapsed:{ @@ -96,8 +95,12 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return this._bypassAnimation; }, set: function(newVal) { - //console.log("timelinetrack bypassAnimation setter " + newVal) - this._bypassAnimation = newVal; + if (newVal !== this._bypassAnimation) { + this._bypassAnimation = newVal; + } + if (this.trackData.bypassAnimation !== newVal) { + this.trackData.bypassAnimation = newVal; + } } }, @@ -347,7 +350,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, _trackData:{ - + serializable: true, + value: false }, trackData:{ @@ -358,30 +362,65 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { set:function(val){ this._trackData = val; if(this._trackData){ - this.setData(); + this.setData(); } } }, + + _setDataTimestamp : { + value: false + }, setData:{ value:function(){ - this.trackID = this.trackData.layerID; - this.tweens = this.trackData.tweens; - this.animatedElement = this.trackData.animatedElement; - this.arrStyleTracks = this.trackData.arrStyleTracks; - this.isTrackAnimated = this.trackData.isTrackAnimated; - this.trackDuration = this.trackData.trackDuration; - this.animationName = this.trackData.animationName; - this.currentKeyframeRule = this.trackData.currentKeyframeRule; - this.isMainCollapsed = this.trackData.isMainCollapsed; - this.isPositionCollapsed = this.trackData.isPositionCollapsed; - this.isTransformCollapsed = this.trackData.isTransformCollapsed; - this.bypassAnimation = this.trackData.bypassAnimation; - this.isStyleCollapsed = this.trackData.isStyleCollapsed; - this.trackPosition = this.trackData.trackPosition; - this.needsDraw = true; + if (this.trackData) { + this.bypassAnimation = this.trackData.bypassAnimation; + this.trackID = this.trackData.layerID; + this.tweens = this.trackData.tweens; + this.animatedElement = this.trackData.animatedElement; + this.arrStyleTracks = this.trackData.arrStyleTracks; + this.isTrackAnimated = this.trackData.isTrackAnimated; + this.trackDuration = this.trackData.trackDuration; + this.animationName = this.trackData.animationName; + this.currentKeyframeRule = this.trackData.currentKeyframeRule; + this.isMainCollapsed = this.trackData.isMainCollapsed; + this.isPositionCollapsed = this.trackData.isPositionCollapsed; + this.isTransformCollapsed = this.trackData.isTransformCollapsed; + this.isStyleCollapsed = this.trackData.isStyleCollapsed; + this.trackPosition = this.trackData.trackPosition; + this.needsDraw = true; + } + } }, + + // Data binding observation point and trigger method + _bindingPoint : { + serializable: true, + value : {} + }, + bindingPoint: { + serializable: true, + get: function() { + return this._bindingPoint; + }, + set: function(newVal) { + if (newVal !== this._bindingPoint) { + this._bindingPoint = newVal; + this.setData(); + } + } + }, + + triggerOutgoingBinding : { + value: function() { + if (this.trackData.triggerBinding === true) { + this.trackData.triggerBinding = false; + } else { + this.trackData.triggerBinding = true; + } + } + }, prepareForDraw:{ value:function () { -- cgit v1.2.3