Update Layer/s models

src/style_manager/model/Layer.js

@@ -30,6 +30,16 @@ module.exports = Backbone.Model.extend({
     }
   },
 
+  getPropertyValue(property) {
+    let result = '';
+    this.get('properties').each(prop => {
+      if (prop.get('property') == property) {
+        result = prop.getFullValue();
+      }
+    });
+    return result;
+  },
+
   getFullValue() {
     let result = [];
     this.get('properties').each(prop => result.push(prop.getFullValue()));

src/style_manager/model/Layers.js

@@ -1,5 +1,4 @@
-var Backbone = require('backbone');
-var Layer = require('./Layer');
+const Layer = require('./Layer');
 
 module.exports = Backbone.Collection.extend({
 
@@ -20,10 +19,25 @@ module.exports = Backbone.Collection.extend({
     this.idx = 1;
   },
 
+  active(index) {
+    this.each(layer => layer.set('active', 0));
+    const layer = this.at(index);
+    layer && layer.set('active', 1);
+  },
+
   getFullValue() {
     let result = [];
     this.each(layer => result.push(layer.getFullValue()));
     return result.join(', ');
+  },
+
+  getPropertyValues(property) {
+    const result = [];
+    this.each(layer => {
+      const value = layer.getPropertyValue(property);
+      value && result.push(value);
+    });
+    return result.join(',');
   }
 
 });

src/style_manager/view/LayerView.js

@@ -1,7 +1,7 @@
 module.exports = Backbone.View.extend({
 
   events:{
-    click: 'updateIndex',
+    click: 'active',
     'click [data-close-layer]': 'remove',
     'mousedown [data-move-layer]': 'initSorter',
   },
@@ -34,6 +34,7 @@ module.exports = Backbone.View.extend({
     this.sorter = o.sorter || null;
     this.listenTo(model, 'destroy remove', this.remove);
     this.listenTo(model, 'change:value', this.valueChanged);
+    this.listenTo(model, 'change:active', this.updateVisibility);
     this.listenTo(model, 'change:props', this.showProps);
 
     if (!model.get('preview')) {
@@ -155,7 +156,7 @@ module.exports = Backbone.View.extend({
    * @param Event
    *
    * @return void
-   * */
+   * *
   updateIndex(e) {
     var i = this.getIndex();
     this.stackModel.set('stackIndex', i);
@@ -165,6 +166,7 @@ module.exports = Backbone.View.extend({
 
     this.$el.addClass(this.pfx + 'active');
   },
+  */
 
   /**
    * Fetch model index
@@ -181,6 +183,27 @@ module.exports = Backbone.View.extend({
     return index;
   },
 
+  getPropertiesWrapper() {
+    if (!this.propsWrapEl) {
+      this.propsWrapEl = this.el.querySelector('[data-properties]');
+    }
+    return this.propsWrapEl;
+  },
+
+  active() {
+    const model = this.model;
+    const collection = model.collection;
+    collection.active(collection.indexOf(model));
+  },
+
+  updateVisibility() {
+    const pfx = this.pfx;
+    const wrapEl = this.getPropertiesWrapper();
+    const active = this.model.get('active');
+    wrapEl.style.display = active ? '' : 'none';
+    this.$el[active ? 'addClass' : 'removeClass'](`${pfx}active`);
+  },
+
   render() {
     const PropertiesView = require('./PropertiesView');
     const className = `${this.pfx}layer`;
@@ -192,8 +215,8 @@ module.exports = Backbone.View.extend({
     }).render().el;
     el.innerHTML = this.template(model);
     el.className = className;
-    console.log('Append to ', el.querySelector('[data-properties]'), 'props', properties);
-    el.querySelector('[data-properties]').appendChild(properties);
+    this.getPropertiesWrapper().appendChild(properties);
+    this.updateVisibility();
     //this.valueChanged();
     return this;
   },

src/style_manager/view/PropertyStackView.js

@@ -57,9 +57,8 @@ module.exports = PropertyCompositeView.extend({
    * */
   indexChanged(e) {
     const model = this.model;
-    console.log('New layer index', model.get('stackIndex'));
+    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'));
@@ -80,14 +79,15 @@ module.exports = PropertyCompositeView.extend({
       if (detached) {
         var propVal = '';
         var index = subModel.collection.indexOf(subModel);
-
+        /*
+        this.getLayers().getPropertyValues(subProperty)
         this.getLayers().each(layer => {
           var val = layer.get('values')[subProperty];
           if (val) {
             propVal += (propVal ? ',' : '') + val;
           }
         });
-
+        */
         view.updateTargetStyle(propVal, null, opt);
       } else {
         model.set('value', model.getFullValue(), opt);
@@ -167,7 +167,6 @@ module.exports = PropertyCompositeView.extend({
       properties: model.get('properties')
     });
     console.log('Props ', model.get('properties'), 'layer props', layer.get('properties'));
-    const index = layers.indexOf(layer);
     //layer.set('value', model.getDefaultValue(1));
 
     // In detached mode inputValueChanged will add new 'layer value'
@@ -175,7 +174,7 @@ module.exports = PropertyCompositeView.extend({
     this.inputValueChanged();
 
     // This will set subprops with a new default values
-    model.set('stackIndex', index);
+    model.set('stackIndex', layers.indexOf(layer));
   },
 
 
@@ -210,6 +209,7 @@ module.exports = PropertyCompositeView.extend({
   renderLayers() {
     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,
       preview: this.model.get('preview'),

src/style_manager/view/PropertyView.js

@@ -1,5 +1,3 @@
-var Backbone = require('backbone');
-
 module.exports = Backbone.View.extend({
 
   template(model) {