aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorJon Reid2012-04-26 13:12:12 -0700
committerJon Reid2012-04-26 13:12:12 -0700
commit47e63e06fe01a1d66d3909b5f6acc0d987f97d9d (patch)
tree54bb0e81e137b702dbb165ef77e560e2a43fe0c1 /js/panels/Timeline
parent37cd368207f250e4408eb1aaffc1d404b587420b (diff)
downloadninja-47e63e06fe01a1d66d3909b5f6acc0d987f97d9d.tar.gz
Timeline: Decouple Timeline and Breadcrumb. Remove most document change
event handlers. Bind Timeline to currentSelectedElement. Various bug fixes.
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js15
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js154
2 files changed, 98 insertions, 71 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index baf01def..f2e20d41 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -125,6 +125,21 @@ var Layer = exports.Layer = Montage.create(Component, {
125 this._docUUID = newVal; 125 this._docUUID = newVal;
126 } 126 }
127 }, 127 },
128
129
130 _elementsList : {
131 value: []
132 },
133 elementsList : {
134 serializable: true,
135 get: function() {
136 return this._elementsList;
137 },
138 set: function(newVal) {
139 this._elementsList = newVal;
140 }
141 },
142
128 /* Position and Transform hottext values */ 143 /* Position and Transform hottext values */
129 _dtextPositionX : { 144 _dtextPositionX : {
130 value:null, 145 value:null,
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 }