aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline/Layer.reel/Layer.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/panels/Timeline/Layer.reel/Layer.js')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js51
1 files changed, 46 insertions, 5 deletions
diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index 45d6f0a3..f571c1d4 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -71,6 +71,24 @@ var Layer = exports.Layer = Montage.create(Component, {
71 this._styleCounter = newVal; 71 this._styleCounter = newVal;
72 } 72 }
73 }, 73 },
74 _selectedStyleIndex: {
75 value: false
76 },
77 selectedStyleIndex: {
78 get: function() {
79 return this._selectedStyleIndex;
80 },
81 set: function(newVal) {
82 if (typeof(newVal) === "undefined") {
83 return;
84 }
85 if (newVal !== this._selectedStyleIndex) {
86 this._selectedStyleIndex = newVal;
87 this.layerData.selectedStyleIndex = newVal;
88 this.needsDraw = true;
89 }
90 }
91 },
74 92
75 /* Layer models: the name, ID, and selected and animation booleans for the layer */ 93 /* Layer models: the name, ID, and selected and animation booleans for the layer */
76 _layerName:{ 94 _layerName:{
@@ -441,6 +459,7 @@ var Layer = exports.Layer = Montage.create(Component, {
441 this.isVisible = this.layerData.isVisible; 459 this.isVisible = this.layerData.isVisible;
442 this.isAnimated = this.layerData.isAnimated; 460 this.isAnimated = this.layerData.isAnimated;
443 this.docUUID = this.layerData.docUUID; 461 this.docUUID = this.layerData.docUUID;
462 this.selectedStyleIndex = this.layerData.selectedStyleIndex;
444 this.needsDraw = boolNeedsDraw; 463 this.needsDraw = boolNeedsDraw;
445 } 464 }
446 }, 465 },
@@ -517,11 +536,21 @@ var Layer = exports.Layer = Montage.create(Component, {
517 if (this.isSelected && !boolHasClass) { 536 if (this.isSelected && !boolHasClass) {
518 //console.log('Layer.draw, adding selection for layer ', this.layerName) 537 //console.log('Layer.draw, adding selection for layer ', this.layerName)
519 this.element.classList.add("layerSelected"); 538 this.element.classList.add("layerSelected");
539
520 } 540 }
521 if (!this.isSelected && boolHasClass) { 541 if (!this.isSelected && boolHasClass) {
522 //console.log('Layer.draw, removing selection for layer ', this.layerName) 542 //console.log('Layer.draw, removing selection for layer ', this.layerName)
523 this.element.classList.remove("layerSelected"); 543 this.element.classList.remove("layerSelected");
524 } 544 }
545 // Enable or disable the delete style button as appropriate
546 if (this.isSelected) {
547 if (this.selectedStyleIndex !== "false") {
548 this.selectStyle(this.selectedStyleIndex);
549 this.buttonDeleteStyle.classList.remove("disabled");
550 }
551 } else {
552 this.buttonDeleteStyle.classList.add("disabled");
553 }
525 554
526 // Update layer name? 555 // Update layer name?
527 if (this.layerName !== this.layer_label_text.innerText) { 556 if (this.layerName !== this.layer_label_text.innerText) {
@@ -643,31 +672,38 @@ var Layer = exports.Layer = Montage.create(Component, {
643 }, 672 },
644 selectStyle : { 673 selectStyle : {
645 value: function(styleIndex) { 674 value: function(styleIndex) {
675 //console.log("Layer.selectStyle ", styleIndex);
646 676
647 // Select a style based on its index. 677 // Select a style based on its index.
648 // use layerIndex = false to deselect all styles. 678 // use layerIndex = false to deselect all styles.
649 var i = 0, 679 var i = 0,
650 arrLayerStylesLength = this.arrLayerStyles.length; 680 arrLayerStylesLength = this.arrLayerStyles.length;
681
651 682
652 // First, update this.arrStyles[].isSelected 683 // First, update this.arrStyles[].isSelected
653 for (i = 0; i < arrLayerStylesLength; i++) { 684 for (i = 0; i < arrLayerStylesLength; i++) {
654 if (i === styleIndex) { 685 if (i === styleIndex) {
655 this.arrLayerStyles[i].isSelected = true; 686 this.arrLayerStyles[i].isSelected = true;
656 } else { 687 } else {
657 this.arrLayerStyles[i].isSelected = false; 688 if (this.arrLayerStyles[i].isSelected === true) {
689 this.arrLayerStyles[i].isSelected = false;
690 }
658 } 691 }
659 } 692 }
660 693
694
695 /*
661 // Next, update this.styleRepetition.selectedIndexes. 696 // Next, update this.styleRepetition.selectedIndexes.
662 if (styleIndex !== false) { 697 if (styleIndex !== false) {
663 this.styleRepetition.selectedIndexes = [styleIndex]; 698 //this.styleRepetition.selectedIndexes = [styleIndex];
664 this.buttonDeleteStyle.classList.remove("disabled"); 699 this.buttonDeleteStyle.classList.remove("disabled");
665 } else { 700 } else {
666 this.styleRepetition.selectedIndexes = null; 701 //this.styleRepetition.selectedIndexes = null;
667 if (typeof(this.buttonDeleteStyle) !== "undefined") { 702 if (typeof(this.buttonDeleteStyle) !== "undefined") {
668 this.buttonDeleteStyle.classList.add("disabled"); 703 this.buttonDeleteStyle.classList.add("disabled");
669 } 704 }
670 } 705 }
706 */
671 707
672 } 708 }
673 }, 709 },
@@ -685,6 +721,7 @@ var Layer = exports.Layer = Montage.create(Component, {
685 this.arrLayerStyles[i].isActive = false; 721 this.arrLayerStyles[i].isActive = false;
686 } 722 }
687 } 723 }
724 //console.log("Layer.getActiveStyleIndex, returnVal ", returnVal)
688 return returnVal; 725 return returnVal;
689 } 726 }
690 }, 727 },
@@ -738,15 +775,19 @@ var Layer = exports.Layer = Montage.create(Component, {
738 }, 775 },
739 handleMousedown: { 776 handleMousedown: {
740 value: function(event) { 777 value: function(event) {
778 //console.log("Layer.handleMousedown")
741 this.layerData.isActive = true; 779 this.layerData.isActive = true;
742 var ptrParent = nj.queryParentSelector(event.target, ".content-style"); 780 var ptrParent = nj.queryParentSelector(event.target, ".content-style"),
781 activeStyleIndex = this.getActiveStyleIndex();
782 this.selectedStyleIndex = activeStyleIndex;
743 if (ptrParent !== false) { 783 if (ptrParent !== false) {
744 this.selectStyle(this.getActiveStyleIndex()); 784 this.selectStyle(this.selectedStyleIndex);
745 } 785 }
746 } 786 }
747 }, 787 },
748 handleLayerClick : { 788 handleLayerClick : {
749 value: function(event) { 789 value: function(event) {
790 //console.log("Layer.handleLayerClick")
750 var ptrParent = nj.queryParentSelector(event.target, ".content-style"); 791 var ptrParent = nj.queryParentSelector(event.target, ".content-style");
751 if (ptrParent !== false) { 792 if (ptrParent !== false) {
752 var myIndex = this.getActiveStyleIndex(); 793 var myIndex = this.getActiveStyleIndex();