Remove need to pass node into drag overlay

src/components/map/DragOverlay.tsx

@@ -1,23 +1,25 @@
 import { useEffect, useRef, useState } from "react";
 import { Box, IconButton } from "theme-ui";
-import Konva from "konva";
 
 import RemoveTokenIcon from "../../icons/RemoveTokenIcon";
+import { useMapStage } from "../../contexts/MapStageContext";
 
 type DragOverlayProps = {
   dragging: boolean;
-  node: Konva.Node;
   onRemove: () => void;
 };
 
-function DragOverlay({ dragging, node, onRemove }: DragOverlayProps) {
+function DragOverlay({ dragging, onRemove }: DragOverlayProps) {
   const [isRemoveHovered, setIsRemoveHovered] = useState(false);
   const removeTokenRef = useRef<HTMLDivElement>(null);
 
+  const mapStageRef = useMapStage();
+
   // Detect token hover on remove icon manually to support touch devices
   useEffect(() => {
     function detectRemoveHover() {
-      if (!node || !dragging || !removeTokenRef.current) {
+      const mapStage = mapStageRef.current;
+      if (!mapStage || !dragging || !removeTokenRef.current) {
         return;
       }
       const map = document.querySelector(".map");
@@ -25,11 +27,7 @@ function DragOverlay({ dragging, node, onRemove }: DragOverlayProps) {
         return;
       }
       const mapRect = map.getBoundingClientRect();
-      const stage = node.getStage();
+      const pointerPosition = mapStage.getPointerPosition();
-      if (!stage) {
-        return;
-      }
-      const pointerPosition = stage.getPointerPosition();
       if (!pointerPosition) {
         return;
       }
@@ -54,7 +52,7 @@ function DragOverlay({ dragging, node, onRemove }: DragOverlayProps) {
     }
 
     let handler: NodeJS.Timeout;
-    if (node && dragging) {
+    if (dragging) {
       handler = setInterval(detectRemoveHover, 100);
     }
 
@@ -63,11 +61,11 @@ function DragOverlay({ dragging, node, onRemove }: DragOverlayProps) {
         clearInterval(handler);
       }
     };
-  }, [isRemoveHovered, dragging, node]);
+  }, [isRemoveHovered, dragging, mapStageRef]);
 
   // Detect drag end of token image and remove it if it is over the remove icon
   useEffect(() => {
-    if (!dragging && node && isRemoveHovered) {
+    if (!dragging && isRemoveHovered) {
       onRemove();
     }
   });

src/components/token/TokenDragOverlay.tsx

@@ -1,5 +1,3 @@
-import Konva from "konva";
-
 import DragOverlay from "../map/DragOverlay";
 import { TokenStateRemoveHandler } from "../../types/Events";
 import { TokenState } from "../../types/TokenState";
@@ -7,27 +5,19 @@ import { TokenState } from "../../types/TokenState";
 type TokenDragOverlayProps = {
   onTokenStateRemove: TokenStateRemoveHandler;
   tokenState: TokenState;
-  tokenNode: Konva.Node;
   dragging: boolean;
 };
 
 function TokenDragOverlay({
   onTokenStateRemove,
   tokenState,
-  tokenNode,
   dragging,
 }: TokenDragOverlayProps) {
   function handleTokenRemove() {
     onTokenStateRemove([tokenState.id]);
   }
 
-  return (
+  return <DragOverlay dragging={dragging} onRemove={handleTokenRemove} />;
-    <DragOverlay
-      dragging={dragging}
-      onRemove={handleTokenRemove}
-      node={tokenNode}
-    />
-  );
 }
 
 export default TokenDragOverlay;

src/hooks/useMapNotes.tsx

@@ -31,11 +31,8 @@ function useMapNotes(
     setIsNoteMenuOpen(true);
   }
 
-  function handleNoteDragStart(
+  function handleNoteDragStart(_: KonvaEventObject<DragEvent>, noteId: string) {
-    event: KonvaEventObject<DragEvent>,
+    setNoteDraggingOptions({ dragging: true, noteId });
-    noteId: string
-  ) {
-    setNoteDraggingOptions({ dragging: true, noteId, noteGroup: event.target });
   }
 
   function handleNoteDragEnd() {
@@ -86,7 +83,6 @@ function useMapNotes(
   const noteDragOverlay = noteDraggingOptions ? (
     <NoteDragOverlay
       dragging={noteDraggingOptions.dragging}
-      noteGroup={noteDraggingOptions.noteGroup}
       noteId={noteDraggingOptions.noteId}
       onNoteRemove={handleNoteRemove}
     />

src/hooks/useMapTokens.tsx

@@ -55,13 +55,12 @@ function useMapTokens(
   }
 
   function handleTokenDragStart(
-    event: KonvaEventObject<DragEvent>,
+    _: KonvaEventObject<DragEvent>,
     tokenStateId: string
   ) {
     setTokenDraggingOptions({
       dragging: true,
       tokenStateId,
-      tokenNode: event.target,
     });
   }
 
@@ -122,7 +121,6 @@ function useMapTokens(
     <TokenDragOverlay
       onTokenStateRemove={handleTokenStateRemove}
       tokenState={tokenDraggingState}
-      tokenNode={tokenDraggingOptions.tokenNode}
       dragging={!!(tokenDraggingOptions && tokenDraggingOptions.dragging)}
     />
   );

src/types/Note.ts

@@ -23,7 +23,6 @@ export type NoteMenuOptions = {
 export type NoteDraggingOptions = {
   dragging: boolean;
   noteId: string;
-  noteGroup: Konva.Node;
 };
 
 export type Notes = Record<string, Note>;

src/types/Token.ts

@@ -39,5 +39,4 @@ export type TokenMenuOptions = {
 export type TokenDraggingOptions = {
   dragging: boolean;
   tokenStateId: string;
-  tokenNode: Konva.Node;
 };