From 53a604d0ccb1315576b94406cf3b0b958162307b Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Fri, 27 Apr 2012 14:41:15 -0700
Subject: Timeline: Multiselect.

---
 .../Timeline/TimelinePanel.reel/TimelinePanel.js   | 166 +++++++++++++++++++--
 1 file changed, 151 insertions(+), 15 deletions(-)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 70e04b4c..546a6abf 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -138,6 +138,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.cacheTimeline();
         }
     },
+    // The index of the last layer that was clicked on
+    // (used for shift-click multiselect)
+    _lastLayerClicked : {
+    	value: 0
+    }, 
+    lastLayerClicked: {
+    	serializable: true,
+    	get: function() {
+    		return this._lastLayerClicked;
+    	},
+    	set: function(newVal) {
+    		this._lastLayerClicked = newVal
+    	}
+    },
     
     _currentSelectedContainer: {
     	value: null
@@ -406,6 +420,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     		}
     	}
     },
+	// is the control key currently being pressed (used for multiselect)
+	_isControlPressed: {
+		value: false
+	},
+
+	// is the shift key currently being pressed (used for multiselect) 
+	_isShiftPressed: {
+		value: false
+	},
     /* === END: Draw cycle === */
     /* === BEGIN: Controllers === */
     // Create an empty layer template object with minimal defaults and return it for use
@@ -549,14 +572,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.layout_markers = this.element.querySelector(".layout_markers");
             
             // Add some event handlers
-            this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false);
-            this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false);
+            //this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false);
+            this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false);
+            //this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false);
             this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
             this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
             this.end_hottext.addEventListener("changing", this.updateTrackContainerWidth.bind(this), false);
             this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false);
             this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false);
             this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false);
+            document.addEventListener("keydown", this.timelineLeftPaneKeydown.bind(this), false);
+            document.addEventListener("keyup", this.timelineLeftPaneKeyup.bind(this), false);
             
             // Bind some bindings
             Object.defineBinding(this, "currentSelectedContainer", {
@@ -848,15 +874,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
 
     selectLayers:{
-        value:function (arrSelectedIndexes) {
+        value:function (arrSelectedIndexes, userSelection) {
 
             var i = 0,
             	arrLayersLength = this.arrLayers.length,
             	arrSelectedIndexesLength = arrSelectedIndexes.length,
-            	userSelection = false;
+            	arrSelectedLayers = false;
             
-            //console.log(arrSelectedIndexes);
+            if (typeof(userSelection) === "undefined") {
+            	userSelection = false;
+            }
             
+            console.log(arrSelectedIndexes);
+
 
             if (this.selectedKeyframes) {
                 this.deselectTweens();
@@ -867,9 +897,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             	this.triggerLayerBinding(i);
             }
             
-            this.currentLayersSelected = false;
             if (arrSelectedIndexesLength > 0) {
-            	this.currentLayersSelected = [];
+            	arrSelectedLayers = [];
             }
             
             
@@ -878,12 +907,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             		this.arrLayers[i].layerData.isSelected = true;
             		this.arrLayers[i].isSelected = true;
             		this.triggerLayerBinding(i);
-            		this.currentLayersSelected.push(i);
+            		arrSelectedLayers.push(i);
+            		
+            		if (userSelection && this._captureSelection) {
+            			this.application.ninja.selectionController.selectElements(this.arrLayers[i].layerData.elementsList);
+            		}
             	}
             }
-
+			
+			this.currentLayersSelected = arrSelectedLayers;
             this.layerRepetition.selectedIndexes = arrSelectedIndexes;
 
+/*
 			// TODO: Set up for user selection.
             if (userSelection) {
                 if (this._captureSelection) {
@@ -897,7 +932,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 }
                 this._captureSelection = true;
             }
-            
+*/
             // Finally, reset the master duration.
             this.resetMasterDuration();
         }
@@ -932,16 +967,117 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 }
                 
             }
-            this._isMousedown = true;
         }
     },
 
