diff options
Diffstat (limited to 'js/panels/Timeline/TimelinePanel.reel')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 195 |
1 files changed, 142 insertions, 53 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index a3965eb2..8276f878 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 | }, |
@@ -61,6 +131,18 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
61 | _areTracksScrolling: { | 131 | _areTracksScrolling: { |
62 | value: false | 132 | value: false |
63 | }, | 133 | }, |
134 | |||
135 | _currentOpenSpanMenu: { | ||
136 | value: false | ||
137 | }, | ||
138 | currentOpenSpanMenu: { | ||
139 | get: function() { | ||
140 | return this._currentOpenSpanMenu; | ||
141 | }, | ||
142 | set: function(newVal) { | ||
143 | this._currentOpenSpanMenu = newVal; | ||
144 | } | ||
145 | }, | ||
64 | 146 | ||
65 | // Set to false to skip array caching array sets in currentDocument | 147 | // Set to false to skip array caching array sets in currentDocument |
66 | _boolCacheArrays:{ | 148 | _boolCacheArrays:{ |
@@ -136,19 +218,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
136 | this._lastLayerClicked = newVal | 218 | this._lastLayerClicked = newVal |
137 | } | 219 | } |
138 | }, | 220 | }, |
139 | |||
140 | _currentSelectedContainer: { | ||
141 | value: null | ||
142 | }, | ||
143 | currentSelectedContainer: { | ||
144 | get: function() { | ||
145 | return this._currentSelectedContainer; | ||
146 | }, | ||
147 | set: function(newVal) { | ||
148 | this._currentSelectedContainer = newVal; | ||
149 | this.handleDocumentChange(); | ||
150 | } | ||
151 | }, | ||
152 | 221 | ||
153 | _millisecondsOffset:{ | 222 | _millisecondsOffset:{ |
154 | value:1000 | 223 | value:1000 |
@@ -391,6 +460,28 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
391 | prepareForDraw:{ | 460 | prepareForDraw:{ |
392 | value:function () { | 461 | value:function () { |
393 | this.initTimeline(); | 462 | this.initTimeline(); |
463 | |||
464 | // Bind drag and drop event handlers | ||
465 | this.container_layers.addEventListener("dragstart", this.handleLayerDragStart.bind(this), false); | ||
466 | this.container_layers.addEventListener("dragend", this.handleLayerDragEnd.bind(this), false); | ||
467 | this.container_layers.addEventListener("dragover", this.handleLayerDragover.bind(this), false); | ||
468 | this.container_layers.addEventListener("drop", this.handleLayerDrop.bind(this), false); | ||
469 | |||
470 | // Bind the handlers for the config menu | ||
471 | this.checkable_animated.addEventListener("click", this.handleAnimatedClick.bind(this), false); | ||
472 | this.checkable_relative.addEventListener("click", this.handleRelativeClick.bind(this), false); | ||
473 | this.checkable_absolute.addEventListener("click", this.handleAbsoluteClick.bind(this), false); | ||
474 | this.tl_configbutton.addEventListener("click", this.handleConfigButtonClick.bind(this), false); | ||
475 | document.addEventListener("click", this.handleDocumentClick.bind(this), false); | ||
476 | |||
477 | |||
478 | // Bind some bindings | ||
479 | Object.defineBinding(this, "currentSelectedContainer", { | ||
480 | boundObject:this.application.ninja, | ||
481 | boundObjectPropertyPath:"currentSelectedContainer", | ||
482 | oneway:true | ||
483 | }); | ||
484 | |||
394 | } | 485 | } |
395 | }, | 486 | }, |
396 | 487 | ||
@@ -658,19 +749,19 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
658 | 749 | ||
659 | // Initialize the timeline for a document. | 750 | // Initialize the timeline for a document. |
660 | // Called when a document is opened (new or existing), or when documents are switched. | 751 | // Called when a document is opened (new or existing), or when documents are switched. |
752 | _ignoreNextContainerChange: { | ||
753 | value: true | ||
754 | }, | ||
661 | initTimelineForDocument:{ | 755 | initTimelineForDocument:{ |
662 | value:function () { | 756 | value:function () { |
663 | 757 | var myIndex; | |
664 | |||
665 | var myIndex, | ||
666 | boolAlreadyInitialized = false; | ||
667 | this.drawTimeMarkers(); | 758 | this.drawTimeMarkers(); |
668 | // Document switching | 759 | // Document switching |
669 | // Check to see if we have saved timeline information in the currentDocument. | 760 | // Check to see if we have saved timeline information in the currentDocument. |
670 | //console.log("TimelinePanel.initTimelineForDocument"); | 761 | //console.log("TimelinePanel.initTimelineForDocument"); |
671 | 762 | ||
672 | if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) { | 763 | if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) { |
673 | //console.log('TimelinePanel.initTimelineForDocument: new Document'); | 764 | // console.log('TimelinePanel.initTimelineForDocument: new Document'); |
674 | // No, we have no information stored. | 765 | // No, we have no information stored. |
675 | // This could mean we are creating a new file, OR are opening an existing file. | 766 | // This could mean we are creating a new file, OR are opening an existing file. |
676 | 767 | ||
@@ -694,11 +785,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
694 | // Draw the repetition. | 785 | // Draw the repetition. |
695 | this.arrLayers = this.temparrLayers; | 786 | this.arrLayers = this.temparrLayers; |
696 | this.currentLayerNumber = this.arrLayers.length; | 787 | this.currentLayerNumber = this.arrLayers.length; |
788 | this._ignoreNextContainerChange = true; | ||
697 | this._currentDocumentUuid = this.application.ninja.currentDocument.uuid; | 789 | this._currentDocumentUuid = this.application.ninja.currentDocument.uuid; |
698 | boolAlreadyInitialized = true; | ||
699 | 790 | ||
700 | } else if (this.application.ninja.currentDocument.setLevel) { | 791 | } else if (this.application.ninja.currentDocument.setLevel) { |
701 | //console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick'); | 792 | // console.log('TimelinePanel.initTimelineForDocument: breadCrumbClick'); |
702 | // Information stored, but we're moving up or down in the breadcrumb. | 793 | // Information stored, but we're moving up or down in the breadcrumb. |
703 | // Get the current selection and restore timeline info for its children. | 794 | // Get the current selection and restore timeline info for its children. |
704 | //debugger; | 795 | //debugger; |
@@ -714,10 +805,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
714 | // Draw the repetition. | 805 | // Draw the repetition. |
715 | this.arrLayers = this.temparrLayers; | 806 | this.arrLayers = this.temparrLayers; |
716 | this.currentLayerNumber = storedCurrentLayerNumber; | 807 | this.currentLayerNumber = storedCurrentLayerNumber; |
717 | boolAlreadyInitialized = true; | ||
718 | this.application.ninja.currentDocument.setLevel = false; | 808 | this.application.ninja.currentDocument.setLevel = false; |