diff --git a/src/components/Map.js b/src/components/Map.js index 60b67c8..8b4ec80 100644 --- a/src/components/Map.js +++ b/src/components/Map.js @@ -10,7 +10,8 @@ import MapControls from "./MapControls"; import { omit } from "../helpers/shared"; -const mapTokenClassName = "map-token"; +const mapTokenProxyClassName = "map-token__proxy"; +const mapTokenMenuClassName = "map-token__menu"; const zoomSpeed = -0.005; const minZoom = 0.1; const maxZoom = 5; @@ -118,7 +119,7 @@ function Map({ } setTranslateAndScale(newTranslate, newScale); } - interact(".map") + const mapInteract = interact(".map") .gesturable({ listeners: { move: (e) => handleMove(e, true), @@ -132,13 +133,17 @@ function Map({ cursorChecker: () => { return selectedTool === "pan" && mapData ? "move" : "default"; }, + }) + .on("doubletap", (event) => { + event.preventDefault(); + if (selectedTool === "pan") { + setTranslateAndScale({ x: 0, y: 0 }, 1); + } }); - interact(".map").on("doubletap", (event) => { - event.preventDefault(); - if (selectedTool === "pan") { - setTranslateAndScale({ x: 0, y: 0 }, 1); - } - }); + + return () => { + mapInteract.unset(); + }; }, [selectedTool, mapData]); // Reset map transform when map changes @@ -229,7 +234,7 @@ function Map({ key={token.id} token={token} tokenSizePercent={tokenSizePercent} - className={mapTokenClassName} + className={`${mapTokenProxyClassName} ${mapTokenMenuClassName}`} /> ))} @@ -294,11 +299,11 @@ function Map({ /> diff --git a/src/components/ProxyToken.js b/src/components/ProxyToken.js index 02d75db..11094c2 100644 --- a/src/components/ProxyToken.js +++ b/src/components/ProxyToken.js @@ -19,7 +19,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) { const proxyOnMap = useRef(false); useEffect(() => { - interact(`.${tokenClassName}`).draggable({ + const tokenInteract = interact(`.${tokenClassName}`).draggable({ listeners: { start: (event) => { let target = event.target; @@ -92,7 +92,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) { target.setAttribute("data-y", y); onProxyDragEnd(proxyOnMap.current, { - image: imageSource, + image: target.src, // Pass in props stored as data- in the dom node ...target.dataset, }); @@ -110,7 +110,10 @@ function ProxyToken({ tokenClassName, onProxyDragEnd }) { }, }, }); - }, [imageSource, onProxyDragEnd, tokenClassName, proxyContainer]); + return () => { + tokenInteract.unset(); + }; + }, [onProxyDragEnd, tokenClassName, proxyContainer]); if (!imageSource) { return null; diff --git a/src/components/TokenMenu.js b/src/components/TokenMenu.js index 63a2ab9..ac38529 100644 --- a/src/components/TokenMenu.js +++ b/src/components/TokenMenu.js @@ -63,8 +63,11 @@ function TokenMenu({ tokenClassName, onTokenChange }) { setIsOpen(true); } - // Add listener for hold gesture - interact(`.${tokenClassName}`).on("tap", handleTokenMenuOpen); + // Add listener for tap gesture + const tokenInteract = interact(`.${tokenClassName}`).on( + "tap", + handleTokenMenuOpen + ); function handleMapContextMenu(event) { event.preventDefault(); @@ -81,6 +84,7 @@ function TokenMenu({ tokenClassName, onTokenChange }) { return () => { map.removeEventListener("contextmenu", handleMapContextMenu); + tokenInteract.unset(); }; }, [tokenClassName]);