Timeline: bug fix: better selection/deselection of styles within layers.

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, {
             this._styleCounter = newVal;
         }
     },
+    _selectedStyleIndex: {
+        value: false
+    },
+    selectedStyleIndex: {
+        get: function() {
+                return this._selectedStyleIndex;
+        },
+        set: function(newVal) {
+                if (typeof(newVal) === "undefined") {
+                        return;
+                }
+                if (newVal !== this._selectedStyleIndex) {
+                        this._selectedStyleIndex = newVal;
+                        this.layerData.selectedStyleIndex = newVal;
+                        this.needsDraw = true;
+                }
+        }
+    },
 
     /* Layer models: the name, ID, and selected and animation booleans for the layer */
     _layerName:{
@@ -441,6 +459,7 @@ var Layer = exports.Layer = Montage.create(Component, {
             this.isVisible = this.layerData.isVisible;
             this.isAnimated = this.layerData.isAnimated;
             this.docUUID = this.layerData.docUUID;
+            this.selectedStyleIndex = this.layerData.selectedStyleIndex;
             this.needsDraw = boolNeedsDraw;
         }
     },
@@ -517,11 +536,21 @@ var Layer = exports.Layer = Montage.create(Component, {
             if (this.isSelected && !boolHasClass) {
                 //console.log('Layer.draw, adding selection for layer ', this.layerName)
                 this.element.classList.add("layerSelected");
+                
             }
                         if (!this.isSelected && boolHasClass) {
                 //console.log('Layer.draw, removing selection for layer ', this.layerName)
                 this.element.classList.remove("layerSelected");
             }
+            // Enable or disable the delete style button as appropriate
+            if (this.isSelected) {
+                if (this.selectedStyleIndex !== "false") {
+                        this.selectStyle(this.selectedStyleIndex);
+                        this.buttonDeleteStyle.classList.remove("disabled");
+                }
+            } else {
+                this.buttonDeleteStyle.classList.add("disabled");
+            }
             
             // Update layer name?
             if (this.layerName !== this.layer_label_text.innerText) {
@@ -643,31 +672,38 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         selectStyle : {
                 value: function(styleIndex) {
+                        //console.log("Layer.selectStyle ", styleIndex);
 
                 // Select a style based on its index.
                 // use layerIndex = false to deselect all styles.
                 var i = 0,
                         arrLayerStylesLength = this.arrLayerStyles.length;
+                        
 
                 // First, update this.arrStyles[].isSelected
                 for (i = 0; i < arrLayerStylesLength; i++) {
                         if (i === styleIndex) {
                                 this.arrLayerStyles[i].isSelected = true;
                         } else {
-                                this.arrLayerStyles[i].isSelected = false;
+                                if (this.arrLayerStyles[i].isSelected === true) {
+                                        this.arrLayerStyles[i].isSelected = false;
+                                }
                         }
                 }
                 
+
+                /*
                 // Next, update this.styleRepetition.selectedIndexes.
                 if (styleIndex !== false) {
-                        this.styleRepetition.selectedIndexes = [styleIndex];
+                        //this.styleRepetition.selectedIndexes = [styleIndex];
                         this.buttonDeleteStyle.classList.remove("disabled");
                 } else {
-                        this.styleRepetition.selectedIndexes = null;
+                        //this.styleRepetition.selectedIndexes = null;
                         if (typeof(this.buttonDeleteStyle) !== "undefined") {
                                 this.buttonDeleteStyle.classList.add("disabled");
                         }
                 }
+                */
                         
                 }
         },
@@ -685,6 +721,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                                 this.arrLayerStyles[i].isActive = false;
                         }
                 }
+                //console.log("Layer.getActiveStyleIndex, returnVal ", returnVal)
                 return returnVal;
         }
     },
@@ -738,15 +775,19 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         handleMousedown: {
                 value: function(event) {
+                        //console.log("Layer.handleMousedown")
                         this.layerData.isActive = true;
-                        var ptrParent = nj.queryParentSelector(event.target, ".content-style");
+                        var ptrParent = nj.queryParentSelector(event.target, ".content-style"),
+                                activeStyleIndex = this.getActiveStyleIndex();
+                        this.selectedStyleIndex = activeStyleIndex;
                         if (ptrParent !== false) {
-                                this.selectStyle(this.getActiveStyleIndex());
+                                this.selectStyle(this.selectedStyleIndex);
                         }
                 }
         },
         handleLayerClick : {
                 value: function(event) {
+                        //console.log("Layer.handleLayerClick")
                         var ptrParent = nj.queryParentSelector(event.target, ".content-style");
                         if (ptrParent !== false) {
                                 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, {
                         return this._isSelected;
                 },
                 set: function(newVal) {
+                        console.log("Style["+this.styleID+"].isSelected.set ", newVal)
                         if (newVal !== this._isSelected) {
                                 this._isSelected = newVal;
                                 this.needsDraw = true;
@@ -191,9 +192,9 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                         this._showView();
                 }
                 if (this.isSelected) {
-                        this.element.classList.add("selected");
+                        this.element.classList.add("style-selected");
                 } else {
-                        this.element.classList.remove("selected");
+                        this.element.classList.remove("style-selected");
                 }
         }
     },
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 {
         overflow: hidden;
 }
 
+.content-style .style-row.style-selected {
+        //background-color: red !important;
+}
+
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, {
             returnObj.layerData.isTransformCollapsed = true;
             returnObj.layerData.isStyleCollapsed = true;
             returnObj.layerData.arrLayerStyles = [];
-            returnObj.layerData.arrLayerStyles = [];
             returnObj.layerData.elementsList = [];
             returnObj.layerData.deleted = false;
             returnObj.layerData.isSelected = false;
@@ -915,11 +914,13 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(