-    timelineLeftPaneMouseup:{
+	timelineLeftPanelMousedown: {
         value:function (event) {
-			this._isMousedown = false;
+        	console.log('click')
+            var ptrParent = nj.queryParentSelector(event.target, ".container-layer"),
+            	i = 0,
+            	arrLayers = document.querySelectorAll(".container-layer"),
+            	arrLayersLength = arrLayers.length,
+            	targetIndex = 0,
+	            isAlreadySelected = false,
+	            indexAlreadySelected = 0,
+	            indexLastClicked = 0;
+			
+			// Get targetIndex, the index of the clicked target within the DOM array of layers
+			if (ptrParent === false) {
+				return;
+			}
+            for (i = 0; i < arrLayersLength; i++) {
+            	if (arrLayers[i] == ptrParent) {
+            		targetIndex = i;
+            	}
+            }
+			if (this.currentLayersSelected !== false) {
+				indexAlreadySelected = this.currentLayersSelected.indexOf(targetIndex);
+			}
+			
+			if (indexAlreadySelected > -1) {
+				isAlreadySelected = true;
+			}
+			
+			if (targetIndex > -1) {
+				indexLastClicked = targetIndex;
+			}
+            
+            if (this.currentLayersSelected.length === 0) {
+            	this.currentLayersSelected.push(targetIndex);
+            } else {
+	            if (this._isControlPressed === true) {
+	            	// Control key is being pressed, so we need to 
+	            	// either add the current layer to selectedLayers
+	            	// or remove it if it's already there.
+					if (this.currentLayersSelected === false) {
+						this.currentLayersSelected = [];
+						this.currentLayerSelected = false;
+					}
+	            	if (isAlreadySelected === false) {
+	            		this.currentLayersSelected.push(targetIndex);
+	            	} else {
+	            		this.currentLayersSelected.splice(indexAlreadySelected, 1);
+	            	}
+	            	this.lastLayerClicked = indexLastClicked;
+	            } else if (this._isShiftPressed === true) {
+	            	// The shift key is being pressed.
+	            	// Start by selecting the lastLayerClicked
+					if (this.currentLayersSelected === false) {
+						this.currentLayersSelected = [];
+						this.currentLayerSelected = false;
+					}
+					this.currentLayersSelected = [this.lastLayerClicked];
+					// Add all the layers between lastLayerClicked and targetIndex
+	            	if (targetIndex > this.lastLayerClicked) {
+	            		for (i = this.lastLayerClicked+1; i <= targetIndex; i++) {
+	            			this.currentLayersSelected.push(i);
+	            		}
+	            	} else if (targetIndex < this.lastLayerClicked) {
+	            		for (i = targetIndex; i < this.lastLayerClicked; i++) {
+	            			this.currentLayersSelected.push(i);
+	            		}
+	            	}
+	            } else {
+	            	// No key is pressed, so just select the element
+	            	// and update lastLayerClicked
+	            	this.currentLayersSelected = [targetIndex];
+	            	this.lastLayerClicked = targetIndex;
+	            }
+	            
+            }
+            this._captureSelection = true;
+            this.selectLayers(this.currentLayersSelected, true);
         }
-    },
-
+	},
+
+	timelineLeftPaneKeydown: {
+		value: function(event) {
+			console.log('keydown')
+			if (event.keyCode === 16) {
+				// Shift key has been pressed
+				this._isShiftPressed = true;
+			}
+			if (event.keyCode === 17) {
+				// Control key has been pressed
+				this._isControlPressed = true;
+			}
+		}
+	},
+    
+	timelineLeftPaneKeyup: {
+		value: function(event) {
+			console.log('keyup')
+			if (event.keyCode === 16) {
+				// Shift key has been released
+				this._isShiftPressed = false;
+			}
+			if (event.keyCode === 17) {
+				// Control key has been released
+				this._isControlPressed = false;
+			}
+		}
+	},
     createNewLayer:{
         value:function (object) {
             var newLayerName = "",
-- 
cgit v1.2.3


From 73c4f7f449ba58e70f7335ef932b23dd450c925b Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 1 May 2012 17:46:09 -0700
Subject: Timeline: Initial keyframe drag-and-drop interaction.

---
 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 6 ++++++
 1 file changed, 6 insertions(+)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 6e64cde0..80baffc8 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -336,6 +336,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
             this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
             this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
+            //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
             this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
             
             // Bind the handlers for the config menu
@@ -1471,6 +1472,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     		this.needsDraw = true;
     	}
     },
+    handleKeyframeDragover: {
+    	value: function(event) {
+    		
+    	}
+    },
     handleLayerDragEnd : {
     	value: function(event) {
     		this._deleteHelper = true;
-- 
cgit v1.2.3


From d582eb28c04eb8e1f1fa7a729ee20f2e7a0fb935 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Thu, 3 May 2012 16:47:18 -0700
Subject: Timeline: Bug fix: Master Duration not updating when all documents
 are closed.

---
 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 80baffc8..cbd89b47 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -177,7 +177,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         },
         set:function (val) {
             this._masterDuration = val;
-            this.timebar.style.width = (this._masterDuration / 12) + "px";
+            var intDur = Math.round(val/12),
+           		strWidth = intDur + "px";
+            this.timebar.style.width = strWidth;
         }
     },
 
@@ -515,8 +517,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                              "deleteLayer",
                              "elementAdded",
                              "elementsRemoved",
-                             "elementReplaced",
-                             "selectionChange"],
+                             "elementReplaced"],
+                             //"selectionChange"],
                 i,
                 arrEventsLength = arrEvents.length;
 
