Timeline: Automatic scrolling during dragging of keyframes.

1 files changed, 98 insertions, 86 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 933ed9cc..80525056 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -404,45 +404,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     
     draw: {
         value: function() {
+                
                 // Drag and Drop:
-                // Do we have a helper to append?
-            if (this._appendHelper === true) {
-                this.container_layers.appendChild(this._dragAndDropHelper);
-                this._appendHelper = false;
-            }
-            // Do we need to move the helper?
-                if (this._dragAndDropHelperCoords !== false) {
-                        if (this._dragAndDropHelper !== null) {
-                                this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
-                        }
-                        this._dragAndDropHelperCoords = false;
-                }
-                // Do we need to scroll the tracks?
-                if (this._scrollTracks !== false) {
-                        this.layout_tracks.scrollTop = this._scrollTracks;
-                        this._scrollTracks = false;
-                }
-                // Do we have a helper to delete?
-                if (this._deleteHelper === true) {
-                        if (this._dragAndDropHelper === null) {
-                                // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
-                                // Try and recover the helper so we can delete it.
-                                var myHelper = this.container_layers.querySelector(".timeline-dnd-helper");
-                                if (myHelper != null) {
-                                        this._dragAndDropHelper = myHelper;
-                                }
-                        }
-                    if (this._dragAndDropHelper !== null) {
-                        // We need to delete the helper.  Can we delete it from container_layers?
-                        if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) {
-                                this.container_layers.removeChild(this._dragAndDropHelper);
-                                this._dragAndDropHelper = null;
-                                this._deleteHelper = false;
-                        }
+                if (this.draggingType === "layer") {
+                        
+                        // Do we have a helper to append?
+                    if (this._appendHelper === true) {
+                        this.container_layers.appendChild(this._dragAndDropHelper);
+                        this._appendHelper = false;
                     }
-                this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace);
-                this.layersDragged =[];
+                    // Do we need to move the helper?
+                        if (this._dragAndDropHelperCoords !== false) {
+                                if (this._dragAndDropHelper !== null) {
+                                        this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
+                                }
+                                this._dragAndDropHelperCoords = false;
+                        }
+                        // Do we need to scroll the tracks?
+                        if (this._scrollTracks !== false) {
+                                this.layout_tracks.scrollTop = this._scrollTracks;
+                                this._scrollTracks = false;
+                        }
+                        // Do we have a helper to delete?
+                        if (this._deleteHelper === true) {
+                                if (this._dragAndDropHelper === null) {
+                                        // Problem....maybe a helper didn't get appended, or maybe it didn't get stored.
+                                        // Try and recover the helper so we can delete it.
+                                        var myHelper = this.container_layers.querySelector(".timeline-dnd-helper");
+                                        if (myHelper != null) {
+                                                this._dragAndDropHelper = myHelper;
+                                        }
+                                }
+                            if (this._dragAndDropHelper !== null) {
+                                // We need to delete the helper.  Can we delete it from container_layers?
+                                if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) {
+                                        this.container_layers.removeChild(this._dragAndDropHelper);
+                                        this._dragAndDropHelper = null;
+                                        this._deleteHelper = false;
+                                }
+                            }
+                        this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace);
+                        this.layersDragged =[];
+                        }
+                } else if (this.draggingType === "keyframe") {
+                        // Do we need to scroll the tracks?
+                        if (this._scrollTracks !== false) {
+                                this.layout_tracks.scrollLeft = this._scrollTracks;
+                                this._scrollTracks = false;
+                        }
                 }
+
         }
     },
     /* === END: Draw cycle === */
@@ -1510,6 +1521,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     handleLayerDragover: {
         value: function(event) {
+                
+                // If this isn't a layer event we don't do anything.
                 if (this.draggingType !== "layer") {
                         return;
                 }
@@ -1535,6 +1548,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     handleLayerDragEnd : {
         value: function(event) {
+                
+                // If this isn't a layer event we don't do anything.
                 if (this.draggingType !== "layer") {
                         return;
                 }
@@ -1545,6 +1560,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     handleLayerDrop : {
         value: function(event) {
+                
+                // If this isn't a layer event we don't do anything.
                 if (this.draggingType !== "layer") {
                         return;
                 }
@@ -1558,39 +1575,35 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     // Keyframe drag-and-drop
     handleKeyframeDragover: {
         value: function(event) {
+                
+                // If this isn't a keyframe drag and drop event, we don't want to do anything.
                 if (this.draggingType !== "keyframe") {
                         return;
                 }
                 event.preventDefault();
                 var currPos = 0;
-                /*
-                        myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop;
-                if ((myScrollTest < 60) && (this.user_layers.scrollTop >0)) {
-                        this._scrollTracks = (this.user_layers.scrollTop - 10)
-                }
-                if ((myScrollTest < 50) && (this.user_layers.scrollTop >0)) {
-                        this._scrollTracks = (this.user_layers.scrollTop - 20)
-                }
-                if ((myScrollTest > (this.user_layers.clientHeight + 10))) {
-                        this._scrollTracks = (this.user_layers.scrollTop + 10)
-                }
-                if ((myScrollTest > (this.user_layers.clientHeight + 20))) {
-                        this._scrollTracks = (this.user_layers.scrollTop + 20)
-                        
-                }
-                */
-                //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28;
 
                 currPos = (event.x + this.layout_tracks.scrollLeft) - 277;
                 
-                // too much or too little?
+                // 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-1]._keyframeMaxPosition) {
                         currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition;
                 }
-                //debugger;
+
+                        // Automatic scrolling when dragged to edge of window
+                        if (currPos < (this.layout_tracks.scrollLeft + 10)) {
+                                this._scrollTracks = (this.layout_tracks.scrollLeft -10);
+                                this.needsDraw = true;
+                        }
+                        if (currPos > (this.layout_tracks.offsetWidth + this.layout_tracks.scrollLeft - 20)) {
+                                this._scrollTracks = (this.layout_tracks.scrollLeft +10);
+                                this.needsDraw = true;
+                        }
+
+                        // 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;
                 return false;
@@ -1598,52 +1611,51 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {