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