@@ -690,12 +692,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this._openDoc = false;
             this.end_hottext.value = 25;
             this.updateTrackContainerWidth();
-            this.masterDuration = 0;
             // Clear the repetitions
             if (this.arrLayers.length > 0) {
                 this.arrLayers = [];
                 this.arrLayers.length = 0;
             }
+            this.resetMasterDuration();
         }
     },
 
-- 
cgit v1.2.3


From 8964e070fa760d23c2de272ca36b8d9beba6007d Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Fri, 4 May 2012 12:55:23 -0700
Subject: Timeline: More fixes to selection changing and document switching.

---
 .../Timeline/TimelinePanel.reel/TimelinePanel.js   | 45 +++++++++++++++++-----
 1 file changed, 36 insertions(+), 9 deletions(-)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 48818e44..cb4fbf07 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -329,6 +329,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     useAbsolutePosition:{
         value:true
     },
+    _currentDocumentUuid: {
+    	value: false
+    },
+    _ignoreSelectionChanges: {
+    	value: false
+    },
     /* === END: Models === */
     /* === BEGIN: Draw cycle === */
     prepareForDraw:{
@@ -584,6 +590,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.drawTimeMarkers();
             // Document switching
             // Check to see if we have saved timeline information in the currentDocument.
+            //console.log("TimelinePanel.initTimelineForDocument");
+
             if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) {
             	//console.log('TimelinePanel.initTimelineForDocument: new Document');
                 // No, we have no information stored.
@@ -609,12 +617,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 // Draw the repetition.
                 this.arrLayers = this.temparrLayers;
                 this.currentLayerNumber = this.arrLayers.length;
+                this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
                 boolAlreadyInitialized = true;
                 
 			} else if (this.application.ninja.currentDocument.setLevel) {
             	//console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick');
 				// Information stored, but we're moving up or down in the breadcrumb.
 				// Get the current selection and restore timeline info for its children.
+				//debugger;
                 var parentNode = this.application.ninja.currentSelectedContainer,
                 	storedCurrentLayerNumber = this.application.ninja.currentDocument.tllayerNumber;
                 this.temparrLayers = [];
@@ -650,6 +660,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber;
                 this.currentLayerSelected = this.application.ninja.currentDocument.tlCurrentLayerSelected;
                 this.currentLayersSelected = this.application.ninja.currentDocument.tlCurrentLayersSelected;
+                this._currentDocumentUuid = this.application.ninja.currentDocument.uuid;
 
 
                 //debugger;
@@ -710,12 +721,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     handleDocumentChange:{
         value:function () {
+        	// console.log("TimelinePanel.handleDocumentChange");
+        	
 			if (this.application.ninja.currentDocument == null) {
 				// On app initialization, the binding is triggered before
 				// there is a currentDocument.  We don't do anything at that time.
 				return;
 			}
-            // this.application.ninja.currentDocument.setLevel = true;
+			
+			// Is this the same document?
+			if (this._currentDocumentUuid === this.application.ninja.currentDocument.uuid) {
+				// Yes, same document, so we are changing levels.
+				this.application.ninja.currentDocument.setLevel = true;
+				this._ignoreSelectionChanges = true;
+			}
+			
             this._boolCacheArrays = false;
             this.clearTimelinePanel();
             this._boolCacheArrays = true;
@@ -799,15 +819,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             	arrLayersLength = this.arrLayers.length,
             	intNumSelected = this.application.ninja.selectedElements.length,
             	checkIndex = 0;
-            	
-            this.deselectTweens();
-            //console.log("TimelinePanel.handleSelectionChange")
+            
+            //console.log("TimelinePanel.handleSelectionChange, intNumSelected is ", intNumSelected)
+            
             if (intNumSelected === 0) {
-            	this.selectLayers([]);
+            	if (this._ignoreSelectionChanges !== true) {
+            		this.selectLayers([]);
+            	} else {
+            		this._ignoreSelectionChanges = false;
+            	}
+            	
             	this.currentLayerSelected = false;
             	this.currentLayersSelected = false;
             }
-            
+
             if (intNumSelected === 1) {
             	this.currentLayersSelected = false;
                 if (this.application.ninja.selectedElements[0]) {
@@ -858,7 +883,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             
             //console.log(arrSelectedIndexes);
             
-
+			
             if (this.selectedKeyframes) {
                 this.deselectTweens();
             }
@@ -867,8 +892,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             	this.arrLayers[i].layerData.isSelected = false;
             	this.triggerLayerBinding(i);
             }
-            
-            this.currentLayersSelected = false;
+
+            if (this.currentLayersSelected !== false) {
+            	this.currentLayersSelected = false;
+            }
             if (arrSelectedIndexesLength > 0) {
             	this.currentLayersSelected = [];
             }
-- 
cgit v1.2.3


From 0d33ff651baf062b8e82f3a89b69b3ccae0cbe47 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Fri, 4 May 2012 15:01:47 -0700
Subject: Timeline: Restore event handler for selectionChange.

---
 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 3fc8eeaf..03db7880 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -533,8 +533,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                              "deleteLayer",
                              "elementAdded",
                              "elementsRemoved",
-                             "elementReplaced"],
-                             //"selectionChange"],
+                             "elementReplaced",
+                             "selectionChange"],
                 i,
                 arrEventsLength = arrEvents.length;
 
-- 
cgit v1.2.3


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/TimelinePanel.reel/TimelinePanel.js   | 111 +++++++++++++++++++--
 1 file changed, 105 insertions(+), 6 deletions(-)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 03db7880..4b82814b 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -259,6 +259,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     timeMarkerHolder:{
         value:null
     },
+    
+    // Drag and Drop properties
     _dragAndDropHelper : {
     	value: false
     },
@@ -328,6 +330,21 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     _scrollTracks: {
     	value: false
     },
+    
+    // Keyframe drag and drop properties
+    _draggingTrackId: {
+    	value: false
+    },
+    draggingTrackId: {
+    	get: function() {
+    		return this._draggingTrackId;
+    	},
+    	set: function(newVal) {
+    		this._draggingTrackId = newVal;
+    	}
+    },
+    
+    
     useAbsolutePosition:{
         value:true
     },
@@ -352,8 +369,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
             this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
             this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
-            //this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
             this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
+            this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
+            this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
             
             // Bind the handlers for the config menu
             this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false);
@@ -1501,11 +1519,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     		this.needsDraw = true;
     	}
     },
