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) {