Update stack property in style manager

src/style_manager/model/Properties.js

@@ -86,6 +86,16 @@ module.exports = require('backbone').Collection.extend(TypeableCollection).exten
     }
   ],
 
+  deepClone() {
+    const collection = this.clone();
+    collection.reset(collection.map(model => {
+      const cloned = model.clone();
+      cloned.typeView = model.typeView;
+      return cloned;
+    }));
+    return collection;
+  },
+
   getFullValue() {
     let result = '';
     this.each(model => result += `${model.getFullValue()} `);

src/style_manager/model/PropertyStack.js

@@ -18,13 +18,7 @@ module.exports = Property.extend({
   },
 
   getFullValue() {
-    if (this.get('detached')) {
+    return this.get('detached') ? '' : this.get('layers').getFullValue();
-      return '';
-    }
-
-    const layers = this.get('layers');
-    let val = layers.length ? layers.pluck('value').join(', ') : '';
-    return val.trim();
   },
 
 });

src/style_manager/view/LayerView.js

@@ -32,6 +32,7 @@ module.exports = Backbone.View.extend({
     this.config = o.config || {};
     this.pfx = this.config.stylePrefix || '';
     this.sorter = o.sorter || null;
+    this.propsConfig = o.propsConfig || {};
     this.listenTo(model, 'destroy remove', this.remove);
     this.listenTo(model, 'change:value', this.valueChanged);
     this.listenTo(model, 'change:active', this.updateVisibility);
@@ -206,12 +207,17 @@ module.exports = Backbone.View.extend({
 
   render() {
     const PropertiesView = require('./PropertiesView');
+    const propsConfig = this.propsConfig;
     const className = `${this.pfx}layer`;
     const model = this.model;
     const el = this.el;
+    console.log(propsConfig);
     const properties = new PropertiesView({
       collection: model.get('properties'),
-      config: this.config
+      config: this.config,
+      customValue: propsConfig.customValue,
+      propTarget: propsConfig.propTarget,
+      onChange: propsConfig.onChange,
     }).render().el;
     el.innerHTML = this.template(model);
     el.className = className;

src/style_manager/view/LayersView.js

@@ -9,6 +9,7 @@ module.exports = Backbone.View.extend({
     this.preview = o.preview;
     this.pfx = this.config.stylePrefix || '';
     this.ppfx = this.config.pStylePrefix || '';
+    this.propsConfig = o.propsConfig;
     let pfx = this.pfx;
     let ppfx = this.ppfx;
     let collection = this.collection;
@@ -55,6 +56,10 @@ module.exports = Backbone.View.extend({
    * */
   addToCollection(model, fragmentEl, index) {
     var fragment = fragmentEl || null;
+    const stackModel = this.stackModel;
+    const config = this.config;
+    const sorter = this.sorter;
+    const propsConfig = this.propsConfig;
 
     if(typeof this.preview !== 'undefined'){
       model.set('preview', this.preview);
@@ -62,15 +67,16 @@ module.exports = Backbone.View.extend({
 
     var view = new LayerView({
         model,
-        stackModel: this.stackModel,
+        config,
-        config: this.config,
+        sorter,
-        sorter: this.sorter
+        stackModel,
+        propsConfig
     });
-    var rendered  = view.render().el;
+    var rendered = view.render().el;
 
-    if(fragment){
+    if (fragment) {
-      fragment.appendChild( rendered );
+      fragment.appendChild(rendered);
-    }else{
+    } else {
       if(typeof index != 'undefined'){
         var method  = 'before';
         // If the added model is the last of collection

src/style_manager/view/PropertyStackView.js

@@ -1,6 +1,5 @@
-var PropertyCompositeView = require('./PropertyCompositeView');
+const PropertyCompositeView = require('./PropertyCompositeView');
-var Layers = require('./../model/Layers');
+const LayersView = require('./LayersView');
-var LayersView = require('./LayersView');
 
 module.exports = PropertyCompositeView.extend({
 
@@ -58,14 +57,9 @@ module.exports = PropertyCompositeView.extend({
   indexChanged(e) {
     const model = this.model;
     this.getLayers().active(model.get('stackIndex'));
-    /*
-    var layer  = this.getLayers().at(model.get('stackIndex'));
-    layer.set('props', this.$props);
-    model.get('properties').each(prop => prop.trigger('targetUpdated'));
-    */
   },
 
-  /** @inheritDoc */
+  /** @inheritDoc *
   getPropsConfig(opts) {
     const model = this.model;
     const detached = model.get('detached');
@@ -87,7 +81,7 @@ module.exports = PropertyCompositeView.extend({
             propVal += (propVal ? ',' : '') + val;
           }
         });
-        */
+        **
         view.updateTargetStyle(propVal, null, opt);
       } else {
         model.set('value', model.getFullValue(), opt);
@@ -96,6 +90,7 @@ module.exports = PropertyCompositeView.extend({
 
     return result;
   },
+  */
 
   /**
    * Extract string from the composite value of the target
@@ -134,7 +129,7 @@ module.exports = PropertyCompositeView.extend({
   /**
    * Build composite value
    * @private
-   * */
+   * *
   build(...args) {
     let value = '';
     let values = {};
@@ -157,17 +152,15 @@ module.exports = PropertyCompositeView.extend({
     const layerModel = this.getLayers().at(stackIndex);
     layerModel && layerModel.set({values, value});
   },
+  */
 
-
+  addLayer() {
-  addLayer(e) {
     const model = this.model;
     const layers = this.getLayers();
     const layer = layers.add({
       name: 'New',
-      properties: model.get('properties')
+      properties: model.get('properties').deepClone(),
     });
-    console.log('Props ', model.get('properties'), 'layer props', layer.get('properties'));
-    //layer.set('value', model.getDefaultValue(1));
 
     // In detached mode inputValueChanged will add new 'layer value'
     // to all subprops
@@ -207,16 +200,38 @@ module.exports = PropertyCompositeView.extend({
    * @return self
    * */
   renderLayers() {
+    const self = this;
+    const model = this.model;
     const fieldEl = this.el.querySelector(`.${this.pfx}field`);
     const layers = new LayersView({
-      // TODO Here I should put the onChange method
       collection: this.getLayers(),
-      stackModel: this.model,
+      stackModel: model,
-      preview: this.model.get('preview'),
+      preview: model.get('preview'),
-      config: this.config
+      config: this.config,
+      propsConfig: {
+        propTarget: this.propTarget,
+
+        // Things to do when a single sub-property is changed
+        onChange(el, view, opt) {
+          const subModel = view.model;
+
+          if (model.get('detached')) {
+            const subProp = subModel.get('property');
+            const values = self.getLayers().getPropertyValues(subProp);
+            view.updateTargetStyle(propVal, null, opt);
+          } else {
+            model.set('value', model.getFullValue(), opt);
+          }
+        },
+
+        // How to get a value on a single sub-property.
+        // eg. When the target is updated
+        customValue(property, mIndex) {
+          return self.valueOnIndex(mIndex, property);
+        }
+      }
     }).render().el;
     fieldEl.appendChild(layers);
-    this.$props.hide();
   },
 
   /**
@@ -304,8 +319,7 @@ module.exports = PropertyCompositeView.extend({
   },
 
   onRender(...args) {
-    PropertyCompositeView.prototype.onRender.apply(this, args);
+    //PropertyCompositeView.prototype.onRender.apply(this, args);
-    //this.refreshLayers();
     this.renderLayers();
   },