diff options
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r-- | js/panels/Timeline/Layer.reel/Layer.js | 49 | ||||
-rw-r--r-- | js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | 26 |
2 files changed, 41 insertions, 34 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 36c77018..1b8d73c0 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js | |||
@@ -113,7 +113,18 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
113 | this.layerData.layerTag = newVal; | 113 | this.layerData.layerTag = newVal; |
114 | } | 114 | } |
115 | }, | 115 | }, |
116 | 116 | _docUUID : { | |
117 | value: null | ||
118 | }, | ||
119 | docUUID : { | ||
120 | serializable: true, | ||
121 | get: function() { | ||
122 | return this._docUUID; | ||
123 | }, | ||
124 | set: function(newVal) { | ||
125 | this._docUUID = newVal; | ||
126 | } | ||
127 | }, | ||
117 | /* Position and Transform hottext values */ | 128 | /* Position and Transform hottext values */ |
118 | _dtextPositionX : { | 129 | _dtextPositionX : { |
119 | value:null, | 130 | value:null, |
@@ -471,6 +482,7 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
471 | this.layerTag = this.layerData.layerTag; | 482 | this.layerTag = this.layerData.layerTag; |
472 | this.isVisible = this.layerData.isVisible; | 483 | this.isVisible = this.layerData.isVisible; |
473 | this.isAnimated = this.layerData.isAnimated; | 484 | this.isAnimated = this.layerData.isAnimated; |
485 | this.docUUID = this.layerData.docUUID; | ||
474 | this.needsDraw = boolNeedsDraw; | 486 | this.needsDraw = boolNeedsDraw; |
475 | } | 487 | } |
476 | }, | 488 | }, |
@@ -555,10 +567,15 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
555 | }, | 567 | }, |
556 | didDraw: { | 568 | didDraw: { |
557 | value: function() { | 569 | value: function() { |
558 | if ((this.isSelected === true) && (this._isFirstDraw === true)) { | 570 | if (this._isFirstDraw === true) { |
559 | // Once we're done drawing the first time we need to tell the TimelinePanel if | 571 | if (this.isSelected === true) { |
560 | // this layer is supposed to be selected. | 572 | if (this.application.ninja.currentDocument._uuid === this._docUUID) { |
561 | this.parentComponent.parentComponent.selectedLayerID = this.layerID; | 573 | // Once we're done drawing the first time we need to tell the TimelinePanel if |
574 | // this layer is supposed to be selected. | ||
575 | //console.log('layerName ' + this.layerName); | ||
576 | this.parentComponent.parentComponent.selectedLayerID = this.layerID; | ||
577 | } | ||
578 | } | ||
562 | this._isFirstDraw = false; | 579 | this._isFirstDraw = false; |
563 | } | 580 | } |
564 | } | 581 | } |
@@ -567,36 +584,16 @@ var Layer = exports.Layer = Montage.create(Component, { | |||
567 | 584 | ||
568 | /* Begin: Controllers */ | 585 | /* Begin: Controllers */ |
569 | 586 | ||
570 | // Initialize a just-created layer with some basic defaults and needed selectors. | 587 | // Initialize a just-created layer |
571 | init: { | 588 | init: { |
572 | value: function() { | 589 | value: function() { |
573 | // Default some vars | ||
574 | //this.arrLayerStyles = []; | ||
575 | |||
576 | // Get some selectors. | 590 | // Get some selectors. |
577 | this.label = this.element.querySelector(".label-layer"); | 591 | this.label = this.element.querySelector(".label-layer"); |
578 | this.titleSelector = this.label.querySelector(".collapsible-label"); | 592 | this.titleSelector = this.label.querySelector(".collapsible-label"); |
579 | this.buttonAddStyle = this.element.querySelector(".button-add"); | 593 | this.buttonAddStyle = this.element.querySelector(".button-add"); |
580 | this.buttonDeleteStyle = this.element.querySelector(".button-delete"); | 594 | this.buttonDeleteStyle = this.element.querySelector(".button-delete"); |
581 | |||
582 | |||
583 | |||
584 | } | 595 | } |
585 | }, | 596 | }, |
586 | selectLayer:{ | ||
587 | value:function(){ | ||
588 | // this.mainCollapser.header.classList.add("layerSelected"); | ||
589 | this.element.classList.add("layerSelected"); | ||
590 | this.isSelected = true; | ||
591 | } | ||
592 | }, | ||
593 | deselectLayer:{ | ||
594 | value:function(){ | ||
595 | // this.mainCollapser.header.classList.remove("layerSelected"); | ||
596 | this.element.classList.remove("layerSelected"); | ||
597 | this.isSelected = false; | ||
598 | } | ||
599 | }, | ||
600 | addStyle : { | 597 | addStyle : { |
601 | value: function() { | 598 | value: function() { |
602 | // Add a new style rule. It should be added above the currently selected rule, | 599 | // Add a new style rule. It should be added above the currently selected rule, |
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 7fb57396..92c0766b 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js | |||
@@ -26,7 +26,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
26 | return this._arrLayers; | 26 | return this._arrLayers; |
27 | }, | 27 | }, |
28 | set:function (newVal) { | 28 | set:function (newVal) { |
29 | // debugger; | ||
30 | this._arrLayers = newVal; | 29 | this._arrLayers = newVal; |
31 | this.needsDraw = true; | 30 | this.needsDraw = true; |
32 | this.cacheTimeline(); | 31 | this.cacheTimeline(); |
@@ -113,7 +112,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
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; |
116 | this.selectLayer(selectIndex); | 115 | this.selectLayer(selectIndex, true); |
117 | } | 116 | } |
118 | } | 117 | } |
119 | }, | 118 | }, |
@@ -384,6 +383,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
384 | returnObj.layerData.tweens = []; | 383 | returnObj.layerData.tweens = []; |
385 | returnObj.layerData.layerTag = ""; | 384 | returnObj.layerData.layerTag = ""; |
386 | returnObj.layerData.isVisible = true; | 385 | returnObj.layerData.isVisible = true; |
386 | returnObj.layerData.docUUID = this.application.ninja.currentDocument._uuid; | ||
387 | returnObj.layerData.isTrackAnimated = false; | 387 | returnObj.layerData.isTrackAnimated = false; |
388 | returnObj.parentElementUUID = null; | 388 | returnObj.parentElementUUID = null; |
389 | returnObj.parentElement = null; | 389 | returnObj.parentElement = null; |
@@ -502,7 +502,10 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
502 | this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); | 502 | this.playhead.addEventListener("mousedown", this.startPlayheadTracking.bind(this), false); |
503 | this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); | 503 | this.playhead.addEventListener("mouseup", this.stopPlayheadTracking.bind(this), false); |
504 | this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); | 504 | this.time_markers.addEventListener("click", this.updatePlayhead.bind(this), false); |
505 | 505 | ||
506 | // Initialize BreadCrumb | ||
507 | this.application.ninja.breadCrumbClick = false; | ||
508 | this.enablePanel(false); | ||
506 | 509 | ||
507 | } | 510 | } |
508 | }, | 511 | }, |
@@ -519,6 +522,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
519 | this.drawTimeMarkers(); | 522 | this.drawTimeMarkers(); |
520 | // Document switching | 523 | // Document switching |
521 | // Check to see if we have saved timeline information in the currentDocument. | 524 | // Check to see if we have saved timeline information in the currentDocument. |
525 | //debugger; | ||
522 | if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") && | 526 | if ((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") && |
523 | (!this.application.ninja.currentDocument.breadCrumbClick)) { | 527 | (!this.application.ninja.currentDocument.breadCrumbClick)) { |
524 | //console.log('TimelinePanel.initTimelineForDocument: new Document'); | 528 | //console.log('TimelinePanel.initTimelineForDocument: new Document'); |
@@ -575,7 +579,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
575 | 579 | ||
576 | // We're reading from the cache, not writing to it. | 580 | // We're reading from the cache, not writing to it. |
577 | this._boolCacheArrays = false; | 581 | this._boolCacheArrays = false; |
578 | |||
579 | for (i = 0; i < tlArrLayersLength; i++) { | 582 | for (i = 0; i < tlArrLayersLength; i++) { |
580 | if (this.application.ninja.currentDocument.tlArrLayers[i].layerData.isSelected === true) { | 583 | if (this.application.ninja.currentDocument.tlArrLayers[i].layerData.isSelected === true) { |
581 | this.application.ninja.currentDocument.tlArrLayers[i].layerData._isFirstDraw = true; | 584 | this.application.ninja.currentDocument.tlArrLayers[i].layerData._isFirstDraw = true; |
@@ -646,6 +649,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
646 | // Clear the timeline but not the cache | 649 | // Clear the timeline but not the cache |
647 | //console.log('TimelinePanel.handleDocumentChange'); | 650 | //console.log('TimelinePanel.handleDocumentChange'); |
648 | if ((event.type === "closeDocument") && (this.application.ninja.documentController._documents.length > 0)) { | 651 | if ((event.type === "closeDocument") && (this.application.ninja.documentController._documents.length > 0)) { |
652 | // Ignore extra closeDocument event that fires while there are still documents open. | ||
649 | return; | 653 | return; |
650 | } | 654 | } |
651 | this._boolCacheArrays = false; | 655 | this._boolCacheArrays = false; |
@@ -668,9 +672,16 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
668 | 672 | ||
669 | handleBreadCrumbBinding:{ | 673 | handleBreadCrumbBinding:{ |
670 | value:function(event){ | 674 | value:function(event){ |
671 | 675 | // Might fire if currentDocument has not yet been initialized. | |
672 | if((typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined")) | 676 | if (this.application.ninja.currentDocument == null) { |
673 | return; | 677 | return; |
678 | } | ||
679 | // Might fire if currentDocument is initialized but cache has not been initialized | ||
680 | if(typeof(this.application.ninja.currentDocument.isTimelineInitialized) === "undefined") { | ||
681 | return; | ||
682 | } | ||
683 | |||
684 | // If the breadCrumb has been clicked, we need to change documents. | ||
674 | if(this.application.ninja.currentDocument.breadCrumbClick){ | 685 | if(this.application.ninja.currentDocument.breadCrumbClick){ |
675 | this.handleDocumentChange(event); | 686 | this.handleDocumentChange(event); |
676 | } | 687 | } |
@@ -1031,7 +1042,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { | |||
1031 | 1042 | ||
1032 | this.layerRepetition.selectedIndexes = [layerIndex]; | 1043 | this.layerRepetition.selectedIndexes = [layerIndex]; |
1033 | this.currentLayerSelected = this.arrLayers[layerIndex]; | 1044 | this.currentLayerSelected = this.arrLayers[layerIndex]; |
1034 | |||
1035 | if (userSelection) { | 1045 | if (userSelection) { |