From 7aa8da8b971fe6b9aff99ba6f325bd58531a50f0 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 4 Oct 2017 00:21:18 +0200 Subject: [PATCH] Clear Property Stack view --- src/style_manager/model/Layers.js | 9 +- src/style_manager/view/PropertyStackView.js | 124 ++++++-------------- 2 files changed, 38 insertions(+), 95 deletions(-) diff --git a/src/style_manager/model/Layers.js b/src/style_manager/model/Layers.js index c980ad09e..cb59dbbf6 100644 --- a/src/style_manager/model/Layers.js +++ b/src/style_manager/model/Layers.js @@ -57,9 +57,10 @@ module.exports = Backbone.Collection.extend({ */ getLayersFromStyle(styleObj) { const layers = []; - const propNames = this.properties.pluck('property'); + const properties = this.properties; + const propNames = properties.pluck('property'); - this.properties.each(propModel => { + properties.each(propModel => { const style = styleObj[propModel.get('property')]; const values = style ? style.split(', ') : []; values.forEach((value, i) => { @@ -77,10 +78,10 @@ module.exports = Backbone.Collection.extend({ }); }); - // Now whit all layers are in, will check missing properties + // Now whit all layers in, will check missing properties layers.forEach(layer => { const layerProprs = layer.properties.map(prop => prop.property); - this.properties.each(propModel => { + properties.each(propModel => { const propertyName = propModel.get('property'); if (layerProprs.indexOf(propertyName) < 0) { diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index 46d5a7bb1..a2bdbed1c 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -60,47 +60,12 @@ module.exports = PropertyCompositeView.extend({ this.getLayers().active(model.get('stackIndex')); }, - /** - * Extract string from the composite value of the target - * @param {integer} index Property index - * @param {View} propView Property view - * @return string - * @private - * */ - valueOnIndex(index, propView) { - let result; - const model = this.model; - const propModel = propView && propView.model; - const layerIndex = model.get('stackIndex'); - - // If detached the value in this case is stacked, eg. substack-prop: 1px, 2px, 3px... - if (model.get('detached')) { - var targetValue = propView.getTargetValue({ignoreCustomValue: 1}); - var valist = (targetValue + '').split(','); - result = valist[layerIndex]; - result = result ? result.trim() : propModel.getDefaultValue(); - result = propModel.parseValue(result); - } else { - var aStack = this.getLayerValues(); - var strVar = aStack[layerIndex]; - if(!strVar) - return; - var a = strVar.split(' '); - if(a.length && a[index]){ - result = a[index]; - } - } - - return result; - }, - addLayer() { const model = this.model; const layers = this.getLayers(); - const layer = layers.add({ - name: 'New', - properties: model.get('properties').deepClone(), - }); + const properties = model.get('properties').deepClone(); + properties.each(property => property.set('value', '')); + const layer = layers.add({properties}); // In detached mode inputValueChanged will add new 'layer value' // to all subprops @@ -120,14 +85,6 @@ module.exports = PropertyCompositeView.extend({ if (!model.get('detached')) { model.set('value', this.getLayerValues()); } else { - /* - 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')) } }, @@ -148,10 +105,37 @@ module.exports = PropertyCompositeView.extend({ }, /** - * Render layers - * @return self + * Refresh layers * */ - renderLayers() { + refreshLayers() { + let layersObj = []; + const model = this.model; + const layers = this.getLayers(); + const detached = model.get('detached'); + + // With detached layers values will be assigned to their properties + if (detached) { + const target = this.getTarget(); + const style = target ? target.getStyle() : {}; + layersObj = layers.getLayersFromStyle(style); + } else { + let value = this.getTargetValue(); + value = value == model.getDefaultValue() ? '' : value; + layersObj = layers.getLayersFromValue(value); + } + + layers.reset(); + layers.add(layersObj); + + // Avoid updating with detached as it will cause issues on next change + if (!detached) { + this.inputValueChanged(); + } + + model.set({stackIndex: null}, {silent: true}); + }, + + onRender(...args) { const self = this; const model = this.model; const fieldEl = this.el.querySelector('[data-layers-wrapper]'); @@ -174,12 +158,6 @@ module.exports = PropertyCompositeView.extend({ 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(), @@ -203,40 +181,4 @@ module.exports = PropertyCompositeView.extend({ fieldEl.appendChild(layers); }, - /** - * Refresh layers - * */ - refreshLayers() { - let layersObj = []; - const model = this.model; - const layers = this.getLayers(); - const detached = model.get('detached'); - - // With detached layers values will be assigned to their properties - if (detached) { - const target = this.getTarget(); - const style = target ? target.getStyle() : {}; - layersObj = layers.getLayersFromStyle(style); - } else { - let value = this.getTargetValue(); - value = value == model.getDefaultValue() ? '' : value; - layersObj = layers.getLayersFromValue(value); - } - - layers.reset(); - layers.add(layersObj); - - // Avoid updating with detached as it will cause issues on next change - if (!detached) { - this.inputValueChanged(); - } - - model.set({stackIndex: null}, {silent: true}); - }, - - onRender(...args) { - //PropertyCompositeView.prototype.onRender.apply(this, args); - this.renderLayers(); - }, - });