Fix token remove for touch devices

src/components/token/TokenDragOverlay.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useRef, useState } from "react";
 import { Box, IconButton } from "theme-ui";
 
 import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
@@ -19,7 +19,52 @@ function TokenDragOverlay({
     MapInteractionContext
   );
 
-  function handleTokenRemove() {
+  const [isRemoveHovered, setIsRemoveHovered] = useState(false);
+  const removeTokenRef = useRef();
+
+  // Detect token hover on remove icon manually to support touch devices
+  useEffect(() => {
+    const map = document.querySelector(".map");
+    const mapRect = map.getBoundingClientRect();
+
+    function detectRemoveHover() {
+      const pointerPosition = tokenImage.getStage().getPointerPosition();
+      const screenSpacePointerPosition = {
+        x: pointerPosition.x + mapRect.left,
+        y: pointerPosition.y + mapRect.top,
+      };
+      const removeIconPosition = removeTokenRef.current.getBoundingClientRect();
+
+      if (
+        screenSpacePointerPosition.x > removeIconPosition.left &&
+        screenSpacePointerPosition.y > removeIconPosition.top &&
+        screenSpacePointerPosition.x < removeIconPosition.right &&
+        screenSpacePointerPosition.y < removeIconPosition.bottom
+      ) {
+        if (!isRemoveHovered) {
+          setIsRemoveHovered(true);
+        }
+      } else if (isRemoveHovered) {
+        setIsRemoveHovered(false);
+      }
+    }
+
+    let handler;
+    if (tokenState && tokenImage) {
+      handler = setInterval(detectRemoveHover, 100);
+    }
+
+    return () => {
+      if (handler) {
+        clearInterval(handler);
+      }
+    };
+  }, [tokenState, tokenImage, isRemoveHovered]);
+
+  // 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.isVehicle) {
           const layer = tokenImage.getLayer();
@@ -42,6 +87,24 @@ function TokenDragOverlay({
         onTokenStateRemove(tokenState);
         setPreventMapInteraction(false);
       }
+    }
+    tokenImage.on("dragend", handleTokenDragEnd);
+    return () => {
+      tokenImage.off("dragend", handleTokenDragEnd);
+    };
+  }, [
+    tokenImage,
+    token,
+    tokenState,
+    isRemoveHovered,
+    mapWidth,
+    mapHeight,
+    userId,
+    onTokenStateChange,
+    onTokenStateRemove,
+    setPreventMapInteraction,
+    mapState.tokens,
+  ]);
 
   return (
     <Box
@@ -50,15 +113,15 @@ function TokenDragOverlay({
         bottom: "24px",
         left: "50%",
         borderRadius: "50%",
-        transform: "translateX(-50%) scale(1.5)",
+        transform: isRemoveHovered
+          ? "translateX(-50%) scale(2.0)"
+          : "translateX(-50%) scale(1.5)",
         transition: "transform 250ms ease",
-        ":hover": {
+        color: isRemoveHovered ? "primary" : "text",
-          transform: "translateX(-50%) scale(2.0)",
+        pointerEvents: "none",
-        },
       }}
       bg="overlay"
-      onMouseUp={handleTokenRemove}
+      ref={removeTokenRef}
-      onTouchEnd={handleTokenRemove}
     >
       <IconButton>
         <RemoveTokenIcon />