Timeline: Initial keyframe drag-and-drop interaction.

5 files changed, 193 insertions, 2 deletions

diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js
index 859cdfb1..df5bdd67 100644
--- a/js/panels/Timeline/Keyframe.reel/Keyframe.js
+++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js
@@ -31,6 +31,16 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
     prepareForDraw:{
         value:function(){
             this.element.addEventListener("click", this, false);
+            
+                        // Drag and drop event handlers
+                        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);
+                        
+
+            
+            
+            
         }
     },
 
@@ -57,5 +67,23 @@ var Keyframe = exports.Keyframe = Montage.create(Component, {
         value:function(ev){
             this.selectKeyframe();
         }
-    }
+    },
+    
+        handleMouseover: {
+                value: function(event) {
+                        this.element.draggable = true;
+                }
+        },
+        handleMouseout: {
+                value: function(event) {
+                        this.element.draggable = false;
+                }
+        },
+        handleDragstart: {
+                value: function(event) {
+                        //this.parentComponent.parentComponent.dragLayerID = this.layerID;
+            event.dataTransfer.setData('Text', 'Keyframe');
+                }
+        },
+    
 });
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
index 19709ca7..8ddc81cd 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html
@@ -31,6 +31,7 @@
                         "container_tracks" : {"#" : "container-tracks"},
                         "end_hottext" : {"@" : "endHottext"},
                         "container_layers" : {"#" : "container-layers"},
+                        "container_tracks" : {"#" : "container-tracks"},
                         "timeline_disabler" : {"#" : "timeline-disabler"},
                         "checkable_relative" : {"#" : "checkable_relative"},
                         "checkable_absolute" : {"#" : "checkable_absolute"},
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 6e64cde0..80baffc8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -336,6 +336,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
             this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
             this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
+            //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
             this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
             
             // Bind the handlers for the config menu
@@ -1471,6 +1472,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.needsDraw = true;
         }
     },
+    handleKeyframeDragover: {
+        value: function(event) {
+                
+        }
+    },
     handleLayerDragEnd : {
         value: function(event) {
                 this._deleteHelper = true;
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
index 44ad9abb..d416de5f 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.html
@@ -16,6 +16,7 @@
                            "element": {"#": "track"},
                            "tweenRepetition" : {"@" : "tweenRepetition"},
                            "styleTracksRepetition" : {"@" : "styleTracksRepetition"},
+                           "track_lanes" : {"#" : "track_lanes"},
                            "tween": {"@" : "tween"},
                            "_mainCollapser" : {"@" : "mainCollapser"},
                            "_positionCollapser" : {"@" : "positionCollapser"},
@@ -215,7 +216,7 @@
         <body>
 
         <div data-montage-id="track" class="timeline-track">
-            <div data-montage-id="track_lanes" class="tracklane">
+            <div data-montage-id="track_lanes" class="tracklane" style="position: relative;">
                 <div data-montage-id="track_lane"></div>
             </div>
             <div class="label-main collapsible-label collapsible-collapsed" data-montage-id="label-main"></div>
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index f32592ed..09378e65 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -348,6 +348,23 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
         value:null
     },
 
+        // Drag and Drop properties
+    _dragAndDropHelper : {
+        value: false
+    },
+    _dragAndDropHelperCoords: {
+        value: false
+    },
+    _dragAndDropHelperOffset : {
+        value: false
+    },
+    _appendHelper: {
+        value: false
+    },
+    _deleteHelper: {
+        value: false
+    },
+
     _trackData:{
                 value: false
     },
@@ -424,6 +441,11 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
             this.ninjaStylesContoller = this.application.ninja.stylesController;
             this.element.addEventListener("click", this, false);
             this.eventManager.addEventListener("tlZoomSlider", 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);
         }
     },
 
@@ -436,6 +458,53 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                         this.animatedElement = this.application.ninja.timeline.arrLayers[selectedIndex].layerData.elementsList[0];
                     }
             }
+            
+            
+            
+            
+            
+            
+            
+            
+                // Drag and Drop:
+                // Do we have a helper to append?
+            if (this._appendHelper === true) {
+                this.track_lanes.appendChild(this._dragAndDropHelper);
+                this._appendHelper = false;
+            }
+            // Do we need to move the helper?
+                if (this._dragAndDropHelperCoords !== false) {
+                        if (this._dragAndDropHelper !== null) {
+                                if (typeof(this._dragAndDropHelper.style) !== "undefined") {
+                                        this._dragAndDropHelper.style.left = this._dragAndDropHelperCoords;
+                                }
+                        }
+                        this._dragAndDropHelperCoords = 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.element.querySelector(".track-dnd-helper");
+                                if (myHelper != null) {
+                                        this._dragAndDropHelper = myHelper;
+                                }
+                        }
+                    if (this._dragAndDropHelper !== null) {
+                        // We need to delete the helper.  Can we delete it from track_lanes?
+                        if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.track_lanes) {
+                                this.track_lanes.removeChild(this._dragAndDropHelper);
+                                this._dragAndDropHelper = null;
+                                this._deleteHelper = false;