diff --git a/src/style_manager/model/Layer.js b/src/style_manager/model/Layer.js index 9160048d8..7a3edb7a0 100644 --- a/src/style_manager/model/Layer.js +++ b/src/style_manager/model/Layer.js @@ -30,6 +30,16 @@ module.exports = Backbone.Model.extend({ } }, + getPropertyValue(property) { + let result = ''; + this.get('properties').each(prop => { + if (prop.get('property') == property) { + result = prop.getFullValue(); + } + }); + return result; + }, + getFullValue() { let result = []; this.get('properties').each(prop => result.push(prop.getFullValue())); diff --git a/src/style_manager/model/Layers.js b/src/style_manager/model/Layers.js index d781d6aac..834671432 100644 --- a/src/style_manager/model/Layers.js +++ b/src/style_manager/model/Layers.js @@ -1,5 +1,4 @@ -var Backbone = require('backbone'); -var Layer = require('./Layer'); +const Layer = require('./Layer'); module.exports = Backbone.Collection.extend({ @@ -20,10 +19,25 @@ module.exports = Backbone.Collection.extend({ this.idx = 1; }, + active(index) { + this.each(layer => layer.set('active', 0)); + const layer = this.at(index); + layer && layer.set('active', 1); + }, + getFullValue() { let result = []; this.each(layer => result.push(layer.getFullValue())); return result.join(', '); + }, + + getPropertyValues(property) { + const result = []; + this.each(layer => { + const value = layer.getPropertyValue(property); + value && result.push(value); + }); + return result.join(','); } }); diff --git a/src/style_manager/view/LayerView.js b/src/style_manager/view/LayerView.js index 3eab861b4..ad7d005f0 100644 --- a/src/style_manager/view/LayerView.js +++ b/src/style_manager/view/LayerView.js @@ -1,7 +1,7 @@ module.exports = Backbone.View.extend({ events:{ - click: 'updateIndex', + click: 'active', 'click [data-close-layer]': 'remove', 'mousedown [data-move-layer]': 'initSorter', }, @@ -34,6 +34,7 @@ module.exports = Backbone.View.extend({ this.sorter = o.sorter || null; this.listenTo(model, 'destroy remove', this.remove); this.listenTo(model, 'change:value', this.valueChanged); + this.listenTo(model, 'change:active', this.updateVisibility); this.listenTo(model, 'change:props', this.showProps); if (!model.get('preview')) { @@ -155,7 +156,7 @@ module.exports = Backbone.View.extend({ * @param Event * * @return void - * */ + * * updateIndex(e) { var i = this.getIndex(); this.stackModel.set('stackIndex', i); @@ -165,6 +166,7 @@ module.exports = Backbone.View.extend({ this.$el.addClass(this.pfx + 'active'); }, + */ /** * Fetch model index @@ -181,6 +183,27 @@ module.exports = Backbone.View.extend({ return index; }, + getPropertiesWrapper() { + if (!this.propsWrapEl) { + this.propsWrapEl = this.el.querySelector('[data-properties]'); + } + return this.propsWrapEl; + }, + + active() { + const model = this.model; + const collection = model.collection; + collection.active(collection.indexOf(model)); + }, + + updateVisibility() { + const pfx = this.pfx; + const wrapEl = this.getPropertiesWrapper(); + const active = this.model.get('active'); + wrapEl.style.display = active ? '' : 'none'; + this.$el[active ? 'addClass' : 'removeClass'](`${pfx}active`); + }, + render() { const PropertiesView = require('./PropertiesView'); const className = `${this.pfx}layer`; @@ -192,8 +215,8 @@ module.exports = Backbone.View.extend({ }).render().el; el.innerHTML = this.template(model); el.className = className; - console.log('Append to ', el.querySelector('[data-properties]'), 'props', properties); - el.querySelector('[data-properties]').appendChild(properties); + this.getPropertiesWrapper().appendChild(properties); + this.updateVisibility(); //this.valueChanged(); return this; }, diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index 29b2acad3..557c28ffd 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -57,9 +57,8 @@ module.exports = PropertyCompositeView.extend({ * */ indexChanged(e) { const model = this.model; - console.log('New layer index', model.get('stackIndex')); + this.getLayers().active(model.get('stackIndex')); /* - var layer = this.getLayers().at(model.get('stackIndex')); layer.set('props', this.$props); model.get('properties').each(prop => prop.trigger('targetUpdated')); @@ -80,14 +79,15 @@ module.exports = PropertyCompositeView.extend({ if (detached) { var propVal = ''; var index = subModel.collection.indexOf(subModel); - + /* + this.getLayers().getPropertyValues(subProperty) this.getLayers().each(layer => { var val = layer.get('values')[subProperty]; if (val) { propVal += (propVal ? ',' : '') + val; } }); - + */ view.updateTargetStyle(propVal, null, opt); } else { model.set('value', model.getFullValue(), opt); @@ -167,7 +167,6 @@ module.exports = PropertyCompositeView.extend({ properties: model.get('properties') }); console.log('Props ', model.get('properties'), 'layer props', layer.get('properties')); - const index = layers.indexOf(layer); //layer.set('value', model.getDefaultValue(1)); // In detached mode inputValueChanged will add new 'layer value' @@ -175,7 +174,7 @@ module.exports = PropertyCompositeView.extend({ this.inputValueChanged(); // This will set subprops with a new default values - model.set('stackIndex', index); + model.set('stackIndex', layers.indexOf(layer)); }, @@ -210,6 +209,7 @@ module.exports = PropertyCompositeView.extend({ renderLayers() { const fieldEl = this.el.querySelector(`.${this.pfx}field`); const layers = new LayersView({ + // TODO Here I should put the onChange method collection: this.getLayers(), stackModel: this.model, preview: this.model.get('preview'), diff --git a/src/style_manager/view/PropertyView.js b/src/style_manager/view/PropertyView.js index af13d49df..a0fda3b48 100644 --- a/src/style_manager/view/PropertyView.js +++ b/src/style_manager/view/PropertyView.js @@ -1,5 +1,3 @@ -var Backbone = require('backbone'); - module.exports = Backbone.View.extend({ template(model) {