From 4a8a293ba3fdf934a431152a9351f45092fb3695 Mon Sep 17 00:00:00 2001 From: Jon Reid Date: Fri, 25 May 2012 14:01:45 -0700 Subject: Timeline: bug fix: better selection/deselection of styles within layers. --- js/panels/Timeline/Layer.reel/Layer.js | 51 +++++++++++++++++++--- js/panels/Timeline/Style.reel/Style.js | 5 ++- js/panels/Timeline/Style.reel/scss/Style.scss | 4 ++ .../Timeline/TimelinePanel.reel/TimelinePanel.js | 11 ++--- 4 files changed, 59 insertions(+), 12 deletions(-) (limited to 'js') 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(Component, { */ - // Deselect all layers. + // Deselect selected layers if they're not in arrSelectedIndexes. for (i = 0; i < arrLayersLength; i++) { if (this.arrLayers[i].layerData.isSelected === true) { - this.arrLayers[i].layerData.isSelected = false; - this.triggerLayerBinding(i); + if (arrSelectedIndexes.indexOf(i) < 0) { + this.arrLayers[i].layerData.isSelected = false; + this.triggerLayerBinding(i); + } } } if (this.currentLayersSelected !== false) { @@ -1360,7 +1361,7 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { selectLayer:{ value:function (layerIndex, userSelection) { - console.log("=----> Please update this component to use TimelinePanel.selectLayers. See this message for syntax. <----="); + //console.log("=----> Please update this component to use TimelinePanel.selectLayers. See this message for syntax. <----="); this.selectLayers([layerIndex]); if (userSelection === true) { this.updateStageSelection(); -- cgit v1.2.3