Add the possibility to get layers from detached properties

src/style_manager/model/Layers.js

@@ -42,6 +42,40 @@ module.exports = Backbone.Collection.extend({
     return layers;
   },
 
+  /**
+   * Get layers from a style object (for detached properties), eg:
+   * sub-propname1: sub-propvalue11, sub-propvalue12, sub-propvalue13, ...
+   * sub-propname2: sub-propvalue21, sub-propvalue22, sub-propvalue23, ...
+   * sub-propname3: sub-propvalue31, sub-propvalue32, sub-propvalue33, ...
+   * @param  {Object} styleObj
+   * @return {Array}
+   * @private
+   */
+  getLayersFromStyle(styleObj) {
+    const layers = [];
+
+    this.properties.each(propModel => {
+      const style = styleObj[propModel.get('property')];
+      const values = style ? style.split(', ') : [];
+      values.forEach((value, i) => {
+        value = value.trim();
+        const layer = layers[i];
+        const propertyObj = Object.assign({}, propModel.attributes, {value});
+
+        if (layer) {
+          layer.properties.push(propertyObj);
+        } else {
+          layers[i] = {
+            properties: [propertyObj]
+          };
+        }
+      });
+    });
+
+    return layers;
+  },
+
+
   active(index) {
     this.each(layer => layer.set('active', 0));
     const layer = this.at(index);

src/style_manager/view/PropertyStackView.js

@@ -249,56 +249,21 @@ module.exports = PropertyCompositeView.extend({
     fieldEl.appendChild(layers);
   },
 
-  /**
-   * Returns array suitable for layers from target style
-   * Only for detached stacks
-   * @return {Array<string>}
-   */
-  getLayersFromTarget() {
-    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 layers;
-  },
-
   /**
    * Refresh layers
    * */
   refreshLayers() {
     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';
-      layerValues = this.getLayersFromTarget();
+      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;

test/specs/style_manager/view/PropertyStackView.js

@@ -303,6 +303,7 @@ module.exports = {
               subprop2: 'C',
               subprop3: 'Y',
             }];
+            // replaced with Layers.getLayersFromStyle
             expect(view.getLayersFromTarget()).toEqual(result);
           });