From c6ef285c06905c28fe8915f9c4f916e74f6c8287 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 30 Mar 2012 14:58:38 -0700 Subject: Timeline: Link layerDragEnd and layerDrop events to better handle end of drag-and-drop events. --- js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a82d3373..3eaf3dec 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -1071,8 +1071,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // dragend doesn't fire. So if we're here in drop // and there's still a helper, we need to manually fire dragend. if (this._dragAndDropHelper !== null) { - this.container_layers.removeChild(this._dragAndDropHelper); - this._dragAndDropHelper = null; + this.handleLayerDragEnd(event); } } }, -- cgit v1.2.3 From 57f26309f7474c2b07eb9c42e0984f5b6b81cc7c Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 30 Mar 2012 16:41:43 -0700 Subject: Timeline: Move drag-and-drop helper deletion to draw routine. Bug fix: better handling of drag-and-drop finish events and cleanup of helper. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 50 ++++++++++++++++------ 1 file changed, 37 insertions(+), 13 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 3eaf3dec..7ed33fda 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -305,9 +305,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Clear for future DnD this._dropLayerID = null; this._dragLayerID = null; + + // Sometimes, just to be fun, the drop and dragend events don't fire. + // So just in case, set the draw routine to delete the helper. + this._deleteHelper = true; + this.needsDraw = true; } } }, + _appendHelper: { + value: false + }, + _deleteHelper: { + value: false + }, /* === END: Models === */ /* === BEGIN: Draw cycle === */ prepareForDraw:{ @@ -329,7 +340,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { willDraw:{ value:function () { if (this._isLayer) { - // this.createNewLayer(); this._isLayer = false; } } @@ -351,6 +361,26 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } 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.container_layers.querySelector(".timeline-dnd-helper"); + if (myHelper != null) { + this._dragAndDropHelper = myHelper; + } + } + if (this._dragAndDropHelper !== null) { + // We need to delete the helper. Can we delete it from container_layers? + if (this._dragAndDropHelper && this._dragAndDropHelper.parentNode === this.container_layers) { + this.container_layers.removeChild(this._dragAndDropHelper); + this._dragAndDropHelper = null; + this._deleteHelper = false; + } + } + + } } }, /* === END: Draw cycle === */ @@ -1043,7 +1073,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } this._dragAndDropHelperOffset = findYOffset(this.container_layers); this._appendHelper = true; - // this.container_layers.appendChild(this._dragAndDropHelper); + this._deleteHelper = false; } }, handleLayerDragover: { @@ -1056,23 +1086,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleLayerDragEnd : { value: function(event) { - // Delete the helper and clean up - if (this._dragAndDropHelper !== null) { - this.container_layers.removeChild(this._dragAndDropHelper); - this._dragAndDropHelper = null; - } + this._deleteHelper = true; + this.needsDraw = true; + } }, handleLayerDrop : { value: function(event) { event.stopPropagation(); event.preventDefault(); - // Usually drop fires after dragend, but sometimes - // dragend doesn't fire. So if we're here in drop - // and there's still a helper, we need to manually fire dragend. - if (this._dragAndDropHelper !== null) { - this.handleLayerDragEnd(event); - } + this._deleteHelper = true; + this.needsDraw = true; } }, /* === END: Controllers === */ -- cgit v1.2.3 From d480bea18450990131dc2e69b7f097aea1b26af0 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Mon, 2 Apr 2012 15:44:11 -0700 Subject: Timeline: Autoscrolling when dragging a layer within a scrollable layer list. --- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 86 ++++++++++++++-------- 1 file changed, 55 insertions(+), 31 deletions(-) (limited to 'js/panels/Timeline/TimelinePanel.reel') diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 7ed33fda..110f0336 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -319,6 +319,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { _deleteHelper: { value: false }, + _scrollTracks: { + value: false + }, /* === END: Models === */ /* === BEGIN: Draw cycle === */ prepareForDraw:{ @@ -361,6 +364,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { } this._dragAndDropHelperCoords = false; } + // Do we need to scroll the tracks? + if (this._scrollTracks !== false) { + this.layout_tracks.scrollTop = this._scrollTracks; + this._scrollTracks = false; + } // Do we have a helper to delete? if (this._deleteHelper === true) { if (this._dragAndDropHelper === null) { @@ -732,41 +740,42 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { createNewLayer:{ value:function (object) { - var hashVariable = 0; - - var newLayerName = "", - thingToPush = this.createLayerTemplate(), - myIndex = 0; + var hashVariable = 0, + newLayerName = "", + thingToPush = this.createLayerTemplate(), + myIndex = 0, + i = 0, + arrLayersLength = this.arrLayers.length; - this.currentLayerNumber = this.currentLayerNumber + 1; - newLayerName = "Layer " + this.currentLayerNumber; - thingToPush.layerData.layerName = newLayerName; - thingToPush.layerData.layerID = this.currentLayerNumber; - thingToPush.parentElement = this.application.ninja.currentSelectedContainer; - thingToPush.layerData.isSelected = true; - thingToPush.layerData._isFirstDraw = true; - thingToPush.layerData.created = true; + this.currentLayerNumber = this.currentLayerNumber + 1; + newLayerName = "Layer " + this.currentLayerNumber; + thingToPush.layerData.layerName = newLayerName; + thingToPush.layerData.layerID = this.currentLayerNumber; + thingToPush.parentElement = this.application.ninja.currentSelectedContainer; + thingToPush.layerData.isSelected = true; + thingToPush.layerData._isFirstDraw = true; + thingToPush.layerData.created = true; + + for (i = 0; i < this.arrLayersLength; i++) { + this.arrLayers[i].layerData.isSelected = false; + this.arrLayers[i].layerData._isFirstDraw = false; + } - for (var i = 0; i < this.arrLayers.length; i++) { - this.arrLayers[i].layerData.isSelected = false; - this.arrLayers[i].layerData._isFirstDraw = false; - } + if (this.layerRepetition.selectedIndexes) { + // There is a selected layer, so we need to splice the new layer on top of it. + myIndex = this.layerRepetition.selectedIndexes[0]; + thingToPush.layerData.layerPosition = myIndex; + thingToPush.layerData.trackPosition = myIndex; + this.arrLayers.splice(myIndex, 0, thingToPush); - if (this.layerRepetition.selectedIndexes) { - // There is a selected layer, so we need to splice the new layer on top of it. - myIndex = this.layerRepetition.selectedIndexes[0]; - thingToPush.layerData.layerPosition = myIndex; - thingToPush.layerData.trackPosition = myIndex; - this.arrLayers.splice(myIndex, 0, thingToPush); + } else { + thingToPush.layerData.layerPosition = myIndex; + this.arrLayers.splice(myIndex, 0, thingToPush); - } else { - thingToPush.layerData.layerPosition = myIndex; - this.arrLayers.splice(myIndex, 0, thingToPush); + } - } + this.selectLayer(myIndex); - this.selectLayer(myIndex); -// } } }, @@ -1062,6 +1071,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { // Get the offset var findYOffset = function(obj) { var curleft = curtop = 0; + if (obj.offsetParent) { do { curleft += obj.offsetLeft; @@ -1078,8 +1088,22 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { }, handleLayerDragover: { value: function(event) { - var currPos = 0; - currPos = event.y - this._dragAndDropHelperOffset -28; + 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; this._dragAndDropHelperCoords = currPos + "px"; this.needsDraw = true; } -- cgit v1.2.3