aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js')
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js154
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, {
109 return; 109 return;
110 } 110 }
111 if (newVal !== this._selectedLayerID) { 111 if (newVal !== this._selectedLayerID) {
112 //console.log('TimelinePanel.selectLayerID.set')
113 var selectIndex = this.getLayerIndexByID(newVal); 112 var selectIndex = this.getLayerIndexByID(newVal);
114 this._selectedLayerID = newVal; 113 this._selectedLayerID = newVal;
115 this._captureSelection = true; 114 this._captureSelection = true;
@@ -135,11 +134,23 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
135 return this._currentLayersSelected; 134 return this._currentLayersSelected;
136 }, 135 },
137 set:function (newVal) { 136 set:function (newVal) {
138 //console.log("TimelinePanel.currentLayersSelected.set, ", newVal);
139 this._currentLayersSelected = newVal; 137 this._currentLayersSelected = newVal;
140 this.cacheTimeline(); 138 this.cacheTimeline();
141 } 139 }
142 }, 140 },
141
142 _currentSelectedContainer: {
143 value: null
144 },
145 currentSelectedContainer: {
146 get: function() {
147 return this._currentSelectedContainer;
148 },
149 set: function(newVal) {
150 this._currentSelectedContainer = newVal;
151 this.handleDocumentChange();
152 }
153 },
143 154
144 _millisecondsOffset:{ 155 _millisecondsOffset:{
145 value:1000 156 value:1000
@@ -228,7 +239,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
228 set:function (value) { 239 set:function (value) {
229 if (this._breadCrumbContainer !== value) { 240 if (this._breadCrumbContainer !== value) {
230 this._breadCrumbContainer = value; 241 this._breadCrumbContainer = value;
231 this.LayerBinding(); 242 //this.LayerBinding();
232 } 243 }
233 } 244 }
234 }, 245 },
@@ -325,10 +336,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
325 value:function () { 336 value:function () {
326 this.initTimeline(); 337 this.initTimeline();
327 // Bind the event handler for the document change events 338 // Bind the event handler for the document change events
328 this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false); 339 //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false);
329 this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false); 340 this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false);
330 this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false); 341 //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false);
331 this.eventManager.addEventListener("breadCrumbBinding",this,false); 342 //this.eventManager.addEventListener("breadCrumbBinding",this,false);
332 343
333 // Bind drag and drop event handlers 344 // Bind drag and drop event handlers
334 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); 345 this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false);
@@ -521,18 +532,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
521 for (i = 0; i < arrEventsLength; i++) { 532 for (i = 0; i < arrEventsLength; i++) {
522 this.eventManager.removeEventListener(arrEvents[i], this, false); 533 this.eventManager.removeEventListener(arrEvents[i], this, false);
523 } 534 }
524
525 } else { 535 } else {
526 for (i = 0; i < arrEventsLength; i++) { 536 for (i = 0; i < arrEventsLength; i++) {
527 this.eventManager.addEventListener(arrEvents[i], this, false); 537 this.eventManager.addEventListener(arrEvents[i], this, false);
528 } 538 }
529
530 Object.defineBinding(this, "breadCrumbContainer", {
531 boundObject:this.application.ninja,
532 boundObjectPropertyPath:"currentSelectedContainer",
533 oneway:true
534 });
535
536 } 539 }
537 } 540 }
538 }, 541 },
@@ -540,8 +543,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
540 // Initialize the timeline, runs only once when the timeline component is first loaded 543 // Initialize the timeline, runs only once when the timeline component is first loaded
541 initTimeline:{ 544 initTimeline:{
542 value:function () { 545 value:function () {
546
547 // Get some selectors
543 this.layout_tracks = this.element.querySelector(".layout-tracks"); 548 this.layout_tracks = this.element.querySelector(".layout-tracks");
544 this.layout_markers = this.element.querySelector(".layout_markers"); 549 this.layout_markers = this.element.querySelector(".layout_markers");
550
551 // Add some event handlers
545 this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false); 552 this.timeline_leftpane.addEventListener("mousedown", this.timelineLeftPaneMousedown.bind(this), false);
546 this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false); 553 this.timeline_leftpane.addEventListener("mouseup", this.timelineLeftPaneMouseup.bind(this), false);
547 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false); 554 this.layout_tracks.addEventListener("scroll", this.updateLayerScroll.bind(this), false);
@@ -551,8 +558,15 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
551 this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); 558 this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false);
552 this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); 559 this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false);
553 560
554 // Initialize BreadCrumb 561 // Bind some bindings
555 562 Object.defineBinding(this, "currentSelectedContainer", {
563 boundObject:this.application.ninja,
564 boundObjectPropertyPath:"currentSelectedContainer",
565 oneway:true
566 });
567
568 // Start the panel out in disabled mode by default
569 // (Will be switched on later, if appropriate).
556 this.enablePanel(false); 570 this.enablePanel(false);
557 571
558 } 572 }
@@ -569,7 +583,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
569 this.drawTimeMarkers(); 583 this.drawTimeMarkers();
570 // Document switching 584 // Document switching
571 // Check to see if we have saved timeline information in the currentDocument. 585 // Check to see if we have saved timeline information in the currentDocument.
572 //debugger;
573 if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) { 586 if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) {
574 //console.log('TimelinePanel.initTimelineForDocument: new Document'); 587 //console.log('TimelinePanel.initTimelineForDocument: new Document');
575 // No, we have no information stored. 588 // No, we have no information stored.
@@ -695,34 +708,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
695 }, 708 },
696 709
697 handleDocumentChange:{ 710 handleDocumentChange:{
698 value:function (event) { 711 value:function () {
699 // Clear the timeline but not the cache 712 if (this.application.ninja.currentDocument == null) {
700 //console.log('TimelinePanel.handleDocumentChange'); 713 // On app initialization, the binding is triggered before
701 if(event === undefined){ 714 // there is a currentDocument. We don't do anything at that time.
702 this.application.ninja.currentDocument.setLevel = true; 715 return;
703 this._boolCacheArrays = false; 716 }
704 this.clearTimelinePanel(); 717 this.application.ninja.currentDocument.setLevel = true;
705 this._boolCacheArrays = true;
706
707 // Rebind the document events for the new document context
708 this._bindDocumentEvents();
709
710 // Reinitialize the timeline...but only if there are open documents.
711 if (this.application.ninja.documentController._documents.length > 0) {
712 this.enablePanel(true);
713 this.initTimelineForDocument();
714
715 } else {
716 this.enablePanel(false);
717 }
718
719 return;
720 }
721 if ((event.type === "closeDocument") && (this.application.ninja.documentController._documents.length > 0)) {
722 // Ignore extra closeDocument event that fires while there are still documents open.
723 return;
724 }
725 //console.log(event.type);
726 this._boolCacheArrays = false; 718 this._boolCacheArrays = false;
727 this.clearTimelinePanel(); 719 this.clearTimelinePanel();
728 this._boolCacheArrays = true; 720 this._boolCacheArrays = true;
@@ -734,7 +726,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
734 if (this.application.ninja.documentController._documents.length > 0) { 726 if (this.application.ninja.documentController._documents.length > 0) {
735 this.enablePanel(true); 727 this.enablePanel(true);
736 this.initTimelineForDocument(); 728 this.initTimelineForDocument();
737 729
738 } else { 730 } else {
739 this.enablePanel(false); 731 this.enablePanel(false);
740 } 732 }
@@ -804,7 +796,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
804 i = 0, 796 i = 0,
805 j = 0, 797 j = 0,
806 arrLayersLength = this.arrLayers.length, 798 arrLayersLength = this.arrLayers.length,
807 intNumSelected = this.application.ninja.selectedElements.length; 799 intNumSelected = this.application.ninja.selectedElements.length,
800 checkIndex = 0;