Update Layers view

src/style_manager/view/LayerView.js

@@ -1,17 +1,19 @@
-import { keys } from 'underscore';
 import { View } from 'backbone';
+import { keys } from 'underscore';
 
-export default View.extend({
+export default class LayersView extends View {
-  events: {
+  events() {
-    click: 'select',
+    return {
-    'click [data-close-layer]': 'removeItem',
+      click: 'select',
-    'mousedown [data-move-layer]': 'initSorter',
+      'click [data-close-layer]': 'removeItem',
-    'touchstart [data-move-layer]': 'initSorter',
+      'mousedown [data-move-layer]': 'initSorter',
-  },
+      'touchstart [data-move-layer]': 'initSorter',
+    };
+  }
 
   template() {
-    const { pfx, ppfx } = this;
+    const { pfx, ppfx, em } = this;
-    const icons = this.em?.getConfig('icons');
+    const icons = em?.getConfig('icons');
     const iconClose = icons?.close || '';
     const iconMove = icons?.move || '';
 
@@ -30,71 +32,55 @@ export default View.extend({
       </div>
       <div id="${pfx}inputs" data-properties></div>
     `;
-  },
+  }
 
   initialize(o = {}) {
     const { model } = this;
-    this.stackModel = o.stackModel;
+    const config = o.config || {};
+    this.em = config.em;
+    this.config = config;
+    this.sorter = o.sorter;
+    this.pfx = config.stylePrefix || '';
+    this.ppfx = config.pStylePrefix || '';
     this.propertyView = o.propertyView;
-    this.config = o.config || {};
-    this.em = this.config.em;
-    this.pfx = this.config.stylePrefix || '';
-    this.ppfx = this.config.pStylePrefix || '';
-    this.sorter = o.sorter || null;
-    this.propsConfig = o.propsConfig || {};
     const pModel = this.propertyView.model;
     this.listenTo(model, 'destroy remove', this.remove);
-    this.listenTo(pModel, 'change:selectedLayer', this.updateVisibility);
     this.listenTo(model, 'change:values', this.updateLabel);
+    this.listenTo(pModel, 'change:selectedLayer', this.updateVisibility);
 
     // For the sorter
     model.view = this;
     model.set({ droppable: 0, draggable: 1 });
     this.$el.data('model', model);
-  },
+  }
 
   initSorter() {
-    if (this.sorter) this.sorter.startSort(this.el);
+    this.sorter?.startSort(this.el);
-  },
+  }
 
   removeItem(ev) {
     ev && ev.stopPropagation();
     this.model.remove();
-  },
+  }
+
+  select() {
+    this.model.select();
+  }
 
   getPropertiesWrapper() {
-    if (!this.propsWrapEl) {
+    if (!this.propsWrapEl) this.propsWrapEl = this.el.querySelector('[data-properties]');
-      this.propsWrapEl = this.el.querySelector('[data-properties]');
-    }
     return this.propsWrapEl;
-  },
+  }
 
   getPreviewEl() {
-    if (!this.previewEl) {
+    if (!this.previewEl) this.previewEl = this.el.querySelector('[data-preview]');
-      this.previewEl = this.el.querySelector('[data-preview]');
-    }
     return this.previewEl;
-  },
+  }
 
   getLabelEl() {
-    if (!this.labelEl) {
+    if (!this.labelEl) this.labelEl = this.el.querySelector('[data-label]');
-      this.labelEl = this.el.querySelector('[data-label]');
-    }
     return this.labelEl;
-  },
+  }
-
-  select() {
-    this.model.select();
-  },
-
-  updateVisibility() {
-    const { pfx, model, propertyView } = this;
-    const wrapEl = this.getPropertiesWrapper();
-    const isSelected = model.isSelected();
-    wrapEl.style.display = isSelected ? '' : 'none';
-    this.$el[isSelected ? 'addClass' : 'removeClass'](`${pfx}active`);
-    isSelected && wrapEl.appendChild(propertyView.props.el);
-  },
 
   updateLabel() {
     const { model } = this;
@@ -109,7 +95,16 @@ export default View.extend({
         .join(';');
       prvEl.setAttribute('style', styleStr);
     }
-  },
+  }
+
+  updateVisibility() {
+    const { pfx, model, propertyView } = this;
+    const wrapEl = this.getPropertiesWrapper();
+    const isSelected = model.isSelected();
+    wrapEl.style.display = isSelected ? '' : 'none';
+    this.$el[isSelected ? 'addClass' : 'removeClass'](`${pfx}active`);
+    isSelected && wrapEl.appendChild(propertyView.props.el);
+  }
 
   render() {
     const { el, pfx, model } = this;
@@ -121,5 +116,5 @@ export default View.extend({
     this.updateLabel();
     this.updateVisibility();
     return this;
-  },
+  }
-});
+}

src/style_manager/view/LayersView.js

@@ -1,81 +1,47 @@
-import Backbone from 'backbone';
+import { View } from 'common';
 import LayerView from './LayerView';
 
-export default Backbone.View.extend({
+export default class LayersView extends View {
   initialize(o) {
-    this.config = o.config || {};
+    const coll = this.collection;
-    this.stackModel = o.stackModel;
+    const config = o.config || {};
+    const em = config.em;
+    const pfx = config.stylePrefix || '';
+    const ppfx = config.pStylePrefix || '';
+    this.config = config;
+    this.pfx = pfx;
+    this.ppfx = ppfx;
     this.propertyView = o.propertyView;
-    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;
     this.className = `${pfx}layers ${ppfx}field`;
-    this.listenTo(collection, 'add', this.addTo);
+    this.listenTo(coll, 'add', this.addTo);
-    this.listenTo(collection, 'deselectAll', this.deselectAll);
+    this.listenTo(coll, 'reset', this.reset);
-    this.listenTo(collection, 'reset', this.reset);
     this.items = [];
 
-    var em = this.config.em || '';
+    // For the Sorter
-    var utils = em ? em.get('Utils') : '';
+    const utils = em ? em.get('Utils') : '';
-
     this.sorter = utils
       ? new utils.Sorter({
           container: this.el,
           ignoreViewChildren: 1,
           containerSel: `.${pfx}layers`,
           itemSel: `.${pfx}layer`,
-          pfx: this.config.pStylePrefix,
+          pfx: config.pStylePrefix,
         })
       : '';
+    coll.view = this;
+    this.$el.data('model', coll);
+    this.$el.data('collection', coll);
+  }
 
-    // For the Sorter
-    collection.view = this;
-    this.$el.data('model', collection);
-    this.$el.data('collection', collection);
-  },
-
-  /**
-   * Add to collection
-   * @param Object Model
-   *
-   * @return Object
-   * */
   addTo(model) {
-    var i = this.collection.indexOf(model);
+    const i = this.collection.indexOf(model);
     this.addToCollection(model, null, i);
-  },
+  }
 
-  /**
-   * Add new object to collection
-   * @param Object Model
-   * @param Object Fragment collection
-   * @param  {number} index Index of append
-   *
-   * @return Object Object created
-   * */
   addToCollection(model, fragmentEl, index) {
-    var fragment = fragmentEl || null;
+    const fragment = fragmentEl || null;
-    const { propertyView, config } = this;
+    const { propertyView, config, sorter, $el } = this;
-    const stackModel = this.stackModel;
+    const view = new LayerView({ model, config, sorter, propertyView });
-    const sorter = this.sorter;
-    const propsConfig = this.propsConfig;
-
-    if (typeof this.preview !== 'undefined') {
-      model.set('preview', this.preview);
-    }
-
-    const view = new LayerView({
-      model,
-      config,
-      sorter,
-      stackModel,
-      propsConfig,
-      propertyView,
-    });
     const rendered = view.render().el;
     this.items.push(view);
 
@@ -83,60 +49,50 @@ export default Backbone.View.extend({
       fragment.appendChild(rendered);
     } else {
       if (typeof index != 'undefined') {
-        var method = 'before';
+        let method = 'before';
-        // If the added model is the last of collection
+
-        // need to change the logic of append
+        if ($el.children().length === index) {
-        if (this.$el.children().length == index) {
           index--;
           method = 'after';
         }
-        // In case the added is new in the collection index will be -1
+
         if (index < 0) {
-          this.$el.append(rendered);
+          $el.append(rendered);
-        } else this.$el.children().eq(index)[method](rendered);
+        } else {
-      } else this.$el.append(rendered);
+          $el.children().eq(index)[method](rendered);
+        }
+      } else {
+        $el.append(rendered);
+      }
     }
 
     return rendered;
-  },
+  }
-
-  /**
-   * Deselect all
-   *
-   * @return void
-   * */
-  deselectAll() {
-    this.$el.find('.' + this.pfx + 'layer').removeClass(this.pfx + 'active');
-  },
 
   reset(coll, opts) {
     this.clearItems(opts);
     this.render();
-  },
+  }
-
-  render() {
-    var fragment = document.createDocumentFragment();
-    this.$el.empty();
-
-    this.collection.each(function (model) {
-      this.addToCollection(model, fragment);
-    }, this);
-
-    this.$el.append(fragment);
-    this.$el.attr('class', this.className);
-
-    if (this.sorter) this.sorter.plh = null;
-
-    return this;
-  },
 
   remove() {
     this.clearItems();
-    Backbone.View.prototype.remove.apply(this, arguments);
+    View.prototype.remove.apply(this, arguments);
-  },
+  }
 
-  clearItems(opts) {
+  clearItems() {
-    this.items.forEach(item => item.remove(opts));
+    this.items.forEach(item => item.remove());
     this.items = [];
-  },
+  }
-});
+
+  render() {
+    const { $el, sorter } = this;
+    const frag = document.createDocumentFragment();
+    $el.empty();
+    this.collection.forEach(m => this.addToCollection(m, frag));
+    $el.append(frag);
+    $el.attr('class', this.className);
+    if (sorter) sorter.plh = null;
+
+    return this;
+  }
+}

src/style_manager/view/PropertyStackView.js

@@ -52,13 +52,13 @@ export default PropertyCompositeView.extend({
   },
 
   onRender() {
-    const { model, el } = this;
+    const { model, el, config } = this;
     const props = model.getProperties();
 
     if (props.length && !this.props) {
       const propsView = new PropertiesView({
         config: {
-          ...this.config,
+          ...config,
           highlightComputed: false,
           highlightChanged: false,
         },
@@ -69,7 +69,7 @@ export default PropertyCompositeView.extend({
 
       const layersView = new LayersView({
         collection: model.__getLayers(),
-        config: this.config,
+        config,
         propertyView: this,
       });
       layersView.render();