From bc96577a5f65e7ab08cf011d24895109015bb95b Mon Sep 17 00:00:00 2001
From: Artur Arseniev <artur.catch@hotmail.it>
Date: Sat, 1 Jun 2019 17:09:19 +0200
Subject: [PATCH] Fix toolbar position outside of the canvas

---
 src/canvas/index.js                  |  4 +++-
 src/canvas/view/CanvasView.js        |  4 +++-
 src/commands/view/SelectComponent.js | 15 +++++++++------
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/canvas/index.js b/src/canvas/index.js
index c15482af2..04f5a9d9d 100644
--- a/src/canvas/index.js
+++ b/src/canvas/index.js
@@ -364,7 +364,9 @@ module.exports = () => {
         targetWidth: target.offsetWidth,
         targetHeight: target.offsetHeight,
         canvasTop: canvasPos.top,
-        canvasLeft: canvasPos.left
+        canvasLeft: canvasPos.left,
+        canvasWidth: canvasPos.width,
+        canvasHeight: canvasPos.height
       };
 
       // In this way I can catch data and also change the position strategy
diff --git a/src/canvas/view/CanvasView.js b/src/canvas/view/CanvasView.js
index 60612a8f4..4476757a3 100644
--- a/src/canvas/view/CanvasView.js
+++ b/src/canvas/view/CanvasView.js
@@ -413,7 +413,9 @@ module.exports = Backbone.View.extend({
 
     return {
       top: fo.top + bEl.scrollTop * zoom - co.top,
-      left: fo.left + bEl.scrollLeft * zoom - co.left
+      left: fo.left + bEl.scrollLeft * zoom - co.left,
+      width: co.width,
+      height: co.height
     };
   },
 
diff --git a/src/commands/view/SelectComponent.js b/src/commands/view/SelectComponent.js
index 613a36151..da50f3425 100644
--- a/src/commands/view/SelectComponent.js
+++ b/src/commands/view/SelectComponent.js
@@ -561,14 +561,17 @@ module.exports = {
         pos.top = pos.elementTop + pos.elementHeight;
       }
 
-      // Check if not outside of the canvas
-      if (pos.left < pos.canvasLeft) {
-        pos.left = pos.canvasLeft;
+      // Check left position of the toolbar
+      const elRight = pos.elementLeft + pos.elementWidth;
+      let left = elRight - pos.targetWidth;
+
+      if (elRight > pos.canvasWidth) {
+        left -= elRight - pos.canvasWidth;
       }
 
-      var leftPos = pos.left + pos.elementWidth - pos.targetWidth;
-      toolbarStyle.top = pos.top + unit;
-      toolbarStyle.left = (leftPos < 0 ? 0 : leftPos) + unit;
+      left = left < 0 ? 0 : left;
+      toolbarStyle.top = `${pos.top}${unit}`;
+      toolbarStyle.left = `${left}${unit}`;
       toolbarStyle.opacity = '';
     }
   },