1 files changed, 98 insertions, 17 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 1e918c6e..83aef230 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -223,10 +223,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     tweenRepetition:{
         get:function () {
-            return this._spanRepetition;
+            return this._tweenRepetition;
         },
         set:function (newVal) {
-            this._spanRepetition = newVal;
+            this._tweenRepetition = newVal;
         }
     },
 
@@ -412,7 +412,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.bypassAnimation = this.trackData.bypassAnimation;
             this.trackID = this.trackData.layerID;
             this.tweens = this.trackData.tweens;
-            this.animatedElement = this.trackData.animatedElement; // unneeded with one element per layer restriction
+            this.animatedElement = this.trackData.animatedElement;
             this.arrStyleTracks = this.trackData.arrStyleTracks;
             this.isTrackAnimated = this.trackData.isTrackAnimated;
             this.trackDuration = this.trackData.trackDuration;
@@ -520,11 +520,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                         }
                     }
                 }
-            
-            
-            
-            
-            
 
         }
     },
@@ -537,7 +532,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                     if (selectedIndex !== false) {
                             if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) {
                                 this.retrieveStoredTweens();
-
                             }
                     }
                 }
@@ -628,6 +622,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                         this.updateKeyframeRule();
                     }
                 } else {
+                    // TEMP error check
                     console.log("There must be exactly one element in an animated layer.");
                 }
             }
@@ -641,6 +636,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 this.application.ninja.timeline.selectLayer(selectedIndex, false);
                 this.insertTween(ev.offsetX);
             } else {
+                console.log(ev.target);
                 this.splitTween(ev);
             }
         }
@@ -649,7 +645,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     insertTween:{
         value:function (clickPos) {
             var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
-                        this.application.ninja.timeline.selectLayer(selectedIndex, true);
+            this.application.ninja.timeline.selectLayer(selectedIndex, true);
 
             var currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80);
             var currentMillisec = currentMillisecPerPixel * clickPos;
@@ -695,7 +691,42 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     splitTween:{
         value:function (ev) {
-            console.log("Splitting an existing span with a new keyframe is not yet supported.");
+            var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX;
+            var i;
+            var tweensLength = this.tweens.length-1;
+            var prevTween, nextTween, splitTweenIndex;
+            for(i=0; i<tweensLength; i++){
+                prevTween = this.tweens[i].tweenData.keyFramePosition;
+                nextTween = this.tweens[i+1].tweenData.keyFramePosition;
+                if(clickPos > prevTween && clickPos < nextTween){
+                    //console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID);
+                    splitTweenIndex = this.tweens[i+1].tweenData.tweenID;
+                    this.tweens[i+1].tweenData.spanWidth = this.tweens[i+1].tweenData.keyFramePosition - clickPos;
+                    this.tweens[i+1].tweenData.spanPosition = ev.target.parentElement.offsetLeft + ev.offsetX;
+                    if (ev.target.className != "tween-span") {
+                        // don't set styles on timeline track if event is coming from the track
+                    } else {
+                        ev.target.style.width = this.tweens[i + 1].tweenData.spanWidth + "px";
+                        ev.target.parentElement.style.left = clickPos + "px";
+                        ev.target.parentElement.children[1].style.left = (this.tweens[i + 1].tweenData.spanWidth - 3) + "px";
+                    }
+                    var newTweenToInsert = {};
+                    newTweenToInsert.tweenData = {};
+                    newTweenToInsert.tweenData.spanWidth = clickPos - prevTween;
+                    newTweenToInsert.tweenData.keyFramePosition = clickPos;
+                    newTweenToInsert.tweenData.keyFrameMillisec = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80) * clickPos;
+                    newTweenToInsert.tweenData.tweenID = splitTweenIndex - 1;
+                    newTweenToInsert.tweenData.spanPosition = clickPos - newTweenToInsert.tweenData.spanWidth;
+                    newTweenToInsert.tweenData.tweenedProperties = [];
+                    newTweenToInsert.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
+                    newTweenToInsert.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft;
+                    newTweenToInsert.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth;
+                    newTweenToInsert.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight;
+                    this.tweens.splice(splitTweenIndex, 0, newTweenToInsert);
+                    break;
+                }
+            }
+            this.application.ninja.documentController.activeDocument.needsSave = true;
         }
     },
 
@@ -770,7 +801,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             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.animationName = this.animatedElement.classList[0] + "_PositionSize";
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", this.animationName);
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", 1);
@@ -815,13 +846,51 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     // Init and event handler for layer expand/collapse
     init:{
         value:function () {
-            
-            this.arrPositionTracks = [0, 1];
-            this.arrTransformTracks = [0, 1, 2, 3, 4];
-
+            this.createPositionTracks();
             // Register event handler for layer events.
             defaultEventManager.addEventListener("layerEvent", this, false);
+        }
+    },
 
+    createPositionTracks:{
+        value:function(){
+            // create track objects for position and transform tracks and push into arrays
+
+            // create 'top' track
+            var newTopTrack = {};
+            newTopTrack.propTrackData = {};
+            newTopTrack.propTrackData.propTweens = [];
+            newTopTrack.propTrackData.styleIndex = 0;
+            newTopTrack.propTrackData.trackType = "position";
+            newTopTrack.propTrackData.trackEditorProperty = "top";
+            this.arrPositionTracks.push(newTopTrack);
+
+            // create 'left' track
+            var newLeftTrack = {};
+            newLeftTrack.propTrackData = {};
+            newLeftTrack.propTrackData.propTweens = [];
+            newLeftTrack.propTrackData.styleIndex = 1;
+            newLeftTrack.propTrackData.trackType = "position";
+            newLeftTrack.propTrackData.trackEditorProperty = "left";
+            this.arrPositionTracks.push(newLeftTrack);
+
+            // create 'width' track
+            var newWidthTrack = {};
+            newWidthTrack.propTrackData = {};
+            newWidthTrack.propTrackData.propTweens = [];
+            newWidthTrack.propTrackData.styleIndex = 2;
+            newWidthTrack.propTrackData.trackType = "position";
+            newWidthTrack.propTrackData.trackEditorProperty = "width";
+            this.arrPositionTracks.push(newWidthTrack);
+
+            // create 'height' track
+            var newHeightTrack = {};
+            newHeightTrack.propTrackData = {};
+            newHeightTrack.propTrackData.propTweens = [];
+            newHeightTrack.propTrackData.styleIndex = 3;
+            newHeightTrack.propTrackData.trackType = "position";
+            newHeightTrack.propTrackData.trackEditorProperty = "height";
+            this.arrPositionTracks.push(newHeightTrack);