Clean frames on page change

src/canvas/view/CanvasView.js

@@ -36,17 +36,17 @@ export default Backbone.View.extend({
     this.pfx = this.config.stylePrefix || '';
     this.ppfx = this.config.pStylePrefix || '';
     this.className = this.config.stylePrefix + 'canvas';
-    const { em, config } = this;
-    this.initFrames();
+    const { em } = this;
+    this._initFrames();
     this.listenTo(em, 'change:canvasOffset', this.clearOff);
     this.listenTo(em, 'component:selected', this.checkSelected);
     this.listenTo(model, 'change:zoom change:x change:y', this.updateFrames);
-    this.listenTo(model, 'change:frames', this._renderFrames);
+    this.listenTo(model, 'change:frames', this._onFramesUpdate);
     this.listenTo(frames, 'loaded:all', () => em.trigger('loaded'));
     this.toggleListeners(1);
   },
 
-  initFrames() {
+  _initFrames() {
     const { frames, model, config } = this;
     frames && frames.remove();
     this.frames = new FramesView({
@@ -335,14 +335,20 @@ export default Backbone.View.extend({
     return (view && view._getFrame()) || this.em.get('currentFrame');
   },
 
+  _onFramesUpdate() {
+    this._initFrames();
+    this._renderFrames();
+  },
+
   _renderFrames() {
-    this.initFrames();
     const { model, frames, em, framesArea } = this;
     const frms = model.get('frames');
+    frms.listenToLoad();
     frames.render();
-    em.setCurrentFrame(frms.at(0).view);
+    const mainFrame = frms.at(0).view;
+    em.setCurrentFrame(mainFrame);
     framesArea.appendChild(frames.el);
-    this.frame = frms.at(0).view;
+    this.frame = mainFrame;
   },
 
   render() {
@@ -381,13 +387,7 @@ export default Backbone.View.extend({
     this.toolsEl = toolsEl;
     this.el.className = this.className;
 
-    // Render all frames
-    const frms = model.get('frames');
-    frms.listenToLoad();
-    frames.render();
-    em.setCurrentFrame(frms.at(0).view);
-    $frames.append(frames.el);
-    this.frame = frms.at(0).view;
+    this._renderFrames();
 
     return this;
   }

src/canvas/view/FrameView.js

@@ -142,11 +142,9 @@ export default Backbone.View.extend({
   },
 
   remove() {
-    const { root, model } = this;
     this._toggleEffects();
+    this.wrapper.remove();
     Backbone.View.prototype.remove.apply(this, arguments);
-    root.remove();
-    model.remove();
   },
 
   startAutoscroll() {
@@ -252,7 +250,6 @@ export default Backbone.View.extend({
 
   renderBody() {
     const { config, model, ppfx } = this;
-    const components = model.getComponent();
     const styles = model.getStyles();
     const { em } = config;
     const doc = this.getDoc();
@@ -354,14 +351,15 @@ export default Backbone.View.extend({
       ${conf.protectedCss || ''}
     </style>`
     );
-    this.root = new ComponentView({
-      model: components,
+    const component = model.getComponent();
+    this.wrapper = new ComponentView({
+      model: component,
       config: {
-        ...components.config,
+        ...component.config,
         frameView: this
       }
     }).render();
-    append(body, this.root.el);
+    append(body, this.wrapper.el);
     append(
       body,
       new CssRulesView({

src/canvas/view/FrameWrapView.js

@@ -69,10 +69,12 @@ export default Backbone.View.extend({
     ev && this.dragger.start(ev);
   },
 
-  remove() {
-    this.frame.remove();
-    this.frame = {};
+  remove(opts) {
+    this.frame.remove(opts);
     Backbone.View.prototype.remove.apply(this, arguments);
+    ['frame', 'dragger', 'cv', 'em', 'canvas', 'elTools'].forEach(
+      i => (this[i] = {})
+    );
     return this;
   },
 

src/canvas/view/FramesView.js

@@ -9,6 +9,10 @@ export default DomainViews.extend({
     this.listenTo(this.collection, 'reset', this.render);
   },
 
+  onRemoveBefore(items, opts) {
+    items.forEach(item => item.remove(opts));
+  },
+
   onRender() {
     const { config, $el } = this;
     const { em } = config;

src/domain_abstract/view/DomainViews.js

@@ -114,9 +114,15 @@ export default Backbone.View.extend({
 
   onRender() {},
 
-  remove() {
+  onRemoveBefore() {},
+  onRemove() {},
+
+  remove(opts = {}) {
+    const { items } = this;
+    this.onRemoveBefore(items, opts);
     this.clearItems();
     Backbone.View.prototype.remove.apply(this, arguments);
+    this.onRemove(items, opts);
   },
 
   clearItems() {