From 778d417d2f800b91d960849c75c0e4ee128044d1 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Wed, 9 May 2012 13:33:45 -0700 Subject: Timeline: Bug fixes for keyframe drag and drop. --- js/panels/Timeline/Keyframe.reel/Keyframe.js | 12 +++++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 22 +++++++---- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 46 +++++++++++++--------- 3 files changed, 52 insertions(+), 28 deletions(-) (limited to 'js/panels/Timeline') diff --git a/js/panels/Timeline/Keyframe.reel/Keyframe.js b/js/panels/Timeline/Keyframe.reel/Keyframe.js index f7259d29..5afff6e6 100644 --- a/js/panels/Timeline/Keyframe.reel/Keyframe.js +++ b/js/panels/Timeline/Keyframe.reel/Keyframe.js @@ -84,7 +84,17 @@ 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; + + // Get my index in my track's tween array + var i = 0, + tweenRepetitionLength = this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents.length, + myIndex = null; + for (i = 0; i < tweenRepetitionLength; i++) { + if (this.parentComponent.parentComponent.parentComponent.tweenRepetition.childComponents[i].uuid === this.parentComponent.uuid) { + myIndex = i; + } + } + this.parentComponent.parentComponent.parentComponent.draggingIndex = myIndex; } }, handleDragend: { diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 3a961b51..8859e115 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1586,11 +1586,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { currPos = (event.x + this.layout_tracks.scrollLeft) - 277; // Prevent dragging beyond previous or next keyframe, if any - if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) { - currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition; + if (currPos < this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMinPosition) { + currPos = this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMinPosition; } - if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) { - currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition; + if (currPos > this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMaxPosition) { + currPos = this.trackRepetition.childComponents[this.draggingTrackId]._keyframeMaxPosition; } // Automatic scrolling when dragged to edge of window @@ -1604,8 +1604,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } // Set up values in appropriate track and set that track to draw. - this.trackRepetition.childComponents[this.draggingTrackId-1].dragAndDropHelperCoords = currPos + "px"; - this.trackRepetition.childComponents[this.draggingTrackId-1].needsDraw = true; + this.trackRepetition.childComponents[this.draggingTrackId].dragAndDropHelperCoords = currPos + "px"; + this.trackRepetition.childComponents[this.draggingTrackId].needsDraw = true; return false; } }, @@ -1622,7 +1622,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80), currentMillisec = 0, i = 0, - trackIndex = this.draggingTrackId -1, + trackIndex = this.draggingTrackId, tweenIndex = this.trackRepetition.childComponents[trackIndex].draggingIndex; // Make sure drop happens between previous and next keyframe, if any. @@ -1656,11 +1656,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex].selectTween(); this.trackRepetition.childComponents[trackIndex].updateKeyframeRule(); + + // If this is the last keyframe, we'll need to update the track duration + if (tweenIndex === (this.trackRepetition.childComponents[trackIndex].tweens.length-1)) { + this.arrLayers[trackIndex].layerData.trackDuration = currentMillisec; + this.resetMasterDuration(); + } return false; } }, /* === END: Controllers === */ - + /* === BEGIN: Logging routines === */ _boolDebug:{ enumerable:false, diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 03e3b01e..1e918c6e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -363,6 +363,17 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._dragAndDropHelperCoords = newVal; } }, + _draggingIndex: { + value: false + }, + draggingIndex: { + get: function() { + return this._draggingIndex; + }, + set: function(newVal) { + this._draggingIndex = newVal; + } + }, _dragAndDropHelperOffset : { value: false }, @@ -864,32 +875,29 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { //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); - if (this.draggingIndex !== (this.tweens.length -1)) { - maxPosition = this.tweenRepetition.childComponents[this.draggingIndex +1].keyFramePosition; + + 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; + minPosition = this.tweenRepetition.childComponents[this.draggingIndex-1].keyFramePosition; } this._keyframeMinPosition = minPosition+2; this._keyframeMaxPosition = maxPosition-9; this._appendHelper = true; this._deleteHelper = false; - this.parentComponent.parentComponent.draggingTrackId = this.trackID; + + // Get my index in the track array + var i = 0, + arrLayersLength = this.parentComponent.parentComponent.arrLayers.length, + myId = null; + for (i = 0; i < arrLayersLength; i++) { + var currUuid = this.parentComponent.parentComponent.trackRepetition.childComponents[i].uuid; + if ( currUuid === this.uuid) { + myId = i; + } + } + this.parentComponent.parentComponent.draggingTrackId = myId; this.parentComponent.parentComponent.draggingType = "keyframe"; } }, -- cgit v1.2.3