Improve Property parseValue and add layerSeparator to stack type

src/style_manager/model/Layers.js

@@ -18,6 +18,10 @@ module.exports = Backbone.Collection.extend({
     this.idx = 1;
   },
 
+  getSeparator() {
+    return this.property.get('layerSeparator');
+  },
+
   /**
    * Get layers from a value string (for not detached properties),
    * example of input:
@@ -35,7 +39,7 @@ module.exports = Backbone.Collection.extend({
       var cleaned = match.replace(/,\s*/g, ',');
       value = value.replace(match, cleaned);
     });
-    const layerValues = value ? value.split(', ') : [];
+    const layerValues = value ? value.split(this.getSeparator()) : [];
     layerValues.forEach(layerValue => {
       layers.push({ properties: this.properties.parseValue(layerValue) });
     });
@@ -101,7 +105,7 @@ module.exports = Backbone.Collection.extend({
   getFullValue() {
     let result = [];
     this.each(layer => result.push(layer.getFullValue()));
-    return result.join(', ');
+    return result.join(this.getSeparator());
   },
 
   getPropertyValues(property) {

src/style_manager/model/Property.js

@@ -90,7 +90,7 @@ const Property = require('backbone').Model.extend(
      * // -> { value: 10, unit: 'deg', functionName: 'translateX' }
      *
      */
-    parseValue(value) {
+    parseValue(value, opts = {}) {
       const result = { value };
       const imp = '!important';
 
@@ -99,7 +99,7 @@ const Property = require('backbone').Model.extend(
         result.important = 1;
       }
 
-      if (!this.get('functionName')) {
+      if (!this.get('functionName') && !opts.complete) {
         return result;
       }
 
@@ -107,6 +107,7 @@ const Property = require('backbone').Model.extend(
       let valueStr = `${result.value}`;
       let start = valueStr.indexOf('(') + 1;
       let end = valueStr.lastIndexOf(')');
+      result.functionName = valueStr.substring(0, start - 1);
       args.push(start);
 
       // Will try even if the last closing parentheses is not found
@@ -115,6 +116,13 @@ const Property = require('backbone').Model.extend(
       }
 
       result.value = String.prototype.substring.apply(valueStr, args);
+
+      if (opts.numeric) {
+        const num = parseFloat(result.value);
+        result.unit = result.value.replace(num, '');
+        result.value = num;
+      }
+
       return result;
     },
 

src/style_manager/model/PropertyStack.js

@@ -7,6 +7,9 @@ module.exports = Property.extend({
     // Array of layers (which contain properties)
     layers: [],
 
+    // The separator used to join layer values
+    layerSeparator: ', ',
+
     // Layer preview
     preview: 0
   },
@@ -15,6 +18,7 @@ module.exports = Property.extend({
     Property.callParentInit(Property, this, props, opts);
     const layers = this.get('layers');
     const layersColl = new Layers(layers);
+    layersColl.property = this;
     layersColl.properties = this.get('properties');
     this.set('layers', layersColl);
     Property.callInit(this, props, opts);
@@ -30,5 +34,24 @@ module.exports = Property.extend({
 
   getFullValue() {
     return this.get('detached') ? '' : this.get('layers').getFullValue();
+  },
+
+  /**
+   * This method allows to customize layers returned from the target
+   * @param  {Object} target
+   * @return {Array} Should return an array of layers
+   * @example
+   * // return example
+   * [
+   *  {
+   *    properties: [
+   *      { property: 'width', ... }
+   *      { property: 'height', ... }
+   *    ]
+   *  }
+   * ]
+   */
+  getLayersFromTarget(target) {
+    return;
   }
 });

src/style_manager/view/PropertyStackView.js

@@ -117,10 +117,10 @@ module.exports = PropertyCompositeView.extend({
     const model = this.model;
     const layers = this.getLayers();
     const detached = model.get('detached');
+    const target = this.getTarget();
 
     // 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 {
@@ -129,8 +129,9 @@ module.exports = PropertyCompositeView.extend({
       layersObj = layers.getLayersFromValue(value);
     }
 
+    const toAdd = model.getLayersFromTarget(target) || layersObj;
     layers.reset();
-    layers.add(layersObj);
+    layers.add(toAdd);
     model.set({ stackIndex: null }, { silent: true });
   },