diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index a69b08a20..11fdb68ca 100644 --- a/src/canvas/view/CanvasView.js +++ b/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; } diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index 8986ebb42..bf308db25 100644 --- a/src/canvas/view/FrameView.js +++ b/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 || ''} ` ); - 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({ diff --git a/src/canvas/view/FrameWrapView.js b/src/canvas/view/FrameWrapView.js index 29e78936c..d36224e5f 100644 --- a/src/canvas/view/FrameWrapView.js +++ b/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; }, diff --git a/src/canvas/view/FramesView.js b/src/canvas/view/FramesView.js index 22917fa84..260be9245 100644 --- a/src/canvas/view/FramesView.js +++ b/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; diff --git a/src/domain_abstract/view/DomainViews.js b/src/domain_abstract/view/DomainViews.js index d7c3e228e..2e2f03298 100644 --- a/src/domain_abstract/view/DomainViews.js +++ b/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() {