Updates on Layers

src/style_manager/model/Layer.js

@@ -1,5 +1,3 @@
-var Backbone = require('backbone');
-
 module.exports = Backbone.Model.extend({
 
   defaults: {
@@ -8,10 +6,15 @@ module.exports = Backbone.Model.extend({
     values: {},
     active: true,
     preview: false,
+    properties: [],
   },
 
   initialize() {
+    const Properties = require('./Properties');
+    const properties = this.get('properties');
     var value = this.get('value');
+    this.set('properties', properties instanceof Properties ?
+      properties : new Properties(properties));
 
     // If there is no value I'll try to get it from values
     // I need value setted to make preview working
@@ -27,4 +30,10 @@ module.exports = Backbone.Model.extend({
     }
   },
 
+  getFullValue() {
+    let result = [];
+    this.get('properties').each(prop => result.push(prop.getFullValue()));
+    return result.join(' ');
+  }
+
 });

src/style_manager/model/Layers.js

@@ -18,6 +18,12 @@ module.exports = Backbone.Collection.extend({
 
   onReset() {
     this.idx = 1;
+  },
+
+  getFullValue() {
+    let result = [];
+    this.each(layer => result.push(layer.getFullValue()));
+    return result.join(', ');
   }
 
 });

src/style_manager/model/Properties.js

@@ -84,5 +84,11 @@ module.exports = require('backbone').Collection.extend(TypeableCollection).exten
         return value;
       }
     }
-  ]
+  ],
+
+  getFullValue() {
+    let result = '';
+    this.each(model => result += `${model.getFullValue()} `);
+    return result.trim();
+  }
 });

src/style_manager/model/PropertyComposite.js

@@ -48,8 +48,7 @@ module.exports = Property.extend({
     }
 
     let result = '';
-    this.get('properties').each(prop => result += `${prop.getFullValue()} `);
-    return result.trim();
+    return this.get('properties').getFullValue();
   },
 
 });

src/style_manager/view/LayerView.js

