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,9 +177,8 @@ 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 intersection = new Intersection(
           {
@@ -196,6 +195,7 @@ function SelectTool({
 
         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,6 +221,7 @@ function SelectTool({
               }
             }
           }
+        }
 
         if (intersectingItems.length > 0) {
           onSelectionChange((prevSelection) => {
@@ -233,9 +237,6 @@ function SelectTool({
       } else {
         onSelectionChange(null);
       }
-      } else {
-        onSelectionChange(null);
-      }
 
       setIsBrushDown(false);
     }

src/hooks/useMapTokens.tsx

@@ -76,11 +76,9 @@ function useMapTokens(
     setTokenDraggingOptions(undefined);
   }
 
-  const tokens = map && mapState && (
+  function tokenFromTokenState(tokenState: TokenState) {
-    <Group id="tokens">
+    return (
-      {Object.values(mapState.tokens)
+      map && (
-        .sort((a, b) => sortMapTokenStates(a, b, tokenDraggingOptions))
-        .map((tokenState) => (
         <Token
           key={tokenState.id}
           tokenState={tokenState}
@@ -99,7 +97,9 @@ function useMapTokens(
             ((!(tokenState.id in disabledTokens) && !tokenState.locked) ||
               map.owner === userId)
           }
-            fadeOnHover={selectedToolId === "drawing"}
+          fadeOnHover={
+            tokenState.category !== "prop" && selectedToolId === "drawing"
+          }
           map={map}
           selected={
             !!tokenMenuOptions &&
@@ -107,7 +107,25 @@ function useMapTokens(
             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(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;