1 files changed, 39 insertions, 104 deletions

diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 1731213b..83aef230 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -355,6 +355,25 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     _dragAndDropHelperCoords: {
         value: false
     },
+    dragAndDropHelperCoords: {
+        get: function() {
+                return this._dragAndDropHelperCoords;
+        },
+        set: function(newVal) {
+                this._dragAndDropHelperCoords = newVal;
+        }
+    },
+    _draggingIndex: {
+        value: false
+    },
+    draggingIndex: {
+        get: function() {
+                return this._draggingIndex;
+        },
+        set: function(newVal) {
+                this._draggingIndex = newVal;
+        }
+    },
     _dragAndDropHelperOffset : {
         value: false
     },
@@ -443,10 +462,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);
         }
     },
 
@@ -937,127 +956,43 @@ 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;
-        }
-    },
-    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;
+                // 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._dragAndDropHelperCoords = currPos + "px";
-                this.needsDraw = true;
-                return false;
+                this.parentComponent.parentComponent.draggingTrackId = myId;
+                this.parentComponent.parentComponent.draggingType = "keyframe";
         }
     },
-        
     handleKeyframeDragend : {
         value: function(event) {
+                if (this.parentComponent.parentComponent.draggingType !== "keyframe") {
+                        return;
+                }
                 this._deleteHelper = true;
                 this.needsDraw = true;
            
         }
     },
     
-        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: {