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') 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