Timeline: Decouple Timeline and Breadcrumb. Remove most document change

event handlers. Bind Timeline to currentSelectedElement. Various bug fixes.

1 files changed, 83 insertions, 71 deletions

diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index ef85e067..51d854f9 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -109,7 +109,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 return;
             }
             if (newVal !== this._selectedLayerID) {
-                //console.log('TimelinePanel.selectLayerID.set')
                 var selectIndex = this.getLayerIndexByID(newVal);
                 this._selectedLayerID = newVal;
                 this._captureSelection = true;
@@ -135,11 +134,23 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             return this._currentLayersSelected;
         },
         set:function (newVal) {
-                //console.log("TimelinePanel.currentLayersSelected.set, ", newVal);
             this._currentLayersSelected = newVal;
             this.cacheTimeline();
         }
     },
+    
+    _currentSelectedContainer: {
+        value: null
+    },
+    currentSelectedContainer: {
+        get: function() {
+                return this._currentSelectedContainer;
+        },
+        set: function(newVal) {
+                this._currentSelectedContainer = newVal;
+                this.handleDocumentChange();
+        }
+    },
 
     _millisecondsOffset:{
         value:1000
@@ -228,7 +239,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         set:function (value) {
             if (this._breadCrumbContainer !== value) {
                 this._breadCrumbContainer = value;
-                this.LayerBinding();
+                //this.LayerBinding();
             }
         }
     },
@@ -325,10 +336,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
         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("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);
+            //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);
@@ -521,18 +532,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 for (i = 0; i < arrEventsLength; i++) {
                     this.eventManager.removeEventListener(arrEvents[i], this, false);
                 }
-
             } else {
                 for (i = 0; i < arrEventsLength; i++) {
                     this.eventManager.addEventListener(arrEvents[i], this, false);
                 }
-
-                Object.defineBinding(this, "breadCrumbContainer", {
-                    boundObject:this.application.ninja,
-                    boundObjectPropertyPath:"currentSelectedContainer",
-                    oneway:true
-                });
-
             }
         }
     },
@@ -540,8 +543,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     // Initialize the timeline, runs only once when the timeline component is first loaded
     initTimeline:{
         value:function () {
+                
+                // Get some selectors
             this.layout_tracks = this.element.querySelector(".layout-tracks");
             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.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
@@ -551,8 +558,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false);
             this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false);
             
-            // Initialize BreadCrumb 
-
+            // Bind some bindings
+            Object.defineBinding(this, "currentSelectedContainer", {
+                boundObject:this.application.ninja,
+                boundObjectPropertyPath:"currentSelectedContainer",
+                oneway:true
+            });
+            
+                        // Start the panel out in disabled mode by default
+                        // (Will be switched on later, if appropriate).
             this.enablePanel(false);
 
         }
@@ -569,7 +583,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             this.drawTimeMarkers();
             // Document switching
             // Check to see if we have saved timeline information in the currentDocument.
-                //debugger;
             if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) {
                 //console.log('TimelinePanel.initTimelineForDocument: new Document');
                 // No, we have no information stored.
@@ -695,34 +708,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
     },
 
     handleDocumentChange:{
-        value:function (event) {
-            // Clear the timeline but not the cache
-            //console.log('TimelinePanel.handleDocumentChange');
-            if(event === undefined){
-                this.application.ninja.currentDocument.setLevel = true;
-                this._boolCacheArrays = false;
-                this.clearTimelinePanel();
-                this._boolCacheArrays = true;
-
-                // Rebind the document events for the new document context
-                this._bindDocumentEvents();
-
-                // Reinitialize the timeline...but only if there are open documents.
-                if (this.application.ninja.documentController._documents.length > 0) {
-                    this.enablePanel(true);
-                    this.initTimelineForDocument();
-
-                } else {
-                    this.enablePanel(false);
-                }
-
-                return;
-            }
-            if ((event.type === "closeDocument") && (this.application.ninja.documentController._documents.length > 0)) {
-                // Ignore extra closeDocument event that fires while there are still documents open.
-                return;
-            }
-            //console.log(event.type);
+        value:function () {
+                        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;
             this._boolCacheArrays = false;
             this.clearTimelinePanel();
             this._boolCacheArrays = true;
@@ -734,7 +726,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             if (this.application.ninja.documentController._documents.length > 0) {
                 this.enablePanel(true);
                 this.initTimelineForDocument();
-                
+
             } else {
                 this.enablePanel(false);
             }
@@ -804,7 +796,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
                 i = 0,
                 j = 0,
                 arrLayersLength = this.arrLayers.length,