From 251e62cd9d2a11c065f2a2995eb255cb3dd3564c Mon Sep 17 00:00:00 2001
From: Gusted <williamzijl7@hotmail.com>
Date: Fri, 2 Jul 2021 20:13:45 +0200
Subject: [PATCH] Fix calculation code

---
 js/dlg/message-box.css |  7 ++-----
 js/dlg/message-box.js  | 27 +++++++++------------------
 2 files changed, 11 insertions(+), 23 deletions(-)

diff --git a/js/dlg/message-box.css b/js/dlg/message-box.css
index 6a788b27..0d70295d 100644
--- a/js/dlg/message-box.css
+++ b/js/dlg/message-box.css
@@ -17,6 +17,8 @@
 }
 
 #message-box > div {
+  top: 3rem;
+  right: 3rem;
   min-width: 10rem;
   max-width: 50vw;
   min-height: 5rem;
@@ -30,11 +32,6 @@
   -moz-user-select: text;
 }
 
-#message-box > div:not(.dragged) {
-  top: 3rem;
-  right: 3rem;
-}
-
 #message-box.fadeout {
   animation: fadeout .25s ease-in-out;
 }
diff --git a/js/dlg/message-box.js b/js/dlg/message-box.js
index 2192060d..16f8a3e7 100644
--- a/js/dlg/message-box.js
+++ b/js/dlg/message-box.js
@@ -70,8 +70,9 @@ messageBox.show = async ({
 
   function initOwnListeners() {
     let listening = false;
+    let offsetX = 0;
+    let offsetY = 0;
     let clickX, clickY;
-    let positionX, positionY;
     messageBox.listeners = {
       closeIcon() {
         resolveWith({button: -1});
@@ -115,20 +116,8 @@ messageBox.show = async ({
           window.on('mousemove', messageBox.listeners.mouseMove, {passive: true});
           listening = true;
         }
-        clickX = event.clientX;
-        clickY = event.clientY;
-
-        const element = $('#message-box > div');
-        // Due to how transform and translate work we cannot rely
-        // on the offsets and must fallback to getBoundingClientRect
-        if (element.classList.contains('dragged')) {
-          const bounds = element.getBoundingClientRect();
-          positionX = bounds.left;
-          positionY = bounds.top;
-        } else {
-          positionX = element.offsetLeft;
-          positionY = element.offsetTop;
-        }
+        clickX = event.clientX - offsetX;
+        clickY = event.clientY - offsetY;
       },
       mouseUp(event) {
         if (event.button !== 0) {
@@ -139,12 +128,14 @@ messageBox.show = async ({
         listening = false;
       },
       mouseMove(event) {
-        const x = positionX + event.clientX - clickX;
-        const y = positionY + event.clientY - clickY;
+        const x = event.clientX - clickX;
+        const y = event.clientY - clickY;
+
+        offsetX = x;
+        offsetY = y;
 
         const element = $('#message-box > div');
         element.style.transform = `translateX(${x}px) translateY(${y}px)`;
-        element.classList.add('dragged');
       },
     };
   }