Refactor DomComponents selection methods

src/dom_components/index.js

@@ -195,8 +195,8 @@ module.exports = () => {
         em.on('change:componentHovered', this.componentHovered, this);
 
         const selected = em.get('selected');
-        em.listenTo(selected, 'add', this.selectAdded);
-        em.listenTo(selected, 'remove', this.selectRemoved);
+        em.listenTo(selected, 'add', this.selectAdd);
+        em.listenTo(selected, 'remove', this.selectRemove);
       }
 
       // Build wrapper
@@ -515,18 +515,21 @@ module.exports = () => {
       return;
     },
 
-    selectAdded(component) {
+    selectAdd(component) {
       console.log('ADDED', component);
-      const status = 'selected';
-      component.set({ status });
+      component &&
+        component.set({
+          status: 'selected'
+        });
     },
 
-    selectRemoved(component) {
-      console.log('Removed', component);
-      component.set({
-        status: '',
-        state: ''
-      });
+    selectRemove(component) {
+      console.log('REMOVED', component);
+      component &&
+        component.set({
+          status: '',
+          state: ''
+        });
     },
 
     /**
@@ -535,17 +538,8 @@ module.exports = () => {
      */
     componentChanged() {
       const em = c.em;
-      const model = em.get('selectedComponent');
-      const previousModel = em.previous('selectedComponent');
-
-      // Deselect the previous component
-      previousModel &&
-        previousModel.set({
-          status: '',
-          state: ''
-        });
-
-      model && model.set('status', 'selected');
+      this.selectRemove(em.previous('selectedComponent'));
+      this.selectAdd(em.get('selectedComponent'));
     },
 
     /**

src/dom_components/view/ComponentView.js

@@ -24,7 +24,6 @@ module.exports = Backbone.View.extend({
     this.classe = this.attr.class || [];
     const $el = this.$el;
     const classes = model.get('classes');
-    //this.listenTo(model, 'destroy remove', this.remove);
     this.listenTo(model, 'change:style', this.updateStyle);
     this.listenTo(model, 'change:attributes', this.updateAttributes);
     this.listenTo(model, 'change:highlightable', this.updateHighlight);
@@ -40,12 +39,6 @@ module.exports = Backbone.View.extend({
     this.init();
   },
 
-  remove() {
-    Backbone.View.prototype.remove.apply(this);
-    const children = this.childrenView;
-    children && children.stopListening();
-  },
-
   /**
    * Initialize callback
    */

src/dom_components/view/ComponentsView.js

@@ -12,9 +12,8 @@ module.exports = Backbone.View.extend({
   },
 
   removeChildren(removed) {
-    console.log('removed', removed);
     const view = removed.view;
-    view.prototype.remove.apply(view);
+    view.remove.apply(view);
     const children = view.childrenView;
     children && children.stopListening();
   },

src/editor/model/Editor.js

@@ -243,8 +243,9 @@ module.exports = Backbone.Model.extend({
     if (model && !model.get('selectable')) return;
     opts.forceChange && this.set('selectedComponent', '');
     const selected = this.get('selected');
-    selected.remove(selected.models);
+    selected.remove(selected.filter(sel => sel !== model));
     this.set('selectedComponent', model, opts);
+    this.addSelected(model, opts);
   },
 
   /**