From 59d46e1d2765d0ab1662ddf99ce990641726472c Mon Sep 17 00:00:00 2001
From: Mitchell McCaffrey <mitchemmc@gmail.com>
Date: Thu, 5 Aug 2021 15:17:10 +1000
Subject: [PATCH] Separated prop tokens from tokens to render below drawings
 and notes

---
 src/components/map/Map.tsx          |  3 +-
 src/components/tools/SelectTool.tsx | 57 +++++++++++-----------
 src/hooks/useMapTokens.tsx          | 76 ++++++++++++++++++-----------
 3 files changed, 78 insertions(+), 58 deletions(-)

diff --git a/src/components/map/Map.tsx b/src/components/map/Map.tsx
index d480d0e..140a77b 100644
--- a/src/components/map/Map.tsx
+++ b/src/components/map/Map.tsx
@@ -137,7 +137,7 @@ function Map({
     onFogDraw(new EditStatesAction(shapes));
   }
 
-  const { tokens, tokenMenu, tokenDragOverlay } = useMapTokens(
+  const { tokens, propTokens, tokenMenu, tokenDragOverlay } = useMapTokens(
     map,
     mapState,
     onMapTokenStateChange,
@@ -199,6 +199,7 @@ function Map({
         onSelectedToolChange={setSelectedToolId}
       >
         {map && map.showGrid && <MapGrid map={map} />}
+        {propTokens}
         <DrawingTool
           map={map}
           drawings={drawShapes}
diff --git a/src/components/tools/SelectTool.tsx b/src/components/tools/SelectTool.tsx
index ce5cafd..f0c3cb8 100644
--- a/src/components/tools/SelectTool.tsx
+++ b/src/components/tools/SelectTool.tsx
@@ -177,25 +177,25 @@ function SelectTool({
         return;
       }
       if (selection && mapStage) {
-        const tokensGroup = mapStage.findOne<Konva.Group>("#tokens");
-        const notesGroup = mapStage.findOne<Konva.Group>("#notes");
-        if (tokensGroup && notesGroup) {
-          const points = getSelectionPoints(selection);
-          const intersection = new Intersection(
-            {
-              type: "path",
-              points: scaleAndFlattenPoints(points, {
-                x: mapWidth,
-                y: mapHeight,
-              }),
-            },
-            { x: selection.x, y: selection.y },
-            { x: 0, y: 0 },
-            0
-          );
+        const tokensGroups = mapStage.find<Konva.Group>("#tokens");
+        const notesGroups = mapStage.find<Konva.Group>("#notes");
+        const points = getSelectionPoints(selection);
+        const intersection = new Intersection(
+          {
+            type: "path",
+            points: scaleAndFlattenPoints(points, {
+              x: mapWidth,
+              y: mapHeight,
+            }),
+          },
+          { x: selection.x, y: selection.y },
+          { x: 0, y: 0 },
+          0
+        );
 
-          let intersectingItems: SelectionItem[] = [];
+        let intersectingItems: SelectionItem[] = [];
 
+        for (let tokensGroup of tokensGroups) {
           const tokens = tokensGroup.children;
           if (tokens) {
             for (let token of tokens) {
@@ -207,6 +207,9 @@ function SelectTool({
               }
             }
           }
+        }
+
+        for (let notesGroup of notesGroups) {
           const notes = notesGroup.children;
           if (notes) {
             for (let note of notes) {
@@ -218,18 +221,16 @@ function SelectTool({
               }
             }
           }
+        }
 
-          if (intersectingItems.length > 0) {
-            onSelectionChange((prevSelection) => {
-              if (!prevSelection) {
-                return prevSelection;
-              }
-              return { ...prevSelection, items: intersectingItems };
-            });
-            onSelectionMenuOpen(true);
-          } else {
-            onSelectionChange(null);
-          }
+        if (intersectingItems.length > 0) {
+          onSelectionChange((prevSelection) => {
+            if (!prevSelection) {
+              return prevSelection;
+            }
+            return { ...prevSelection, items: intersectingItems };
+          });
+          onSelectionMenuOpen(true);
         } else {
           onSelectionChange(null);
         }
diff --git a/src/hooks/useMapTokens.tsx b/src/hooks/useMapTokens.tsx
index 12c9540..474eaf4 100644
--- a/src/hooks/useMapTokens.tsx
+++ b/src/hooks/useMapTokens.tsx
@@ -76,38 +76,56 @@ function useMapTokens(
     setTokenDraggingOptions(undefined);
   }
 
+  function tokenFromTokenState(tokenState: TokenState) {
+    return (
+      map && (
+        <Token
+          key={tokenState.id}
+          tokenState={tokenState}
+          onTokenStateChange={onTokenStateChange}
+          onTokenMenuOpen={handleTokenMenuOpen}
+          onTokenMenuClose={handleTokenMenuClose}
+          onTokenDragStart={handleTokenDragStart}
+          onTokenDragEnd={handleTokenDragEnd}
+          draggable={
+            selectedToolId === "move" &&
+            !(tokenState.id in disabledTokens) &&
+            !tokenState.locked
+          }
+          selectable={
+            selectedToolId === "move" &&
+            ((!(tokenState.id in disabledTokens) && !tokenState.locked) ||
+              map.owner === userId)
+          }
+          fadeOnHover={
+            tokenState.category !== "prop" && selectedToolId === "drawing"
+          }
+          map={map}
+          selected={
+            !!tokenMenuOptions &&
+            isTokenMenuOpen &&
+            tokenMenuOptions.tokenStateId === tokenState.id
+          }
+        />
+      )
+    );
+  }
+
   const tokens = map && mapState && (
     <Group id="tokens">
       {Object.values(mapState.tokens)
+        .filter((tokenState) => tokenState.category !== "prop")
         .sort((a, b) => sortMapTokenStates(a, b, tokenDraggingOptions))
-        .map((tokenState) => (
-          <Token
-            key={tokenState.id}
-            tokenState={tokenState}
-            onTokenStateChange={onTokenStateChange}
-            onTokenMenuOpen={handleTokenMenuOpen}
-            onTokenMenuClose={handleTokenMenuClose}
-            onTokenDragStart={handleTokenDragStart}
-            onTokenDragEnd={handleTokenDragEnd}
-            draggable={
-              selectedToolId === "move" &&
-              !(tokenState.id in disabledTokens) &&
-              !tokenState.locked
-            }
-            selectable={
-              selectedToolId === "move" &&
-              ((!(tokenState.id in disabledTokens) && !tokenState.locked) ||
-                map.owner === userId)
-            }
-            fadeOnHover={selectedToolId === "drawing"}
-            map={map}
-            selected={
-              !!tokenMenuOptions &&
-              isTokenMenuOpen &&
-              tokenMenuOptions.tokenStateId === tokenState.id
-            }
-          />
-        ))}
+        .map(tokenFromTokenState)}
+    </Group>
+  );
+
+  const propTokens = map && mapState && (
+    <Group id="tokens">
+      {Object.values(mapState.tokens)
+        .filter((tokenState) => tokenState.category === "prop")
+        .sort((a, b) => sortMapTokenStates(a, b, tokenDraggingOptions))
+        .map(tokenFromTokenState)}
     </Group>
   );
 
@@ -135,7 +153,7 @@ function useMapTokens(
     />
   );
 
-  return { tokens, tokenMenu, tokenDragOverlay };
+  return { tokens, propTokens, tokenMenu, tokenDragOverlay };
 }
 
 export default useMapTokens;