Readded map token remove

src/components/map/Map.js

@@ -7,6 +7,7 @@ import MapToken from "./MapToken";
 
 import TokenDataContext from "../../contexts/TokenDataContext";
 import TokenMenu from "../token/TokenMenu";
+import TokenDragOverlay from "../token/TokenDragOverlay";
 
 function Map({
   map,
@@ -141,6 +142,7 @@ function Map({
 
   const [isTokenMenuOpen, setIsTokenMenuOpen] = useState(false);
   const [tokenMenuOptions, setTokenMenuOptions] = useState({});
+  const [draggingTokenState, setDraggingTokenState] = useState();
   function handleTokenMenuOpen(tokenStateId, tokenImage) {
     setTokenMenuOptions({ tokenStateId, tokenImage });
     setIsTokenMenuOpen(true);
@@ -156,6 +158,8 @@ function Map({
         tokenSizePercent={tokenSizePercent}
         onTokenStateChange={onMapTokenStateChange}
         onTokenMenuOpen={handleTokenMenuOpen}
+        onTokenDragStart={() => setDraggingTokenState(tokenState)}
+        onTokenDragEnd={() => setDraggingTokenState(null)}
       />
     ));
 
@@ -169,6 +173,15 @@ function Map({
     />
   );
 
+  const tokenDragOverlay = draggingTokenState && (
+    <TokenDragOverlay
+      onTokenStateRemove={() => {
+        onMapTokenStateRemove(draggingTokenState);
+        setDraggingTokenState(null);
+      }}
+    />
+  );
+
   return (
     <MapInteraction
       map={map}
@@ -176,6 +189,7 @@ function Map({
         <>
           {mapControls}
           {tokenMenu}
+          {tokenDragOverlay}
         </>
       }
     >

src/components/map/MapToken.js

@@ -19,6 +19,8 @@ function MapToken({
   tokenSizePercent,
   onTokenStateChange,
   onTokenMenuOpen,
+  onTokenDragStart,
+  onTokenDragEnd,
 }) {
   const { userId } = useContext(AuthContext);
   const {
@@ -46,6 +48,7 @@ function MapToken({
       y: event.target.y() / mapHeight,
       lastEditedBy: userId,
     });
+    onTokenDragEnd();
   }
 
   function handleClick(event) {
@@ -61,7 +64,12 @@ function MapToken({
   const imageRef = useRef();
   useEffect(() => {
     const image = imageRef.current;
-    if (image && tokenSourceStatus === "loaded") {
+    if (
+      image &&
+      tokenSourceStatus === "loaded" &&
+      tokenWidth > 0 &&
+      tokenHeight > 0
+    ) {
       image.cache({
         pixelRatio: debouncedStageScale,
       });
@@ -71,6 +79,10 @@ function MapToken({
     }
   }, [debouncedStageScale, tokenWidth, tokenHeight, tokenSourceStatus]);
 
+  if (!tokenWidth || !tokenHeight) {
+    return null;
+  }
+
   return (
     <Group
       width={tokenWidth}
@@ -84,6 +96,7 @@ function MapToken({
       onTouchEnd={() => setPreventMapInteraction(false)}
       onClick={handleClick}
       onDragEnd={handleDragEnd}
+      onDragStart={onTokenDragStart}
     >
       <KonvaImage
         ref={imageRef}

src/components/token/TokenDragOverlay.js

@@ -0,0 +1,40 @@
+import React, { useContext } from "react";
+import { Box, IconButton } from "theme-ui";
+
+import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
+
+import MapInteractionContext from "../../contexts/MapInteractionContext";
+
+function TokenDragOverlay({ onTokenStateRemove }) {
+  const { setPreventMapInteraction } = useContext(MapInteractionContext);
+
+  function handleTokenRemove() {
+    onTokenStateRemove();
+    setPreventMapInteraction(false);
+  }
+
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        bottom: "12px",
+        left: "50%",
+        borderRadius: "50%",
+        transform: "translateX(-50%)",
+        transition: "transform 250ms ease",
+        ":hover": {
+          transform: "translateX(-50%) scale(1.5)",
+        },
+      }}
+      bg="overlay"
+      onMouseUp={handleTokenRemove}
+      onTouchEnd={handleTokenRemove}
+    >
+      <IconButton>
+        <RemoveTokenIcon />
+      </IconButton>
+    </Box>
+  );
+}
+
+export default TokenDragOverlay;