Timeline: Bug fixes for deleting styles and their associated tracks

correctly.

4 files changed, 31 insertions, 31 deletions

diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js
index db4ad712..9576d66f 100644
--- a/js/panels/Timeline/Layer.reel/Layer.js
+++ b/js/panels/Timeline/Layer.reel/Layer.js
@@ -83,6 +83,7 @@ var Layer = exports.Layer = Montage.create(Component, {
                         return;
                 }
                 if (newVal !== this._selectedStyleIndex) {
+                        console.log("Layer.selectedStyleIndex.set ", newVal);
                         this._selectedStyleIndex = newVal;
                         this.layerData.selectedStyleIndex = newVal;
                         this.needsDraw = true;
@@ -638,37 +639,34 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         deleteStyle : {
                 value: function() {
-                        var newEvent = document.createEvent("CustomEvent"),
-                                selectedIndex = 0;
-                        if (this.arrLayerStyles.length > 0) {
-                                if (!!this.styleRepetition.selectedIndexes) {
-                                        
-                                        selectedIndex = this.styleRepetition.selectedIndexes[0];
+                
+                        // Only delete a style if we have one or more styles, and one of them is selected
+                        if ((this.arrLayerStyles.length > 0) && (this.selectedStyleIndex !== false)) {
+                                var newEvent = document.createEvent("CustomEvent");
 
-                                        // Set up the event info and dispatch the event
-                                        newEvent.initCustomEvent("layerEvent", false, true);
-                                        newEvent.layerEventLocale = "styles";
-                                        newEvent.layerEventType = "deleteStyle";
-                                        newEvent.layerID = this.layerID;
-                                        newEvent.styleID = this.arrLayerStyles[selectedIndex].styleID;
-                                        newEvent.styleSelection = selectedIndex;
-                                        defaultEventManager.dispatchEvent(newEvent);
-                                        
-                                        // Delete the style from the view
-                                        this.arrLayerStyles.splice(selectedIndex, 1);
-                                        
-                                        // Was that the last style?
-                                        if (this.arrLayerStyles.length === 0) {
-                                                this.buttonDeleteStyle.classList.add("disabled");
-                                        }
-                                        
-                                }
-                        }
+                                // Set up the event info and dispatch the event
+                                newEvent.initCustomEvent("layerEvent", false, true);
+                                newEvent.layerEventLocale = "styles";
+                                newEvent.layerEventType = "deleteStyle";
+                                newEvent.layerID = this.layerID;
+                                newEvent.styleID = this.selectedStyleIndex;
+                                newEvent.selectedStyleIndex = this.selectedStyleIndex;
+                                defaultEventManager.dispatchEvent(newEvent);
+                                
+                                // Delete the style from the view
+                                this.arrLayerStyles.splice(this.selectedStyleIndex, 1);
+                                
+                                // Set selection to none
+                                this.selectedStyleIndex = false;
+                                
+                                // Disable the delete style button, because now nothing is selected
+                                this.buttonDeleteStyle.classList.add("disabled");
+                        }       
                 }
         },
         selectStyle : {
                 value: function(styleIndex) {
-                        //console.log("Layer.selectStyle ", styleIndex);
+                        console.log("Layer.selectStyle ", styleIndex);
 
                 // Select a style based on its index.
                 // use layerIndex = false to deselect all styles.
@@ -771,7 +769,9 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         handleMousedown: {
                 value: function(event) {
-                        //console.log("Layer.handleMousedown")
+                        if (event.target.classList.contains("button-delete")) {
+                                return;
+                        }
                         this.layerData.isActive = true;
                         var ptrParent = nj.queryParentSelector(event.target, ".content-style"),
                                 activeStyleIndex = this.getActiveStyleIndex();
@@ -783,7 +783,6 @@ var Layer = exports.Layer = Montage.create(Component, {
         },
         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 d712f2bd..185c9bb0 100644
--- a/js/panels/Timeline/Style.reel/Style.js
+++ b/js/panels/Timeline/Style.reel/Style.js
@@ -35,7 +35,7 @@ var LayerStyle = exports.LayerStyle = Montage.create(Component, {
                         return this._isSelected;
                 },
                 set: function(newVal) {
-                        console.log("Style["+this.styleID+"].isSelected.set ", newVal)
+                        //console.log("Style["+this.styleID+"].isSelected.set ", newVal)
                         if (newVal !== this._isSelected) {
                                 this._isSelected = newVal;
                                 this.needsDraw = true;
diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
index a3965eb2..9f9a747a 100644
--- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
+++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js
@@ -919,6 +919,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, {
             for (i = 0; i < arrLayersLength; i++) {
                 if (this.arrLayers[i].layerData.isSelected === true) {
                         if (arrSelectedIndexes.indexOf(i) < 0) {
+                                console.log("TimelinePanel.selectLayers, deselecting ", i);
                                                 this.arrLayers[i].layerData.isSelected = false;
                                 this.triggerLayerBinding(i);
                         }
diff --git a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
index 8dc19958..6b66bda9 100644
--- a/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
+++ b/js/panels/Timeline/TimelineTrack.reel/TimelineTrack.js
@@ -969,8 +969,8 @@ var TimelineTrack = exports.TimelineTrack = Montage.create(Component, {
                 this.arrStyleTracks.push(restoredStyleTrack);
             }
             else if (layerEvent.layerEventType === "deleteStyle") {
-                // TODO: Delete the right track.  Index can be passed in event object, use that for splice().
-                this.arrStyleTracks.pop();
+                // We are deleting a style, so delete the associated track
+                this.arrStyleTracks.splice(layerEvent._event.selectedStyleIndex, 1);
             }
         }
     },