From c92ac883d43be0b8f89a04505ec11235d2856382 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 7 Mar 2012 09:28:10 -0800 Subject: Optimize serialization bindings for Tween component Move all serialized properties of Tween component into on data object with one binding instead of multiple properties with individual bindings Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.html | 39 +---------- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 78 +++++++++++----------- 2 files changed, 42 insertions(+), 75 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html index 1cc05f4e..7e9b8a21 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html @@ -32,44 +32,9 @@ "element":{"#": "track_lane"} }, "bindings" : { - "spanWidth" : { + "tweenData" : { "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.spanWidth", - "oneway" : false - }, - "keyFramePosition" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFramePosition", - "oneway" : false - }, - "spanPosition" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.spanPosition", - "oneway" : false - }, - "keyFrameMillisec" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.keyFrameMillisec", - "oneway" : false - }, - "tweenID" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenID", - "oneway" : false - }, - "tweenedProperties" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenedProperties", - "oneway" : false - }, - "isTweenAnimated" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isTweenAnimated", - "oneway" : false - }, - "isClearing" : { - "boundObject" : {"@": "tweenRepetition"}, - "boundObjectPropertyPath" : "objectAtCurrentIteration.isClearing", + "boundObjectPropertyPath" : "objectAtCurrentIteration.tweenData", "oneway" : false } } diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 669dabef..e00dd0bc 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -410,7 +410,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { handleNewTween:{ value:function (ev) { - if (ev.offsetX > this.tweens[this.tweens.length - 1].keyFramePosition) { + if (ev.offsetX > this.tweens[this.tweens.length - 1].tweenData.keyFramePosition) { this.insertTween(ev.offsetX); } else { this.splitTween(ev); @@ -427,27 +427,28 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { // need to check timeline master duration if greater than this track duration this.trackDuration = currentMillisec; var newTween = {}; + newTween.tweenData = {}; if (clickPos == 0) { this.animatedElement = this.application.ninja.timeline.currentLayerSelected.elementsList[0]; - newTween.spanWidth = 0; - newTween.keyFramePosition = 0; - newTween.keyFrameMillisec = 0; - newTween.tweenID = 0; - newTween.spanPosition = 0; - newTween.tweenedProperties = []; - newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; - newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; + newTween.tweenData.spanWidth = 0; + newTween.tweenData.keyFramePosition = 0; + newTween.tweenData.keyFrameMillisec = 0; + newTween.tweenData.tweenID = 0; + newTween.tweenData.spanPosition = 0; + newTween.tweenData.tweenedProperties = []; + newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; this.tweens.push(newTween); } else { - newTween.spanWidth = clickPos - this.tweens[this.tweens.length - 1].keyFramePosition; - newTween.keyFramePosition = clickPos; - newTween.keyFrameMillisec = currentMillisec; - newTween.tweenID = this.nextKeyframe; - newTween.spanPosition = clickPos - newTween.spanWidth; - newTween.tweenedProperties = []; - newTween.tweenedProperties["top"] = this.animatedElement.offsetTop; - newTween.tweenedProperties["left"] = this.animatedElement.offsetLeft; + newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; + newTween.tweenData.keyFramePosition = clickPos; + newTween.tweenData.keyFrameMillisec = currentMillisec; + newTween.tweenData.tweenID = this.nextKeyframe; + newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth; + newTween.tweenData.tweenedProperties = []; + newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; + newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; this.tweens.push(newTween); // update the animation duration @@ -483,6 +484,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { for (i =0; this.currentKeyframeRule[i] ;i++) { var newTween = {}; + newTween.tweenData = {}; offsetAttribute = this.currentKeyframeRule[i].cssText.split(" "); topOffSetAttribute = offsetAttribute[3].split("px"); @@ -492,14 +494,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var tempLeftOffset =parseInt(leftOffsetAttribute[0]); if (this.currentKeyframeRule[i].keyText === "0%") { - newTween.spanWidth = 0; - newTween.keyFramePosition = 0; - newTween.keyFrameMillisec = 0; - newTween.tweenID = 0; - newTween.spanPosition = 0; - newTween.tweenedProperties = []; - newTween.tweenedProperties["top"] = tempTopOffset; - newTween.tweenedProperties["left"] = tempLeftOffset; + newTween.tweenData.spanWidth = 0; + newTween.tweenData.keyFramePosition = 0; + newTween.tweenData.keyFrameMillisec = 0; + newTween.tweenData.tweenID = 0; + newTween.tweenData.spanPosition = 0; + newTween.tweenData.tweenedProperties = []; + newTween.tweenData.tweenedProperties["top"] = tempTopOffset; + newTween.tweenData.tweenedProperties["left"] = tempLeftOffset; this.tweens.push(newTween); } else { @@ -512,14 +514,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { currentMilliSec = fraction * this.trackDuration; currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80); clickPosition = currentMilliSec / currentMilliSecPerPixel; - newTween.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].keyFramePosition; - newTween.keyFramePosition = clickPosition; - newTween.keyFrameMillisec = currentMilliSec; - newTween.tweenID = this.nextKeyframe; - newTween.spanPosition =clickPosition - newTween.spanWidth; - newTween.tweenedProperties=[]; - newTween.tweenedProperties["top"] = tempTopOffset; - newTween.tweenedProperties["left"] = tempLeftOffset; + newTween.tweenData.spanWidth = clickPosition - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition; + newTween.tweenData.keyFramePosition = clickPosition; + newTween.tweenData.keyFrameMillisec = currentMilliSec; + newTween.tweenData.tweenID = this.nextKeyframe; + newTween.tweenData.spanPosition =clickPosition - newTween.tweenData.spanWidth; + newTween.tweenData.tweenedProperties=[]; + newTween.tweenData.tweenedProperties["top"] = tempTopOffset; + newTween.tweenData.tweenedProperties["left"] = tempLeftOffset; this.tweens.push(newTween); } this.nextKeyframe += 1; @@ -532,8 +534,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { addAnimationRuleToElement:{ value:function (tweenEvent) { - this.tweens[0].tweenedProperties["top"] = this.animatedElement.offsetTop; - this.tweens[0].tweenedProperties["left"] = this.animatedElement.offsetLeft; + this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop; + this.tweens[0].tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft; var animationDuration = Math.round(this.trackDuration / 1000) + "s"; this.animationName = "animation_" + this.animatedElement.classList[0]; this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName); @@ -557,13 +559,13 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var keyframeString = "@-webkit-keyframes " + this.animationName + " {"; for (var i = 0; i < this.tweens.length; i++) { - var keyMill = parseInt(this.tweens[i].keyFrameMillisec); + var keyMill = parseInt(this.tweens[i].tweenData.keyFrameMillisec); // TODO - trackDur should be parseFloat rounded to significant digits var trackDur = parseInt(this.trackDuration); var keyframePercent = Math.round((keyMill / trackDur) * 100) + "%"; var keyframePropertyString = " " + keyframePercent + " {"; - for(var prop in this.tweens[i].tweenedProperties){ - keyframePropertyString += prop + ": " + this.tweens[i].tweenedProperties[prop] + "px;"; + for(var prop in this.tweens[i].tweenData.tweenedProperties){ + keyframePropertyString += prop + ": " + this.tweens[i].tweenData.tweenedProperties[prop] + "px;"; } keyframePropertyString += "}"; keyframeString += keyframePropertyString; -- cgit v1.2.3 From f6835e48d3597ecb8cf1da8bcc91b58a8227d389 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 7 Mar 2012 11:12:57 -0800 Subject: Optimize Timeline serialization Change all serialized properties into one big object to reduce bindings Signed-off-by: Jonathan Duran --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 45 +++++++++++++++++++--- 1 file changed, 40 insertions(+), 5 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index e00dd0bc..00136c4d 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -345,6 +345,41 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _styleCollapser:{ value:null }, + + _trackData:{ + + }, + + trackData:{ + serializable:true, + get:function(){ + return this._trackData; + }, + set:function(val){ + this._trackData = val; + this.setData(); + } + }, + + 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; + } + }, + prepareForDraw:{ value:function () { this.init(); @@ -378,7 +413,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { if(!this.application.ninja.documentController.creatingNewFile){ if(this.application.ninja.currentDocument.documentRoot.children[0]){ var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - if(!this.application.ninja.timeline.arrLayers[selectedIndex].created){ + if(!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created){ this.retrieveStoredTweens(); } } @@ -394,7 +429,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); if (ev.shiftKey) { - if (this.application.ninja.timeline.arrLayers[selectedIndex].elementsList.length == 1) { + if (this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList.length == 1) { if (this.tweens.length < 1) { this.insertTween(0); this.addAnimationRuleToElement(ev); @@ -430,7 +465,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { newTween.tweenData = {}; if (clickPos == 0) { - this.animatedElement = this.application.ninja.timeline.currentLayerSelected.elementsList[0]; + this.animatedElement = this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0]; newTween.tweenData.spanWidth = 0; newTween.tweenData.keyFramePosition = 0; newTween.tweenData.keyFrameMillisec = 0; @@ -472,8 +507,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { var currentMilliSec,currentMilliSecPerPixel,clickPosition,tempTiming,tempTimingFloat,trackTiming,i = 0; var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID); - this.application.ninja.timeline.arrLayers[selectedIndex].created=true; - this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].elementsList[0]; + this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created=true; + this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]; if(this.animatedElement!==undefined){ this.animationName = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-name"); if(this.animationName){ -- cgit v1.2.3 From 0856e0900d51e99d81800c7ee0e086f0235bc499 Mon Sep 17 00:00:00 2001 From: Jonathan Duran Date: Wed, 7 Mar 2012 11:36:32 -0800 Subject: Bigfixes and cleanup from optimization Signed-off-by: Jonathan Duran --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 00136c4d..17e50789 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -357,7 +357,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, set:function(val){ this._trackData = val; - this.setData(); + if(this._trackData){ + this.setData(); + } } }, -- cgit v1.2.3