Render frames

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(`
       <div id="${ppfx}tools" style="pointer-events:none">
         <div class="${ppfx}highlighter"></div>

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();
   },
 
   /**

src/canvas/view/FramesView.js

@@ -4,8 +4,13 @@ import FrameView from './FrameView';
 export default DomainViews.extend({
   itemView: FrameView,
 
-  initialize(opts) {
+  init() {
-    this.config = { editor: opts.editor || '' };
     this.listenTo(this.collection, 'reset', this.render);
+  },
+
+  onRender() {
+    const { config, $el } = this;
+    const { em } = config;
+    em && $el.attr({ class: `${em.getConfig('stylePrefix')}frames` });
   }
 });

src/domain_abstract/view/DomainViews.js

@@ -9,10 +9,13 @@ export default Backbone.View.extend({
 
   itemType: 'type',
 
-  initialize(opts, config) {
+  initialize(opts = {}, config) {
-    this.config = 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() {}
 });