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 +++++++++++----------- js/panels/Timeline/Style.reel/Style.js | 2 +- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 1 + .../Timeline/TimelineTrack.reel/TimelineTrack.js | 4 +- 4 files changed, 31 insertions(+), 31 deletions(-) (limited to 'js/panels/Timeline') 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); } } }, -- 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 +++++++++++++++------- js/panels/Timeline/Layer.reel/scss/Layer.scss | 6 +-- js/panels/Timeline/Style.reel/Style.js | 2 +- js/panels/Timeline/Style.reel/css/Style.css | 12 +++++ js/panels/Timeline/Style.reel/scss/Style.scss | 8 +++- .../Timeline/TimelinePanel.reel/TimelinePanel.js | 27 +++++++++-- 6 files changed, 84 insertions(+), 27 deletions(-) (limited to 'js/panels/Timeline') 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(); } }, diff --git a/js/panels/Timeline/Layer.reel/scss/Layer.scss b/js/panels/Timeline/Layer.reel/scss/Layer.scss index 8f8881dd..5220d0f1 100644 --- a/js/panels/Timeline/Layer.reel/scss/Layer.scss +++ b/js/panels/Timeline/Layer.reel/scss/Layer.scss @@ -274,10 +274,10 @@ .content-style .item-template { display: none; } +.style-row { + height: 20px; +} .content-style .layout-row.selected .layout-cell { background-color: $color-panel-hilite-bg; color: $color-panel-hilite-text; } -.style-row { - height: 20px; -} diff --git a/js/panels/Timeline/Style.reel/Style.js b/js/panels/Timeline/Style.reel/Style.js index 185c9bb0..5c1c9eeb 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) + if (newVal !== this._isSelected) { this._isSelected = newVal; this.needsDraw = true; diff --git a/js/panels/Timeline/Style.reel/css/Style.css b/js/panels/Timeline/Style.reel/css/Style.css index 0cc8a1f8..bb65b0c7 100644 --- a/js/panels/Timeline/Style.reel/css/Style.css +++ b/js/panels/Timeline/Style.reel/css/Style.css @@ -84,3 +84,15 @@ div.content-style input.nj-skinned { div.style-row .container-propvals { overflow: hidden; } + +/* line 80, ../scss/Style.scss */ +.content-style .style-row.selected { + background-color: #474747; + color: white; +} + +/* line 84, ../scss/Style.scss */ +.content-style .style-row.style-selected { + background-color: #b2b2b2; + color: #242424; +} diff --git a/js/panels/Timeline/Style.reel/scss/Style.scss b/js/panels/Timeline/Style.reel/scss/Style.scss index 3ea943d8..c5287b00 100644 --- a/js/panels/Timeline/Style.reel/scss/Style.scss +++ b/js/panels/Timeline/Style.reel/scss/Style.scss @@ -77,7 +77,11 @@ div.style-row .container-propvals { overflow: hidden; } +.content-style .style-row.selected { + background-color: $color-panel-bg; + color: $color-panel-text; +} .content-style .style-row.style-selected { - //background-color: red !important; + background-color: $color-panel-hilite-bg; + color: $color-panel-hilite-text; } - diff --git a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js index 9f9a747a..bb5ca036 100644 --- a/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js +++ b/js/panels/Timeline/TimelinePanel.reel/TimelinePanel.js @@ -919,7 +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); } @@ -992,7 +992,12 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { value: function() { var arrSelectedElements = [], i = 0, - arrLayersLength = this.arrLayers.length; + j = 0, + arrLayersLength = this.arrLayers.length, + boolDoIt = false, + arrSelectedElementsLength = 0, + arrStageIndexes = this.getSelectedLayerIndexesFromStage(), + arrStageIndexesLength = arrStageIndexes.length; // Get the selected layers for (i = 0; i < arrLayersLength; i++) { @@ -1000,9 +1005,25 @@ var TimelinePanel = exports.TimelinePanel = Montage.create(Component, { arrSelectedElements.push(this.arrLayers[i].layerData.stageElement); } } + arrSelectedElementsLength = arrSelectedElements.length; + + // check to see if we even need to continue... + if (arrSelectedElementsLength !== arrStageIndexesLength) { + boolDoIt = true; + } else { + for (i = 0; i < arrStageIndexesLength; i++) { + if (this.currentLayersSelected.indexOf(arrStageIndexes[i]) < 0) { + boolDoIt = true; + } + } + } + + if (boolDoIt === false) { + return; + } // Select the layers, or clear the selection if none were found - if (arrSelectedElements.length > 0) { + if (arrSelectedElementsLength > 0) { this.application.ninja.selectionController.selectElements(arrSelectedElements); } else { this.application.ninja.selectionController.executeSelectElement(); -- cgit v1.2.3