-    handleKeyframeDragover: {
-    	value: function(event) {
-    		
-    	}
-    },
     handleLayerDragEnd : {
     	value: function(event) {
     		this._deleteHelper = true;
@@ -1521,6 +1534,92 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.needsDraw = true;
     	}
     },
+    
+    // Keyframe drag-and-drop
+    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.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) {
+    			currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition;
+    		}
+    		if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) {
+    			currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition;
+    		}
+    		//debugger;
+    		this.trackRepetition.childComponents[this.draggingTrackId-1].dragAndDropHelperCoords = currPos + "px";
+    		this.trackRepetition.childComponents[this.draggingTrackId-1].needsDraw = true;
+    		return false;
+    	}
+    },
+    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.millisecondsOffset / 80),
+				currentMillisec = 0,
+				i = 0, 
+				tweenIndex = this.trackRepetition.childComponents[this.draggingTrackId-1].draggingIndex;
+				
+			// too much or too little?
+    		if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) {
+    			currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition + 3;
+    		}
+    		if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) {
+    			currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition + 3;
+    		}
+    		
+    		currentMillisec = currentMillisecPerPixel * currPos;
+
+			this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanWidth = currPos - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex - 1].tweenData.keyFramePosition;
+			this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.keyFramePosition = currPos;
+			this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec;
+			this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanPosition = currPos - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanWidth;
+			this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex].setData();
+			if (tweenIndex < this.trackRepetition.childComponents[this.draggingTrackId-1].tweens.length -1) {
+				var spanWidth = this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.keyFramePosition - currPos;
+				var spanPosition = currPos; 
+				this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.spanWidth = spanWidth;
+				this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.spanPosition = currPos;
+				this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex+1].setData();
+			}
+			this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex].selectTween();
+			this.trackRepetition.childComponents[this.draggingTrackId-1].updateKeyframeRule();
+			return false;
+    	}
+    },
     /* === END: Controllers === */
 
     /* === BEGIN: Logging routines === */
-- 
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.

---
 .../Timeline/TimelinePanel.reel/TimelinePanel.js   | 26 ++++++++++++++++++++++
 1 file changed, 26 insertions(+)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 4b82814b..41472359 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -273,6 +273,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     _dragLayerID : {
     	value: null
     },
