Merge remote-tracking branch 'ninja-jduran/TimelineUber' into timeline-local

4 files changed, 36 insertions, 18 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 41eb6ef1..b91027b6 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -42,19 +42,21 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
 
     draw:{
         value:function(){
-            this.element.style.left = (this.position - 6) + "px";
+            this.element.style.left = (this.position - 5) + "px";
         }
     },
 
     deselectKeyframe:{
         value:function(){
             this.element.classList.remove("keyframeSelected");
+            this.element.style.left = (this.position - 5) + "px";
         }
     },
 
     selectKeyframe:{
         value:function(){
             this.element.classList.add("keyframeSelected");
+            this.element.style.left = (this.position - 6) + "px";
             this.parentComponent.selectTween();
         }
     },
diff --git a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
index 36166c1c..5ea236e9 100644
--- a/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
+++ b/js/panels/Timeline/Keyframe.reel/css/Keyframe.css
@@ -6,9 +6,9 @@
 
 .tween_keyframe{
     position: absolute;
-    height: 10px;
-    width: 10px;
-    top: 3px;
+    height: 8px;
+    width: 8px;
+    top: 4px;
     background-color: white;
     z-index: 23;
     border-radius: 2px;
@@ -16,6 +16,9 @@
 }
 
 .tween_keyframe.keyframeSelected{
+    height: 10px;
+    width: 10px;
+    top: 3px;
     background-color: #570e19;
     border-style: solid;
     border-width: thin;
diff --git a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
index fbc3edd0..d785ea3e 100644
--- a/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
+++ b/js/panels/Timeline/PropertyTrack.reel/PropertyTrack.js
@@ -35,7 +35,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
                     var selectedIndex = this.application.ninja.timeline.getLayerIndexByID(this.trackID);
                     if (selectedIndex !== false) {
                         if (!this.application.ninja.timeline.arrLayers[selectedIndex].layerData.created) {
-                            //this.retrieveStoredStyleTweens();
+                            this.retrieveStoredStyleTweens();
                         }
                     }
                 }
@@ -240,6 +240,14 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
 
             var newTween = {};
             newTween.tweenData = {};
+            newTween.tweenData.tweenedProperties = [];
+
+            // TODO - check for color values vs px values and set the correct default
+            var propVal = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
+            if(propVal == null){
+                propVal = "1px";
+            }
+            newTween.tweenData.tweenedProperties[this.trackEditorProperty] = propVal;
 
             if (clickPos == 0) {
                 newTween.tweenData.spanWidth = 0;
@@ -247,8 +255,6 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
                 newTween.tweenData.keyFrameMillisec = 0;
                 newTween.tweenData.tweenID = 0;
                 newTween.tweenData.spanPosition = 0;
-                newTween.tweenData.tweenedProperties = [];
-                newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
 
                 this.propTweens.push(newTween);
 
@@ -258,8 +264,7 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
                 newTween.tweenData.keyFrameMillisec = currentMillisec;
                 newTween.tweenData.tweenID = this.nextKeyframe;
                 newTween.tweenData.spanPosition = clickPos - newTween.tweenData.spanWidth;
-                newTween.tweenData.tweenedProperties = [];
-                newTween.tweenData.tweenedProperties[this.trackEditorProperty] = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
+
                 this.propTweens.push(newTween);
 
                 this.nextKeyframe += 1;
@@ -344,27 +349,31 @@ var PropertyTrack = exports.PropertyTrack = Montage.create(Component, {
     addPropAnimationRuleToElement:{
         value:function(tweenEvent){
             var currentStyleValue = this.ninjaStylesContoller.getElementStyle(this.animatedElement, this.trackEditorProperty);
+            if (currentStyleValue == null) {
+                currentStyleValue = "1px";
+            }
+            console.log(currentStyleValue);
+
             this.propTweens[0].tweenData.tweenedProperties[this.trackEditorProperty] = currentStyleValue;
 
+
             this.animationName = this.animatedElement.classList[0] + "_" + this.trackEditorProperty;
             var currentAnimationNameString = this.parentComponent.parentComponent.parentComponent.animationNamesString;
             var newAnimationNames = currentAnimationNameString + "," + this.animationName;
-            //var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration");
-            //var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration;
-            //var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count");
-            //var newIterationCount = currentIterationCount + ",1";
+            var currentAnimationDuration = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-duration");
+            var newAnimationDuration = currentAnimationDuration + "," + currentAnimationDuration;
+            var currentIterationCount = this.ninjaStylesContoller.getElementStyle(this.animatedElement, "-webkit-animation-iteration-count");
+            var newIterationCount = currentIterationCount + ",1";
 
             this.parentComponent.parentComponent.parentComponent.animationNamesString = newAnimationNames;
 
             this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-name", newAnimationNames);
 
-            //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration);
-            //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount);
-            //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-fill-mode", "both");
-            //this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-transition-timing-function", "linear");
+            this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", newAnimationDuration);
+            this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-iteration-count", newIterationCount);
 
             var initRule = "@-webkit-keyframes " + this.animationName + " { 0% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} 100% {" + this.trackEditorProperty + ": " + currentStyleValue + ";} }";
-            //console.log(initRule);
+            console.log(initRule);
             this.currentKeyframeRule = this.ninjaStylesContoller.addRule(initRule);
 
             this.insertPropTween(tweenEvent.offsetX);
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 835fc785..075290c7 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -820,12 +820,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
 
     getAllAnimationRules:{
         value:function(ruleNames){
+            ruleNames.splice(0,1); // temp remove first animation already retrieved for main track
 
             for(var i in ruleNames){
                 var currentName = ruleNames[i].replace(/^\s+|\s+$/g,"");  // trim whitespace
                 var currentRule = this.application.ninja.stylesController.getAnimationRuleWithName(currentName, this.application.ninja.currentDocument._document);
                 this.ruleList[currentName] = currentRule;
             }
+
             this.recreatePropertyTracks(this.ruleList);
         }
     },
@@ -833,8 +835,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     recreatePropertyTracks:{
         value:function(ruleSet){
 
+
             for(var i in ruleSet){
                 var styleProp = ruleSet[i][0].style[0];