Timeline: True drag-and-drop of keyframes

3 files changed, 71 insertions, 12 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index df5bdd67..f7259d29 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -36,6 +36,7 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
                         this.element.addEventListener("mouseover", this.handleMouseover.bind(this), false);
                         this.element.addEventListener("mouseout", this.handleMouseout.bind(this), false);
                         this.element.addEventListener("dragstart", this.handleDragstart.bind(this), false);
+                        this.element.addEventListener("dragend", this.handleDragend.bind(this), false);
                         
 
             
@@ -83,7 +84,13 @@ 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;
                 }
         },
+        handleDragend: {
+                value: function(event) {
+                        this.parentComponent.isDragging = false;
+                }
+        }
     
 });
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index d5571c3c..836bb60f 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -836,7 +836,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
     // Drag and drop event handlers
     handleKeyframeDragstart : {
         value: function(event) {
-            var dragIcon = document.createElement("img");
+            var dragIcon = document.createElement("img"), 
+                minPosition = 0,
+                maxPosition = 100000000000;
+                
             event.dataTransfer.effectAllowed = 'move';
             event.dataTransfer.setData('Text', this.identifier);
             dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII="
@@ -868,6 +871,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                                 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 > 1) {
+                        minPosition = this.tweenRepetition.childComponents[this.draggingIndex -1].keyFramePosition;
+                }
+                this._keyframeMinPosition = minPosition+2;
+                this._keyframeMaxPosition = maxPosition-9;
                 this._appendHelper = true;
                 this._deleteHelper = false;
         }
@@ -894,6 +905,15 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 */
                 //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;
@@ -923,16 +943,36 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                          * 
                          */
                         
-                        var currPos = event.x - 277,
+                        var currPos = event.x - 274,
                                 currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80),
-                                currentMillisec = currentMillisecPerPixel * currPos;
-                        console.log(this.tweens[1].tweenData);
-                        this.tweens[1].tweenData.spanWidth = currPos - this.tweens[0].tweenData.keyFramePosition;
-                        this.tweens[1].tweenData.keyFramePosition = currPos;
-                        this.tweens[1].tweenData.keyFrameMillisec = currentMillisec;
-                        this.tweens[1].tweenData.spanPosition = currPos - this.tweens[1].tweenData.spanWidth;
-                        this.tweenRepetition.childComponents[1].setData();
-                        console.log(this.tweens[1].tweenData);
+                                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;
                 }
         },
diff --git a/js/panels/Timeline/Tween.reel/Tween.js b/js/panels/Timeline/Tween.reel/Tween.js
index b4c3bd86..c21b5f91 100644
--- a/js/panels/Timeline/Tween.reel/Tween.js
+++ b/js/panels/Timeline/Tween.reel/Tween.js
@@ -132,11 +132,24 @@ var Tween = exports.Tween = Montage.create(Component, {
             this._isTweenAnimated = value;
         }
     },
+    
+    _isDragging: {
+        value: false
+    },
+    isDragging: {
+        serializable: true,
+        get:function () {
+            return this._isDragging;
+        },
+        set:function (newVal) {
+            this._isDragging = newVal;
+        }
+        
+    },
 
 
     draw:{
         value:function () {
-                console.log("Tween.draw")
             this.element.style.left = this.spanPosition + "px";
             this.keyframe.position = this.spanWidth;
             this.tweenspan.spanWidth = this.spanWidth;
@@ -148,7 +161,6 @@ var Tween = exports.Tween = Montage.create(Component, {
 
     setData:{
         value:function(){
-                console.log("Tween.setData")
             this.spanWidth = this.tweenData.spanWidth;
             this.keyFramePosition = this.tweenData.keyFramePosition;
             this.spanPosition = this.tweenData.spanPosition;