Add more efficient method of adding multiple tokens to the map at once

src/components/token/SelectTokensButton.js

@@ -5,7 +5,7 @@ import SelectTokensIcon from "../../icons/SelectTokensIcon";
 
 import SelectTokensModal from "../../modals/SelectTokensModal";
 
-function SelectTokensButton({ onMapTokenStateCreate }) {
+function SelectTokensButton({ onMapTokensStateCreate }) {
   const [isModalOpen, setIsModalOpen] = useState(false);
   function openModal() {
     setIsModalOpen(true);
@@ -30,7 +30,7 @@ function SelectTokensButton({ onMapTokenStateCreate }) {
         isOpen={isModalOpen}
         onRequestClose={closeModal}
         onDone={handleDone}
-        onMapTokenStateCreate={onMapTokenStateCreate}
+        onMapTokensStateCreate={onMapTokensStateCreate}
       />
     </>
   );

src/components/token/TokenBar.js

@@ -21,7 +21,7 @@ import {
   clientPositionToMapPosition,
 } from "../../helpers/token";
 
-function TokenBar({ onMapTokenStateCreate }) {
+function TokenBar({ onMapTokensStateCreate }) {
   const { userId } = useAuth();
   const { tokensById, tokenGroups } = useTokenData();
   const [fullScreen] = useSetting("map.fullScreen");
@@ -53,7 +53,7 @@ function TokenBar({ onMapTokenStateCreate }) {
       const token = tokensById[active.id];
       if (token && mapPosition) {
         const tokenState = createTokenState(token, mapPosition, userId);
-        onMapTokenStateCreate(tokenState);
+        onMapTokensStateCreate([tokenState]);
       }
     }
   }
@@ -123,7 +123,7 @@ function TokenBar({ onMapTokenStateCreate }) {
             alignItems: "center",
           }}
         >
-          <SelectTokensButton onMapTokenStateCreate={onMapTokenStateCreate} />
+          <SelectTokensButton onMapTokensStateCreate={onMapTokensStateCreate} />
         </Flex>
         {createPortal(
           <DragOverlay

src/modals/SelectTokensModal.js

@@ -40,7 +40,7 @@ import { useMapStage } from "../contexts/MapStageContext";
 
 import shortcuts from "../shortcuts";
 
-function SelectTokensModal({ isOpen, onRequestClose, onMapTokenStateCreate }) {
+function SelectTokensModal({ isOpen, onRequestClose, onMapTokensStateCreate }) {
   const { addToast } = useToasts();
 
   const { userId } = useAuth();
@@ -175,11 +175,11 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokenStateCreate }) {
       return;
     }
 
+    let newTokenStates = [];
+
     for (let id of groupIds) {
       if (id in tokensById) {
-        onMapTokenStateCreate(
-          createTokenState(tokensById[id], position, userId)
-        );
+        newTokenStates.push(createTokenState(tokensById[id], position, userId));
         position = Vector2.add(position, 0.01);
       } else {
         // Check if a group is selected
@@ -191,7 +191,7 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokenStateCreate }) {
           const items = getGroupItems(group);
           for (let item of items) {
             if (item.id in tokensById) {
-              onMapTokenStateCreate(
+              newTokenStates.push(
                 createTokenState(tokensById[item.id], position, userId)
               );
               position = Vector2.add(position, 0.01);
@@ -200,6 +200,10 @@ function SelectTokensModal({ isOpen, onRequestClose, onMapTokenStateCreate }) {
         }
       }
     }
+
+    if (newTokenStates.length > 0) {
+      onMapTokensStateCreate(newTokenStates);
+    }
   }
 
   /**

src/network/NetworkedMapAndTokens.js

@@ -88,20 +88,18 @@ function NetworkedMapAndTokens({ session }) {
     setAssetManifest({ mapId: map.id, assets }, true, true);
   }
 
-  function addAssetIfNeeded(asset) {
+  function addAssetsIfNeeded(assets) {
     setAssetManifest((prevManifest) => {
       if (prevManifest?.assets) {
-        const id = asset.id;
-        const exists = id in prevManifest.assets;
-        if (!exists) {
-          return {
-            ...prevManifest,
-            assets: {
-              ...prevManifest.assets,
-              [id]: asset,
-            },
-          };
+        let newManifset = { ...prevManifest };
+        for (let asset of assets) {
+          const id = asset.id;
+          const exists = id in prevManifest.assets;
+          if (!exists) {
+            newManifset[id] = asset;
+          }
         }
+        return newManifset;
       }
       return prevManifest;
     });
@@ -337,20 +335,28 @@ function NetworkedMapAndTokens({ session }) {
    * Token state
    */
 
-  async function handleMapTokenStateCreate(tokenState) {
+  async function handleMapTokensStateCreate(tokenStates) {
     if (!currentMap || !currentMapState) {
       return;
     }
-    if (tokenState.file) {
-      addAssetIfNeeded({ id: tokenState.file, owner: tokenState.owner });
+
+    let assets = [];
+    for (let tokenState of tokenStates) {
+      if (tokenState.type === "file") {
+        assets.push({ id: tokenState.file, owner: tokenState.owner });
+      }
     }
-    setCurrentMapState((prevMapState) => ({
-      ...prevMapState,
-      tokens: {
-        ...prevMapState.tokens,
-        [tokenState.id]: tokenState,
-      },
-    }));
+    if (assets.length > 0) {
+      addAssetsIfNeeded(assets);
+    }
+
+    setCurrentMapState((prevMapState) => {
+      let newMapTokens = { ...prevMapState.tokens };
+      for (let tokenState of tokenStates) {
+        newMapTokens[tokenState.id] = tokenState;
+      }
+      return { ...prevMapState, tokens: newMapTokens };
+    });
   }
 
   function handleMapTokenStateChange(change) {
@@ -475,7 +481,7 @@ function NetworkedMapAndTokens({ session }) {
         disabledTokens={disabledMapTokens}
         session={session}
       />
-      <TokenBar onMapTokenStateCreate={handleMapTokenStateCreate} />
+      <TokenBar onMapTokensStateCreate={handleMapTokensStateCreate} />
     </>
   );
 }