From fee2a910a23392383d7178e3fcb137c13fbc7add Mon Sep 17 00:00:00 2001 From: Daniel Karbach Date: Sat, 20 Apr 2024 12:26:50 +0200 Subject: [PATCH] better click handling on draggable items --- resources/js/components/tracker/Canvas.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) 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(); -- 2.39.2