Update token duplicate and removing to include attached tokens

src/components/konva/Token.tsx

@@ -145,7 +145,11 @@ function Token({
       }
     }
     setDragging(true);
-    onTokenDragStart(event, tokenState.id);
+    onTokenDragStart(
+      event,
+      tokenState.id,
+      attachedTokensRef.current.map((token) => token.id())
+    );
   }
 
   function handleDragMove(event: Konva.KonvaEventObject<DragEvent>) {
@@ -211,11 +215,16 @@ function Token({
     });
 
     setDragging(false);
+
+    onTokenDragEnd(
+      event,
+      tokenState.id,
+      attachedTokensRef.current.map((token) => token.id())
+    );
+
     attachmentCharactersRef.current = [];
     attachedTokensRef.current = [];
     setAttachmentOverCharacter(false);
-
-    onTokenDragEnd(event, tokenState.id);
   }
 
   function handleClick() {

src/components/token/TokenDragOverlay.tsx

@@ -1,23 +1,29 @@
 import DragOverlay from "../map/DragOverlay";
 import { TokenStateRemoveHandler } from "../../types/Events";
-import { TokenState } from "../../types/TokenState";
+import { TokenDraggingOptions } from "../../types/Token";
 
 type TokenDragOverlayProps = {
   onTokenStateRemove: TokenStateRemoveHandler;
-  tokenState: TokenState;
+  draggingOptions: TokenDraggingOptions;
-  dragging: boolean;
 };
 
 function TokenDragOverlay({
   onTokenStateRemove,
-  tokenState,
+  draggingOptions,
-  dragging,
 }: TokenDragOverlayProps) {
   function handleTokenRemove() {
-    onTokenStateRemove([tokenState.id]);
+    onTokenStateRemove([
+      draggingOptions.tokenStateId,
+      ...draggingOptions.attachedTokenStateIds,
+    ]);
   }
 
-  return <DragOverlay dragging={dragging} onRemove={handleTokenRemove} />;
+  return (
+    <DragOverlay
+      dragging={draggingOptions.dragging}
+      onRemove={handleTokenRemove}
+    />
+  );
 }
 
 export default TokenDragOverlay;

src/hooks/useMapTokens.tsx

@@ -60,17 +60,23 @@ function useMapTokens(
 
   function handleTokenDragStart(
     _: KonvaEventObject<DragEvent>,
-    tokenStateId: string
+    tokenStateId: string,
+    attachedTokenStateIds: string[]
   ) {
     if (duplicateToken) {
-      const state = mapState?.tokens[tokenStateId];
+      let newStates: TokenState[] = [];
-      if (state) {
+      for (let id of [tokenStateId, ...attachedTokenStateIds]) {
-        onTokensStateCreate([{ ...state, id: uuid() }]);
+        const state = mapState?.tokens[id];
+        if (state) {
+          newStates.push({ ...state, id: uuid() });
+        }
       }
+      onTokensStateCreate(newStates);
     }
     setTokenDraggingOptions({
       dragging: true,
       tokenStateId,
+      attachedTokenStateIds,
     });
   }
 
@@ -173,14 +179,10 @@ function useMapTokens(
     />
   );
 
-  const tokenDraggingState =
+  const tokenDragOverlay = tokenDraggingOptions && (
-    tokenDraggingOptions && mapState?.tokens[tokenDraggingOptions.tokenStateId];
-
-  const tokenDragOverlay = tokenDraggingOptions && tokenDraggingState && (
     <TokenDragOverlay
       onTokenStateRemove={handleTokenStateRemove}
-      tokenState={tokenDraggingState}
+      draggingOptions={tokenDraggingOptions}
-      dragging={!!(tokenDraggingOptions && tokenDraggingOptions.dragging)}
     />
   );
 

src/types/Events.ts

@@ -34,7 +34,8 @@ export type TokenMenuCloseChangeEventHandler = () => void;
 export type TokenSettingsChangeEventHandler = (change: Partial<Token>) => void;
 export type TokenDragEventHandler = (
   event: Konva.KonvaEventObject<DragEvent>,
-  tokenStateId: string
+  tokenStateId: string,
+  attachedTokenStateIds: string[]
 ) => void;
 
 export type NoteCreateEventHander = (notes: Note[]) => void;

src/types/Token.ts

@@ -39,4 +39,5 @@ export type TokenMenuOptions = {
 export type TokenDraggingOptions = {
   dragging: boolean;
   tokenStateId: string;
+  attachedTokenStateIds: string[];
 };