From 66007a04da84cae1d81af5340b11706d5f25c89d Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Thu, 31 May 2012 17:09:45 -0700 Subject: Timeline: Bug fixes for deleting styles and their associated tracks correctly. --- js/panels/Timeline/Layer.reel/Layer.js | 55 +++++++++++++++++----------------- 1 file changed, 27 insertions(+), 28 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') 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(); -- cgit v1.2.3 From 4338d57eed565f723bfb7cbcefca65836b68953b Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 1 Jun 2012 14:26:30 -0700 Subject: Timeline: Better style selection and deselection. Automatic re-selection of previously selected style when parent layer is reselected. --- js/panels/Timeline/Layer.reel/Layer.js | 56 +++++++++++++++++++++++----------- 1 file changed, 38 insertions(+), 18 deletions(-) (limited to 'js/panels/Timeline/Layer.reel/Layer.js') diff --git a/js/panels/Timeline/Layer.reel/Layer.js b/js/panels/Timeline/Layer.reel/Layer.js index 9576d66f..4da1bfba 100644 --- a/js/panels/Timeline/Layer.reel/Layer.js +++ b/js/panels/Timeline/Layer.reel/Layer.js @@ -83,13 +83,14 @@ 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; } } }, + _storedStyleIndex : { + value: false + }, /* Layer models: the name, ID, and selected and animation booleans for the layer */ _layerName:{ @@ -277,6 +278,10 @@ var Layer = exports.Layer = Montage.create(Component, { if (value === false) { // If changing from true to false, we need to deselect any associated styles this.selectStyle(false); + } else { + if (this._storedStyleIndex !== false) { + this.selectStyle(this._storedStyleIndex); + } } this._isSelected = value; this.layerData.isSelected = value; @@ -541,7 +546,7 @@ var Layer = exports.Layer = Montage.create(Component, { } // Enable or disable the delete style button as appropriate if (this.isSelected) { - if (this.selectedStyleIndex !== "false") { + if (this.selectedStyleIndex !== false) { this.selectStyle(this.selectedStyleIndex); this.buttonDeleteStyle.classList.remove("disabled"); } @@ -630,6 +635,7 @@ var Layer = exports.Layer = Montage.create(Component, { newStyle.ruleTweener = false; newStyle.isSelected = false; this.arrLayerStyles.push(newStyle); + this.selectStyle(this.arrLayerStyles.length -1); // Set up the event info and dispatch the event this.styleCounter += 1; @@ -666,26 +672,37 @@ 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 { - if (this.arrLayerStyles[i].isSelected === true) { - this.arrLayerStyles[i].isSelected = false; - } - } - } - - + if (styleIndex === false) { + if (arrLayerStylesLength === 0) { + // No styles selected, so do nothing. + return; + } + for (i = 0; i < arrLayerStylesLength; i++) { + if (this.arrLayerStyles[i].isSelected === true) { + this.arrLayerStyles[i].isSelected = false; + } + } + } else { + for (i = 0; i < arrLayerStylesLength; i++) { + if (i === styleIndex) { + this.arrLayerStyles[i].isSelected = true; + } else { + if (this.arrLayerStyles[i].isSelected === true) { + this.arrLayerStyles[i].isSelected = false; + } + } + } + this.selectedStyleIndex = styleIndex; + this._storedStyleIndex = styleIndex; + } + + + /* // Next, update this.styleRepetition.selectedIndexes. if (styleIndex !== false) { @@ -744,6 +761,9 @@ var Layer = exports.Layer = Montage.create(Component, { }, handleDeleteStyleClick: { value: function(event) { + if (event.target.classList.contains("disabled")) { + return; + } this.deleteStyle(); } }, -- cgit v1.2.3