Clear Property Stack view

src/style_manager/model/Layers.js

@@ -57,9 +57,10 @@ module.exports = Backbone.Collection.extend({
    */
   getLayersFromStyle(styleObj) {
     const layers = [];
-    const propNames = this.properties.pluck('property');
+    const properties = this.properties;
+    const propNames = properties.pluck('property');
 
-    this.properties.each(propModel => {
+    properties.each(propModel => {
       const style = styleObj[propModel.get('property')];
       const values = style ? style.split(', ') : [];
       values.forEach((value, i) => {
@@ -77,10 +78,10 @@ module.exports = Backbone.Collection.extend({
       });
     });
 
-    // Now whit all layers are in, will check missing properties
+    // Now whit all layers in, will check missing properties
     layers.forEach(layer => {
       const layerProprs = layer.properties.map(prop => prop.property);
-      this.properties.each(propModel => {
+      properties.each(propModel => {
         const propertyName = propModel.get('property');
 
         if (layerProprs.indexOf(propertyName) < 0) {

src/style_manager/view/PropertyStackView.js

@@ -60,47 +60,12 @@ module.exports = PropertyCompositeView.extend({
     this.getLayers().active(model.get('stackIndex'));
   },
 
-  /**
-   * Extract string from the composite value of the target
-   * @param {integer} index Property index
-   * @param {View} propView Property view
-   * @return string
-   * @private
-   * */
-  valueOnIndex(index, propView) {
-    let result;
-    const model = this.model;
-    const propModel = propView && propView.model;
-    const layerIndex = model.get('stackIndex');
-
-    // If detached the value in this case is stacked, eg. substack-prop: 1px, 2px, 3px...
-    if (model.get('detached')) {
-      var targetValue = propView.getTargetValue({ignoreCustomValue: 1});
-      var valist = (targetValue + '').split(',');
-      result = valist[layerIndex];
-      result = result ? result.trim() : propModel.getDefaultValue();
-      result = propModel.parseValue(result);
-    } else {
-      var aStack = this.getLayerValues();
-      var strVar = aStack[layerIndex];
-      if(!strVar)
-        return;
-      var a    = strVar.split(' ');
-      if(a.length && a[index]){
-        result = a[index];
-      }
-    }
-
-    return result;
-  },
-
   addLayer() {
     const model = this.model;
     const layers = this.getLayers();
-    const layer = layers.add({
-      name: 'New',
-      properties: model.get('properties').deepClone(),
-    });
+    const properties = model.get('properties').deepClone();
+    properties.each(property => property.set('value', ''));
+    const layer = layers.add({properties});
 
     // In detached mode inputValueChanged will add new 'layer value'
     // to all subprops
@@ -120,14 +85,6 @@ module.exports = PropertyCompositeView.extend({
     if (!model.get('detached')) {
       model.set('value', this.getLayerValues());
     } else {
-      /*
-      const layer = model.get('layers').at(0);
-      layer && layer.get('properties').each(prop => prop.trigger('change:value'));
-      !layer && this.model.get('properties').each(prop => {
-        console.log('Prop', prop);
-        prop.trigger('change:value')
-      })
-      */
       model.get('properties').each(prop => prop.trigger('change:value'))
     }
   },
@@ -148,10 +105,37 @@ module.exports = PropertyCompositeView.extend({
   },
 
   /**
-   * Render layers
-   * @return self
+   * Refresh layers
    * */
-  renderLayers() {
+  refreshLayers() {
+    let layersObj = [];
+    const model = this.model;
+    const layers = this.getLayers();
+    const detached = model.get('detached');
+
+    // 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 {
+      let value = this.getTargetValue();
+      value = value == model.getDefaultValue() ? '' : value;
+      layersObj = layers.getLayersFromValue(value);
+    }
+
+    layers.reset();
+    layers.add(layersObj);
+
+    // Avoid updating with detached as it will cause issues on next change
+    if (!detached) {
+      this.inputValueChanged();
+    }
+
+    model.set({stackIndex: null}, {silent: true});
+  },
+
+  onRender(...args) {
     const self = this;
     const model = this.model;
     const fieldEl = this.el.querySelector('[data-layers-wrapper]');
@@ -174,12 +158,6 @@ module.exports = PropertyCompositeView.extend({
           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);
-      }
     };
     const layers = new LayersView({
       collection: this.getLayers(),
@@ -203,40 +181,4 @@ module.exports = PropertyCompositeView.extend({
     fieldEl.appendChild(layers);
   },
 
-  /**
-   * Refresh layers
-   * */
-  refreshLayers() {
-    let layersObj = [];
-    const model = this.model;
-    const layers = this.getLayers();
-    const detached = model.get('detached');
-
-    // 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 {
-      let value = this.getTargetValue();
-      value = value == model.getDefaultValue() ? '' : value;
-      layersObj = layers.getLayersFromValue(value);
-    }
-
-    layers.reset();
-    layers.add(layersObj);
-
-    // Avoid updating with detached as it will cause issues on next change
-    if (!detached) {
-      this.inputValueChanged();
-    }
-
-    model.set({stackIndex: null}, {silent: true});
-  },
-
-  onRender(...args) {
-    //PropertyCompositeView.prototype.onRender.apply(this, args);
-    this.renderLayers();
-  },
-
 });