From 73c4f7f449ba58e70f7335ef932b23dd450c925b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 1 May 2012 17:46:09 -0700 Subject: Timeline: Initial keyframe drag-and-drop interaction. --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 30 +++- .../Timeline/TimelinePanel.reel/TimelinePanel.html | 1 + .../Timeline/TimelinePanel.reel/TimelinePanel.js | 6 + .../Timeline/TimelineTrack.reel/TimelineTrack.html | 3 +- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 155 +++++++++++++++++++++ 5 files changed, 193 insertions(+), 2 deletions(-) (limited to 'js') 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 @@
-
+
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; + } + } + } + + + + + } }, @@ -762,6 +831,92 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { return returnVal; } }, + + // Drag and drop event handlers + handleKeyframeDragstart : { + value: function(event) { + var dragIcon = document.createElement("img"); + event.dataTransfer.effectAllowed = 'move'; + event.dataTransfer.setData('Text', this.identifier); + dragIcon.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAA1JREFUGFdj+P//PwMACPwC/ohfBuAAAAAASUVORK5CYII=" + dragIcon.width = 1; + event.dataTransfer.setDragImage(dragIcon, 0, 0); + + // Clone the element we're dragging + this._dragAndDropHelper = event.target.cloneNode(true); + this._dragAndDropHelper.style.opacity = 0.8; + this._dragAndDropHelper.style.position = "absolute"; + this._dragAndDropHelper.style.top = "2px"; + this._dragAndDropHelper.style.left = "0px"; + this._dragAndDropHelper.style.zIndex = 700; + + //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); + this._appendHelper = true; + this._deleteHelper = false; + } + }, + handleKeyframeDragover: { + value: function(event) { + 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 - 280; + this._dragAndDropHelperCoords = currPos + "px"; + this.needsDraw = true; + } + }, + + handleKeyframeDragend : { + value: function(event) { + 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; + //} + return false; + } + }, + + /* Begin: Logging routines */ _boolDebug: { enumerable: false, -- cgit v1.2.3