From 7edd5b42fbbc46c515e0c0bd458ea30f33c314f7 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 8 Apr 2020 03:34:13 +0200 Subject: [PATCH] Fix style layers memory leaks --- src/style_manager/view/LayerView.js | 17 +++++++++-------- src/style_manager/view/LayersView.js | 17 +++++++++++++++-- src/style_manager/view/PropertiesView.js | 12 +++++++++++- 3 files changed, 35 insertions(+), 11 deletions(-) diff --git a/src/style_manager/view/LayerView.js b/src/style_manager/view/LayerView.js index 27cf0a62e..d612858eb 100644 --- a/src/style_manager/view/LayerView.js +++ b/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; diff --git a/src/style_manager/view/LayersView.js b/src/style_manager/view/LayersView.js index b499ea31e..797c86b8e 100644 --- a/src/style_manager/view/LayersView.js +++ b/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 = []; } }); diff --git a/src/style_manager/view/PropertiesView.js b/src/style_manager/view/PropertiesView.js index 008eddb04..7014d62a8 100644 --- a/src/style_manager/view/PropertiesView.js +++ b/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 = []; } });