{
+ 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({