From 6d47ab05c180e1911ba6560f019de8d15699aa72 Mon Sep 17 00:00:00 2001
From: schroda <50052685+schroda@users.noreply.github.com>
Date: Sun, 2 Feb 2025 01:44:43 +0100
Subject: [PATCH] Improve mouse drag detection

Ignore mouse movements in directions where the element does not have a content overflow and thus, scrolling is not possible
---
 src/modules/core/hooks/useMouseDragScroll.tsx | 25 ++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/src/modules/core/hooks/useMouseDragScroll.tsx b/src/modules/core/hooks/useMouseDragScroll.tsx
index 895e8be8..86ca867d 100644
--- a/src/modules/core/hooks/useMouseDragScroll.tsx
+++ b/src/modules/core/hooks/useMouseDragScroll.tsx
@@ -144,7 +144,27 @@ export const useMouseDragScroll = (
             }
         };
 
+        let isHandlingMouseMoveEvents = false;
+        const shouldStartHandlingMouseMoveEvents = (e: MouseEvent) => {
+            if (isHandlingMouseMoveEvents) {
+                return true;
+            }
+
+            const hasScrollBar = [element.clientWidth >= window.innerWidth, element.clientHeight >= window.innerHeight];
+            const didPosChange = [
+                Math.abs(previousClickPosX.current[LATEST] - e.pageX) > 0,
+                Math.abs(previousClickPosY.current[LATEST] - e.pageY) > 0,
+            ];
+
+            return (hasScrollBar[X] && didPosChange[X]) || (hasScrollBar[Y] && didPosChange[Y]);
+        };
+
         const handleMouseMove = (e: MouseEvent) => {
+            if (!shouldStartHandlingMouseMoveEvents(e)) {
+                return;
+            }
+
+            isHandlingMouseMoveEvents = true;
             setIsDragging(true);
 
             previousClickPosX.current = [...(previousClickPosX.current.slice(1) as [number, number]), e.pageX];
@@ -164,7 +184,10 @@ export const useMouseDragScroll = (
             element.removeEventListener('mousemove', handleMouseMove);
             element.removeEventListener('mouseup', handleMouseUp);
 
-            setTimeout(() => setIsDragging(false), 0);
+            setTimeout(() => {
+                isHandlingMouseMoveEvents = false;
+                setIsDragging(false);
+            }, 0);
 
             scrollAtT0.current = [element.scrollLeft, element.scrollTop];
             inertiaTimeInterval.current = setInterval(inertiaMove, 16);