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