diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 161 |
1 files changed, 90 insertions, 71 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index c55e5a24..d7329ac7 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -15,6 +15,76 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
15 | }, | 15 | }, |
16 | 16 | ||
17 | /* === BEGIN: Models === */ | 17 | /* === BEGIN: Models === */ |
18 | _currentDocument: { | ||
19 | value : null | ||
20 | }, | ||
21 | |||
22 | currentDocument : { | ||
23 | get : function() { | ||
24 | return this._currentDocument; | ||
25 | }, | ||
26 | set : function(value) { | ||
27 | // If it's the same document, do nothing. | ||
28 | if (value === this._currentDocument) { | ||
29 | return; | ||
30 | } | ||
31 | |||
32 | if(!this._currentDocument && value.currentView === "design") { | ||
33 | this.enablePanel(true); | ||
34 | } | ||
35 | |||
36 | this._currentDocument = value; | ||
37 | |||
38 | if(!value) { | ||
39 | this._boolCacheArrays = false; | ||
40 | this.clearTimelinePanel(); | ||
41 | this._boolCacheArrays = true; | ||
42 | this.enablePanel(false); | ||
43 | } else if(this._currentDocument.currentView === "design") { | ||
44 | this._boolCacheArrays = false; | ||
45 | this.clearTimelinePanel(); | ||
46 | this._boolCacheArrays = true; | ||
47 | |||
48 | // Rebind the document events for the new document context | ||
49 | this._bindDocumentEvents(); | ||
50 | |||
51 | // Initialize the timeline for the document. | ||
52 | this.initTimelineForDocument(); | ||
53 | } | ||
54 | } | ||
55 | }, | ||
56 | |||
57 | _currentSelectedContainer: { | ||
58 | value: null | ||
59 | }, | ||
60 | currentSelectedContainer: { | ||
61 | get: function() { | ||
62 | return this._currentSelectedContainer; | ||
63 | }, | ||
64 | set: function(newVal) { | ||
65 | if(this._currentSelectedContainer !== newVal) { | ||
66 | this._currentSelectedContainer = newVal; | ||
67 | if (this._ignoreNextContainerChange === true) { | ||
68 | this._ignoreNextContainerChange = false; | ||
69 | return; | ||
70 | } | ||
71 | this.application.ninja.currentDocument.setLevel = true; | ||
72 | |||
73 | if(this._currentDocument.currentView === "design") { | ||
74 | this._boolCacheArrays = false; | ||
75 | this.clearTimelinePanel(); | ||
76 | this._boolCacheArrays = true; | ||
77 | |||
78 | // Rebind the document events for the new document context | ||
79 | this._bindDocumentEvents(); | ||
80 | |||
81 | // Initialize the timeline for the document. | ||
82 | this.initTimelineForDocument(); | ||
83 | } | ||
84 | } | ||
85 | } | ||
86 | }, | ||
87 | |||
18 | _arrLayers:{ | 88 | _arrLayers:{ |
19 | value:[] | 89 | value:[] |
20 | }, | 90 | }, |
@@ -135,19 +205,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
135 | this.cacheTimeline(); | 205 | this.cacheTimeline(); |
136 | } | 206 | } |
137 | }, | 207 | }, |
138 | 208 | ||
139 | _currentSelectedContainer: { | ||
140 | value: null | ||
141 | }, | ||
142 | currentSelectedContainer: { | ||
143 | get: function() { | ||
144 | return this._currentSelectedContainer; | ||
145 | }, | ||
146 | set: function(newVal) { | ||
147 | this._currentSelectedContainer = newVal; | ||
148 | this.handleDocumentChange(); | ||
149 | } | ||
150 | }, | ||
151 | 209 | ||
152 | _millisecondsOffset:{ | 210 | _millisecondsOffset:{ |
153 | value:1000 | 211 | value:1000 |
@@ -233,7 +291,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
233 | set:function (value) { | 291 | set:function (value) { |
234 | if (this._breadCrumbContainer !== value) { | 292 | if (this._breadCrumbContainer !== value) { |
235 | this._breadCrumbContainer = value; | 293 | this._breadCrumbContainer = value; |
236 | //this.LayerBinding(); | ||
237 | } | 294 | } |
238 | } | 295 | } |
239 | }, | 296 | }, |
@@ -334,12 +391,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
334 | prepareForDraw:{ | 391 | prepareForDraw:{ |
335 | value:function () { | 392 | value:function () { |
336 | this.initTimeline(); | 393 | this.initTimeline(); |
337 | // Bind the event handler for the document change events | 394 | |
338 | //this.eventManager.addEventListener("onOpenDocument", this.handleDocumentChange.bind(this), false); | ||
339 | this.eventManager.addEventListener("closeDocument", this.handleDocumentChange.bind(this), false); | ||
340 | //this.eventManager.addEventListener("switchDocument", this.handleDocumentChange.bind(this), false); | ||
341 | //this.eventManager.addEventListener("breadCrumbBinding",this,false); | ||
342 | |||
343 | // Bind drag and drop event handlers | 395 | // Bind drag and drop event handlers |
344 | this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); | 396 | this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); |
345 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); | 397 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); |
@@ -353,6 +405,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
353 | this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); | 405 | this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); |
354 | document.addEventListener("click", this.handleDocumentClick.bind(this), false); | 406 | document.addEventListener("click", this.handleDocumentClick.bind(this), false); |
355 | 407 | ||
408 | |||
409 | // Bind some bindings | ||
410 | Object.defineBinding(this, "currentSelectedContainer", { | ||
411 | boundObject:this.application.ninja, | ||
412 | boundObjectPropertyPath:"currentSelectedContainer", | ||
413 | oneway:true | ||
414 | }); | ||
415 | |||
356 | } | 416 | } |
357 | }, | 417 | }, |
358 | 418 | ||
@@ -559,14 +619,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
559 | this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); | 619 | this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); |
560 | this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); | 620 | this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); |
561 | this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); | 621 | this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); |
562 | 622 | ||
563 | // Bind some bindings | ||
564 | Object.defineBinding(this, "currentSelectedContainer", { | ||
565 | boundObject:this.application.ninja, | ||
566 | boundObjectPropertyPath:"currentSelectedContainer", | ||
567 | oneway:true | ||
568 | }); | ||
569 | |||
570 | // Start the panel out in disabled mode by default | 623 | // Start the panel out in disabled mode by default |
571 | // (Will be switched on later, if appropriate). | 624 | // (Will be switched on later, if appropriate). |
572 | this.enablePanel(false); | 625 | this.enablePanel(false); |
@@ -576,17 +629,17 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
576 | 629 | ||
577 | // Initialize the timeline for a document. | 630 | // Initialize the timeline for a document. |
578 | // Called when a document is opened (new or existing), or when documents are switched. | 631 | // Called when a document is opened (new or existing), or when documents are switched. |
632 | _ignoreNextContainerChange: { | ||
633 | value: true | ||
634 | }, | ||
579 | initTimelineForDocument:{ | 635 | initTimelineForDocument:{ |
580 | value:function () { | 636 | value:function () { |
581 | 637 | var myIndex; | |
582 | |||
583 | var myIndex, | ||
584 | boolAlreadyInitialized = false; | ||
585 | this.drawTimeMarkers(); | 638 | this.drawTimeMarkers(); |
586 | // Document switching | 639 | // Document switching |
587 | // Check to see if we have saved timeline information in the currentDocument. | 640 | // Check to see if we have saved timeline information in the currentDocument. |
588 | if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) { | 641 | if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) { |
589 | //console.log('TimelinePanel.initTimelineForDocument: new Document'); | 642 | // console.log('TimelinePanel.initTimelineForDocument: new Document'); |
590 | // No, we have no information stored. | 643 | // No, we have no information stored. |
591 | // This could mean we are creating a new file, OR are opening an existing file. | 644 | // This could mean we are creating a new file, OR are opening an existing file. |
592 | 645 | ||
@@ -610,10 +663,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
610 | // Draw the repetition. | 663 | // Draw the repetition. |
611 | this.arrLayers = this.temparrLayers; | 664 | this.arrLayers = this.temparrLayers; |
612 | this.currentLayerNumber = this.arrLayers.length; | 665 | this.currentLayerNumber = this.arrLayers.length; |
613 | boolAlreadyInitialized = true; | 666 | this._ignoreNextContainerChange = true; |
614 | 667 | ||
615 | } else if (this.application.ninja.currentDocument.setLevel) { | 668 | } else if (this.application.ninja.currentDocument.setLevel) { |
616 | //console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick'); | 669 | // console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick'); |
617 | // Information stored, but we're moving up or down in the breadcrumb. |