1 files changed, 246 insertions, 129 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 7f4fee89..f6e0e252 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:{
@@ -91,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
@@ -135,6 +151,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
@@ -240,10 +270,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         }
     },
 
-    _isLayer:{
-        value:false
-    },
-
     _firstTimeLoaded:{
         value:true
     },
@@ -370,35 +396,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,9 +450,26 @@ 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";
+                }
 
         }
     },
+        // 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
@@ -504,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;
                         }
         }
     },
@@ -517,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 = [];
         }
     },
     
@@ -597,15 +613,40 @@ 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);
+            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);