From 8724ae92d8b29b57bcbce3020a65ed1d1b7667cb Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sat, 1 Feb 2020 19:05:53 +0100
Subject: [PATCH] Fix global tools position on frame resize

---
 src/canvas/view/FrameWrapView.js     |  2 +-
 src/commands/view/SelectComponent.js | 26 +++++++++++++++++++++++---
 2 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/canvas/view/FrameWrapView.js b/src/canvas/view/FrameWrapView.js
index 6f564c4c4..1a961e19c 100644
--- a/src/canvas/view/FrameWrapView.js
+++ b/src/canvas/view/FrameWrapView.js
@@ -81,7 +81,7 @@ export default Backbone.View.extend({
     const { em, $el, frame } = this;
     em.runDefault({ preserveSelected: 1 });
     $el.removeClass(this.classAnim);
-    frame._emitResized();
+    frame.model._emitResized();
   }),
 
   updatePos(md) {
diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
index 35941e718..0194c80df 100644
--- a/src/commands/view/SelectComponent.js
+++ b/src/commands/view/SelectComponent.js
@@ -12,7 +12,26 @@ import Toolbar from 'dom_components/model/Toolbar';
 
 const $ = Backbone.$;
 let showOffsets;
-
+/**
+ * This command is responsible for show selecting components and displaying
+ * all the necessary tools around (component toolbar, badge, highlight box, etc.)
+ *
+ * The command manages different boxes to display tools and when something in
+ * the canvas is updated, the command triggers the appropriate method to update
+ * their position (across multiple frames/components):
+ * - Global Tools (updateToolsGlobal)
+ * This box contains tools intended to be displayed only on ONE component per time,
+ * like Component Toolbar (updated by updateToolbar/updateToolbarPos), this means
+ * you won't be able to see more than one Component Toolbar (even with multiple
+ * frames or multiple selected components)
+ * - Local Tools (updateToolsLocal)
+ * Each frame in the canvas has its own local box, so we're able to see more than
+ * one active container at the same time. When you put a mouse over an element
+ * you can see stuff like the highlight box, badge, margins/paddings offsets, etc.
+ * so those elements are inside the Local Tools box
+ *
+ *
+ */
 export default {
   init(o) {
     bindAll(this, 'onHover', 'onOut', 'onClick', 'onFrameScroll');
@@ -53,7 +72,7 @@ export default {
       methods[method](body, 'mouseover', this.onHover);
       methods[method](body, 'mouseleave', this.onOut);
       methods[method](body, 'click touchend', this.onClick);
-      methods[method](win, 'scroll resize', this.onFrameScroll);
+      methods[method](win, 'scroll', this.onFrameScroll);
     };
     em[method]('component:toggled', this.onSelect, this);
     em[method]('change:componentHovered', this.onHovered, this);
@@ -104,8 +123,8 @@ export default {
   },
 
   onFrameResized() {
-    console.log('onFrameResized');
     this.updateToolsLocal({}); // clear last cached component
+    this.updateGlobalPos();
   },
 
   onHovered(em, component) {
@@ -159,6 +178,7 @@ export default {
 
   updateGlobalPos() {
     const sel = this.getElSelected();
+    if (!sel.el) return;
     sel.pos = this.getElementPos(sel.el);
     this.updateToolsGlobal();
   },