Retrive local toolbars in SelectComponent

src/canvas/index.js

@@ -168,8 +168,15 @@ export default () => {
      * @return {HTMLElement}
      * @private
      */
-    getToolsEl() {
-      return CanvasView.toolsEl;
+    getToolsEl(compView) {
+      let result = CanvasView.toolsEl;
+      const frameView = compView && compView._getFrame();
+
+      if (frameView) {
+        result = frameView.getToolsEl();
+      }
+
+      return result;
     },
 
     /**

src/canvas/view/FrameView.js

@@ -24,7 +24,10 @@ export default Backbone.View.extend({
   initialize(o) {
     bindAll(this, 'updateOffset');
     const { model } = this;
-    this.config = o.config || {};
+    this.config = {
+      ...(o.config || {}),
+      frameView: this
+    };
     this.ppfx = this.config.pStylePrefix || '';
     this.em = this.config.em;
     this.listenTo(model, 'change:head', this.updateHead);
@@ -116,6 +119,11 @@ export default Backbone.View.extend({
     return this.jsContainer;
   },
 
+  getToolsEl() {
+    const { frameWrapView } = this.config;
+    return frameWrapView && frameWrapView.elTools;
+  },
+
   remove() {
     Backbone.View.prototype.remove.apply(this, arguments);
   },

src/canvas/view/FrameWrapView.js

@@ -7,7 +7,10 @@ export default Backbone.View.extend({
   initialize(opts = {}, conf = {}) {
     bindAll(this, 'onScroll', 'frameLoaded');
     const { model } = this;
-    const config = opts.config || conf;
+    const config = {
+      ...(opts.config || conf),
+      frameWrapView: this
+    };
     const { canvasView } = config;
     this.cv = canvasView;
     this.config = config;
@@ -70,7 +73,7 @@ export default Backbone.View.extend({
     `
     );
     this.elTools = elTools;
-    cv.toolsWrapper.appendChild(elTools);
+    cv.toolsWrapper.appendChild(elTools); // TODO remove on frame remove
     frame.on('loaded', this.frameLoaded);
 
     return this;

src/commands/view/SelectComponent.js

@@ -1,6 +1,12 @@
 import Backbone from 'backbone';
 import { bindAll, isElement, isUndefined, debounce } from 'underscore';
-import { on, off, getUnitFromValue, isTaggableNode } from 'utils/mixins';
+import {
+  on,
+  off,
+  getUnitFromValue,
+  isTaggableNode,
+  getViewEl
+} from 'utils/mixins';
 import ToolbarView from 'dom_components/view/ToolbarView';
 import Toolbar from 'dom_components/model/Toolbar';
 
@@ -101,17 +107,59 @@ export default {
 
     if (el) {
       const pos = this.getElementPos(el);
-      result = { el, pos };
+      result = { el, pos, component, view: getViewEl(el) };
       this.updateToolsLocal(el, pos);
     }
 
     this.elHovered = result;
   },
 
+  /**
+   * Say what to do after the component was selected
+   * @param {Object}  e
+   * @param {Object}  el
+   * @private
+   * */
+  onSelect(component) {
+    const prevComp = this.getElSelected().component;
+    if (component && component === prevComp) return;
+    console.log('onSelect', component);
+
+    const el = component && component.getEl();
+    let result = {};
+
+    if (el) {
+      const pos = this.getElementPos(el);
+      result = { el, pos, component, view: getViewEl(el) };
+    }
+
+    this.elSelected = result;
+    this.updateToolsGlobal();
+
+    // // Get the selected model directly from the Editor as the event might
+    // // be triggered manually without the model
+    // const model = this.em.getSelected();
+    // const el = model && model.getEl();
+    // this.updateToolbar(model);
+
+    // if (el) {
+    //   this.showFixedElementOffset(el);
+    //   this.hideElementOffset();
+    //   this.hideHighlighter();
+    //   this.initResize(el);
+    // } else {
+    //   this.editor.stopCommand('resize');
+    // }
+  },
+
   getElHovered() {
     return this.elHovered || {};
   },
 
+  getElSelected() {
+    return this.elSelected || {};
+  },
+
   /**
    * Out command
    * @param {Object}  e
@@ -346,29 +394,6 @@ export default {
     hlStyle.display = 'block';
   },
 
-  /**
-   * Say what to do after the component was selected
-   * @param {Object}  e
-   * @param {Object}  el
-   * @private
-   * */
-  onSelect() {
-    // Get the selected model directly from the Editor as the event might
-    // be triggered manually without the model
-    const model = this.em.getSelected();
-    const el = model && model.getEl();
-    this.updateToolbar(model);
-
-    if (el) {
-      this.showFixedElementOffset(el);
-      this.hideElementOffset();
-      this.hideHighlighter();
-      this.initResize(el);
-    } else {
-      this.editor.stopCommand('resize');
-    }
-  },
-
   /**
    * Init resizer on the element if possible
    * @param  {HTMLElement|Component} elem
@@ -630,7 +655,7 @@ export default {
    * @param {Object} pos
    */
   updateToolsLocal() {
-    const { el, pos } = this.getElHovered();
+    const { el, pos, view } = this.getElHovered();
 
     if (!el) {
       this.lastHovered = 0;
@@ -647,7 +672,7 @@ export default {
     }
 
     const unit = 'px';
-    const { style } = this.canvas.getToolsEl();
+    const { style } = this.canvas.getToolsEl(view);
     const topOff = this.frameRect(el, 1, pos);
     const leftOff = this.frameRect(el, 0, pos);
 
@@ -662,18 +687,41 @@ export default {
   },
 
   updateToolsGlobal() {
-    const { resizer, em } = this;
-    const model = em.getSelected();
-    const el = model && model.getEl();
-    if (!el) return;
+    const { el, pos, component } = this.getElSelected();
 
-    if (el && this.elSelected !== el) {
-      this.elSelected = el;
-      const pos = this.getElementPos(el);
+    if (!el) {
+      this.lastSelected = 0;
+      return;
+    }
+
+    const isNewEl = this.lastSelected !== el;
+    console.log('updateToolsGlobal', el);
+    if (isNewEl) {
+      console.log('updateToolsGlobal UPDATE toolbar position');
+      this.lastSelected = el;
+      this.updateToolbar(component);
       this.updateToolbarPos(el, pos);
-      this.showFixedElementOffset(el, pos);
-      resizer && resizer.updateContainer();
     }
+
+    const unit = 'px';
+    const { style } = this.canvas.getToolsEl();
+    const topOff = this.frameRect(el, 1, pos);
+    const leftOff = this.frameRect(el, 0, pos);
+    style.top = topOff + unit;
+    style.left = leftOff + unit;
+
+    // const { resizer, em } = this;
+    // const model = em.getSelected();
+    // const el = model && model.getEl();
+    // if (!el) return;
+
+    // if (el && this.elSelected !== el) {
+    //   this.elSelected = el;
+    //   const pos = this.getElementPos(el);
+    //   this.updateToolbarPos(el, pos);
+    //   this.showFixedElementOffset(el, pos);
+    //   resizer && resizer.updateContainer();
+    // }
   },
 
   /**

src/dom_components/view/ComponentView.js

@@ -1,9 +1,10 @@
 import Backbone from 'backbone';
-import { isArray, isEmpty, each, keys } from 'underscore';
+import { isEmpty, each, keys } from 'underscore';
 import Components from '../model/Components';
 import ComponentsView from './ComponentsView';
 import Selectors from 'selector_manager/model/Selectors';
 import { replaceWith } from 'utils/dom';
+import { setViewEl } from 'utils/mixins';
 
 export default Backbone.View.extend({
   className() {
@@ -19,7 +20,7 @@ export default Backbone.View.extend({
     const config = opt.config || {};
     const em = config.em;
     const modelOpt = model.opt || {};
-    const { $el } = this;
+    const { $el, el } = this;
     const { draggableComponents } = config;
     this.opts = opt;
     this.modelOpt = modelOpt;
@@ -39,6 +40,7 @@ export default Backbone.View.extend({
     this.listenTo(model, 'change', this.handleChange);
     this.listenTo(model, 'active', this.onActive);
     $el.data('model', model);
+    setViewEl(el, this);
     model.view = this;
     model.views.push(this);
     this.initClasses();
@@ -373,15 +375,25 @@ export default Backbone.View.extend({
    * Recreate the element of the view
    */
   reset() {
-    const { el, model } = this;
-    const collection = model.components();
+    const { el } = this;
     this.el = '';
     this._ensureElement();
-    this.$el.data({ model, collection });
+    this._setData();
     replaceWith(el, this.el);
     this.render();
   },
 
+  _setData() {
+    const { model } = this;
+    const collection = model.components();
+    const view = this;
+    this.$el.data({ model, collection, view });
+  },
+
+  _getFrame() {
+    return this.config.frameView;
+  },
+
   /**
    * Render children components
    * @private

src/utils/mixins.js

@@ -183,6 +183,11 @@ const isEscKey = ev => getKeyCode(ev) === 27;
 
 const capitalize = str => str.charAt(0).toUpperCase() + str.substring(1);
 
+const getViewEl = el => el.__gjsv;
+const setViewEl = (el, view) => {
+  el.__gjsv = view;
+};
+
 export {
   on,
   off,
@@ -201,5 +206,7 @@ export {
   normalizeFloat,
   getPointerEvent,
   getUnitFromValue,
-  capitalize
+  capitalize,
+  getViewEl,
+  setViewEl
 };