Update sectors view

src/selector_manager/index.js

@@ -181,7 +181,7 @@ export default () => {
 
     select(value, opts = {}) {
       const targets = Array.isArray(value) ? value : [value];
-      const toSelect = this.em.get('StyleManager').setTarget(targets, opts);
+      const toSelect = this.em.get('StyleManager').select(targets, opts);
       const selTags = this.selectorTags;
       const res = toSelect
         .filter(i => i)

src/style_manager/index.js

@@ -588,14 +588,15 @@ export default () => {
     },
 
     /**
-     * Create new property from type
+     * Create new UI property from type (Experimental)
      * @param {string} id Type ID
      * @param  {Object} [options={}] Options
      * @param  {Object} [options.model={}] Custom model object
      * @param  {Object} [options.view={}] Custom view object
      * @return {PropertyView}
+     * @private
      * @example
-     * const propView = styleManager.createType('integer', {
+     * const propView = styleManager.createType('number', {
      *  model: {units: ['px', 'rem']}
      * });
      * propView.render();
@@ -615,19 +616,6 @@ export default () => {
       }
     },
 
-    setTarget(target, opts) {
-      return SectView?.setTarget(target, opts);
-    },
-
-    getTargets() {
-      const { propTarget } = SectView || {};
-      return (propTarget && propTarget.targets) || [];
-    },
-
-    getEmitter() {
-      return SectView.propTarget;
-    },
-
     /**
      * Render sectors and properties
      * @return  {HTMLElement}
@@ -638,10 +626,9 @@ export default () => {
       const el = SectView && SectView.el;
       SectView = new SectorsView({
         el,
-        collection: sectors,
-        target: em,
         em,
         config,
+        collection: sectors,
         module: this,
       });
       return SectView.render().el;

src/style_manager/view/SectorsView.js

@@ -1,37 +1,24 @@
-import Backbone from 'backbone';
-import { extend, isString, isArray } from 'underscore';
+import { View } from 'common';
 import { appendAtIndex } from 'utils/dom';
 import SectorView from './SectorView';
 
-export default Backbone.View.extend({
+export default class SectorsView extends View {
   initialize(o = {}) {
-    const config = o.config || {};
+    const { module, em, config } = o;
+    const coll = this.collection;
     this.pfx = config.stylePrefix || '';
     this.ppfx = config.pStylePrefix || '';
-    this.target = o.target || {};
     this.config = config;
-    const { module, em } = o;
     this.module = module;
     this.em = em;
-
-    // The target that will emit events for properties
-    const target = {};
-    extend(target, Backbone.Events);
-    const body = document.body;
-    const dummy = document.createElement(`el-${new Date().getTime()}`);
-    body.appendChild(dummy);
-    target.computedDefault = { ...window.getComputedStyle(dummy) };
-    body.removeChild(dummy);
-    this.propTarget = target;
-    const coll = this.collection;
     this.listenTo(coll, 'add', this.addTo);
     this.listenTo(coll, 'reset', this.render);
-  },
+  }
 
   remove() {
-    Backbone.View.prototype.remove.apply(this, arguments);
-    ['target', 'config', 'propTarget'].forEach(i => (this[i] = {}));
-  },
+    View.prototype.remove.apply(this, arguments);
+    ['config', 'module', 'em'].forEach(i => (this[i] = {}));
+  }
 
   /**
    * Add to collection
@@ -39,53 +26,9 @@ export default Backbone.View.extend({
    * @return {Object}
    * @private
    * */
-  addTo(model, coll, opts = {}) {
+  addTo(model, c, opts = {}) {
     this.addToCollection(model, null, opts);
-  },
-
-  /**
-   * Select different target for the Style Manager.
-   * It could be a Component, CSSRule, or a string of any CSS selector
-   * @param {Component|CSSRule|String|Array<Component|CSSRule|String>} target
-   * @return {Array<Styleable>} Array of Components/CSSRules
-   */
-  setTarget(target, opts = {}) {
-    const em = this.target;
-    const trgs = isArray(target) ? target : [target];
-    const { targetIsClass, stylable } = opts;
-    const models = [];
-
-    trgs.forEach(target => {
-      let model = target;
-
-      if (isString(target)) {
-        let rule;
-        const rules = em.get('CssComposer').getAll();
-
-        if (targetIsClass) {
-          rule = rules.filter(rule => rule.get('selectors').getFullString() === target)[0];
-        }
-
-        if (!rule) {
-          rule = rules.filter(rule => rule.get('selectorsAdd') === target)[0];
-        }
-
-        if (!rule) {
-          rule = rules.add({ selectors: [], selectorsAdd: target });
-        }
-
-        stylable && rule.set({ stylable });
-        model = rule;
-      }
-
-      models.push(model);
-    });
-
-    const pt = this.propTarget;
-    pt.targets = models;
-    pt.trigger('update', { targets: models });
-    return models;
-  },
+  }
 
   /**
    * Add new object to collection
@@ -95,21 +38,13 @@ export default Backbone.View.extend({
    * @private
    * */
   addToCollection(model, fragmentEl, opts = {}) {
-    const { pfx, target, propTarget, config, el } = this;
+    const { config, el } = this;
     const appendTo = fragmentEl || el;
-    const rendered = new SectorView({
-      model,
-      id: `${pfx}${model.get('id')}`,
-      name: model.get('name'),
-      properties: model.get('properties'),
-      target,
-      propTarget,
-      config,
-    }).render().el;
+    const rendered = new SectorView({ model, config }).render().el;
     appendAtIndex(appendTo, rendered, opts.at);
 
     return rendered;
-  },
+  }
 
   render() {
     const { $el, pfx, ppfx } = this;
@@ -119,5 +54,5 @@ export default Backbone.View.extend({
     $el.append(frag);
     $el.addClass(`${pfx}sectors ${ppfx}one-bg ${ppfx}two-color`);
     return this;
-  },
-});
+  }
+}