better click handling on draggable items

[alttp.git] / resources / js / components / tracker / Canvas.js

diff --git a/resources/js/components/tracker/Canvas.js b/resources/js/components/tracker/Canvas.js
index fab194219c7d56ec9dee81d34c27b5cce9a2c340..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();
@@ -147,19 +146,16 @@ const Canvas = () => {
                </g>
                <g className="pins">
                        {pins.map(pin =>
-                               <g
+                               <ToggleIcon
                                        key={pin.id}
+                                       className={`map-pin map-pin-${pin.id}`}
+                                       controller={ToggleIcon.pinController(pin, removePin)}
+                                       icons={[pin.icon]}
+                                       svg
                                        transform={
                                                `translate(${pin.x * layout.width} ${pin.y * layout.height}) scale(3)`
                                        }
-                               >
-                                       <ToggleIcon
-                                               className={`map-pin map-pin-${pin.id}`}
-                                               controller={ToggleIcon.pinController(pin, removePin)}
-                                               icons={[pin.icon]}
-                                               svg
-                                       />
-                               </g>
+                               />
                        )}
                </g>
                {dragging ?