Fix style layers memory leaks

src/style_manager/view/LayerView.js

@@ -61,20 +61,19 @@ export default Backbone.View.extend({
   remove(e) {
     if (e && e.stopPropagation) e.stopPropagation();
 
-    const model = this.model;
-    const collection = model.collection;
+    const { model, props } = this;
+    const coll = model.collection;
     const stackModel = this.stackModel;
 
     Backbone.View.prototype.remove.apply(this, arguments);
-
-    if (collection.contains(model)) {
-      collection.remove(model);
-    }
+    coll && coll.contains(model) && coll.remove(model);
 
     if (stackModel && stackModel.set) {
       stackModel.set({ stackIndex: null }, { silent: true });
       stackModel.trigger('updateValue');
     }
+
+    props && props.remove();
   },
 
   /**
@@ -172,11 +171,13 @@ export default Backbone.View.extend({
       customValue: propsConfig.customValue,
       propTarget: propsConfig.propTarget,
       onChange: propsConfig.onChange
-    }).render().el;
+    });
+    const propsEl = properties.render().el;
 
     el.innerHTML = this.template(model);
     el.className = `${pfx}layer${!preview ? ` ${pfx}no-preview` : ''}`;
-    this.getPropertiesWrapper().appendChild(properties);
+    this.props = properties;
+    this.getPropertiesWrapper().appendChild(propsEl);
     this.updateVisibility();
     this.updatePreview();
     return this;

src/style_manager/view/LayersView.js

@@ -16,6 +16,7 @@ export default Backbone.View.extend({
     this.listenTo(collection, 'add', this.addTo);
     this.listenTo(collection, 'deselectAll', this.deselectAll);
     this.listenTo(collection, 'reset', this.render);
+    this.items = [];
 
     var em = this.config.em || '';
     var utils = em ? em.get('Utils') : '';
@@ -66,14 +67,15 @@ export default Backbone.View.extend({
       model.set('preview', this.preview);
     }
 
-    var view = new LayerView({
+    const view = new LayerView({
       model,
       config,
       sorter,
       stackModel,
       propsConfig
     });
-    var rendered = view.render().el;
+    const rendered = view.render().el;
+    this.items.push(view);
 
     if (fragment) {
       fragment.appendChild(rendered);
@@ -111,6 +113,7 @@ export default Backbone.View.extend({
 
   render() {
     var fragment = document.createDocumentFragment();
+    this.clearItems();
     this.$el.empty();
 
     this.collection.each(function(model) {
@@ -123,5 +126,15 @@ export default Backbone.View.extend({
     if (this.sorter) this.sorter.plh = null;
 
     return this;
+  },
+
+  remove() {
+    this.clearItems();
+    Backbone.View.prototype.remove.apply(this, arguments);
+  },
+
+  clearItems() {
+    this.items.forEach(item => item.remove());
+    this.items = [];
   }
 });

src/style_manager/view/PropertiesView.js

@@ -47,12 +47,22 @@ export default Backbone.View.extend({
 
   render() {
     const { $el } = this;
-    this.properties = [];
+    this.clearItems();
     const fragment = document.createDocumentFragment();
     this.collection.each(model => this.add(model, fragment));
     $el.empty();
     $el.append(fragment);
     $el.attr('class', `${this.pfx}properties`);
     return this;
+  },
+
+  remove() {
+    Backbone.View.prototype.remove.apply(this, arguments);
+    this.clearItems();
+  },
+
+  clearItems() {
+    this.properties.forEach(item => item.remove());
+    this.properties = [];
   }
 });