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 <jduran@motorola.com>
---
.../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 <jduran@motorola.com>
---
.../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 <jduran@motorola.com>
---
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
From b4aa9a46bdf6ed748cbb3fc2a2a4fc226e0e7fd7 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Thu, 8 Mar 2012 11:04:59 -0800
Subject: Remove unnecessary needsDraw calls
Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
.../Timeline/TimelineTrack.reel/TimelineTrack.js | 34 ++++++----------------
1 file changed, 9 insertions(+), 25 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 17e50789..18df20c2 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -27,7 +27,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
},
set:function (value) {
this._trackID = value;
- this.needsDraw = true;
+ //this.needsDraw = true;
}
},
@@ -114,7 +114,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
},
set: function(newVal) {
this._arrStyleTracks = newVal;
- this.needsDraw = true;
+ //this.needsDraw = true;
}
},
_styleTracksRepetition: {
@@ -128,7 +128,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
},
set: function(newVal) {
this._styleTracksRepetition = newVal;
- this.needsDraw = true;
+ //needsDraw = true;
}
},
@@ -146,7 +146,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
},
set: function(newVal) {
this._arrPositionTracks = newVal;
- this.needsDraw = true;
+ //this.needsDraw = true;
}
},
_positionTracksRepetition: {
@@ -160,7 +160,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
},
set: function(newVal) {
this._positionTracksRepetition = newVal;
- this.needsDraw = true;
+ //this.needsDraw = true;
}
},
@@ -179,7 +179,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
},
set: function(newVal) {
this._arrTransformTracks = newVal;
- this.needsDraw = true;
+ //this.needsDraw = true;
}
},
_transformTracksRepetition: {
@@ -193,7 +193,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
},
set: function(newVal) {
this._transformTracksRepetition = newVal;
- this.needsDraw = true;
+ //this.needsDraw = true;
}
},
@@ -209,7 +209,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
},
set:function (newVal) {
this._tweens = newVal;
- this.needsDraw=true;
+ //this.needsDraw=true;
}
},
@@ -379,6 +379,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
this.bypassAnimation = this.trackData.bypassAnimation;
this.isStyleCollapsed = this.trackData.isStyleCollapsed;
this.trackPosition = this.trackData.trackPosition;
+ this.needsDraw = true;
}
},
@@ -393,20 +394,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
draw:{
value:function () {
this.ninjaStylesContoller = this.application.ninja.stylesController;
- return;
- if (this._mainCollapser.isCollapsed !== this.isMainCollapsed) {
- this._mainCollapser.toggle(false);
- }
- if (this._positionCollapser.isCollapsed !== this.isPositionCollapsed) {
- this._positionCollapser.toggle(false);
- }
- if (this._transformCollapser.isCollapsed !== this.isTransformCollapsed) {
- this._transformCollapser.toggle(false);
- }
- if (this._styleCollapser.isCollapsed !== this.isStyleCollapsed) {
- this._styleCollapser.toggle(false);
- }
-
}
},
@@ -457,11 +444,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
insertTween:{
value:function (clickPos) {
- // calculate new tween's keyframe milliseconds by clickPos
var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
var currentMillisec = currentMillisecPerPixel * clickPos;
-
- // need to check timeline master duration if greater than this track duration
this.trackDuration = currentMillisec;
var newTween = {};
newTween.tweenData = {};
--
cgit v1.2.3
From e8f207dc50ad942ee8c1c1db6b146c0110ce3216 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Tue, 13 Mar 2012 09:15:37 -0700
Subject: Fix unassigned track element on document switch
Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++++
1 file changed, 4 insertions(+)
(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 18df20c2..c6b67c9c 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -394,6 +394,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
draw:{
value:function () {
this.ninjaStylesContoller = this.application.ninja.stylesController;
+ var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
+ if(this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0]){
+ this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
+ }
}
},
--
cgit v1.2.3