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]);