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 From 7fc185cc08b2ba912dbc7bce96f6a465c1dd6dbf Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 3 May 2012 18:06:06 -0700 Subject: Timeline: More work on tween drag-and-drop --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 23 +++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 09378e65..d5571c3c 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -442,6 +442,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.element.addEventListener("click", this, false); this.eventManager.addEventListener("tlZoomSlider", this, false); + // Drag and Drop event handlers 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); @@ -873,6 +874,7 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { }, handleKeyframeDragover: { value: function(event) { + event.preventDefault(); var currPos = 0; /* myScrollTest = ((event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)) + 28) - this.user_layers.scrollTop; @@ -891,9 +893,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } */ //currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28; - currPos = event.x - 280; + currPos = event.x - 277; this._dragAndDropHelperCoords = currPos + "px"; this.needsDraw = true; + return false; } }, @@ -912,6 +915,24 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { //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 - 277, + 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); return false; } }, -- cgit v1.2.3 From 2ea8a62835f4c20efff2623306e7205e6f5bf0ba Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 4 May 2012 16:59:07 -0700 Subject: Timeline: True drag-and-drop of keyframes --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 60 ++++++++++++++++++---- 1 file changed, 50 insertions(+), 10 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel') 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; } }, -- cgit v1.2.3