aboutsummaryrefslogtreecommitdiff
path: root/js/panels/Timeline
diff options
context:
space:
mode:
authorJon Reid2012-05-25 14:01:45 -0700
committerJon Reid2012-05-25 14:01:45 -0700
commit4a8a293ba3fdf934a431152a9351f45092fb3695 (patch)
tree53d5c31b86f6f4ba29f813fbe44c9dbb34c78bf4 /js/panels/Timeline
parentb0a736deb4f3bb515e0ca4009fe4f98e22cec2c0 (diff)
downloadninja-4a8a293ba3fdf934a431152a9351f45092fb3695.tar.gz
Timeline: bug fix: better selection/deselection of styles within layers.
Diffstat (limited to 'js/panels/Timeline')
-rw-r--r--js/panels/Timeline/Layer.reel/Layer.js51
-rw-r--r--js/panels/Timeline/Style.reel/Style.js5
-rw-r--r--js/panels/Timeline/Style.reel/scss/Style.scss4
-rw-r--r--js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js11
4 files changed, 59 insertions, 12 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();
diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js
index c39f3a56..d712f2bd 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -35,6 +35,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
35 return this._isSelected; 35 return this._isSelected;
36 }, 36 },
37 set: function(newVal) { 37 set: function(newVal) {
38 console.log("Style["+this.styleID+"].isSelected.set ", newVal)
38 if (newVal !== this._isSelected) { 39 if (newVal !== this._isSelected) {
39 this._isSelected = newVal; 40 this._isSelected = newVal;
40 this.needsDraw = true; 41 this.needsDraw = true;
@@ -191,9 +192,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
191 this._showView(); 192 this._showView();
192 } 193 }
193 if (this.isSelected) { 194 if (this.isSelected) {
194 this.element.classList.add("selected"); 195 this.element.classList.add("style-selected");
195 } else { 196 } else {
196 this.element.classList.remove("selected"); 197 this.element.classList.remove("style-selected");
197 } 198 }
198 } 199 }
199 }, 200 },
diff --git a/js/panels/Timeline/Style.reel/scss/Style.scss b/js/panels/Timeline/Style.reel/scss/Style.scss
index 66028cbe..3ea943d8 100644
--- a/js/panels/Timeline/Style.reel/scss/Style.scss
+++ b/js/panels/Timeline/Style.reel/scss/Style.scss
@@ -77,3 +77,7 @@ div.style-row .container-propvals {
77 overflow: hidden; 77 overflow: hidden;
78} 78}
79 79
80.content-style .style-row.style-selected {
81 //background-color: red !important;
82}
83
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index 8be0caef..290dd6c1 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -473,7 +473,6 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
473 returnObj.layerData.isTransformCollapsed = true; 473 returnObj.layerData.isTransformCollapsed = true;
474 returnObj.layerData.isStyleCollapsed = true; 474 returnObj.layerData.isStyleCollapsed = true;
475 returnObj.layerData.arrLayerStyles = []; 475 returnObj.layerData.arrLayerStyles = [];
476 returnObj.layerData.arrLayerStyles = [];
477 returnObj.layerData.elementsList = []; 476 returnObj.layerData.elementsList = [];
478 returnObj.layerData.deleted = false;