From: Daniel Karbach <daniel.karbach@localhorst.tv>
Date: Sat, 20 Apr 2024 10:26:50 +0000 (+0200)
Subject: better click handling on draggable items
X-Git-Url: https://git.localhorst.tv/?a=commitdiff_plain;h=fee2a910a23392383d7178e3fcb137c13fbc7add;p=alttp.git

better click handling on draggable items
---

diff --git a/resources/js/components/tracker/Canvas.js b/resources/js/components/tracker/Canvas.js
index 1258776..89339ab 100644
--- a/resources/js/components/tracker/Canvas.js
+++ b/resources/js/components/tracker/Canvas.js
@@ -67,22 +67,21 @@ const Canvas = () => {
 		const bbox = canvas.select('.background');
 		const start = { x: 0, y: 0 };
 		const onStart = function (e) {
-			const bounds = bbox.node().getBoundingClientRect();
 			start.x = e.x;
 			start.y = e.y;
-			setDragging({
-				icon: this.dataset['icon'],
-				x: (e.x - bounds.x) / bounds.width,
-				y: (e.y - bounds.y) / bounds.height,
-			});
 		};
 		const onDrag = function (e) {
 			const bounds = bbox.node().getBoundingClientRect();
-			setDragging({
-				icon: this.dataset['icon'],
-				x: (e.x - bounds.x) / bounds.width,
-				y: (e.y - bounds.y) / bounds.height,
-			});
+			const distance = Math.max(Math.abs(e.x - start.x), Math.abs(e.y - start.y));
+			if (distance > 5) {
+				setDragging({
+					icon: this.dataset['icon'],
+					x: (e.x - bounds.x) / bounds.width,
+					y: (e.y - bounds.y) / bounds.height,
+				});
+			} else {
+				setDragging(null);
+			}
 		};
 		const onEnd = function (e) {
 			const bounds = bbox.node().getBoundingClientRect();