+    _draggingType: {
+    	value: false
+    },
+    draggingType: {
+    	get: function() {
+    		return this._draggingType;
+    	},
+    	set: function(newVal) {
+    		this._draggingType = newVal;
+    	}
+    },
 
     layersDragged:{
            value:[],
@@ -1499,6 +1510,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     handleLayerDragover: {
     	value: function(event) {
+    		if (this.draggingType !== "layer") {
+    			return;
+    		}
     		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)) {
@@ -1521,6 +1535,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     handleLayerDragEnd : {
     	value: function(event) {
+    		if (this.draggingType !== "layer") {
+    			return;
+    		}
     		this._deleteHelper = true;
     		this.needsDraw = true;
            
@@ -1528,6 +1545,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     handleLayerDrop : {
     	value: function(event) {
+    		if (this.draggingType !== "layer") {
+    			return;
+    		}
             event.stopPropagation();
             event.preventDefault();
             this._deleteHelper = true; 
@@ -1538,6 +1558,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     // Keyframe drag-and-drop
     handleKeyframeDragover: {
     	value: function(event) {
+    		if (this.draggingType !== "keyframe") {
+    			return;
+    		}
     		event.preventDefault();
     		var currPos = 0;
     		/*
@@ -1574,6 +1597,9 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     handleKeyframeDrop: {
     	value: function(event) {
+    		if (this.draggingType !== "keyframe") {
+    			return;
+    		}
 			event.stopPropagation();
 			//this.element.classList.remove("dragOver");
 			//if (this.parentComponent.parentComponent.dragLayerID !== this.layerID) {
-- 
cgit v1.2.3


From bafa105c753a139847ef5e0bc8070ce0e8d16f77 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 8 May 2012 12:04:57 -0700
Subject: Timeline: Bug fix: Account for horizontal scroll when dragging
 keyframes.

---
 js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 41472359..933ed9cc 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -1580,7 +1580,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     		}
     		*/
     		//currPos = event.y - (this._dragAndDropHelperOffset - this.user_layers.scrollTop)- 28;
-    		currPos = event.x - 277;
+
+    		currPos = (event.x + this.layout_tracks.scrollLeft) - 277;
     		
     		// too much or too little?
     		if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) {
@@ -1613,7 +1614,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 			 * 
 			 */
 			
-			var currPos = event.x - 274,
+			var currPos = (event.x + this.layout_tracks.scrollLeft) - 277,
 				currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80),
 				currentMillisec = 0,
 				i = 0, 
-- 
cgit v1.2.3


From 88c7e0abba3349531450efbcecfa1b71fbf5134a Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 8 May 2012 13:59:17 -0700
Subject: Timeline: Automatic scrolling during dragging of keyframes.

---
 .../Timeline/TimelinePanel.reel/TimelinePanel.js   | 184 +++++++++++----------
 1 file changed, 98 insertions(+), 86 deletions(-)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 933ed9cc..80525056 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -404,45 +404,56 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     
     draw: {
     	value: function() {
+    		
     		// Drag and Drop:
-    		// Do we have a helper to append?
-            if (this._appendHelper === true) {
-            	this.container_layers.appendChild(this._dragAndDropHelper);
-            	this._appendHelper = false;
-            }
-            // Do we need to move the helper?
-    		if (this._dragAndDropHelperCoords !== false) {
-    			if (this._dragAndDropHelper !== null) {
-    				this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
-    			}
-    			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) {
-    				// 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;
-	            	}
+    		if (this.draggingType === "layer") {
+	    		
+	    		// Do we have a helper to append?
+	            if (this._appendHelper === true) {
+	            	this.container_layers.appendChild(this._dragAndDropHelper);
+	            	this._appendHelper = false;
 	            }
-                this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace);
-                this.layersDragged =[];
+	            // Do we need to move the helper?
+	    		if (this._dragAndDropHelperCoords !== false) {
+	    			if (this._dragAndDropHelper !== null) {
+	    				this._dragAndDropHelper.style.top = this._dragAndDropHelperCoords;
+	    			}
+	    			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) {
+	    				// 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;
+		            	}
+		            }
+	                this.application.ninja.elementMediator.reArrangeDOM(this.layersDragged , this._layerDroppedInPlace);
+	                this.layersDragged =[];
+	    		}
+    		} else if (this.draggingType === "keyframe") {
+	    		// Do we need to scroll the tracks?
+	    		if (this._scrollTracks !== false) {
+	    			this.layout_tracks.scrollLeft = this._scrollTracks;
+	    			this._scrollTracks = false;
+	    		}
     		}
+
     	}
     },
     /* === END: Draw cycle === */
@@ -1510,6 +1521,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     handleLayerDragover: {
     	value: function(event) {
+    		
+    		// If this isn't a layer event we don't do anything.
     		if (this.draggingType !== "layer") {
     			return;
     		}
@@ -1535,6 +1548,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     handleLayerDragEnd : {
     	value: function(event) {
+    		
+    		// If this isn't a layer event we don't do anything.
     		if (this.draggingType !== "layer") {
     			return;
     		}
@@ -1545,6 +1560,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     handleLayerDrop : {
     	value: function(event) {
+    		
+    		// If this isn't a layer event we don't do anything.
     		if (this.draggingType !== "layer") {
     			return;
     		}
@@ -1558,39 +1575,35 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     // Keyframe drag-and-drop
     handleKeyframeDragover: {
     	value: function(event) {
+    		
+    		// If this isn't a keyframe drag and drop event, we don't want to do anything.
     		if (this.draggingType !== "keyframe") {
     			return;
     		}
     		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 + this.layout_tracks.scrollLeft) - 277;
     		
-    		// too much or too little?
+    		// 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-1]._keyframeMaxPosition) {
     			currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition;
     		}
-    		//debugger;
+
+			// Automatic scrolling when dragged to edge of window
+			if (currPos < (this.layout_tracks.scrollLeft + 10)) {
+				this._scrollTracks = (this.layout_tracks.scrollLeft -10);
+				this.needsDraw = true;
+			}
+			if (currPos > (this.layout_tracks.offsetWidth + this.layout_tracks.scrollLeft - 20)) {
+				this._scrollTracks = (this.layout_tracks.scrollLeft +10);
+				this.needsDraw = true;
+			}
+
+			// 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;
     		return false;
@@ -1598,52 +1611,51 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
     handleKeyframeDrop: {
     	value: function(event) {
+    		
+    		// If this isn't a keyframe drop event, we don't want to do anything.
     		if (this.draggingType !== "keyframe") {
     			return;
     		}
 			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 + this.layout_tracks.scrollLeft) - 277,
 				currentMillisecPerPixel = Math.floor(this.millisecondsOffset / 80),
 				currentMillisec = 0,
-				i = 0, 
-				tweenIndex = this.trackRepetition.childComponents[this.draggingTrackId-1].draggingIndex;
+				i = 0,
+				trackIndex = this.draggingTrackId -1, 
+				tweenIndex = this.trackRepetition.childComponents[trackIndex].draggingIndex;
 				
-			// too much or too little?
-    		if (currPos < this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition) {
-    			currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMinPosition + 3;
+			// Make sure drop happens between previous and next keyframe, if any.
+    		if (currPos < this.trackRepetition.childComponents[trackIndex]._keyframeMinPosition) {
+    			currPos = this.trackRepetition.childComponents[trackIndex]._keyframeMinPosition + 3;
     		}
-    		if (currPos > this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition) {
-    			currPos = this.trackRepetition.childComponents[this.draggingTrackId-1]._keyframeMaxPosition + 3;
+    		if (currPos > this.trackRepetition.childComponents[trackIndex]._keyframeMaxPosition) {
+    			currPos = this.trackRepetition.childComponents[trackIndex]._keyframeMaxPosition + 3;
     		}
     		
+    		// Calculate the millisecond values, set repetitions, and update the rule.
     		currentMillisec = currentMillisecPerPixel * currPos;
 
-			this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanWidth = currPos - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex - 1].tweenData.keyFramePosition;
-			this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.keyFramePosition = currPos;
-			this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec;
-			this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanPosition = currPos - this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex].tweenData.spanWidth;
-			this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex].setData();
-			if (tweenIndex < this.trackRepetition.childComponents[this.draggingTrackId-1].tweens.length -1) {
-				var spanWidth = this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.keyFramePosition - currPos;
-				var spanPosition = currPos; 
-				this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.spanWidth = spanWidth;
-				this.trackRepetition.childComponents[this.draggingTrackId-1].tweens[tweenIndex +1].tweenData.spanPosition = currPos;
-				this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex+1].setData();
+			this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex].tweenData.spanWidth = 
+				currPos - this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex - 1].tweenData.keyFramePosition;
+				
+			this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex].tweenData.keyFramePosition = currPos;
+			this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex].tweenData.keyFrameMillisec = currentMillisec;
+			
+			this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex].tweenData.spanPosition = 
+				currPos - this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex].tweenData.spanWidth;
+				
+			this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex].setData();
+			
+			if (tweenIndex < this.trackRepetition.childComponents[trackIndex].tweens.length -1) {
+				var spanWidth = this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex +1].tweenData.keyFramePosition - currPos,
+					spanPosition = currPos; 
+				this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex +1].tweenData.spanWidth = spanWidth;
+				this.trackRepetition.childComponents[trackIndex].tweens[tweenIndex +1].tweenData.spanPosition = currPos;
+				this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex+1].setData();
 			}
