From c5586233d7ce65e36e2bdaffc0ed931b954c53f5 Mon Sep 17 00:00:00 2001
From: Emil Sedgh <emilsedgh@kde.org>
Date: Mon, 4 Nov 2019 09:35:24 -0800
Subject: [PATCH] Calibrate the coordinates based on frame position.

Since the toolbar lives outside the canvas frame, the event's generated on it
have clientX and clientY relative to the page. This makes sure we consider
frame offset from the page.

Fixes #2207,#2372
---
 src/dom_components/view/ToolbarButtonView.js | 28 +++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/dom_components/view/ToolbarButtonView.js b/src/dom_components/view/ToolbarButtonView.js
index 164302e3f..6a1eb73e8 100644
--- a/src/dom_components/view/ToolbarButtonView.js
+++ b/src/dom_components/view/ToolbarButtonView.js
@@ -20,7 +20,33 @@ export default Backbone.View.extend({
   handleClick(event) {
     event.preventDefault();
     event.stopPropagation();
-    this.execCommand(event);
+
+    /*
+     * Since the toolbar lives outside the canvas frame, the event's
+     * generated on it have clientX and clientY relative to the page.
+     *
+     * This causes issues during events like dragging, where they depend
+     * on the clientX and clientY.
+     *
+     * This makes sure the offsets are calculated.
+     *
+     * More information on
+     * https://github.com/artf/grapesjs/issues/2372
+     * https://github.com/artf/grapesjs/issues/2207
+     */
+
+    const {
+      left,
+      top
+    } = this.editor.Canvas.getFrameEl().getBoundingClientRect();
+
+    const calibrated = {
+      ...event,
+      clientX: event.clientX - left,
+      clientY: event.clientY - top
+    };
+
+    this.execCommand(calibrated);
   },
 
   execCommand(event) {