6 files changed, 89 insertions, 39 deletions

diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index f2004b94..fbc3edd0 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -183,16 +183,20 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     },
 
     handleClick:{
-        value:function(ev){
+        value:function (ev) {
             if (ev.shiftKey) {
 
+                if (this.trackType == "position") {
+                    this.parentComponent.parentComponent.parentComponent.handleNewTween(ev);
+                }
+
                 if (this.propTweens.length < 1) {
 
                     // check if there is an editor property assigned yet
                     // get this property track's editor prop name from layer data arrays
                     var selectIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
 
-                    if (this.trackType === "style") {
+                    if (this.trackType == "style") {
                         if (this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty == null) {
                             console.log("Please enter a style property for this track before adding keyframes.");
                             return;
@@ -200,7 +204,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
                             this.trackEditorProperty = this.application.ninja.timeline.arrLayers[selectIndex].layerData.arrLayerStyles[this.styleIndex].editorProperty;
                             //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
                         }
-                    } else if (this.trackType === "position") {
+                    } else if (this.trackType == "position") {
                         //console.log("Property track editorProperty set to: " + this.trackEditorProperty);
                     }
 
@@ -220,9 +224,8 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
             if (ev.offsetX > this.propTweens[this.propTweens.length - 1].tweenData.keyFramePosition) {
                 this.insertPropTween(ev.offsetX);
             } else {
-                console.log("spitting sub keyframes not yet supported");
+                console.log("Splitting style tweens not yet supported.");
             }
-
         }
     },
 
@@ -266,6 +269,45 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
         }
     },
 
+    splitPropTween:{
+        value:function (ev) {
+            console.log("splitting sub prop tween with new keyframe");
+            var clickPos = ev.target.parentElement.offsetLeft + ev.offsetX;
+            var i;
+            var tweensLength = this.propTweens.length - 1;
+            var prevTween, nextTween, splitTweenIndex;
+            for (i = 0; i < tweensLength; i++) {
+                prevTween = this.propTweens[i].tweenData.keyFramePosition;
+                nextTween = this.propTweens[i + 1].tweenData.keyFramePosition;
+                if (clickPos > prevTween && clickPos < nextTween) {
+                    //console.log(clickPos + " found on tween: "+ this.tweens[i+1].tweenData.tweenID);
+                    splitTweenIndex = this.propTweens[i + 1].tweenData.tweenID;
+                    this.propTweens[i + 1].tweenData.spanWidth = this.propTweens[i + 1].tweenData.keyFramePosition - clickPos;
+                    this.propTweens[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.propTweens[i + 1].tweenData.spanWidth + "px";
+                        ev.target.parentElement.style.left = clickPos + "px";
+                        ev.target.parentElement.children[1].style.left = (this.propTweens[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[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
+                    this.propTweens.splice(splitTweenIndex, 0, newTweenToInsert);
+                    break;
+                }
+            }
+            this.application.ninja.documentController.activeDocument.needsSave = true;
+        }
+    },
+
     retrieveStoredStyleTweens:{
         value:function(){
             console.log("retrieve style tweens");
diff --git a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
index ddcc536e..5d71e2e7 100644
--- a/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
+++ b/js/panels/Timeline/PropertyTrack.reel/css/PropertyTrack.css
@@ -8,7 +8,7 @@
  */
 /* line 19, ../scss/PropertyTrack.scss */
 .content-main .collapsible-content .timeline-track {
-  height: 20px;
+  height: 18px;
   padding-top: 2px;
   border-bottom: 1px solid #505050;
   background-image: url("../images/gridline.jpg");
diff --git a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss
index 31aed851..a560ff3c 100644
--- a/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss
+++ b/js/panels/Timeline/PropertyTrack.reel/scss/PropertyTrack.scss
@@ -17,7 +17,7 @@
 
 
 .content-main .collapsible-content .timeline-track {
-        height: 20px;
+        height: 18px;
     padding-top: 2px;
         border-bottom: 1px solid $color-menu-divider;
     background-image: url("../images/gridline.jpg");
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index a38ecb30..6066066a 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -730,7 +730,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             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");
+
+                // check for multiple animation names
+                var animationNameList = this.animationName.split(",");
+                if(animationNameList.length > 1){
+                    this.animationName = animationNameList[0];
+                    this.extractKeyframesFromRules(animationNameList);
+                }
+
                 this.animationNamesString = this.animationName;
+
+                // build tweens for this tracks's keyframe rule
                 if(this.animationName){
                     trackTiming = this.application.ninja.stylesController.getElementStyle(this.animatedElement, "-webkit-animation-duration");
                     this.nextKeyframe = 0;
@@ -796,6 +806,18 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
 
+    extractKeyframesFromRules:{
+        value:function(ruleNames){
+            //console.log(ruleNames);
+            for(var i in ruleNames){
+                console.log(ruleNames[i].replace(/^\s+|\s+$/g,""));
+                var currName = ruleNames[i].replace(/^\s+|\s+$/g,"");
+                var test = this.application.ninja.stylesController.getAnimationRuleWithName(currName, this.application.ninja.currentDocument._document);
+                console.log(test);
+            }
+        }
+    },
+
     addAnimationRuleToElement:{
         value:function (tweenEvent) {
             this.tweens[0].tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop;
diff --git a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
index 57e4dce6..03d1cf8d 100644
--- a/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
+++ b/js/panels/Timeline/TimelineTrack.reel/css/TimelineTrack.css
@@ -1,15 +1,13 @@
 @charset "UTF-8";
-
 /* <copyright>
  This file contains proprietary software owned by Motorola Mobility, Inc.<br/>
  No rights, expressed or implied, whatsoever to this software are provided by Motorola Mobility, Inc. hereunder.<br/>
  (c) Copyright 2011 Motorola Mobility, Inc.  All Rights Reserved.
  </copyright> */
-
 /* TimelineTrack.scss
  * Main SCSS file for TimelineTrack component, compiled by SASS into the file css/TimelineTrack.css.
  */