-			this.trackRepetition.childComponents[this.draggingTrackId-1].tweenRepetition.childComponents[tweenIndex].selectTween();
-			this.trackRepetition.childComponents[this.draggingTrackId-1].updateKeyframeRule();
+			this.trackRepetition.childComponents[trackIndex].tweenRepetition.childComponents[tweenIndex].selectTween();
+			this.trackRepetition.childComponents[trackIndex].updateKeyframeRule();
 			return false;
     	}
     },
-- 
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/TimelinePanel.reel/TimelinePanel.js   | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

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,
-- 
cgit v1.2.3


From 8c464561e0c55dc5bf67e1e815678e0d07dc4727 Mon Sep 17 00:00:00 2001
From: Jonathan Duran
Date: Mon, 14 May 2012 10:53:20 -0700
Subject: Squashed commit of the following:

commit b23502b8ed6856981d09577d4cf24283e5db8afa
Author: Kruti Shah <kruti.shah@motorola.com>
Date:   Mon May 14 10:48:16 2012 -0700

    Removed Debugger

    Signed-off-by: Kruti Shah <kruti.shah@motorola.com>

commit c0b531a074e9cf9a964da0cda496bba8d7453ec1
Author: Kruti Shah <kruti.shah@motorola.com>
Date:   Fri May 11 13:55:18 2012 -0700

    Changing Doc Layer Name

    Signed-off-by: Kruti Shah <kruti.shah@motorola.com>

