Parse the value in getLayersFromStyle

src/style_manager/model/Layers.js

@@ -21,7 +21,8 @@ module.exports = Backbone.Collection.extend({
 
   /**
    * Get layers from a value string (for not detached properties),
-   * eg: propertyName: layer1Value, layer2Value, layer3Value, ...;
+   * example of input:
+   * `layer1Value, layer2Value, layer3Value, ...`
    * @param  {string} value
    * @return {Array}
    * @private
@@ -43,10 +44,13 @@ module.exports = Backbone.Collection.extend({
   },
 
   /**
-   * 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, ...
+   * Get layers from a style object (for detached properties),
+   * example of input:
+   * {
+   *  subPropname1: sub-propvalue11, sub-propvalue12, sub-propvalue13, ...
+   *  subPropname2: sub-propvalue21, sub-propvalue22, sub-propvalue23, ...
+   *  subPropname3: sub-propvalue31, sub-propvalue32, sub-propvalue33, ...
+   * }
    * @param  {Object} styleObj
    * @return {Array}
    * @private
@@ -59,7 +63,7 @@ module.exports = Backbone.Collection.extend({
       const style = styleObj[propModel.get('property')];
       const values = style ? style.split(', ') : [];
       values.forEach((value, i) => {
-        value = value.trim();
+        value = propModel.parseValue(value.trim());
         const layer = layers[i];
         const propertyObj = Object.assign({}, propModel.attributes, {value});
 

src/style_manager/view/PropertyStackView.js

@@ -133,18 +133,11 @@ module.exports = PropertyCompositeView.extend({
   },
 
   /**
-   * The value that should update view inputs.
-   * In case of a detached property the value might something like this
-   * @param {string} value
-   * @param {Object} [opts={}]
+   * There is no need to handle input update by the property itself,
+   * this will be done by layers
    * @private
    */
-  setValue(value, opts = {}) {
-    const model = this.model;
-    let val = value || model.get('value') || model.getDefaultValue();
-    //const input = this.getInputEl();
-    //input && (input.value = val);
-  },
+  setValue() {},
 
   /**
    * Create value by layers
@@ -173,6 +166,9 @@ module.exports = PropertyCompositeView.extend({
         if (model.get('detached')) {
           const subProp = subModel.get('property');
           const values = self.getLayers().getPropertyValues(subProp);
+          if (subProp == 'background-image') {
+            console.log('value is', values, self.getLayers());
+          }
           view.updateTargetStyle(values, null, opt);
         } else {
           model.set('value', model.getFullValue(), opt);
@@ -182,7 +178,7 @@ module.exports = PropertyCompositeView.extend({
       // How to get a value on a single sub-property.
       // eg. When the target is updated
       customValue(property, mIndex) {
-        return self.valueOnIndex(mIndex, property);
+        //return self.valueOnIndex(mIndex, property);
       }
     };
     const layers = new LayersView({
@@ -201,7 +197,7 @@ module.exports = PropertyCompositeView.extend({
       onChange: propsConfig.onChange,
       propTarget: propsConfig.propTarget,
       customValue: propsConfig.customValue,
-    }).render().el;
+    }).render();
 
     //model.get('properties')
     fieldEl.appendChild(layers);