Fixed interactjs events from being defined multiple times

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}`}
         />
       ))}
     </Box>
@@ -294,11 +299,11 @@ function Map({
         />
       </Box>
       <ProxyToken
-        tokenClassName={mapTokenClassName}
+        tokenClassName={mapTokenProxyClassName}
         onProxyDragEnd={handleProxyDragEnd}
       />
       <TokenMenu
-        tokenClassName={mapTokenClassName}
+        tokenClassName={mapTokenMenuClassName}
         onTokenChange={onMapTokenChange}
       />
     </>

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;

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