1 files changed, 82 insertions, 43 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 669dabef..17e50789 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -345,6 +345,43 @@ 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;
+            if(this._trackData){
+                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 +415,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 +431,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);
@@ -410,7 +447,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 +464,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;
+                this.animatedElement = this.application.ninja.timeline.currentLayerSelected.layerData.elementsList[0];
+                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
@@ -471,8 +509,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){
@@ -483,6 +521,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 +531,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 +551,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.twe