From 5daf63bfc9d525aab14f3a435052ffe201f94cf2 Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sun, 21 Mar 2021 00:13:22 +0100
Subject: [PATCH] Clear wrapper on frame remove

---
 src/canvas/model/Frame.js             |  4 ++++
 src/canvas/model/Frames.js            | 11 +++++++++++
 src/dom_components/model/Component.js |  5 ++++-
 src/pages/model/Page.js               |  4 ++++
 src/pages/model/Pages.js              | 11 +++++++++++
 5 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/canvas/model/Frame.js b/src/canvas/model/Frame.js
index 554d5f0d5..b71ccb2da 100644
--- a/src/canvas/model/Frame.js
+++ b/src/canvas/model/Frame.js
@@ -48,6 +48,10 @@ export default Model.extend({
     !props.height && this.set(keyAutoH, 1);
   },
 
+  onRemove() {
+    this.getComponent().remove({ root: 1 });
+  },
+
   changesUp: debounce(function(opt = {}) {
     if (opt.temporary || opt.noCount || opt.avoidStore) {
       return;
diff --git a/src/canvas/model/Frames.js b/src/canvas/model/Frames.js
index 04672115f..380116616 100644
--- a/src/canvas/model/Frames.js
+++ b/src/canvas/model/Frames.js
@@ -8,6 +8,17 @@ export default Collection.extend({
   initialize(models, config = {}) {
     bindAll(this, 'itemLoaded');
     this.config = config;
+    this.on('reset', this.onReset);
+    this.on('remove', this.onRemove);
+  },
+
+  onReset(m, opts = {}) {
+    const prev = opts.previousModels || [];
+    prev.map(p => this.onRemove(p));
+  },
+
+  onRemove(removed) {
+    removed && removed.onRemove();
   },
 
   itemLoaded() {
diff --git a/src/dom_components/model/Component.js b/src/dom_components/model/Component.js
index afdfb0397..868c92367 100644
--- a/src/dom_components/model/Component.js
+++ b/src/dom_components/model/Component.js
@@ -1576,7 +1576,10 @@ const Component = Backbone.Model.extend(Styleable).extend(
     remove(opts = {}) {
       const { em } = this;
       const coll = this.collection;
-      const remove = () => coll && coll.remove(this, opts);
+      const remove = () => {
+        coll && coll.remove(this, opts);
+        opts.root && this.components('');
+      };
       const rmOpts = { ...opts };
       [this, em].map(i =>
         i.trigger('component:remove:before', this, remove, rmOpts)
diff --git a/src/pages/model/Page.js b/src/pages/model/Page.js
index 05bb753dd..9517e7b85 100644
--- a/src/pages/model/Page.js
+++ b/src/pages/model/Page.js
@@ -17,6 +17,10 @@ export default Model.extend({
     um && um.add(frames);
   },
 
+  onRemove() {
+    this.get('frames').reset();
+  },
+
   getFrames() {
     return this.get('frames');
   },
diff --git a/src/pages/model/Pages.js b/src/pages/model/Pages.js
index 3c6f7dd2b..649fe7a00 100644
--- a/src/pages/model/Pages.js
+++ b/src/pages/model/Pages.js
@@ -6,6 +6,17 @@ export default Collection.extend({
 
   initialize(models, config = {}) {
     this.config = config;
+    this.on('reset', this.onReset);
+    this.on('remove', this.onRemove);
+  },
+
+  onReset(m, opts = {}) {
+    const prev = opts.previousModels || [];
+    prev.map(p => this.onRemove(p));
+  },
+
+  onRemove(removed) {
+    removed && removed.onRemove();
   },
 
   add(m, o = {}) {