Fix bug with token delete not working when intersecting fog

src/components/map/Map.js

@@ -221,12 +221,20 @@ function Map({
           onTokenStateChange={onMapTokenStateChange}
           onTokenMenuOpen={handleTokenMenuOpen}
           onTokenDragStart={(e) =>
-            setDraggingTokenOptions({ tokenState, tokenImage: e.target })
+            setDraggingTokenOptions({
+              dragging: true,
+              tokenState,
+              tokenGroup: e.target,
+            })
+          }
+          onTokenDragEnd={() =>
+            setDraggingTokenOptions({
+              ...draggingTokenOptions,
+              dragging: false,
+            })
           }
-          onTokenDragEnd={() => setDraggingTokenOptions(null)}
           draggable={
-            (selectedToolId === "pan" || selectedToolId === "erase") &&
-            !(tokenState.id in disabledTokens)
+            selectedToolId === "pan" && !(tokenState.id in disabledTokens)
           }
           mapState={mapState}
         />
@@ -250,7 +258,8 @@ function Map({
       }}
       onTokenStateChange={onMapTokenStateChange}
       tokenState={draggingTokenOptions && draggingTokenOptions.tokenState}
-      tokenImage={draggingTokenOptions && draggingTokenOptions.tokenImage}
+      tokenGroup={draggingTokenOptions && draggingTokenOptions.tokenGroup}
+      dragging={draggingTokenOptions && draggingTokenOptions.dragging}
       token={tokensById[draggingTokenOptions.tokenState.tokenId]}
       mapState={mapState}
     />

src/components/token/TokenDragOverlay.js

@@ -11,7 +11,8 @@ function TokenDragOverlay({
   onTokenStateChange,
   token,
   tokenState,
-  tokenImage,
+  tokenGroup,
+  dragging,
   mapState,
 }) {
   const { userId } = useContext(AuthContext);
@@ -28,7 +29,7 @@ function TokenDragOverlay({
     const mapRect = map.getBoundingClientRect();
 
     function detectRemoveHover() {
-      const pointerPosition = tokenImage.getStage().getPointerPosition();
+      const pointerPosition = tokenGroup.getStage().getPointerPosition();
       const screenSpacePointerPosition = {
         x: pointerPosition.x + mapRect.left,
         y: pointerPosition.y + mapRect.top,
@@ -50,7 +51,7 @@ function TokenDragOverlay({
     }
 
     let handler;
-    if (tokenState && tokenImage) {
+    if (tokenState && tokenGroup && dragging) {
       handler = setInterval(detectRemoveHover, 100);
     }
 
@@ -59,16 +60,15 @@ function TokenDragOverlay({
         clearInterval(handler);
       }
     };
-  }, [tokenState, tokenImage, isRemoveHovered]);
+  }, [tokenState, tokenGroup, isRemoveHovered, dragging]);
 
   // Detect drag end of token image and remove it if it is over the remove icon
   useEffect(() => {
     function handleTokenDragEnd() {
-      if (isRemoveHovered) {
       // Handle other tokens when a vehicle gets deleted
       if (token && token.isVehicle) {
-          const layer = tokenImage.getLayer();
-          const mountedTokens = tokenImage.find(".token");
+        const layer = tokenGroup.getLayer();
+        const mountedTokens = tokenGroup.find(".token");
         for (let mountedToken of mountedTokens) {
           // Save and restore token position after moving layer
           const position = mountedToken.absolutePosition();
@@ -87,26 +87,14 @@ function TokenDragOverlay({
       onTokenStateRemove(tokenState);
       setPreventMapInteraction(false);
     }
+
+    if (!dragging && tokenState && isRemoveHovered) {
+      handleTokenDragEnd();
     }
-    tokenImage.on("dragend", handleTokenDragEnd);
-    return () => {
-      tokenImage.off("dragend", handleTokenDragEnd);
-    };
-  }, [
-    tokenImage,
-    token,
-    tokenState,
-    isRemoveHovered,
-    mapWidth,
-    mapHeight,
-    userId,
-    onTokenStateChange,
-    onTokenStateRemove,
-    setPreventMapInteraction,
-    mapState.tokens,
-  ]);
+  });
 
   return (
+    dragging && (
       <Box
         sx={{
           position: "absolute",
@@ -127,6 +115,7 @@ function TokenDragOverlay({
           <RemoveTokenIcon />
         </IconButton>
       </Box>
+    )
   );
 }