diff --git a/src/style_manager/view/LayerView.js b/src/style_manager/view/LayerView.js index ba9da723b..f9d3b74cc 100644 --- a/src/style_manager/view/LayerView.js +++ b/src/style_manager/view/LayerView.js @@ -106,14 +106,19 @@ module.exports = Backbone.View.extend({ if(e && e.stopPropagation) e.stopPropagation(); + const model = this.model; + const collection = model.collection; + const stackModel = this.stackModel; + Backbone.View.prototype.remove.apply(this, arguments); - if(this.model.collection.contains(this.model)) - this.model.collection.remove(this.model); + if (collection.contains(model)) { + collection.remove(model); + } - if(this.stackModel && this.stackModel.set){ - this.stackModel.set({stackIndex: null}, {silent: true}); - this.stackModel.trigger('updateValue'); + if (stackModel && stackModel.set) { + stackModel.set({stackIndex: null}, {silent: true}); + stackModel.trigger('updateValue'); } }, diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index b980d65ab..963b542a7 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -60,39 +60,6 @@ module.exports = PropertyCompositeView.extend({ this.getLayers().active(model.get('stackIndex')); }, - /** @inheritDoc * - getPropsConfig(opts) { - const model = this.model; - const detached = model.get('detached'); - var result = PropertyCompositeView.prototype.getPropsConfig.apply(this, arguments); - - result.onChange = (el, view, opt) => { - const subModel = view.model; - const subProperty = subModel.get('property'); - this.build(); - - 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); - } - }; - - return result; - }, - */ - /** * Extract string from the composite value of the target * @param {integer} index Property index @@ -127,34 +94,6 @@ module.exports = PropertyCompositeView.extend({ return result; }, - /** - * Build composite value - * @private - * * - build(...args) { - let value = ''; - let values = {}; - const model = this.model; - const stackIndex = model.get('stackIndex'); - const properties = model.get('properties'); - - if (stackIndex === null) { - return; - } - - // Store properties values inside layer, in this way it's more reliable - // to fetch them later - properties.each(prop => { - const propValue = prop.getFullValue(); - values[prop.get('property')] = propValue; - value += `${propValue} `; - }); - - const layerModel = this.getLayers().at(stackIndex); - layerModel && layerModel.set({values, value}); - }, - */ - addLayer() { const model = this.model; const layers = this.getLayers(); @@ -181,10 +120,15 @@ module.exports = PropertyCompositeView.extend({ if (!model.get('detached')) { model.set('value', this.getLayerValues()); } else { - // TODO to check - model.get('properties').each(prop => { - prop.trigger('change:value'); - }); + /* + const layer = model.get('layers').at(0); + layer && layer.get('properties').each(prop => prop.trigger('change:value')); + !layer && this.model.get('properties').each(prop => { + console.log('Prop', prop); + prop.trigger('change:value') + }) + */ + model.get('properties').each(prop => prop.trigger('change:value')) } }, @@ -218,34 +162,48 @@ module.exports = PropertyCompositeView.extend({ const self = this; const model = this.model; const fieldEl = this.el.querySelector('[data-layers-wrapper]'); + const PropertiesView = require('./PropertiesView'); + const propsConfig = { + propTarget: this.propTarget, + + // Things to do when a single sub-property is changed + onChange(el, view, opt) { + const subModel = view.model; + + if (model.get('detached')) { + const subProp = subModel.get('property'); + const values = self.getLayers().getPropertyValues(subProp); + view.updateTargetStyle(values, null, opt); + } else { + model.set('value', model.getFullValue(), opt); + } + }, + + // How to get a value on a single sub-property. + // eg. When the target is updated + customValue(property, mIndex) { + return self.valueOnIndex(mIndex, property); + } + }; const layers = new LayersView({ collection: this.getLayers(), stackModel: model, preview: model.get('preview'), config: this.config, - propsConfig: { - propTarget: this.propTarget, - - // Things to do when a single sub-property is changed - onChange(el, view, opt) { - const subModel = view.model; - - if (model.get('detached')) { - const subProp = subModel.get('property'); - const values = self.getLayers().getPropertyValues(subProp); - view.updateTargetStyle(values, null, opt); - } else { - model.set('value', model.getFullValue(), opt); - } - }, + propsConfig, + }).render().el; - // How to get a value on a single sub-property. - // eg. When the target is updated - customValue(property, mIndex) { - return self.valueOnIndex(mIndex, property); - } - } + // Will use it to propogate changes + new PropertiesView({ + collection: this.model.get('properties'), + stackModel: model, + config: this.config, + onChange: propsConfig.onChange, + propTarget: propsConfig.propTarget, + customValue: propsConfig.customValue, }).render().el; + + //model.get('properties') fieldEl.appendChild(layers); }, @@ -263,7 +221,6 @@ module.exports = PropertyCompositeView.extend({ const target = this.getTarget(); const style = target ? target.getStyle() : {}; layersObj = layers.getLayersFromStyle(style); - console.log(layersObj); } else { let value = this.getTargetValue(); value = value == model.getDefaultValue() ? '' : value;