Timeline: Initial implementation of timeline zoom.

2 files changed, 58 insertions, 78 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 978b239f..b5d06ae1 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -435,6 +435,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.init();
             this.ninjaStylesContoller = this.application.ninja.stylesController;
             this.element.addEventListener("click", this, false);
+            this.eventManager.addEventListener("tlZoomSlider", this, false);
         }
     },
 
@@ -467,6 +468,46 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+        handleTlZoomSlider: {
+                value: function(event) {
+                        
+                var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush;
+                var i = 0,
+                        tweensLength = this.tweens.length;
+
+                for (i = 0; i < tweensLength; i++) {
+                        
+                        if (i === 0) {
+                                        // Exception: 0th item does not depend on anything
+                                        // TODO: If 0th tween is draggable, this will need to be fixed.
+                                this.tweens[i].tweenData.spanWidth=0;
+                            this.tweens[i].tweenData.spanPosition=0;
+                            this.tweens[i].tweenData.keyFramePosition=0;
+                            this.tweens[i].tweenData.keyFrameMillisec=0;
+        
+                        } else {
+                                        var prevKeyFramePosition = this.tweens[i - 1].tweenData.keyFramePosition,
+                                                myObj = {},
+                                                thing = {};
+
+                                currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
+                            currentMilliSec = this.tweens[i].tweenData.keyFrameMillisec;
+                            clickPos = currentMilliSec / currentMilliSecPerPixel;
+
+                            for (thing in this.tweens[i].tweenData) {
+                                myObj[thing] = this.tweens[i].tweenData[thing];
+                            }
+                                        myObj.spanWidth = clickPos - prevKeyFramePosition;
+                            myObj.keyFramePosition = clickPos;
+                            myObj.spanPosition = clickPos - (clickPos - prevKeyFramePosition);
+
+                            this.tweens[i].tweenData = myObj;
+                        }
+                        
+
+                }
+                }
+        },
     handleClick:{
         value:function (ev) {
             // TEMP - if the SHIFT key is down, add a new keyframe or split an existing span
@@ -682,6 +723,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             }
         }
     },
