Timeline: Bug fixes for keyframe drag and drop.

3 files changed, 52 insertions, 28 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index f7259d29..5afff6e6 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -84,7 +84,17 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
                 value: function(event) {
                         //this.parentComponent.parentComponent.dragLayerID = this.layerID;
             event.dataTransfer.setData('Text', 'Keyframe');
-            this.parentComponent.parentComponent.parentComponent.draggingIndex = this.parentComponent.tweenID;
+            
+            // Get my index in my track's tween array
+            var i = 0,
+                tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length,
+                myIndex = null;
+            for (i = 0; i < tweenRepetitionLength; i++) {
+                if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) {
+                        myIndex = i;
+                }
+            }
+            this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex;
                 }
         },
         handleDragend: {
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 3a961b51..8859e115 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1586,11 +1586,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 currPos = (event.x + this.layout_tracks.scrollLeft) - 277;
                 
                 // Prevent dragging beyond previous or next keyframe, if any
-                if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) {
-                        currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition;
+                if (currPos < this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMinPosition) {
+                        currPos = this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMinPosition;
                 }
-                if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) {
-                        currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition;
+                if (currPos > this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMaxPosition) {
+                        currPos = this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMaxPosition;
                 }
 
                         // Automatic scrolling when dragged to edge of window
@@ -1604,8 +1604,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         }
 
                         // Set up values in appropriate track and set that track to draw.
-                this.trackRepetition.childComponents[this.draggingTrackId-1].dragAndDropHelperCoords = currPos + "px";
-                this.trackRepetition.childComponents[this.draggingTrackId-1].needsDraw = true;
+                this.trackRepetition.childComponents[this.draggingTrackId].dragAndDropHelperCoords = currPos + "px";
+                this.trackRepetition.childComponents[this.draggingTrackId].needsDraw = true;
                 return false;
         }
     },
@@ -1622,7 +1622,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                                 currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80),
                                 currentMillisec = 0,
                                 i = 0,
-                                trackIndex = this.draggingTrackId -1, 
+                                trackIndex = this.draggingTrackId, 
                                 tweenIndex = this.trackRepetition.childComponents[trackIndex].draggingIndex;
                                 
                         // Make sure drop happens between previous and next keyframe, if any.
@@ -1656,11 +1656,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                         }
                         this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex].selectTween();
                         this.trackRepetition.childComponents[trackIndex].updateKeyframeRule();
+                        
+                        // If this is the last keyframe, we'll need to update the track duration
+                        if (tweenIndex === (this.trackRepetition.childComponents[trackIndex].tweens.length-1)) {
+                                this.arrLayers[trackIndex].layerData.trackDuration = currentMillisec;
+                                this.resetMasterDuration();
+                        }
                         return false;
         }
     },
     /* === END: Controllers === */
-
+   
     /* === BEGIN: Logging routines === */
     _boolDebug:{
         enumerable:false,
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 03e3b01e..1e918c6e 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -363,6 +363,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 this._dragAndDropHelperCoords = newVal;
         }
     },
+    _draggingIndex: {
+        value: false
+    },
+    draggingIndex: {
+        get: function() {
+                return this._draggingIndex;
+        },
+        set: function(newVal) {
+                this._draggingIndex = newVal;
+        }
+    },
     _dragAndDropHelperOffset : {
         value: false
     },
@@ -864,32 +875,29 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             
             //this._dragAndDropHelper.style.width = window.getComputedStyle(this.container_layers, null).getPropertyValue("width");
             this._dragAndDropHelper.classList.add("track-dnd-helper");
-            
-            // Get the offset 
-                var findYOffset = function(obj) {
-                                var curleft = curtop = 0;
-                                
-                                if (obj.offsetParent) {
-                                        do {
-                                                        curleft += obj.offsetLeft;
-                                                        curtop += obj.offsetTop;
-                                
-                                                } while (obj = obj.offsetParent);
-                                }
-                                return curtop;
-                }
-                //this._dragAndDropHelperOffset = findYOffset(this.container_layers);
-                if (this.draggingIndex !== (this.tweens.length -1)) {
-                        maxPosition = this.tweenRepetition.childComponents[this.draggingIndex +1].keyFramePosition;
+ 
+                if (this.draggingIndex < (this.tweens.length -1)) {
+                        maxPosition = this.tweenRepetition.childComponents[this.draggingIndex+1].keyFramePosition;
                 }
                 if (this.draggingIndex > 1) {
-                        minPosition = this.tweenRepetition.childComponents[this.draggingIndex -1].keyFramePosition;
+                        minPosition = this.tweenRepetition.childComponents[this.draggingIndex-1].keyFramePosition;
                 }
                 this._keyframeMinPosition = minPosition+2;
                 this._keyframeMaxPosition = maxPosition-9;
                 this._appendHelper = true;
                 this._deleteHelper = false;
-                this.parentComponent.parentComponent.draggingTrackId = this.trackID;
+                
+                // Get my index in the track array
+                var i = 0,
+                        arrLayersLength = this.parentComponent.parentComponent.arrLayers.length,
+                        myId = null;
+                for (i = 0; i < arrLayersLength; i++) {
+                        var currUuid = this.parentComponent.parentComponent.trackRepetition.childComponents[i].uuid;
+                        if ( currUuid === this.uuid) {
+                                myId = i;
+                        }
+                }
+                this.parentComponent.parentComponent.draggingTrackId = myId;
                 this.parentComponent.parentComponent.draggingType = "keyframe";
         }
     },