From 4ef8ec674695fb60c9ef6668206243471a0fe347 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 7 May 2012 17:17:17 -0700 Subject: Timeline: Move keyframe dragover and drop listeners to TimelinePanel for interaction improvements. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 99 +++------------------- 1 file changed, 11 insertions(+), 88 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 836bb60f..76d52036 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -355,6 +355,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { _dragAndDropHelperCoords: { value: false }, + dragAndDropHelperCoords: { + get: function() { + return this._dragAndDropHelperCoords; + }, + set: function(newVal) { + this._dragAndDropHelperCoords = newVal; + } + }, _dragAndDropHelperOffset : { value: false }, @@ -443,10 +451,10 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this.eventManager.addEventListener("tlZoomSlider", this, false); // Drag and Drop event handlers - this.element.addEventListener("dragover", this.handleKeyframeDragover.bind(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); + //this.element.addEventListener("drop", this.handleKeyframeDrop.bind(this), false); } }, @@ -881,45 +889,9 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._keyframeMaxPosition = maxPosition-9; this._appendHelper = true; this._deleteHelper = false; + this.parentComponent.parentComponent.draggingTrackId = this.trackID; } }, - handleKeyframeDragover: { - value: function(event) { - event.preventDefault(); - 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 - 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; - } - }, - handleKeyframeDragend : { value: function(event) { this._deleteHelper = true; @@ -928,55 +900,6 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { } }, - handleKeyframeDrop : { - value: function(event) { - event.stopPropagation(); - //this.element.classList.remove("dragOver"); - //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 - 274, - currentMillisecPerPixel = Math.floor(this.application.ninja.timeline.millisecondsOffset / 80), - 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; - } - }, - /* Begin: Logging routines */ _boolDebug: { -- cgit v1.2.3 From 307d339e45b209dab80ff88196a9f85f8d58f425 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Tue, 8 May 2012 11:48:29 -0700 Subject: Timeline: Update drag and drop handlers to be unique for drag and drop type. --- js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js index 76d52036..03e3b01e 100644 --- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js +++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js @@ -890,10 +890,14 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, { this._appendHelper = true; this._deleteHelper = false; this.parentComponent.parentComponent.draggingTrackId = this.trackID; + this.parentComponent.parentComponent.draggingType = "keyframe"; } }, handleKeyframeDragend : { value: function(event) { + if (this.parentComponent.parentComponent.draggingType !== "keyframe") { + return; + } this._deleteHelper = true; this.needsDraw = true; -- cgit v1.2.3 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. --- .../Timeline/TimelineTrack.reel/TimelineTrack.js | 46 +++++++++++++--------- 1 file changed, 27 insertions(+), 19 deletions(-) (limited to 'js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js') 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