From 14fbb41e9d175d1de1877e0eb9c1590b1eab0685 Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 12 Aug 2021 10:23:02 +1000
Subject: [PATCH] Update token duplicate and removing to include attached
 tokens

---
 src/components/konva/Token.tsx            | 15 ++++++++++++---
 src/components/token/TokenDragOverlay.tsx | 20 +++++++++++++-------
 src/hooks/useMapTokens.tsx                | 22 ++++++++++++----------
 src/types/Events.ts                       |  3 ++-
 src/types/Token.ts                        |  1 +
 5 files changed, 40 insertions(+), 21 deletions(-)

diff --git a/src/components/konva/Token.tsx b/src/components/konva/Token.tsx
index 14e24c7..f2ea246 100644
--- a/src/components/konva/Token.tsx
+++ b/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() {
diff --git a/src/components/token/TokenDragOverlay.tsx b/src/components/token/TokenDragOverlay.tsx
index 73a285d..b99542b 100644
--- a/src/components/token/TokenDragOverlay.tsx
+++ b/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;
-  dragging: boolean;
+  draggingOptions: TokenDraggingOptions;
 };
 
 function TokenDragOverlay({
   onTokenStateRemove,
-  tokenState,
-  dragging,
+  draggingOptions,
 }: 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;
diff --git a/src/hooks/useMapTokens.tsx b/src/hooks/useMapTokens.tsx
index 0ef78d5..b9e54df 100644
--- a/src/hooks/useMapTokens.tsx
+++ b/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];
-      if (state) {
-        onTokensStateCreate([{ ...state, id: uuid() }]);
+      let newStates: TokenState[] = [];
+      for (let id of [tokenStateId, ...attachedTokenStateIds]) {
+        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 =
-    tokenDraggingOptions && mapState?.tokens[tokenDraggingOptions.tokenStateId];
-
-  const tokenDragOverlay = tokenDraggingOptions && tokenDraggingState && (
+  const tokenDragOverlay = tokenDraggingOptions && (
     <TokenDragOverlay
       onTokenStateRemove={handleTokenStateRemove}
-      tokenState={tokenDraggingState}
-      dragging={!!(tokenDraggingOptions && tokenDraggingOptions.dragging)}
+      draggingOptions={tokenDraggingOptions}
     />
   );
 
diff --git a/src/types/Events.ts b/src/types/Events.ts
index f3a1d7c..b07f183 100644
--- a/src/types/Events.ts
+++ b/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;
diff --git a/src/types/Token.ts b/src/types/Token.ts
index cf41333..2ae4583 100644
--- a/src/types/Token.ts
+++ b/src/types/Token.ts
@@ -39,4 +39,5 @@ export type TokenMenuOptions = {
 export type TokenDraggingOptions = {
   dragging: boolean;
   tokenStateId: string;
+  attachedTokenStateIds: string[];
 };