Separated prop tokens from tokens to render below drawings and notes

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}

src/components/tools/SelectTool.tsx

@@ -177,25 +177,25 @@ function SelectTool({
         return;
       }
       if (selection && mapStage) {
-        const tokensGroup = mapStage.findOne<Konva.Group>("#tokens");
+        const tokensGroups = mapStage.find<Konva.Group>("#tokens");
-        const notesGroup = mapStage.findOne<Konva.Group>("#notes");
+        const notesGroups = mapStage.find<Konva.Group>("#notes");
-        if (tokensGroup && notesGroup) {
+        const points = getSelectionPoints(selection);
-          const points = getSelectionPoints(selection);
+        const intersection = new Intersection(
-          const intersection = new Intersection(
+          {
-            {
+            type: "path",
-              type: "path",
+            points: scaleAndFlattenPoints(points, {
-              points: scaleAndFlattenPoints(points, {
+              x: mapWidth,
-                x: mapWidth,
+              y: mapHeight,
-                y: mapHeight,
+            }),
-              }),
+          },
-            },
+          { x: selection.x, y: selection.y },
-            { x: selection.x, y: selection.y },
+          { x: 0, y: 0 },
-            { x: 0, y: 0 },
+          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) {
+        if (intersectingItems.length > 0) {
-            onSelectionChange((prevSelection) => {
+          onSelectionChange((prevSelection) => {
-              if (!prevSelection) {
+            if (!prevSelection) {
-                return prevSelection;
+              return prevSelection;
-              }
+            }
-              return { ...prevSelection, items: intersectingItems };
+            return { ...prevSelection, items: intersectingItems };
-            });
+          });
-            onSelectionMenuOpen(true);
+          onSelectionMenuOpen(true);
-          } else {
-            onSelectionChange(null);
-          }
         } else {
           onSelectionChange(null);
         }

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) => (
+        .map(tokenFromTokenState)}
-          <Token
+    </Group>
-            key={tokenState.id}
+  );
-            tokenState={tokenState}
+
-            onTokenStateChange={onTokenStateChange}
+  const propTokens = map && mapState && (
-            onTokenMenuOpen={handleTokenMenuOpen}
+    <Group id="tokens">
-            onTokenMenuClose={handleTokenMenuClose}
+      {Object.values(mapState.tokens)
-            onTokenDragStart={handleTokenDragStart}
+        .filter((tokenState) => tokenState.category === "prop")
-            onTokenDragEnd={handleTokenDragEnd}
+        .sort((a, b) => sortMapTokenStates(a, b, tokenDraggingOptions))
-            draggable={
+        .map(tokenFromTokenState)}
-              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
-            }
-          />
-        ))}
     </Group>
   );
 
@@ -135,7 +153,7 @@ function useMapTokens(
     />
   );
 
-  return { tokens, tokenMenu, tokenDragOverlay };
+  return { tokens, propTokens, tokenMenu, tokenDragOverlay };
 }
 
 export default useMapTokens;