Add onRender property to Frame

src/canvas/model/Frame.js

@@ -42,6 +42,12 @@ export default Backbone.Model.extend({
       this.set('styles', new CssRules(styles, modOpts));
   },
 
+  remove() {
+    this.view = 0;
+    const coll = this.collection;
+    return coll && coll.remove(this);
+  },
+
   getHead() {
     return [...this.get('head')];
   },

src/canvas/view/FrameView.js

@@ -15,7 +15,8 @@ export default Backbone.View.extend({
   tagName: 'iframe',
 
   attributes: {
-    allowfullscreen: 'allowfullscreen'
+    allowfullscreen: 'allowfullscreen',
+    'data-frame-el': true
   },
 
   initialize(o) {
@@ -137,7 +138,7 @@ export default Backbone.View.extend({
     const { root, model } = this;
     Backbone.View.prototype.remove.apply(this, arguments);
     root.remove();
-    model.view = 0;
+    model.remove();
   },
 
   startAutoscroll() {

src/canvas/view/FrameWrapView.js

@@ -14,7 +14,14 @@ export default Backbone.View.extend({
   },
 
   initialize(opts = {}, conf = {}) {
-    bindAll(this, 'onScroll', 'frameLoaded', 'updateOffset');
+    bindAll(
+      this,
+      'onScroll',
+      'frameLoaded',
+      'updateOffset',
+      'remove',
+      'startDrag'
+    );
     const { model } = this;
     const config = {
       ...(opts.config || conf),
@@ -135,14 +142,15 @@ export default Backbone.View.extend({
   },
 
   render() {
-    const { frame, $el, ppfx, cv, model } = this;
+    const { frame, $el, ppfx, cv, model, el } = this;
+    const { onRender } = model.attributes;
     frame.render();
     $el
       .empty()
       .attr({ class: `${ppfx}frame-wrapper` })
       .append(
         `
-      <div class="${ppfx}frame-wrapper__top gjs-two-color">
+      <div class="${ppfx}frame-wrapper__top gjs-two-color" data-frame-top>
         <div class="${ppfx}frame-wrapper__name" data-action-move>
           ${model.get('name') || ''}
         </div>
@@ -152,9 +160,9 @@ export default Backbone.View.extend({
           </div>
         </div>
       </div>
-      <div class="${ppfx}frame-wrapper__right"></div>
-      <div class="${ppfx}frame-wrapper__left"></div>
-      <div class="${ppfx}frame-wrapper__bottom"></div>
+      <div class="${ppfx}frame-wrapper__right" data-frame-right></div>
+      <div class="${ppfx}frame-wrapper__left" data-frame-left></div>
+      <div class="${ppfx}frame-wrapper__bottom" data-frame-bottom></div>
       `
       )
       .append(frame.el);
@@ -192,6 +200,18 @@ export default Backbone.View.extend({
     );
     this.elTools = elTools;
     cv.toolsWrapper.appendChild(elTools); // TODO remove on frame remove
+    onRender &&
+      onRender({
+        el,
+        elTop: el.querySelector('[data-frame-top]'),
+        elRight: el.querySelector('[data-frame-right]'),
+        elBottom: el.querySelector('[data-frame-bottom]'),
+        elLeft: el.querySelector('[data-frame-left]'),
+        frame: model,
+        frameWrapperView: this,
+        remove: this.remove,
+        startDrag: this.startDrag
+      });
     model.on('loaded', this.frameLoaded);
     return this;
   }