From c42d683d494e688cbd024e53fff64e6bf6a3ff3c Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Tue, 3 Oct 2017 00:57:54 +0200 Subject: [PATCH] Add the possibility to parse layers values with getLayersFromValue --- src/style_manager/model/Layer.js | 2 +- src/style_manager/model/Layers.js | 25 +++++- src/style_manager/model/Properties.js | 16 ++++ src/style_manager/model/PropertyStack.js | 4 +- src/style_manager/view/LayersView.js | 2 +- src/style_manager/view/PropertyStackView.js | 87 +++++++++------------ 6 files changed, 81 insertions(+), 55 deletions(-) diff --git a/src/style_manager/model/Layer.js b/src/style_manager/model/Layer.js index 7a3edb7a0..a704c7267 100644 --- a/src/style_manager/model/Layer.js +++ b/src/style_manager/model/Layer.js @@ -4,7 +4,7 @@ module.exports = Backbone.Model.extend({ index: '', value: '', values: {}, - active: true, + active: false, preview: false, properties: [], }, diff --git a/src/style_manager/model/Layers.js b/src/style_manager/model/Layers.js index 834671432..e9455d9bf 100644 --- a/src/style_manager/model/Layers.js +++ b/src/style_manager/model/Layers.js @@ -19,6 +19,29 @@ module.exports = Backbone.Collection.extend({ this.idx = 1; }, + /** + * Get layers from a value string (for not detached properties), + * eg: propertyName: layer1Value, layer2Value, layer3Value, ...; + * @param {string} value + * @return {Array} + * @private + */ + getLayersFromValue(value) { + const layers = []; + // Remove spaces inside functions, eg: + // From: 1px 1px rgba(2px, 2px, 2px), 2px 2px rgba(3px, 3px, 3px) + // To: 1px 1px rgba(2px,2px,2px), 2px 2px rgba(3px,3px,3px) + value.replace(/\(([\w\s,.]*)\)/g, match => { + var cleaned = match.replace(/,\s*/g, ','); + value = value.replace(match, cleaned); + }); + const layerValues = value ? value.split(', ') : []; + layerValues.forEach(layerValue => { + layers.push({properties: this.properties.parseValue(layerValue)}); + }); + return layers; + }, + active(index) { this.each(layer => layer.set('active', 0)); const layer = this.at(index); @@ -37,7 +60,7 @@ module.exports = Backbone.Collection.extend({ const value = layer.getPropertyValue(property); value && result.push(value); }); - return result.join(','); + return result.join(', '); } }); diff --git a/src/style_manager/model/Properties.js b/src/style_manager/model/Properties.js index 4562b0a14..05ad5eea1 100644 --- a/src/style_manager/model/Properties.js +++ b/src/style_manager/model/Properties.js @@ -96,6 +96,22 @@ module.exports = require('backbone').Collection.extend(TypeableCollection).exten return collection; }, + /** + * Parse a value and return an array splitted by properties + * @param {string} value + * @return {Array} + * @return + */ + parseValue(value) { + const properties = []; + const values = value.split(' '); + values.forEach((value, i) => { + const property = this.at(i); + properties.push(Object.assign({}, property.attributes, {value})); + }); + return properties; + }, + getFullValue() { let result = ''; this.each(model => result += `${model.getFullValue()} `); diff --git a/src/style_manager/model/PropertyStack.js b/src/style_manager/model/PropertyStack.js index a0d14796d..9b6a8737e 100644 --- a/src/style_manager/model/PropertyStack.js +++ b/src/style_manager/model/PropertyStack.js @@ -14,7 +14,9 @@ module.exports = Property.extend({ init() { Property.prototype.init.apply(this, arguments); const layers = this.get('layers'); - this.set('layers', new Layers(layers)); + const layersColl = new Layers(layers); + layersColl.properties = this.get('properties'); + this.set('layers', layersColl); }, getFullValue() { diff --git a/src/style_manager/view/LayersView.js b/src/style_manager/view/LayersView.js index fc4cc78a9..8289645a5 100644 --- a/src/style_manager/view/LayersView.js +++ b/src/style_manager/view/LayersView.js @@ -64,7 +64,7 @@ module.exports = Backbone.View.extend({ if(typeof this.preview !== 'undefined'){ model.set('preview', this.preview); } - console.log('Layer addToCollection', model.get('properties')); + var view = new LayerView({ model, config, diff --git a/src/style_manager/view/PropertyStackView.js b/src/style_manager/view/PropertyStackView.js index d747d7c55..393e7b991 100644 --- a/src/style_manager/view/PropertyStackView.js +++ b/src/style_manager/view/PropertyStackView.js @@ -9,6 +9,7 @@ module.exports = PropertyCompositeView.extend({ return `
+
`; }, @@ -180,6 +181,7 @@ 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'); }); @@ -215,7 +217,7 @@ module.exports = PropertyCompositeView.extend({ renderLayers() { const self = this; const model = this.model; - const fieldEl = this.el.querySelector(`.${this.pfx}field`); + const fieldEl = this.el.querySelector('[data-layers-wrapper]'); const layers = new LayersView({ collection: this.getLayers(), stackModel: model, @@ -248,80 +250,63 @@ module.exports = PropertyCompositeView.extend({ }, /** - * Returns array suitale for layers from target style + * Returns array suitable for layers from target style * Only for detached stacks * @return {Array} */ getLayersFromTarget() { - var arr = []; - var target = this.getTarget(); - if(!target) - return arr; - var trgStyle = target.get('style'); - - this.model.get('properties').each(prop => { - var style = trgStyle[prop.get('property')]; - - if (style) { - var list = style.split(','); - for(var i = 0, len = list.length; i < len; i++){ - var val = list[i].trim(); - - if(arr[i]){ - arr[i][prop.get('property')] = val; - }else{ - var vals = {}; - vals[prop.get('property')] = val; - arr[i] = vals; - } + const layers = []; + const model = this.model; + const target = this.getTarget(); + const trgStyle = target ? target.getStyle() : {}; + + // For detached, I have to fetch values from all sub properties + model.get('properties').each(propModel => { + let propertyObj = propModel.attributes; + const property = propModel.get('property'); + const style = trgStyle[property]; + const values = style ? style.split(', ') : []; + values.forEach((value, i) => { + value = value.trim(); + const layer = layers[i]; + propertyObj = Object.assign({}, propertyObj, {value}); + + if (layer) { + layer.properties.push(propertyObj); + } else { + layers[i] = { + properties: [propertyObj] + }; } - } + }); }); - return arr; + return layers; }, /** * Refresh layers * */ refreshLayers() { - var n = []; - var a = []; + let layersObj = []; + let layerValues = []; var fieldName = 'value'; 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) { fieldName = 'values'; - a = this.getLayersFromTarget(); + layerValues = this.getLayersFromTarget(); } else { - var v = this.getTargetValue(); - var vDef = model.getDefaultValue(); - v = v == vDef ? '' : v; - if (v) { - // Remove spaces inside functions: - // eg: - // From: 1px 1px rgba(2px, 2px, 2px), 2px 2px rgba(3px, 3px, 3px) - // To: 1px 1px rgba(2px,2px,2px), 2px 2px rgba(3px,3px,3px) - v.replace(/\(([\w\s,.]*)\)/g, match => { - var cleaned = match.replace(/,\s*/g, ','); - v = v.replace(match, cleaned); - }); - a = v.split(', '); - } + let value = this.getTargetValue(); + value = value == model.getDefaultValue() ? '' : value; + layersObj = layers.getLayersFromValue(value); } - _.each(a, e => { - var o = {}; - o[fieldName] = e; - n.push(o); - },this); - - //this.$props.detach(); - var layers = this.getLayers(); layers.reset(); - layers.add(n); + layers.add(layersObj); // Avoid updating with detached as it will cause issues on next change if (!detached) {