Refactor SelectComponent

Move component selection in DomComponents module

src/commands/view/SelectComponent.js

@@ -304,12 +304,14 @@ module.exports = {
    * */
   onSelect(e, el) {
     e.stopPropagation();
-    var md   = this.editorModel.get('selectedComponent');
-    this.cleanPrevious(md);
-    var $el = $(el);
-    var nMd = $el.data('model');
+    //var md = this.editorModel.get('selectedComponent');
+    //this.cleanPrevious(md);
+    //var $el = $(el);
+    //var nMd = $el.data('model');
+    var model = $(el).data('model');
 
-    if (nMd) {
+    if (model) {
+      /*
       var em = this.em;
       var mirror = nMd.get('mirror');
       nMd = mirror ? mirror : nMd;
@@ -329,9 +331,11 @@ module.exports = {
         opened[parent.cid] = parent;
         parent = parent.collection ? parent.collection.parent : null;
       }
+      */
 
-      this.editorModel.set('selectedComponent', nMd);
-      nMd.set('status','selected');
+      //this.editorModel.set('selectedComponent', nMd);
+      this.editor.select(model);
+      //nMd.set('status','selected');
       this.showFixedElementOffset(el);
       this.hideElementOffset();
       this.hideHighlighter();
@@ -563,9 +567,8 @@ module.exports = {
     return this.contWindow;
   },
 
-  run(em) {
-    if(em && em.get)
-      this.editor = em.get('Editor');
+  run(editor) {
+    this.editor = editor && editor.get('Editor');
     this.enable();
   },
 

src/dom_components/index.js

@@ -146,8 +146,11 @@ module.exports = () => {
      */
     init(config) {
       c = config || {};
-      if(c.em)
-        c.components = c.em.config.components || c.components;
+      const em = c.em;
+
+      if (em) {
+        c.components = em.config.components || c.components;
+      }
 
       for (var name in defaults) {
         if (!(name in c))
@@ -159,22 +162,23 @@ module.exports = () => {
         c.stylePrefix = ppfx + c.stylePrefix;
 
       // Load dependencies
-      if(c.em){
-        c.rte = c.em.get('rte') || '';
-        c.modal = c.em.get('Modal') || '';
-        c.am = c.em.get('AssetManager') || '';
-        c.em.get('Parser').compTypes = defaultTypes;
+      if (em) {
+        c.rte = em.get('rte') || '';
+        c.modal = em.get('Modal') || '';
+        c.am = em.get('AssetManager') || '';
+        em.get('Parser').compTypes = defaultTypes;
+        em.on('change:selectedComponent', this.componentChanged, this);
       }
 
       component = new Component(c.wrapper, {
-        sm: c.em,
+        sm: em,
         config: c,
         defaultTypes,
         componentTypes,
       });
       component.set({ attributes: {id: 'wrapper'}});
 
-      if(c.em && !c.em.config.loadCompsOnRender) {
+      if(em && !em.config.loadCompsOnRender) {
         component.get('components').add(c.components);
       }
 
@@ -400,5 +404,25 @@ module.exports = () => {
       return;
     },
 
+    /**
+     * Triggered when the selected component is changed
+     * @private
+     */
+    componentChanged() {
+      const em = c.em;
+      const model = em.get('selectedComponent');
+      const previousModel = em.previous('selectedComponent');
+
+      // Deselect the previous component
+      if (previousModel) {
+        previousModel.set({
+          status: '',
+          state: '',
+        });
+      }
+
+      model && model.set('status','selected');
+    }
+
   };
 };