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}