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

2 files changed, 42 insertions, 16 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 502c455b..79014ae6 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -17,6 +17,8 @@
                            "tweenRepetition" : {"@" : "tweenRepetition"},
                            "track_lanes" : {"#" : "track_lanes"},
                            "tween": {"@" : "tween"},
+                           "positionTracksRepetition" : {"@" : "positionTracksRepetition"},
+                           "positionPropertyTrack" : {"@" : "positionPropertyTrack"},
                            "mainCollapser" : {"@" : "mainCollapser"},
                            "positionCollapser" : {"@" : "positionCollapser"},
                            "styleCollapser" : {"@" : "styleCollapser"}
@@ -81,7 +83,7 @@
                    "positionTracksRepetition": {
                        "prototype": "montage/ui/repetition.reel",
                            "properties": {
-                               "element": {"#": "content-position-tracks"},
+                               "element": {"#": "content_position_tracks"},
                                "isSelectionEnabled" : false
                            },
                            "bindings": {
@@ -95,7 +97,7 @@
                                         "positionPropertyTrack" : {
                                                 "prototype" : "js/panels/Timeline/PropertyTrack.reel",
                                                 "properties" : {
-                                                        "element":{"#": "position-track-base"}
+                                                        "element":{"#": "position_track_base"}
                                                 },
                         "bindings" : {
                             "propTrackData" : {
@@ -134,8 +136,8 @@
                                         "positionCollapser" : {
                                                 "prototype" : "js/panels/timeline/Collapser",
                                                 "properties" : {
-                                                        "element" : {"#" : "content-position-tracks"},
-                                                        "myContent" : {"#":"content-position-tracks"},
+                                                        "element" : {"#" : "content_position_collapser"},
+                                                        "myContent" : {"#":"content_position_collapser"},
                                                         "contentHeight" : 40,
                                                         "isLabelClickable" : false,
                                                         "clicker" : {"#" : "label-position"},
@@ -194,11 +196,14 @@
             <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div>
             <div class="collapsible-content collapsible-collapsed content-main" data-montage-id="content-main">
                 <div class="label-position collapsible-label collapsible-collapsed" data-montage-id="label-position">
-                        
-                </div>
-                <div class="content-position collapsible-content collapsible-collapsed" data-montage-id="content-position-tracks">
-                        <div data-montage-id="position-track-base"></div>
-                </div>
+
+                </div>
+                <div class="content-position collapsible-content collapsible-collapsed"
+                     data-montage-id="content_position_collapser">
+                    <div data-montage-id="content_position_tracks">
+                        <div data-montage-id="position_track_base"></div>
+                    </div>
+                </div>
 
                 <div class="label-styles collapsible-label collapsible-collapsed" data-montage-id="label-styles">
                         
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 84bac2cb..1a8b6f4e 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -41,6 +41,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this._tween = newVal;
         }
     },
+
+    positionPropertyTrack:{
+        value:null
+    },
     
     _isFirstDraw: {
         value: true
@@ -171,9 +175,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         },
         set: function(newVal) {
                 this._arrPositionTracks = newVal;
-                if (typeof(this.trackData) === "undefined") {
-                        //this.createTrackData();
-                }
                 this.trackData.arrPositionTracks = newVal;
             
         }
@@ -189,8 +190,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 this._positionTracksRepetition = newVal;
         }
     },
-    
-    
+
+
     /* Transform Property Tracks */
     _arrTransformTracks : {
         value: []
@@ -470,6 +471,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.bypassAnimation = this.trackData.bypassAnimation;
             this.trackID = this.trackData.layerID;
             this.tweens = this.trackData.tweens;
+            this.arrPositionTracks = this.trackData.arrPositionTracks;
             this.animatedElement = this.trackData.animatedElement;
             this.arrStyleTracks = this.trackData.arrStyleTracks;
             this.isTrackAnimated = this.trackData.isTrackAnimated;
@@ -486,6 +488,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.needsDraw = true;
         }
     },
+
     createTrackData: {
         value: function() {
                 tempData = {};
@@ -494,6 +497,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             tempData.tweens = this.tweens;
             tempData.animatedElement = this.animatedElement; 
             tempData.arrStyleTracks = this.arrStyleTracks;
+            tempData.arrPositionTracks = this.arrPositionTracks;
             tempData.isTrackAnimated = this.isTrackAnimated;
             tempData.trackDuration = this.trackDuration;
             tempData.animationName = this.animationName;
@@ -759,12 +763,16 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 newTween.tweenData.keyFrameMillisec = 0;
                 newTween.tweenData.tweenID = 0;
                 newTween.tweenData.spanPosition = 0;
+                newTween.tweenData.easing = "none";
                 newTween.tweenData.tweenedProperties = [];
                 newTween.tweenData.tweenedProperties["top"] = this.animatedElement.offsetTop + "px";
                 newTween.tweenData.tweenedProperties["left"] = this.animatedElement.offsetLeft + "px";
                 newTween.tweenData.tweenedProperties["width"] = this.animatedElement.offsetWidth + "px";
                 newTween.tweenData.tweenedProperties["height"] = this.animatedElement.offsetHeight + "px";
                 this.tweens.push(newTween);
+
+                this.createMatchingPositionSizeTween(newTween);
+
             } else {
                 newTween.tweenData.spanWidth = clickPos - this.tweens[this.tweens.length - 1].tweenData.keyFramePosition;
                 newTween.tweenData.keyFramePosition = clickPos;
@@ -783,20 +791,33 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 var animationDuration = (this.trackDuration / 1000) + "s";
                 this.ninjaStylesContoller.setElementStyle(this.animatedElement, "-webkit-animation-duration", animationDuration);
                 this.nextKeyframe += 1;
+
+                this.createMatchingPositionSizeTween(newTween);
             }
 
+
+
             this.application.ninja.currentDocument.model.needsSave = true;
         }
     },
 
+    createMatchingPositionSizeTween:{
+        value:function (newTween) {
+            var i;
+            var posTracks = this.positionTracksRepetition.childComponents.length;