Improve LayerManager

src/canvas/view/FrameWrapView.js

@@ -108,8 +108,9 @@ export default Backbone.View.extend({
    * @private
    */
   updateDim() {
-    const { em, el, $el, model, classAnim } = this;
-    this.frame.rect = 0;
+    const { em, el, $el, model, classAnim, frame } = this;
+    if (!frame) return;
+    frame.rect = 0;
     $el.addClass(classAnim);
     const { noChanges, width, height } = this.__handleSize();
 

src/navigator/view/ItemView.js

@@ -394,7 +394,7 @@ export default Backbone.View.extend({
     this.stopListening();
     this.model = model;
     this.initialize(this.opt);
-    this.render();
+    this._rendered && this.render();
   },
 
   updateLayerable() {
@@ -403,8 +403,19 @@ export default Backbone.View.extend({
     toRerender.render();
   },
 
+  __clearItems() {
+    const { items } = this;
+    items && items.remove();
+  },
+
+  remove() {
+    Backbone.View.prototype.remove.apply(this, arguments);
+    this.__clearItems();
+  },
+
   render() {
     const { model, config, pfx, ppfx, opt } = this;
+    this.__clearItems();
     const { isCountable } = opt;
     const hidden = isCountable && !isCountable(model, config.hideTextnode);
     const vis = this.isVisible();
@@ -416,7 +427,7 @@ export default Backbone.View.extend({
       ItemsView = require('./ItemsView').default;
     }
 
-    const children = new ItemsView({
+    this.items = new ItemsView({
       ItemView: opt.ItemView,
       collection: model.get('components'),
       config: this.config,
@@ -425,7 +436,8 @@ export default Backbone.View.extend({
       parentView: this,
       parent: model,
       level
-    }).render().$el;
+    });
+    const children = this.items.render().$el;
 
     if (!this.config.showWrapper && level === 1) {
       el.append(children);
@@ -445,6 +457,7 @@ export default Backbone.View.extend({
     this.updateStatus();
     this.updateVisibility();
     this.__render();
+    this._rendered = 1;
     return this;
   },
 

src/navigator/view/ItemsView.js

@@ -1,8 +1,9 @@
-import Backbone from 'backbone';
+import { View } from 'backbone';
 import { eventDrag } from 'dom_components/model/Component';
 
-export default Backbone.View.extend({
+export default View.extend({
   initialize(o = {}) {
+    this.items = [];
     this.opt = o;
     const config = o.config || {};
     this.level = o.level;
@@ -78,7 +79,7 @@ export default Backbone.View.extend({
     const { level, parentView, opt } = this;
     const { ItemView } = opt;
     const fragment = fragmentEl || null;
-    const rendered = new ItemView({
+    const item = new ItemView({
       ItemView,
       level,
       model,
@@ -87,7 +88,8 @@ export default Backbone.View.extend({
       sorter: this.sorter,
       isCountable: this.isCountable,
       opened: this.opt.opened
-    }).render().el;
+    });
+    const rendered = item.render().el;
 
     if (fragment) {
       fragment.appendChild(rendered);
@@ -110,10 +112,15 @@ export default Backbone.View.extend({
             [method](rendered);
       } else this.$el.append(rendered);
     }
-
+    this.items.push(item);
     return rendered;
   },
 
+  remove() {
+    View.prototype.remove.apply(this, arguments);
+    this.items.map(i => i.remove());
+  },
+
   /**
    * Check if the model could be count by the navigator
    * @param  {Object}  model