diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 154 |
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; | ||
808 | 801 | ||
809 | this.deselectTweens(); | 802 | this.deselectTweens(); |