Signed-off-by: Jonathan Duran <jduran@motorola.com>
---
 .../Timeline/TimelinePanel.reel/TimelinePanel.js    | 21 +++++++++++----------
 1 file changed, 11 insertions(+), 10 deletions(-)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 8859e115..7f4fee89 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -402,7 +402,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
     
-    draw: {
+    draw:{
     	value: function() {
     		
     		// Drag and Drop:
@@ -568,8 +568,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     // Bind all document-specific events (pass in true to unbind)
     _bindDocumentEvents : {
         value: function(boolUnbind) {
-            var arrEvents = ["deleteLayerClick",
-                             "newLayer",
+            var arrEvents = [ "newLayer",
                              "deleteLayer",
                              "elementAdded",
                              "elementsRemoved",
@@ -1014,7 +1013,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
 			// Make up a layer name.
             this.currentLayerNumber = this.currentLayerNumber + 1;
-            newLayerName = "Layer " + this.currentLayerNumber;
+//            newLayerName = "Layer " + this.currentLayerNumber;
+            newLayerName="         ";
 
 			// Possibly currentLayerNumber doesn't correctly reflect the
 			// number of layers.  Check that.
@@ -1074,12 +1074,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             var newLayerName, thingToPush = this.createLayerTemplate();
 
             this.currentLayerNumber = this.currentLayerNumber + 1;
-            newLayerName = "Layer " + this.currentLayerNumber;
+//            newLayerName = "Layer " + this.currentLayerNumber;
 
-            if(ele.dataset.storedLayerName){
-                newLayerName = ele.dataset.storedLayerName;
+//            if(ele.dataset.storedLayerName){
+//                newLayerName = ele.dataset.storedLayerName;
+//            }
+            if(ele.id){
+                thingToPush.layerData.layerName = ele.id;
             }
-            thingToPush.layerData.layerName = newLayerName;
             thingToPush.layerData.layerID = this.currentLayerNumber;
             thingToPush.layerData.layerTag = "<" + ele.nodeName.toLowerCase() + ">";
             thingToPush.parentElement = this.application.ninja.currentSelectedContainer;
@@ -1170,7 +1172,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             	this.currentLayerSelected.layerData.elementsList = [];
             }
             this.currentLayerSelected.layerData.elementsList.push(this.application.ninja.selectedElements[0]);
-            this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName;
+//            this.currentLayerSelected.layerData.elementsList[0].dataset.storedLayerName = this.currentLayerSelected.layerData.layerName;
         }
     },
 
@@ -1178,7 +1180,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         value:function (event) {
             var deleteElements = event.detail;
             //console.log("TimelinePanel.handleElementsRemoved; event.detail is ", event.detail);
-            //debugger;
             this.deleteLayer(deleteElements);
         }
     },
-- 
cgit v1.2.3


From e33a4e58c271a9507082694a5268b840fdd05968 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 15 May 2012 11:14:16 -0700
Subject: Timeline: Code cleanup.  Improve efficiency for track scrolling.

---
 .../Timeline/TimelinePanel.reel/TimelinePanel.js   | 72 +++++++++++-----------
 1 file changed, 36 insertions(+), 36 deletions(-)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 7f4fee89..d85259cb 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -57,6 +57,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this._layerRepetition = newVal;
         }
     },
+    
+    _areTracksScrolling: {
+    	value: false
+    },
 
     // Set to false to skip array caching array sets in current document
     _boolCacheArrays:{
@@ -240,10 +244,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
-    _isLayer:{
-        value:false
-    },
-
     _firstTimeLoaded:{
         value:true
     },
@@ -370,35 +370,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     prepareForDraw:{
         value:function () {
             this.initTimeline();
-            // Bind the event handler for the document change events
-            //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
-            this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
-            //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
-            //this.eventManager.addEventListener("breadCrumbBinding",this,false);
-            
-            // Bind drag and drop event handlers
-            this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
-            this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
-            this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
-            this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
-            this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
-            this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
-            
-            // Bind the handlers for the config menu
-            this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false);
-            this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false);
-            this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false);
-            this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false);
-            document.addEventListener("click", this.handleDocumentClick.bind(this), false);
-
-        }
-    },
-
-    willDraw:{
-        value:function () {
-            if (this._isLayer) {
-                this._isLayer = false;
-            }
         }
     },
     