+    getTweenIndexById: {
+        value: function(intID) {
+                var i = 0,
+                        arrTweensLength = this.tweens.length;
+                        for (i = 0; i < arrTweensLength; i++) {
+                            if (this.tweens[i].tweenData.tweenID === intID) {
+                                returnVal = i;
+                            }
+                        }
+                        return returnVal;
+        }
+    },
         /* Begin: Logging routines */
     _boolDebug: {
         enumerable: false,
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index bd62a212..27828c3c 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -44,6 +44,7 @@ var Tween = exports.Tween = Montage.create(Component, {
         },
         set: function(value){
             this._spanWidth = value;
+            this.tweenData.spanWidth = value;
             this.needsDraw=true;
         }
     },
@@ -59,6 +60,7 @@ var Tween = exports.Tween = Montage.create(Component, {
         },
         set:function (value) {
             this._spanPosition = value;
+            this.tweenData.spanPosition = value;
             this.needsDraw=true;
         }
     },
@@ -74,6 +76,7 @@ var Tween = exports.Tween = Montage.create(Component, {
         },
         set:function (value) {
             this._keyFramePosition = value;
+            this.tweenData.keyFramePosition = value;
             this.needsDraw=true;
         }
     },
@@ -136,11 +139,6 @@ var Tween = exports.Tween = Montage.create(Component, {
         }
     },
 
-    prepareForDraw:{
-        value:function(){
-            this.eventManager.addEventListener("tlZoomSlider", this, false);
-        }
-    },
 
     draw:{
         value:function () {
@@ -227,77 +225,6 @@ var Tween = exports.Tween = Montage.create(Component, {
             // deselect the keyframe for this tween
             this.keyframe.deselectKeyframe();
         }
-    },
-
-    handleTlZoomSlider:{
-            value:function(event){
-                var currentMilliSecPerPixel , currentMilliSec , clickPos,thingToPush;
-
-                length = this.application.ninja.timeline.tempArray.length;
-                if(length > 0 && this.application.ninja.timeline.tempArray[length-1]!== this.parentComponent.parentComponent.trackID){
-                    this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID);
-                    var i = this.application.ninja.timeline.tweenarray.length-1;
-                    for(var index=0;this.currentTween = this.parentComponent.parentComponent.tweens[index];i--,index++){
-                        if(this.parentComponent.parentComponent.tweens[index].tweenData.tweenID===0){
-                            this.currentTween.tweenData.spanWidth=0;
-                            this.currentTween.tweenData.spanPosition=0;
-                            this.currentTween.tweenData.keyFramePosition=0;
-                            this.currentTween.tweenData.keyFrameMillisec=0;
-                            this.setData();
-                        }else{
-                            currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
-                            currentMilliSec = this.currentTween.tweenData.keyFrameMillisec;
-                            clickPos = currentMilliSec / currentMilliSecPerPixel;
-                            this.currentTween.tweenData.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[i+1].keyFramePosition;
-                            this.currentTween.tweenData.keyFramePosition = clickPos;
-                            this.currentTween.tweenData.spanPosition=clickPos-this.currentTween.tweenData.spanWidth;
-                            this.setData();
-                        }
-
-                    }
-                    this.application.ninja.timeline.tweenarray=[];
-                    thingToPush = {};
-                    thingToPush.tweenID = this.tweenID;
-                    thingToPush.keyFramePosition = this.keyFramePosition;
-                    this.application.ninja.timeline.tweenarray.push(thingToPush);
-                }else if(length===0){
-                    this.application.ninja.timeline.tempArray.push(this.parentComponent.parentComponent.trackID);
-                    thingToPush = {};
-                    thingToPush.tweenID = this.tweenID;
-                    thingToPush.keyFramePosition = this.keyFramePosition;
-                    this.application.ninja.timeline.tweenarray.push(thingToPush);
-                }else{
-                    thingToPush = {};
-                    thingToPush.tweenID = this.tweenID;
-                    thingToPush.keyFramePosition = this.keyFramePosition;
-                    this.application.ninja.timeline.tweenarray.push(thingToPush);
-                }
-
-                var levelNumber = this.application.ninja.timeline.getLayerIndexByID(this.parentComponent.parentComponent.trackID);
-                var k = this.application.ninja.timeline.tweenarray.length-1;
-                if(this.parentComponent.parentComponent.tweens.length === this.application.ninja.timeline.tweenarray.length && levelNumber===0){
-                    for(var indexValue=0;this.currentTween = this.parentComponent.parentComponent.tweens[indexValue];k--,indexValue++){
-                        if(this.parentComponent.parentComponent.tweens[indexValue].tweenData.tweenID===0){
-                            this.currentTween.tweenData.spanWidth=0;
-                            this.currentTween.tweenData.spanPosition=0;
-                            this.currentTween.tweenData.keyFramePosition=0;
-                            this.currentTween.tweenData.keyFrameMillisec=0;
-                            this.setData();
-                        }else{
-                            currentMilliSecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
-                            currentMilliSec = this.currentTween.tweenData.keyFrameMillisec;
-                            clickPos = currentMilliSec / currentMilliSecPerPixel;
-                            this.currentTween.tweenData.spanWidth = clickPos-this.application.ninja.timeline.tweenarray[k+1].keyFramePosition;
-                            this.currentTween.tweenData.keyFramePosition = clickPos;
-                            this.currentTween.tweenData.spanPosition=clickPos-this.currentTween.tweenData.spanWidth;
-                            this.setData();
-                        }
-
-                    }
-                    this.application.ninja.timeline.tempArray=[];
-                    this.application.ninja.timeline.tweenarray=[];
-                }
-            }
-        }
+    }