Add FrameWrapView

src/canvas/index.js

@@ -68,7 +68,8 @@ export default () => {
     init(config = {}) {
       c = {
         ...defaults,
-        ...config
+        ...config,
+        module: this
       };
 
       this.em = c.em;

src/canvas/view/CanvasView.js

@@ -37,6 +37,7 @@ export default Backbone.View.extend({
     this.ppfx = this.config.pStylePrefix || '';
     this.className = this.config.stylePrefix + 'canvas';
     this.listenTo(this.em, 'change:canvasOffset', this.clearOff);
+    this.listenTo(this.em, 'frame:scroll', this.onFrameScroll);
     this.listenTo(model, 'change:zoom change:x change:y', this.updateFrames);
     this.toggleListeners(1);
     this.frame = new FrameView({
@@ -125,12 +126,12 @@ export default Backbone.View.extend({
    * Update tools position
    * @private
    */
-  onFrameScroll() {
-    var u = 'px';
-    var body = this.frame.el.contentDocument.body;
+  onFrameScroll({ body = {} } = {}) {
+    const u = 'px';
+    const bodyEl = this.frame.el.contentDocument.body;
     const zoom = this.getZoom();
-    this.toolsEl.style.top = '-' + body.scrollTop * zoom + u;
-    this.toolsEl.style.left = '-' + body.scrollLeft * zoom + u;
+    this.toolsEl.style.top = '-' + bodyEl.scrollTop * zoom + u;
+    this.toolsEl.style.left = '-' + bodyEl.scrollLeft * zoom + u;
     this.em.trigger('canvasScroll');
   },
 
@@ -498,15 +499,9 @@ export default Backbone.View.extend({
       }
     }
 
-    // Render all frames
-    const frames = new FramesView({
-      collection: model.get('frames'),
-      config: { ...config, renderContent: 1 }
-    });
-    frames.render();
-    $frames.append(frames.el);
-
-    $el.find('[data-tools]').append(`
+    const toolsWrp = $el.find('[data-tools]');
+    this.toolsWrapper = toolsWrp.get(0);
+    toolsWrp.append(`
       <div id="${ppfx}tools" style="pointer-events:none">
         <div class="${ppfx}highlighter"></div>
         <div class="${ppfx}badge"></div>
@@ -531,6 +526,19 @@ export default Backbone.View.extend({
     this.fixedOffsetEl = el.querySelector(`.${ppfx}offset-fixed-v`);
     this.toolsEl = toolsEl;
     this.el.className = this.className;
+
+    // Render all frames
+    const frames = new FramesView({
+      collection: model.get('frames'),
+      config: {
+        ...config,
+        renderContent: 1,
+        canvasView: this
+      }
+    });
+    frames.render();
+    $frames.append(frames.el);
+
     return this;
   }
 });

src/canvas/view/FrameView.js

@@ -84,12 +84,16 @@ export default Backbone.View.extend({
     this.$el.off(motionsEv, this.updateOffset);
   },
 
+  getEl() {
+    return this.el;
+  },
+
   getWindow() {
-    return this.$el.get(0).contentWindow;
+    return this.getEl().contentWindow;
   },
 
   getDoc() {
-    return this.$el.get(0).contentDocument;
+    return this.getEl().contentDocument;
   },
 
   getHead() {
@@ -101,7 +105,7 @@ export default Backbone.View.extend({
   },
 
   getWrapper() {
-    return this.$el.contents().find('body > div');
+    return this.getBody().querySelector('[data-gjs-type=wrapper]');
   },
 
   getJsContainer() {
@@ -112,6 +116,10 @@ export default Backbone.View.extend({
     return this.jsContainer;
   },
 
+  remove() {
+    Backbone.View.prototype.remove.apply(this, arguments);
+  },
+
   render() {
     const { el, $el, ppfx, config } = this;
     $el.attr({ class: ppfx + 'frame' });
@@ -240,7 +248,6 @@ export default Backbone.View.extend({
     append(body, new CssRulesView({ collection: styles, config }).render().el);
     append(body, this.getJsContainer());
     // em.trigger('loaded'); // I need to manage only the first one maybe
-    // win.onscroll = this.onFrameScroll; // TODO
     this.updateOffset(); // TOFIX (check if I need it)
 
     // Avoid some default behaviours
@@ -263,5 +270,7 @@ export default Backbone.View.extend({
         );
       })
     );
+
+    this.trigger('loaded');
   }
 });

src/canvas/view/FramesView.js

@@ -1,8 +1,8 @@
 import DomainViews from 'domain_abstract/view/DomainViews';
-import FrameView from './FrameView';
+import FrameWrapView from './FrameWrapView';
 
 export default DomainViews.extend({
-  itemView: FrameView,
+  itemView: FrameWrapView,
 
   init() {
     this.listenTo(this.collection, 'reset', this.render);

src/commands/view/SelectComponent.js

@@ -17,9 +17,6 @@ export default {
     this.startSelectComponent();
     const { em } = this.config;
     showOffsets = 1;
-
-    em.on('component:update', this.updateAttached, this);
-    em.on('change:canvasOffset', this.updateAttached, this);
   },
 
   /**
@@ -55,8 +52,10 @@ export default {
       methods[method](win, 'scroll resize', this.onFrameScroll);
       em[method]('component:toggled', this.onSelect, this);
       em[method]('change:componentHovered', this.onHovered, this);
+      em[method]('component:update', this.updateAttached, this);
+      em[method]('change:canvasOffset', this.updateAttached, this);
     };
-    trigger(win, body);
+    trigger(win, body); // TODO remove
     em.get('Canvas')
       .getFrames()
       .forEach(frame => {
@@ -72,10 +71,11 @@ export default {
    */
   onHover(e) {
     e.stopPropagation();
-    let trg = e.target;
-    let $el = $(trg);
+    const trg = e.target;
+    const $el = $(trg);
     let model = $el.data('model');
 
+    // Get first valid model
     if (!model) {
       let parent = $el.parent();
       while (!model && parent.length > 0) {
@@ -90,6 +90,7 @@ export default {
       this.updateAttached();
     }
 
+    // Get first valid hoverable model
     if (model && !model.get('hoverable')) {
       let parent = model && model.parent();
       while (parent && !parent.get('hoverable')) parent = parent.parent();
@@ -614,7 +615,7 @@ export default {
    * On frame scroll callback
    * @private
    */
-  onFrameScroll() {
+  onFrameScroll(ev) {
     const el = this.cacheEl;
 
     if (el) {
@@ -684,20 +685,18 @@ export default {
   run(editor) {
     this.editor = editor && editor.get('Editor');
     this.enable();
-    this.onSelect();
   },
 
   stop(ed, sender, opts = {}) {
     const { em, editor } = this;
+    const hovered = em.getHovered();
     this.stopSelectComponent();
     !opts.preserveSelected && em.setSelected(null);
+    if (!hovered) return;
     this.clean();
     this.onOut();
     this.hideFixedElementOffset();
     this.canvas.getToolbarEl().style.display = 'none';
     editor && editor.stopCommand('resize');
-
-    em.off('component:update', this.updateAttached, this);
-    em.off('change:canvasOffset', this.updateAttached, this);
   }
 };

src/dom_components/model/Component.js

@@ -185,6 +185,7 @@ const Component = Backbone.Model.extend(Styleable).extend(
       this.listenTo(this, 'change:tagName', this.tagUpdated);
       this.listenTo(this, 'change:attributes', this.attrUpdated);
       this.set('status', '');
+      this.views = [];
 
       // Register global updates for collection properties
       ['classes', 'traits', 'components'].forEach(name => {

src/dom_components/view/ComponentView.js

@@ -40,6 +40,7 @@ export default Backbone.View.extend({
     this.listenTo(model, 'active', this.onActive);
     $el.data('model', model);
     model.view = this;
+    model.views.push(this);
     this.initClasses();
     this.initComponents({ avoidRender: 1 });
     this.events = {

src/editor/model/Editor.js

@@ -362,6 +362,10 @@ export default Backbone.Model.extend({
     this.set('componentHovered', model, opts);
   },
 
+  getHovered() {
+    return this.get('componentHovered');
+  },
+
   /**
    * Set components inside editor's canvas. This method overrides actual components
    * @param {Object|string} components HTML string or components model

src/styles/scss/_gjs_canvas.scss

@@ -161,7 +161,7 @@ $guide_pad: 5px;
     outline: 3px solid $colorBlue;
   }
 
-  ##{$app-prefix}tools {
+  ##{$app-prefix}tools, .#{$app-prefix}tools {
     width: 100%;
     height: 100%;
     position: absolute;

src/utils/dom.js

@@ -33,9 +33,15 @@ export const appendAtIndex = (parent, child, index) => {
 
 export const append = (parent, child) => appendAtIndex(parent, child);
 
-export const createEl = (tag, attrs = '') => {
+export const createEl = (tag, attrs = '', child) => {
   const el = document.createElement(tag);
   attrs && each(attrs, (value, key) => el.setAttribute(key, value));
+
+  if (child) {
+    if (isString(child)) el.innerHTML = child;
+    else el.appendChild(child);
+  }
+
   return el;
 };