Use custom toStyle in Stack

src/style_manager/model/PropertyStack.js

@@ -278,22 +278,30 @@ export default Property.extend({
    * @returns {Object} Style object
    */
   getStyleFromLayer(layer, opts = {}) {
-    const sep = this.get('separator');
+    const join = this.__getJoin();
+    const joinLayers = this.__getJoinLayers();
+    const toStyle = this.get('toStyle');
     const values = layer.getValues();
-    const result = this.getProperties().map(prop => {
-      const name = prop.getName();
-      const val = values[name];
-      const value = isUndefined(val) ? prop.getDefaultValue() : val;
-      return { name, value };
-    });
-    const style = this.get('detached')
-      ? result.reduce((acc, item) => {
-          acc[item.name] = item.value;
-          return acc;
-        }, {})
-      : {
-          [this.getName()]: result.map(r => r.value).join(sep),
-        };
+    let style;
+
+    if (toStyle) {
+      style = toStyle(values, { join, joinLayers });
+    } else {
+      const result = this.getProperties().map(prop => {
+        const name = prop.getName();
+        const val = values[name];
+        const value = isUndefined(val) ? prop.getDefaultValue() : val;
+        return { name, value };
+      });
+      style = this.get('detached')
+        ? result.reduce((acc, item) => {
+            acc[item.name] = item.value;
+            return acc;
+          }, {})
+        : {
+            [this.getName()]: result.map(r => r.value).join(join),
+          };
+    }
 
     return opts.camelCase
       ? Object.keys(style).reduce((res, key) => {

test/specs/style_manager/model/Properties.js

@@ -197,6 +197,20 @@ describe('StyleManager properties logic', () => {
       });
     });
 
+    test('Custom toStyle', () => {
+      compTypeProp.set('toStyle', values => {
+        return {
+          [propTest]: `rgba(${values[propATest]}, ${values[propBTest]}, ${values[propCTest]})`,
+        };
+      });
+      expect(compTypeProp.getStyleFromLayers()).toEqual({
+        [propTest]: 'rgba(valueA-1, valueB-1, valueC-1-ext), rgba(valueA-2, valueB-2, valueC-2-ext)',
+        [propATest]: '',
+        [propBTest]: '',
+        [propCTest]: '',
+      });
+    });
+
     test('Layers has the right values', () => {
       expect(compTypeProp.getLayer(0).getValues()).toEqual({
         [propATest]: 'valueA-1',