Refactor composite property types

src/style_manager/model/PropertyComposite.js

@@ -18,4 +18,14 @@ module.exports = Property.extend({
     properties: [],
   }),
 
+  getFullValue() {
+    if (this.get('detached')) {
+      return '';
+    }
+
+    let result = '';
+    this.get('properties').each(prop => result += `${prop.getFullValue()} `);
+    return result.trim();
+  },
+
 });

src/style_manager/model/PropertyStack.js

@@ -9,4 +9,14 @@ module.exports = Property.extend({
     preview: 0,
   }),
 
+  getFullValue() {
+    if (this.get('detached')) {
+      return '';
+    }
+
+    const layers = this.get('layers');
+    let val = layers.length ? layers.pluck('value').join(', ') : '';
+    return val;
+  },
+
 });

src/style_manager/view/PropertyCompositeView.js

@@ -11,7 +11,6 @@ module.exports = PropertyView.extend({
 
   initialize(o) {
     PropertyView.prototype.initialize.apply(this, arguments);
-    _.bindAll(this, 'build');
     this.config = o.config || {};
     this.className = this.className + ' '+ this.pfx +'composite';
   },
@@ -65,6 +64,7 @@ module.exports = PropertyView.extend({
    */
   getPropsConfig(opts) {
     var that = this;
+    const model = this.model;
 
     var result = {
       config: this.config,
@@ -73,8 +73,8 @@ module.exports = PropertyView.extend({
       propTarget: this.propTarget,
       // On any change made to children I need to update composite value
       onChange(el, view, opts) {
-        var result = that.build();
-        that.model.set('value', result, opts);
+        var result = model.getFullValue();
+        model.set('value', result, opts);
       },
       // Each child property will receive a full composite string, eg. '0px 0px 10px 0px'
       // I need to extract from that string the corresponding one to that property.
@@ -84,8 +84,9 @@ module.exports = PropertyView.extend({
     };
 
     // If detached let follow its standard flow
-    if(this.model.get('detached'))
+    if (model.get('detached')) {
       delete result.onChange;
+    }
 
     return result;
   },
@@ -122,19 +123,4 @@ module.exports = PropertyView.extend({
     return result;
   },
 
-  /**
-   * Build composite value
-   * @param {Object} selectedEl Selected element
-   * @param {Object} propertyView Property view
-   * @param {Object} opts Options
-   * @return {string}
-   * */
-  build(selectedEl, propertyView, opts) {
-    let result = '';
-    this.model.get('properties').each(prop =>
-      result += `${prop.getFullValue()} `
-    );
-    return result.replace(/ +$/,'');
-  },
-
 });

src/style_manager/view/PropertyStackView.js

@@ -79,7 +79,7 @@ module.exports = PropertyCompositeView.extend({
       var model = view.model;
       var result = that.build();
 
-      if(that.model.get('detached')){
+      if (that.model.get('detached')) {
         var propVal = '';
         var index = model.collection.indexOf(model);
 
@@ -90,8 +90,9 @@ module.exports = PropertyCompositeView.extend({
         });
 
         view.updateTargetStyle(propVal, null, opt);
-      }else
+      } else {
         that.model.set('value', result, opt);
+      }
     };
 
     return result;
@@ -137,7 +138,8 @@ module.exports = PropertyCompositeView.extend({
     var stackIndex = this.model.get('stackIndex');
     if(stackIndex === null)
       return;
-    var result = PropertyCompositeView.prototype.build.apply(this, args);
+    let result = '';
+    this.model.get('properties').each(prop => result += `${prop.getFullValue()} `);
     var model = this.getLayers().at(stackIndex);
     if(!model)
       return;
@@ -151,7 +153,8 @@ module.exports = PropertyCompositeView.extend({
     model.set('values', valObj);
 
     model.set('value', result);
-    return this.createValue();
+    //return this.createValue();//this.model.getFullValue();
+    return this.model.getFullValue();
   },
 
   /**