diff --git a/src/components/map/Map.js b/src/components/map/Map.js index b81d7cb..3cdf25b 100644 --- a/src/components/map/Map.js +++ b/src/components/map/Map.js @@ -221,15 +221,13 @@ function Map({ {map && mapImage} {map && mapDrawing} {map && mapTokens} - {allowTokenChange && ( <> { + const map = document.querySelector(".map"); + map.addEventListener("mousedown", handleStart); + map.addEventListener("mousemove", handleMove); + map.addEventListener("mouseup", handleStop); + map.addEventListener("touchstart", handleStart); + map.addEventListener("touchmove", handleMove); + map.addEventListener("touchend", handleStop); + + return () => { + map.removeEventListener("mousedown", handleStart); + map.removeEventListener("mousemove", handleMove); + map.removeEventListener("mouseup", handleStop); + map.removeEventListener("touchstart", handleStart); + map.removeEventListener("touchmove", handleMove); + map.removeEventListener("touchend", handleStop); + }; + }); + const hoveredShapeRef = useRef(null); useEffect(() => { function pointsToPath(points) { @@ -205,12 +226,6 @@ function MapDrawing({
handleMove(e, false), }, cursorChecker: () => { - return selectedTool === "pan" && map ? "move" : "default"; + return isEnabled && map ? "move" : "default"; }, }) .on("doubletap", (event) => { event.preventDefault(); - if (selectedTool === "pan") { + if (isEnabled) { setTranslateAndScale({ x: 0, y: 0 }, 1); } }); @@ -70,7 +63,7 @@ function MapInteraction({ return () => { mapInteract.unset(); }; - }, [selectedTool, map]); + }, [isEnabled, map]); // Reset map transform when map changes useEffect(() => {