Move selectedComponent events to DomComponents

src/dom_components/index.js

@@ -174,6 +174,7 @@ module.exports = () => {
     init(config) {
       c = config || {};
       em = c.em;
+      this.em = em;
 
       if (em) {
         c.components = em.config.components || c.components;
@@ -195,8 +196,12 @@ module.exports = () => {
         em.on('change:componentHovered', this.componentHovered, this);
 
         const selected = em.get('selected');
-        em.listenTo(selected, 'add', this.selectAdd);
-        em.listenTo(selected, 'remove', this.selectRemove);
+        em.listenTo(selected, 'add', (sel, c, opts) =>
+          this.selectAdd(sel, opts)
+        );
+        em.listenTo(selected, 'remove', (sel, c, opts) =>
+          this.selectRemove(sel, opts)
+        );
       }
 
       // Build wrapper
@@ -515,21 +520,25 @@ module.exports = () => {
       return;
     },
 
-    selectAdd(component) {
+    selectAdd(component, opts = {}) {
       console.log('ADDED', component);
-      component &&
+      if (component) {
         component.set({
           status: 'selected'
         });
+        this.em.trigger('component:selected', component, opts);
+      }
     },
 
-    selectRemove(component) {
+    selectRemove(component, opts = {}) {
       console.log('REMOVED', component);
-      component &&
+      if (component) {
         component.set({
           status: '',
           state: ''
         });
+        this.em.trigger('component:deselected', component, opts);
+      }
     },
 
     /**

src/editor/model/Editor.js

@@ -64,7 +64,6 @@ module.exports = Backbone.Model.extend({
 
     // Load modules
     deps.forEach(name => this.loadModule(name));
-    this.on('change:selectedComponent', this.componentSelected, this);
     this.on('change:componentHovered', this.componentHovered, this);
     this.on('change:changesCount', this.updateChanges, this);
   },
@@ -197,19 +196,6 @@ module.exports = Backbone.Model.extend({
     }, 0);
   },
 
-  /**
-   * Callback on component selection
-   * @param   {Object}   Model
-   * @param   {Mixed}   New value
-   * @param   {Object}   Options
-   * @private
-   * */
-  componentSelected(editor, selected, options) {
-    const prev = this.previous('selectedComponent');
-    prev && this.trigger('component:deselected', prev, options);
-    selected && this.trigger('component:selected', selected, options);
-  },
-
   /**
    * Callback on component hover
    * @param   {Object}   Model
@@ -229,7 +215,7 @@ module.exports = Backbone.Model.extend({
    * @private
    */
   getSelected() {
-    return this.get('selectedComponent');
+    return this.get('selected').last();
   },
 
   /**
@@ -244,7 +230,7 @@ module.exports = Backbone.Model.extend({
     opts.forceChange && this.set('selectedComponent', '');
     const selected = this.get('selected');
     selected.remove(selected.filter(sel => sel !== model));
-    this.set('selectedComponent', model, opts);
+    // this.set('selectedComponent', model, opts);
     this.addSelected(model, opts);
   },