Move model related stuff from ComponentsView to Components

src/dom_components/model/Component.js

@@ -645,6 +645,15 @@ const Component = Backbone.Model.extend(Styleable).extend(
       }
     },
 
+    /**
+     * Remove all inner components
+     * * @return {this}
+     */
+    empty(opts = {}) {
+      this.components().reset(null, opts);
+      return this;
+    },
+
     /**
      * Get the parent component, if exists
      * @return {Component}

src/dom_components/model/Components.js

@@ -7,8 +7,58 @@ export default Backbone.Collection.extend({
   initialize(models, opt = {}) {
     this.opt = opt;
     this.listenTo(this, 'add', this.onAdd);
+    this.listenTo(this, 'remove', this.removeChildren);
+    this.listenTo(this, 'reset', this.resetChildren);
     this.config = opt.config;
     this.em = opt.em;
+    this.domc = opt.domc;
+  },
+
+  resetChildren(models, opts = {}) {
+    const coll = this;
+    const { previousModels = [] } = opts;
+    previousModels.forEach(md => this.removeChildren(md, coll, opts));
+  },
+
+  removeChildren(removed, coll, opts = {}) {
+    const { domc, em } = this;
+    const allByID = domc.allById();
+
+    // Remove stuff registered in DomComponents.handleChanges
+    const inner = removed.components();
+    const um = em.get('UndoManager');
+    em.stopListening(inner);
+    em.stopListening(removed);
+    em.stopListening(removed.get('classes'));
+    um.remove(removed);
+    um.remove(inner);
+
+    if (!opts.temporary) {
+      // Remove the component from the gloabl list
+      const id = removed.getId();
+      const sels = em.get('SelectorManager').getAll();
+      const rules = em.get('CssComposer').getAll();
+      delete allByID[id];
+
+      // Remove all component related styles
+      const rulesRemoved = rules.remove(
+        rules.filter(r => r.getSelectors().getFullString() === `#${id}`)
+      );
+
+      // Clean selectors
+      sels.remove(rulesRemoved.map(rule => rule.getSelectors().at(0)));
+
+      if (!removed.opt.temporary) {
+        const cm = em.get('Commands');
+        const hasSign = removed.get('style-signature');
+        const optStyle = { target: removed };
+        hasSign && cm.run('core:component-style-clear', optStyle);
+        removed.removed();
+        em.trigger('component:remove', removed);
+      }
+
+      removed.empty(opts);
+    }
   },
 
   model(attrs, options) {

src/dom_components/view/ComponentsView.js

@@ -13,9 +13,6 @@ export default Backbone.View.extend({
   },
 
   removeChildren(removed, coll, opts = {}) {
-    const { em } = this.config;
-    const tempRemove = opts.temporary;
-
     removed.views.forEach(view => {
       if (!view) return;
       const { childrenView, scriptContainer } = view;
@@ -26,41 +23,6 @@ export default Backbone.View.extend({
 
     const inner = removed.components();
     inner.forEach(it => this.removeChildren(it, coll, opts));
-
-    if (em && !tempRemove) {
-      // Remove the component from the global list
-      const id = removed.getId();
-      const domc = em.get('DomComponents');
-      const sels = em.get('SelectorManager').getAll();
-      delete domc.componentsById[id];
-
-      // Remove all related CSS rules
-      // TODO: remove from the frame container
-      const allRules = em.get('CssComposer').getAll();
-      const rulesRemoved = allRules.remove(
-        allRules.filter(
-          rule => rule.getSelectors().getFullString() === `#${id}`
-        )
-      );
-      sels.remove(rulesRemoved.map(rule => rule.getSelectors().at(0)));
-
-      if (!removed.opt.temporary) {
-        const cm = em.get('Commands');
-        const hasSign = removed.get('style-signature');
-        const optStyle = { target: removed };
-        hasSign && cm.run('core:component-style-clear', optStyle);
-        removed.removed();
-        em.trigger('component:remove', removed);
-      }
-    }
-
-    // Remove stuff registered in DomComponents.handleChanges
-    em.stopListening(inner);
-    em.stopListening(removed);
-    em.stopListening(removed.get('classes'));
-    const um = em.get('UndoManager');
-    um.remove(removed);
-    um.remove(inner);
   },
 
   /**

test/specs/editor/index.js

@@ -1,6 +1,7 @@
 import Editor from 'editor';
 
 const { keys } = Object;
+const initComps = 1;
 
 describe('Editor', () => {
   const editor = new Editor();
@@ -21,7 +22,7 @@ describe('Editor', () => {
     const all = editor.Components.allById();
     const allKeys = keys(all);
     // By default 1 wrapper components is created
-    expect(allKeys.length).toBe(1);
+    expect(allKeys.length).toBe(initComps);
     expect(allKeys[0]).toBe('wrapper');
   });
 
@@ -43,14 +44,34 @@ describe('Editor', () => {
     expect(style).toBe(frame.get('styles'));
   });
 
-  //   test('Components are added to the default frame', () => {
-  //     const wrapper = editor.getWrapper();
-  //     const component = wrapper.append('<div>Component</div>');
-  //     const frame = editor.Canvas.getFrame();
-  //     console.log('WRAPPER', wrapper.components().length);
-  //     console.log('ROOT', frame.get('root').components().length);
-  //     expect(wrapper).toBe(frame.get('root'));
-  //   });
+  test('Components are correctly tracked on add', () => {
+    const all = editor.Components.allById();
+    const wrapper = editor.getWrapper();
+    wrapper.append('<div>Component</div>');
+    expect(keys(all).length).toBe(1 + initComps);
+  });
+
+  test.only('Components are correctly tracked on add and remove', () => {
+    const all = editor.Components.allById();
+    const wrapper = editor.getWrapper();
+    console.log(keys(all));
+    const added = wrapper.append(`
+        <div>Component 1</div>
+        <div></div>
+    `);
+    expect(keys(all).length).toBe(2 + initComps);
+    const secComp = added[1];
+    secComp.append(`
+        <div>Component 2</div>
+        <div>Component 3</div>
+    `);
+    expect(keys(all).length).toBe(4 + initComps);
+    console.log(keys(all));
+    wrapper.empty();
+    console.log(keys(all));
+    expect(wrapper.components().length).toBe(0);
+    expect(keys(all).length).toBe(initComps);
+  });
 
   //   test('New component correctly added', () => {
   //     const all = editor.Css.getAll();