aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js159
1 files changed, 67 insertions, 92 deletions
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 28363398..a1730b37 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -309,12 +309,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
309 } 309 }
310 }, 310 },
311 311
312 // Initialize the timeline, runs only once when the component is first loaded.
313 // Sets up basic event listeners, gets some selectors, etc.
312 initTimeline : { 314 initTimeline : {
313 value: function() { 315 value: function() {
314 // Set up basic Timeline functions: event listeners, etc. Things that only need to be run once.
315 this.layout_tracks = this.element.querySelector(".layout-tracks"); 316 this.layout_tracks = this.element.querySelector(".layout-tracks");
316 this.layout_markers = this.element.querySelector(".layout_markers"); 317 this.layout_markers = this.element.querySelector(".layout_markers");
317
318 this.newlayer_button.identifier = "addLayer"; 318 this.newlayer_button.identifier = "addLayer";
319 this.newlayer_button.addEventListener("click", this, false); 319 this.newlayer_button.addEventListener("click", this, false);
320 this.deletelayer_button.identifier = "deleteLayer"; 320 this.deletelayer_button.identifier = "deleteLayer";
@@ -329,6 +329,8 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
329 } 329 }
330 }, 330 },
331 331
332 // Initialize the timeline for a document. Called when a document is opened (new or existing), or
333 // when documents are switched.
332 initTimelineForDocument:{ 334 initTimelineForDocument:{
333 value:function () { 335 value:function () {
334 var myIndex; 336 var myIndex;
@@ -346,8 +348,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
346 348
347 // Are we creating a new doc, or opening an existing one? 349 // Are we creating a new doc, or opening an existing one?
348 if(!this.application.ninja.documentController.creatingNewFile) { 350 if(!this.application.ninja.documentController.creatingNewFile) {
349 // Opening an existing document. Loop through the DOM and build the data model. 351 // Opening an existing document.
352 // Does it have any DOM elements?
350 if(this.application.ninja.currentDocument.documentRoot.children[0]) { 353 if(this.application.ninja.currentDocument.documentRoot.children[0]) {
354 // Yes, it has DOM elements. Loop through them and create a new
355 // object for each.
351 myIndex=0; 356 myIndex=0;
352 while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) { 357 while(this.application.ninja.currentDocument.documentRoot.children[myIndex]) {
353 this._openDoc=true; 358 this._openDoc=true;
@@ -355,23 +360,32 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
355 myIndex++; 360 myIndex++;
356 } 361 }
357 } else { 362 } else {
363 // No, it has no DOM elements. Build an empty layer object.
358 this.restoreLayer(1); 364 this.restoreLayer(1);
359 //this.selectLayer(0);
360 } 365 }
366
367 // Feed the new array of objects into the repetitions
368 // and select the first layer.
369 this.arrLayers=this.temparrLayers;
370
371 // TODO: We need a better solution to this race condition than a timeout.
372 this._captureSelection = true;
373 var that = this;
374 setTimeout(function() {
375 that.selectLayer(0, true);
376 }, 1000)
361 } else { 377 } else {
362 // New document. Create default layer and select it. 378 // New document. Create default layer.
363 this.createNewLayer(1); 379 this.createNewLayer(1);
364 //this.selectLayer(0);
365
366 } 380 }
381
367 // After recreating the tracks and layers, store the result in the currentDocument. 382 // After recreating the tracks and layers, store the result in the currentDocument.
368 this.arrLayers=this.temparrLayers;
369 this.application.ninja.currentDocument.tlArrLayers = this.arrLayers; 383 this.application.ninja.currentDocument.tlArrLayers = this.arrLayers;
370 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber; 384 this.application.ninja.currentDocument.tllayerNumber = this.currentLayerNumber;
371 this.application.ninja.currentDocument.tlLayerHashTable = this.hashInstance; 385 this.application.ninja.currentDocument.tlLayerHashTable = this.hashInstance;
372 this.application.ninja.currentDocument.tlElementHashTable = this.hashElementMapToLayer; 386 this.application.ninja.currentDocument.tlElementHashTable = this.hashElementMapToLayer;
373 this.application.ninja.currentDocument.hashKey=this.hashKey; 387 this.application.ninja.currentDocument.hashKey=this.hashKey;
374 //this.selectLayer(0); 388
375 } else { 389 } else {
376 // we do have information stored. Use it. 390 // we do have information stored. Use it.
377 this._boolCacheArrays = false; 391 this._boolCacheArrays = false;
@@ -381,14 +395,11 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
381 this.hashElementMapToLayer = this.application.ninja.currentDocument.tlElementHashTable; 395 this.hashElementMapToLayer = this.application.ninja.currentDocument.tlElementHashTable;
382 this.hashKey = this.application.ninja.currentDocument.hashKey; 396 this.hashKey = this.application.ninja.currentDocument.hashKey;
383 this._boolCacheArrays = true; 397 this._boolCacheArrays = true;
384 //this.selectLayer(0);
385 } 398 }
386 // Select the first layer.
387 //debugger;
388 //this.selectLayer(0);
389 } 399 }
390 }, 400 },
391 401
402 // Clear the currently-displayed document (and its events) from the timeline.
392 clearTimelinePanel : { 403 clearTimelinePanel : {
393 value: function() { 404 value: function() {
394 // Remove events 405 // Remove events
@@ -398,6 +409,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
398 this.deselectTweens(); 409 this.deselectTweens();
399 410
400 // Reset visual appearance 411 // Reset visual appearance
412 // Todo: Maybe this should be stored per document?
401 this.application.ninja.timeline.playhead.style.left = "-2px"; 413 this.application.ninja.timeline.playhead.style.left = "-2px";
402 this.application.ninja.timeline.playheadmarker.style.left = "0px"; 414 this.application.ninja.timeline.playheadmarker.style.left = "0px";
403 this.application.ninja.timeline.updateTimeText(0.00); 415 this.application.ninja.timeline.updateTimeText(0.00);
@@ -406,7 +418,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
406 // Clear variables. 418 // Clear variables.
407 this.hashInstance = null; 419 this.hashInstance = null;
408 this.hashElementMapToLayer = null; 420 this.hashElementMapToLayer = null;
409
410 this.currentLayerNumber = 0; 421 this.currentLayerNumber = 0;
411 this.currentLayerSelected = false; 422 this.currentLayerSelected = false;
412 this.selectedKeyframes = []; 423 this.selectedKeyframes = [];
@@ -419,18 +430,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
419 430
420 // Clear the repetitions 431 // Clear the repetitions
421 if (this.arrLayers.length > 0) { 432 if (this.arrLayers.length > 0) {
422 console.log('Clearing repetitions!')
423 this.arrLayers = []; 433 this.arrLayers = [];
424 } 434 }
425
426
427 } 435 }
428 }, 436 },
429
430 437
431 handleDocumentChange:{ 438 handleDocumentChange:{
432 value:function(event){ 439 value:function(event){
433 console.log(event);
434 this._boolCacheArrays = false; 440 this._boolCacheArrays = false;
435 this.clearTimelinePanel(); 441 this.clearTimelinePanel();
436 this._boolCacheArrays = true; 442 this._boolCacheArrays = true;
@@ -438,42 +444,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
438 444
439 this.hashInstance = this.createLayerHashTable(); 445 this.hashInstance = this.createLayerHashTable();
440 this.hashElementMapToLayer = this.createElementMapToLayer(); 446 this.hashElementMapToLayer = this.createElementMapToLayer();
441 if (event.type="onOpenDocument") {
442 this.initTimelineForDocument();
443 }
444 if ((event.type === "closeDocument") && (this.application.ninja.currentDocument.name != "")) {
445 this.initTimelineForDocument();
446 }
447
448 447
448 // Reinitialize the timeline...but only if there are open documents.
449 if (this.application.ninja.documentController._documents.length > 0) {
450 this.initTimelineForDocument();
451 }
449 } 452 }
450 }, 453 },
451
452 handleCloseDocument: {
453 value: function(event) {
454 if(this.application.ninja.documentController._activeDocument){
455 this._boolCacheArrays = false;
456 this.clearTimelinePanel();
457 this._boolCacheArrays = true;
458 this._bindDocumentEvents();
459
460 this.hashInstance = this.createLayerHashTable();
461 this.hashLayerNumber = this.createLayerNumberHash();
462 this.hashElementMapToLayer = this.createElementMapToLayer();
463 this.initTimelineForDocument();
464 }else{
465 this.clearTimelinePanel();
466 }
467
468 }
469 },
470
471 handleSwitchDocument : {
472 value: function(event) {
473 // Handle document change.
474 this.handleOnOpenDocument();
475 }
476 },
47