better click handling on draggable items

diff --git a/resources/js/components/tracker/Canvas.js b/resources/js/components/tracker/Canvas.js
index 1258776809c000152abb72187398cf62e46f6b3b..89339abb346eedcebbb870d7e3044bac2705bf29 100644 (file)
--- 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();