allow splitting existing spans with new keyframe

Signed-off-by: Jonathan Duran <jduran@motorola.com>

4 files changed, 37 insertions, 11 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index f7259d29..e5fa71d3 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -67,6 +67,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
     handleClick:{
         value:function(ev){
             this.selectKeyframe();
+            ev.stopPropagation();
         }
     },
     
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index 4f798f36..53b7bd5e 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -24,7 +24,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
     draw:{
         value:function(){
-            console.log(this.trackType);
+
         }
     },
 
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index a1b1ce74..35440cc4 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -671,7 +671,40 @@ 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.");
+            console.log("Splitting an existing span with a new keyframe.");
+            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;
+                    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);
+                }
+            }
+
+            this.application.ninja.documentController.activeDocument.needsSave = true;
         }
     },
 
@@ -746,7 +779,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);
@@ -766,8 +799,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             // delete the current rule
             this.ninjaStylesContoller.deleteRule(this.currentKeyframeRule);
 
-            // first combine all style track tween arrays with the main track tween array
-
             // build the new keyframe string
             var keyframeString = "@-webkit-keyframes " + this.animationName + " {";
 
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index 6c273a49..48b41023 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -216,12 +216,6 @@ var Tween = exports.Tween = Montage.create(Component, {
                 this.tweenedProperties["height"] = this.parentComponent.parentComponent.animatedElement.offsetHeight;
             }
 
-            // skewX
-
-            // skewY
-
-            // rotation
-
             // tell track to update css rule
             this.parentComponent.parentComponent.updateKeyframeRule();