diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js index 1b8a58cda..949d84c1b 100644 --- a/src/canvas/view/CanvasView.js +++ b/src/canvas/view/CanvasView.js @@ -9,6 +9,7 @@ import { getElRect } from 'utils/mixins'; import FrameView from './FrameView'; +import FramesView from './FramesView'; const $ = Backbone.$; let timerZoom; @@ -474,7 +475,7 @@ export default Backbone.View.extend({ }, render() { - const { el, $el, ppfx, model } = this; + const { el, $el, ppfx, model, config } = this; this.wrapper = model.get('wrapper'); $el.html(this.template()); const $frames = $el.find('[data-frames]'); @@ -490,6 +491,15 @@ export default Backbone.View.extend({ this.renderScripts(); // will call renderBody later } } + + // Render all frames + const frames = new FramesView({ + collection: model.get('frames'), + config + }); + frames.render(); + $frames.append(frames.el); + $el.find('[data-tools]').append(`
diff --git a/src/canvas/view/FrameView.js b/src/canvas/view/FrameView.js index 66dd9f6b3..7ae53ed6a 100644 --- a/src/canvas/view/FrameView.js +++ b/src/canvas/view/FrameView.js @@ -24,13 +24,13 @@ export default Backbone.View.extend({ this.updatePos(); }, - updatePos() { + updatePos(md) { const { model, el } = this; const { x, y } = model.attributes; const { style } = el; style.left = isNaN(x) ? x : `${x}px`; style.top = isNaN(y) ? y : `${y}px`; - this.updateOffset(); + md && this.updateOffset(); }, /** diff --git a/src/canvas/view/FramesView.js b/src/canvas/view/FramesView.js index c66e3715f..dae964557 100644 --- a/src/canvas/view/FramesView.js +++ b/src/canvas/view/FramesView.js @@ -4,8 +4,13 @@ import FrameView from './FrameView'; export default DomainViews.extend({ itemView: FrameView, - initialize(opts) { - this.config = { editor: opts.editor || '' }; + init() { this.listenTo(this.collection, 'reset', this.render); + }, + + onRender() { + const { config, $el } = this; + const { em } = config; + em && $el.attr({ class: `${em.getConfig('stylePrefix')}frames` }); } }); diff --git a/src/domain_abstract/view/DomainViews.js b/src/domain_abstract/view/DomainViews.js index 2db8142bd..1ce8e9d7e 100644 --- a/src/domain_abstract/view/DomainViews.js +++ b/src/domain_abstract/view/DomainViews.js @@ -9,10 +9,13 @@ export default Backbone.View.extend({ itemType: 'type', - initialize(opts, config) { - this.config = config || {}; + initialize(opts = {}, config) { + this.config = config || opts.config || {}; + this.init(); }, + init() {}, + /** * Add new model to the collection * @param {Model} model @@ -70,6 +73,9 @@ export default Backbone.View.extend({ }, this); this.$el.append(frag); + this.onRender(); return this; - } + }, + + onRender() {} });