Refactor SelectorManager

Make a difference between global selectors container and the viewer one

src/selector_manager/index.js

@@ -55,6 +55,7 @@
 module.exports = config => {
   var c = config || {},
   defaults = require('./config/config'),
+  Selector = require('./model/Selector'),
   Selectors = require('./model/Selectors'),
   ClassTagsView = require('./view/ClassTagsView');
   var selectors, selectorTags;
@@ -89,15 +90,13 @@ module.exports = config => {
         c.stylePrefix = ppfx + c.stylePrefix;
       }
 
-      selectors = new Selectors(c.selectors, {
-        em,
-        config: c,
-      });
       selectorTags = new ClassTagsView({
-        collection: selectors,
+        collection: new Selectors([], {em,config: c}),
         config: c,
       });
 
+      // Global selectors container
+      selectors = new Selectors(c.selectors);
       selectors.on('add', (model) =>
         em.trigger('selector:add', model));
 
@@ -120,11 +119,20 @@ module.exports = config => {
      * });
      * */
     add(name, opts = {}) {
-      const selector = this.get(name);
+      if (typeof name == 'object') {
+        opts = name;
+      } else {
+        opts.name = name;
+      }
+
+      if (opts.label && !opts.name) {
+        opts.name = Selector.escapeName(opts.label);
+      }
+
+      const cname = opts.name;
+      const selector = cname ? this.get(cname) : selectors.where(opts)[0];
 
       if (!selector) {
-        console.log('Add pls', selector);
-        opts.name = name.name || name;
         return selectors.add(opts);
       }
 

src/selector_manager/model/Selector.js

@@ -1,6 +1,6 @@
 var Backbone = require('backbone');
 
-module.exports = Backbone.Model.extend({
+const Selector = Backbone.Model.extend({
 
   idAttribute: 'name',
 
@@ -23,20 +23,16 @@ module.exports = Backbone.Model.extend({
   },
 
   initialize() {
-    this.set('name', this.escapeName(this.get('name')));
+    const name = this.get('name');
-    var label = this.get('label').trim();
+    const label = this.get('label');
-    if(!label)
-      this.set('label', this.get('name'));
-  },
 
-  /**
+    if (!name) {
-   * Escape string
+      this.set('name', label);
-   * @param {string} name
+    } else if (!label) {
-   * @return {string}
+      this.set('label', name);
-   * @private
+    }
-   */
+
-  escapeName(name) {
+    this.set('name', Selector.escapeName(this.get('name')));
-    return name.replace(/([^a-z0-9\w]+)/gi, '-');
   },
 
   /**
@@ -58,4 +54,16 @@ module.exports = Backbone.Model.extend({
     return init + this.get('name');
   }
 
+}, {
+  /**
+   * Escape string
+   * @param {string} name
+   * @return {string}
+   * @private
+   */
+  escapeName(name) {
+    return name.trim().replace(/([^a-z0-9\w]+)/gi, '-');
+  },
 });
+
+module.exports = Selector;

src/selector_manager/view/ClassTagsView.js

@@ -197,23 +197,28 @@ module.exports = Backbone.View.extend({
    * @param  {Object} e
    * @private
    */
-  addNewTag(name) {
+  addNewTag(label) {
-    if(!name)
+    const target = this.target;
-      return;
+    const component = this.compTarget;
 
-    if(this.target){
+    if (!label.trim()) {
-      var cm = this.target.get('SelectorManager');
+      return;
-      var model = cm.add(name);
+    }
 
-      if(this.compTarget){
+    if (target) {
-        var targetCls = this.compTarget.get('classes');
+      const sm = target.get('SelectorManager');
-        var lenB = targetCls.length;
+      var model = sm.add({label});
-        targetCls.add(model);
+
-        var lenA = targetCls.length;
+      if (component) {
+        var compCls = component.get('classes');
+        var lenB = compCls.length;
+        compCls.add(model);
+        var lenA = compCls.length;
         this.collection.add(model);
 
-        if(lenA > lenB)
+        if (lenA > lenB) {
-          this.target.trigger('targetClassAdded');
+          target.trigger('targetClassAdded');
+        }
 
         this.updateStateVis();
       }