@@ -453,6 +424,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 	    			this._scrollTracks = false;
 	    		}
     		}
+    		
+    		// Do we need to scroll the layers?
+    		if (this._areTracksScrolling) {
+    			this._areTracksScrolling = false;
+	            this.user_layers.scrollTop = this.layout_tracks.scrollTop;
+	            this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft;
+	         	this.playheadmarker.style.top = this.layout_tracks.scrollTop + "px";
+    		}
 
     	}
     },
@@ -597,6 +576,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.layout_tracks = this.element.querySelector(".layout-tracks");
             this.layout_markers = this.element.querySelector(".layout_markers");
             
+            
+            // Bind the event handler for the document change events
+            //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
+            this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
+            //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
+            //this.eventManager.addEventListener("breadCrumbBinding",this,false);
+            
+            // Bind drag and drop event handlers
+            this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
+            this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false);
+            this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false);
+            this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false);
+            this.container_tracks.addEventListener("dragover", this.handleKeyframeDragover.bind(this), false);
+            this.container_tracks.addEventListener("drop", this.handleKeyframeDrop.bind(this), false);
+            
+            // Bind the handlers for the config menu
+            this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false);
+            this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false);
+            this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false);
+            this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false);
+            document.addEventListener("click", this.handleDocumentClick.bind(this), false);
+            
             // Add some event handlers
             this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false);
             this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false);
@@ -824,9 +825,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 
     updateLayerScroll:{
         value:function () {
-            this.user_layers.scrollTop = this.layout_tracks.scrollTop;
-            this.layout_markers.scrollLeft = this.layout_tracks.scrollLeft;
-         	this.playheadmarker.style.top = this.layout_tracks.scrollTop + "px";
+        	this._areTracksScrolling = true;
+        	this.needsDraw = true;
         }
     },
 
-- 
cgit v1.2.3


From 26f1524c049791cb9cd81695c57b84d952a2e7e6 Mon Sep 17 00:00:00 2001
From: Jon Reid
Date: Tue, 15 May 2012 16:08:26 -0700
Subject: Timeline: Multiselect from the layer panel.

---
 .../Timeline/TimelinePanel.reel/TimelinePanel.js   | 184 +++++++++------------
 1 file changed, 82 insertions(+), 102 deletions(-)

(limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 767dc362..f6e0e252 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -95,6 +95,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.cacheTimeline();
         }
     },
+    _currentElementsSelected: {
+    	value: []
+    },
+    currentElementsSelected: {
+    	get: function() {
+    		return this._currentElementsSelected;
+    	},
+    	set: function(newVal) {
+    		this._currentElementsSelected = newVal;
+    		this.cacheTimeline();
+    	}
+    },
 
     _selectedLayerID:{
         value:false
@@ -506,6 +518,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
 	    		this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
 	    		this.application.ninja.currentDocument.tlCurrentLayerSelected = this.currentLayerSelected;
 	    		this.application.ninja.currentDocument.tlCurrentLayersSelected = this.currentLayersSelected;
+	    		this.application.ninja.currentDocument.tlCurrentElementsSelected = this.currentElementsSelected;
 			}
     	}
     },
@@ -519,6 +532,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     		this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
     		this.application.ninja.currentDocument.tlCurrentLayerSelected = false;
     		this.application.ninja.currentDocument.tlCurrentLayersSelected = false;
+    		this.application.ninja.currentDocument.tlCurrentElementsSelected = [];
     	}
     },
     
@@ -622,8 +636,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             document.addEventListener("click", this.handleDocumentClick.bind(this), false);
             
             // Add some event handlers
-            //this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false);
-            this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false);
+            this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPanelMousedown.bind(this), false);
+            //this.timeline_leftpane.addEventListener("click", this.timelineLeftPanelMousedown.bind(this), false);
             //this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false);
             this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
             this.user_layers.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
@@ -708,8 +722,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.currentLayerNumber = storedCurrentLayerNumber;
                 boolAlreadyInitialized = true;
                 this.application.ninja.currentDocument.setLevel = false;
-
-
             } else {
             	//console.log('TimelinePanel.initTimelineForDocument: else fallback');
                 // we do have information stored.  Use it.
@@ -729,6 +741,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 this.currentLayerNumber = this.application.ninja.currentDocument.tllayerNumber;
                 this.currentLayerSelecte