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 --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 7 +++ .../Timeline/TimelineTrack.reel/TimelineTrack.js | 60 ++++++++++++++++++---- js/panels/Timeline/Tween.reel/Tween.js | 16 +++++- 3 files changed, 71 insertions(+), 12 deletions(-) (limited to 'js/panels') 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; -- cgit v1.2.3