From e08d23cd19e413ffa1e700b8b9008fd1caf0c564 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Mon, 13 Apr 2020 14:33:39 +0200 Subject: [PATCH] Move model related stuff from ComponentsView to Components --- src/dom_components/model/Component.js | 9 ++++ src/dom_components/model/Components.js | 50 +++++++++++++++++++++++ src/dom_components/view/ComponentsView.js | 38 ----------------- test/specs/editor/index.js | 39 ++++++++++++++---- 4 files changed, 89 insertions(+), 47 deletions(-) diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js index 058392b77..7e5ee88b2 100644 --- a/src/dom_components/model/Component.js +++ b/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} diff --git a/src/dom_components/model/Components.js b/src/dom_components/model/Components.js index d7ddcac31..999889e21 100644 --- a/src/dom_components/model/Components.js +++ b/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) { diff --git a/src/dom_components/view/ComponentsView.js b/src/dom_components/view/ComponentsView.js index 078fbea35..43c399f06 100644 --- a/src/dom_components/view/ComponentsView.js +++ b/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); }, /** diff --git a/test/specs/editor/index.js b/test/specs/editor/index.js index fb7314d5b..e00290f98 100644 --- a/test/specs/editor/index.js +++ b/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('
Component
'); - // 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('
Component
'); + 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(` +
Component 1
+
+ `); + expect(keys(all).length).toBe(2 + initComps); + const secComp = added[1]; + secComp.append(` +
Component 2
+
Component 3
+ `); + 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();