@@ -1,35 +1,40 @@
-var Backbone = require('backbone');
-
 module.exports = Backbone.View.extend({
 
   events:{
-    'click': 'updateIndex',
+    click: 'updateIndex',
+    'click [data-close-layer]': 'remove',
+    'mousedown [data-move-layer]': 'initSorter',
   },
 
-  template: _.template(`
-  <div id="<%= pfx %>move" data-move-layer>
-    <i class="fa fa-arrows"></i>
-  </div>
-  <div id="<%= pfx %>label"><%= label %></div>
-  <div id="<%= pfx %>preview-box">
-  	<div id="<%= pfx %>preview"></div>
-  </div>
-  <div id="<%= pfx %>close-layer" class="<%= pfx %>btn-close">&Cross;</div>
-  <div id="<%= pfx %>inputs"></div>
-  <div style="clear:both"></div>`),
+  template(model) {
+    const pfx = this.pfx;
+    const label = `Layer ${model.get('index')}`;
+
+    return `
+      <div id="${pfx}move" data-move-layer>
+        <i class="fa fa-arrows"></i>
+      </div>
+      <div id="${pfx}label">${label}</div>
+      <div id="${pfx}preview-box">
+      	<div id="${pfx}preview"></div>
+      </div>
+      <div id="${pfx}close-layer" class="${pfx}btn-close" data-close-layer>
+        &Cross;
+      </div>
+      <div id="${pfx}inputs" data-properties></div>
+      <div style="clear:both"></div>
+    `
+  },
 
   initialize(o) {
     let model = this.model;
     this.stackModel = o.stackModel || {};
     this.config = o.config || {};
     this.pfx = this.config.stylePrefix || '';
-    this.className = this.pfx + 'layer';
     this.sorter = o.sorter || null;
     this.listenTo(model, 'destroy remove', this.remove);
     this.listenTo(model, 'change:value', this.valueChanged);
     this.listenTo(model, 'change:props', this.showProps);
-    this.events['click #' + this.pfx + 'close-layer'] = 'remove';
-    this.events['mousedown [data-move-layer]'] = 'initSorter';
 
     if (!model.get('preview')) {
       this.$el.addClass(this.pfx + 'no-preview');
@@ -39,7 +44,6 @@ module.exports = Backbone.View.extend({
     model.view = this;
     model.set({droppable: 0, draggable: 1});
     this.$el.data('model', model);
-    this.delegateEvents();
   },
 
   /**
@@ -178,12 +182,19 @@ module.exports = Backbone.View.extend({
   },
 
   render() {
-    this.$el.html( this.template({
-      label: 'Layer ' + this.model.get('index'),
-      pfx: this.pfx,
-    }));
-    this.$el.attr('class', this.className);
-    this.valueChanged();
+    const PropertiesView = require('./PropertiesView');
+    const className = `${this.pfx}layer`;
+    const model = this.model;
+    const el = this.el;
+    const properties = new PropertiesView({
+      collection: model.get('properties'),
+      config: this.config
+    }).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.valueChanged();
     return this;
   },
 

src/style_manager/view/LayersView.js

@@ -55,13 +55,12 @@ module.exports = Backbone.View.extend({
    * */
   addToCollection(model, fragmentEl, index) {
     var fragment = fragmentEl || null;
-    var viewObject = LayerView;
 
     if(typeof this.preview !== 'undefined'){
       model.set('preview', this.preview);
     }
 
-    var view = new viewObject({
+    var view = new LayerView({
         model,
         stackModel: this.stackModel,
         config: this.config,

src/style_manager/view/PropertyStackView.js

@@ -9,8 +9,7 @@ module.exports = PropertyCompositeView.extend({
     const ppfx = this.ppfx;
     return `
       <div class="${pfx}field ${pfx}stack">
-        <button type="button" id="${pfx}add">+</button>
-        <span id="${pfx}input-holder"></span>
+        <button type="button" id="${pfx}add" data-add-layer>+</button>
       </div>
     `;
   },
@@ -19,7 +18,7 @@ module.exports = PropertyCompositeView.extend({
     const model = this.model;
     const pfx = this.pfx;
     model.set('stackIndex', null);
-    this.events[`click #${pfx}add`] = 'addLayer';
+    this.events[`click [data-add-layer]`] = 'addLayer';
     this.listenTo(model, 'change:stackIndex', this.indexChanged);
     this.listenTo(model, 'updateValue', this.inputValueChanged);
     this.delegateEvents();
@@ -28,7 +27,7 @@ module.exports = PropertyCompositeView.extend({
   /**
    * Fired when the target is updated.
    * With detached mode the component will be always empty as its value
-   * so we gonna check all props and fine if there is some differences.
+   * so we gonna check all props and find if it has any difference
    * */
   targetUpdated(...args) {
     if (!this.model.get('detached')) {
@@ -57,18 +56,14 @@ module.exports = PropertyCompositeView.extend({
    * @return {Object}
    * */
   indexChanged(e) {
-    var model = this.model;
+    const model = this.model;
+    console.log('New layer index', model.get('stackIndex'));
+    /*
+
     var layer  = this.getLayers().at(model.get('stackIndex'));
     layer.set('props', this.$props);
     model.get('properties').each(prop => prop.trigger('targetUpdated'));
-  },
-
-  /**
-   * Get array of values from layers
-   * @return Array
-   * */
-  getStackValues() {
-    return this.getLayers().pluck('value');
+    */
   },
 
   /** @inheritDoc */
@@ -123,7 +118,7 @@ module.exports = PropertyCompositeView.extend({
       result = result ? result.trim() : propModel.getDefaultValue();
       result = propModel.parseValue(result);
     } else {
-      var aStack = this.getStackValues();
+      var aStack = this.getLayerValues();
       var strVar = aStack[layerIndex];
       if(!strVar)
         return;
@@ -163,31 +158,36 @@ module.exports = PropertyCompositeView.extend({
     layerModel && layerModel.set({values, value});
   },
 
-  /**
-   * Add new layer
-   * */
-  addLayer() {
-    if (this.getTarget()) {
-      const layers = this.getLayers();
-      const layer = layers.add({name: 'New'});
-      const index = layers.indexOf(layer);
-      const model = this.model;
-      layer.set('value', model.getDefaultValue(1));
-
-      // In detached mode inputValueChanged will add new 'layer value'
-      // to all subprops
-      this.inputValueChanged();
 
-      // This will set subprops with a new default values
-      model.set('stackIndex', index);
-    }
+  addLayer(e) {
+    const model = this.model;
+    const layers = this.getLayers();
+    const layer = layers.add({
+      name: 'New',
+      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'
+    // to all subprops
+    this.inputValueChanged();
+
+    // This will set subprops with a new default values
+    model.set('stackIndex', index);
   },
 
+
   inputValueChanged() {
-    var model = this.model;
+    const model = this.model;
+    this.elementUpdated();
 
+    // If not detached I'll just put all the values from layers to property
+    // eg.
+    // background: layer1Value, layer2Value, layer3Value, ...
     if (!model.get('detached')) {
-      model.set('value', this.createValue());
+      model.set('value', this.getLayerValues());
     } else {
       model.get('properties').each(prop => {
         prop.trigger('change:value');
@@ -199,8 +199,8 @@ module.exports = PropertyCompositeView.extend({
    * Create value by layers
    * @return string
    * */
-  createValue() {
-    return this.getStackValues().join(', ');
+  getLayerValues() {
+    return this.getLayers().getFullValue();
   },
 
   /**
@@ -208,19 +208,14 @@ module.exports = PropertyCompositeView.extend({
    * @return self
    * */
   renderLayers() {
-    if (!this.fieldEl) {
-      this.fieldEl = this.el.querySelector(`.${this.pfx}field`);
-    }
-
-    if(!this.$layers)
-      this.$layers = new LayersView({
-        collection: this.getLayers(),
-        stackModel: this.model,
-        preview: this.model.get('preview'),
-        config: this.config
-      });
-
-    this.fieldEl.appendChild(this.$layers.render().el);
+    const fieldEl = this.el.querySelector(`.${this.pfx}field`);
+    const layers = new LayersView({
+      collection: this.getLayers(),
+      stackModel: this.model,
+      preview: this.model.get('preview'),
+      config: this.config
+    }).render().el;
+    fieldEl.appendChild(layers);
     this.$props.hide();
   },
 
@@ -265,14 +260,16 @@ module.exports = PropertyCompositeView.extend({
     var n = [];
     var a = [];
     var fieldName = 'value';
-    var detached = this.model.get('detached');
+    const model = this.model;
+    const detached = model.get('detached');
 
+    // With detached layers values will be assigned to their properties
     if (detached) {
       fieldName = 'values';
       a = this.getLayersFromTarget();
     } else {
       var v = this.getTargetValue();
-      var vDef = this.model.getDefaultValue();
+      var vDef = model.getDefaultValue();
       v = v == vDef ? '' : v;
       if (v) {
         // Remove spaces inside functions:
@@ -303,12 +300,12 @@ module.exports = PropertyCompositeView.extend({
       this.inputValueChanged();
     }
 
-    this.model.set({stackIndex: null}, {silent: true});
+    model.set({stackIndex: null}, {silent: true});
   },
 
   onRender(...args) {
     PropertyCompositeView.prototype.onRender.apply(this, args);
-    this.refreshLayers();
+    //this.refreshLayers();
     this.renderLayers();
   },