diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | 5 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 156 |
2 files changed, 95 insertions, 66 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html index 1aa9a725..92adee05 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.html | |||
@@ -32,8 +32,7 @@ | |||
32 | "timetext" : {"#": "time_text"}, | 32 | "timetext" : {"#": "time_text"}, |
33 | "timebar" : {"#": "time_bar"}, | 33 | "timebar" : {"#": "time_bar"}, |
34 | "container_tracks" : {"#" : "container-tracks"}, | 34 | "container_tracks" : {"#" : "container-tracks"}, |
35 | "end_hottext" : {"@" : "endHottext"}, | 35 | "end_hottext" : {"@" : "endHottext"} |
36 | "getme" : {"#" : "getme"} | ||
37 | } | 36 | } |
38 | }, | 37 | }, |
39 | 38 | ||
@@ -285,7 +284,7 @@ | |||
285 | 284 | ||
286 | <div id="user_layers" class="userlayers"> | 285 | <div id="user_layers" class="userlayers"> |
287 | <div id="master_layer" class="masterlayer"> | 286 | <div id="master_layer" class="masterlayer"> |
288 | <div id="getme">Master Layer</div> | 287 | <div>Master Layer</div> |
289 | </div> | 288 | </div> |
290 | <div id="container-layers"> | 289 | <div id="container-layers"> |
291 | <div id="container-layer"></div> | 290 | <div id="container-layer"></div> |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 67ff3c02..6d23453d 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -28,7 +28,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
28 | }, | 28 | }, |
29 | set:function (newVal) { | 29 | set:function (newVal) { |
30 | this._arrLayers = newVal; | 30 | this._arrLayers = newVal; |
31 | this.updateLayers(); | 31 | this._cacheArrays(); |
32 | } | 32 | } |
33 | }, | 33 | }, |
34 | 34 | ||
@@ -44,16 +44,20 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
44 | this._layerRepetition = newVal; | 44 | this._layerRepetition = newVal; |
45 | } | 45 | } |
46 | }, | 46 | }, |
47 | updateLayers : { | 47 | _cacheArrays : { |
48 | value: function() { | 48 | value: function() { |
49 | this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; | 49 | // Cache this.arrLayers and this.arrTracks. |
50 | // this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; | 50 | console.log('cacheArrays ' + this._boolCacheArrays) |
51 | console.log('inside of updateLayers '); | 51 | if (this._boolCacheArrays) { |
52 | console.log(this.application.ninja.currentDocument.tlArrTracks); | 52 | console.log('caching arrays for ', this.application.ninja.currentDocument.name); |
53 | 53 | this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; | |
54 | this.application.ninja.currentDocument.tlArrTracks = this.arrTracks; | ||
55 | } | ||
54 | } | 56 | } |
55 | }, | 57 | }, |
56 | boolUpdateLayers : { | 58 | |
59 | // Set to false to skip array caching array sets in current document | ||
60 | _boolCacheArrays : { | ||
57 | value: true | 61 | value: true |
58 | }, | 62 | }, |
59 | 63 | ||
@@ -112,7 +116,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
112 | }, | 116 | }, |
113 | set:function (newVal) { | 117 | set:function (newVal) { |
114 | this._arrTracks = newVal; | 118 | this._arrTracks = newVal; |
115 | this.updateLayers(); | 119 | this._cacheArrays(); |
116 | } | 120 | } |
117 | }, | 121 | }, |
118 | 122 | ||
@@ -192,43 +196,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
192 | } | 196 | } |
193 | }, | 197 | }, |
194 | 198 | ||
195 | handleOnOpenDocument:{ | ||
196 | value:function(){ | ||
197 | this.boolUpdateLayers = false; | ||
198 | this.clearTimelinePanel(); | ||
199 | this.boolUpdateLayers = true; | ||
200 | this.eventManager.addEventListener("deleteLayerClick", this, false); | ||
201 | this.eventManager.addEventListener("newLayer", this, false); | ||
202 | this.eventManager.addEventListener("deleteLayer", this, false); | ||
203 | this.eventManager.addEventListener("layerBinding", this, false); | ||
204 | this.eventManager.addEventListener("elementAdded", this, false); | ||
205 | this.eventManager.addEventListener("elementDeleted", this, false); | ||
206 | this.eventManager.addEventListener("deleteSelection", this, false); | ||
207 | this.eventManager.addEventListener("selectionChange", this, true); | ||
208 | this.hashInstance = this.createLayerHashTable(); | ||
209 | this.hashTrackInstance = this.createTrackHashTable(); | ||
210 | this.hashLayerNumber = this.createLayerNumberHash(); | ||
211 | this.hashElementMapToLayer = this.createElementMapToLayer(); | ||
212 | this.initTimelineView(); | ||
213 | |||
214 | |||
215 | } | ||
216 | }, | ||
217 | |||
218 | handleCloseDocument: { | ||
219 | value: function(event) { | ||
220 | this.clearTimelinePanel(); | ||
221 | this.arrTracks = []; | ||
222 | this.arrLayers = []; | ||
223 | } | ||
224 | }, | ||
225 | |||
226 | handleSwitchDocument : { | ||
227 | value: function(event) { | ||
228 | // Handle document change. | ||
229 | this.handleOnOpenDocument(); | ||
230 | } | ||
231 | }, | ||
232 | 199 | ||
233 | willDraw:{ | 200 | willDraw:{ |
234 | value:function () { | 201 | value:function () { |
@@ -241,6 +208,33 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
241 | /* === END: Draw cycle === */ | 208 | /* === END: Draw cycle === */ |
242 | 209 | ||
243 | /* === BEGIN: Controllers === */ | 210 | /* === BEGIN: Controllers === */ |
211 | |||
212 | // Bind all document-specific events (pass in true to unbind) | ||
213 | _bindDocumentEvents : { | ||
214 | value: function(boolUnbind) { | ||
215 | var arrEvents = ["deleteLayerClick", | ||
216 | "newLayer", | ||
217 | "deleteLayer", | ||
218 | "layerBinding", | ||
219 | "elementAdded", | ||
220 | "elementDeleted", | ||
221 | "deleteSelection", | ||
222 | "selectionChange"], | ||
223 | i, | ||
224 | arrEventsLength = arrEvents.length; | ||
225 | |||
226 | if (boolUnbind) { | ||
227 | for (i = 0; i < arrEventsLength; i++) { | ||
228 | this.eventManager.removeEventListener(arrEvents[i], this, false); | ||
229 | } | ||
230 | } else { | ||
231 | for (i = 0; i < arrEventsLength; i++) { | ||
232 | this.eventManager.addEventListener(arrEvents[i], this, false); | ||
233 | } | ||
234 | } | ||
235 | } | ||
236 | }, | ||
237 | |||
244 | initTimeline : { | 238 | initTimeline : { |
245 | value: function() { | 239 | value: function() { |
246 | // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once. | 240 | // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once. |
@@ -258,7 +252,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
258 | 252 | ||
259 | } | 253 | } |
260 | }, | 254 | }, |
261 | initTimelineView:{ | 255 | |
256 | initTimelineForDocument:{ | ||
262 | value:function () { | 257 | value:function () { |
263 | var myIndex; | 258 | var myIndex; |
264 | this.drawTimeMarkers(); | 259 | this.drawTimeMarkers(); |
@@ -269,10 +264,14 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
269 | // Check to see if we have saved timeline information in the currentDocument. | 264 | // Check to see if we have saved timeline information in the currentDocument. |
270 | if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { | 265 | if (typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { |
271 | // No, we have no information stored. Create it. | 266 | // No, we have no information stored. Create it. |
272 | console.log('newfile!') | 267 | console.log('newfile ' + this.application.ninja.currentDocument.name) |
273 | this.application.ninja.currentDocument.isTimelineInitialized = true; | 268 | this.application.ninja.currentDocument.isTimelineInitialized = true; |
274 | this.application.ninja.currentDocument.tlArrLayers = []; | 269 | this.application.ninja.currentDocument.tlArrLayers = []; |
275 | this.application.ninja.currentDocument.tlArrTracks = []; | 270 | this.application.ninja.currentDocument.tlArrTracks = []; |
271 | |||
272 | |||
273 | // Loop through the DOM of the document to find layers and animations. | ||
274 | // Fire off events as they are found. | ||
276 | _firstLayerDraw = false; | 275 | _firstLayerDraw = false; |
277 | if(!this.application.ninja.documentController.creatingNewFile){ | 276 | if(!this.application.ninja.documentController.creatingNewFile){ |
278 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ | 277 | if(this.application.ninja.currentDocument.documentRoot.children[0]){ |
@@ -282,7 +281,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
282 | this._openDoc=true; | 281 | this._openDoc=true; |
283 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) | 282 | NJevent('newLayer',{key:this._hashKey,ele:this.application.ninja.currentDocument.documentRoot.children[myIndex]}) |
284 | myIndex++; | 283 | myIndex++; |
285 | } | 284 | k } |
286 | } | 285 |