Timeline: Move keyframe dragover and drop listeners to TimelinePanel for

interaction improvements.

1 files changed, 11 insertions, 88 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 836bb60f..76d52036 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -355,6 +355,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     _dragAndDropHelperCoords: {
         value: false
     },
+    dragAndDropHelperCoords: {
+        get: function() {
+                return this._dragAndDropHelperCoords;
+        },
+        set: function(newVal) {
+                this._dragAndDropHelperCoords = newVal;
+        }
+    },
     _dragAndDropHelperOffset : {
         value: false
     },
@@ -443,10 +451,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.eventManager.addEventListener("tlZoomSlider", this, false);
             
             // Drag and Drop event handlers 
-                        this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
+                        //this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
                         this.element.addEventListener("dragstart", this.handleKeyframeDragstart.bind(this), false);
                         this.element.addEventListener("dragend", this.handleKeyframeDragend.bind(this), false);
-                        this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
+                        //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
         }
     },
 
@@ -881,45 +889,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 this._keyframeMaxPosition = maxPosition-9;
                 this._appendHelper = true;
                 this._deleteHelper = false;
+                this.parentComponent.parentComponent.draggingTrackId = this.trackID;
         }
     },
-    handleKeyframeDragover: {
-        value: function(event) {
-                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 - 277;
-                
-                // too much or too little?
-                if (currPos < this._keyframeMinPosition) {
-                        currPos = this._keyframeMinPosition;
-                }
-                if (currPos > this._keyframeMaxPosition) {
-                        currPos = this._keyframeMaxPosition;
-                }
-                
-                this._dragAndDropHelperCoords = currPos + "px";
-                this.needsDraw = true;
-                return false;
-        }
-    },
-        
     handleKeyframeDragend : {
         value: function(event) {
                 this._deleteHelper = true;
@@ -928,55 +900,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         }
     },
     
-        handleKeyframeDrop : {
-                value: function(event) {
-                        event.stopPropagation();
-                        //this.element.classList.remove("dragOver");
-                        //if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) {
-                                //this.parentComponent.parentComponent.dropLayerID = this.layerID;
-                        //}
-                        
-                        /*
-                         * First, what keyframe is it (get the index);
-                         * Limit keyframe position to between index-1 and index+1 keyFramePosition
-                         * On update, be sure to update index+1's information too
-                         * 
-                         */
-                        
-                        var currPos = event.x - 274,
-                                currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80),
-                                currentMillisec = 0,
-                                i = 0, 
-                                tweenIndex = this.draggingIndex;
-                                
-                        // too much or too little?
-                if (currPos < this._keyframeMinPosition) {
-                        currPos = this._keyframeMinPosition + 3;
-                }
-                if (currPos > this._keyframeMaxPosition) {
-                        currPos = this._keyframeMaxPosition + 3;
-                }
-                
-                currentMillisec = currentMillisecPerPixel * currPos;
-
-                        this.tweens[tweenIndex].tweenData.spanWidth = currPos - this.tweens[tweenIndex - 1].tweenData.keyFramePosition;
-                        this.tweens[tweenIndex].tweenData.keyFramePosition = currPos;
-                        this.tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec;
-                        this.tweens[tweenIndex].tweenData.spanPosition = currPos - this.tweens[tweenIndex].tweenData.spanWidth;
-                        this.tweenRepetition.childComponents[tweenIndex].setData();
-                        if (tweenIndex < this.tweens.length -1) {
-                                var spanWidth = this.tweens[tweenIndex +1].tweenData.keyFramePosition - currPos;
-                                var spanPosition = currPos; 
-                                this.tweens[tweenIndex +1].tweenData.spanWidth = spanWidth;
-                                this.tweens[tweenIndex +1].tweenData.spanPosition = currPos;
-                                this.tweenRepetition.childComponents[tweenIndex+1].setData();
-                        }
-                        this.tweenRepetition.childComponents[tweenIndex].selectTween();
-                        this.updateKeyframeRule();
-                        return false;
-                }
-        },
-    
     
         /* Begin: Logging routines */
     _boolDebug: {