Move tokenState to work without backing token, add asset sync

src/components/map/MapTokens.js

@@ -1,10 +1,8 @@
-import React, { useEffect } from "react";
+import React from "react";
 import { Group } from "react-konva";
 
 import MapToken from "./MapToken";
 
-import { useTokenData } from "../../contexts/TokenDataContext";
-
 function MapTokens({
   map,
   mapState,
@@ -15,31 +13,6 @@ function MapTokens({
   selectedToolId,
   disabledTokens,
 }) {
-  const { tokensById, loadTokens } = useTokenData();
-
-  // Ensure tokens files have been loaded into the token data
-  useEffect(() => {
-    async function loadFileTokens() {
-      const tokenIds = new Set(
-        Object.values(mapState.tokens).map((state) => state.tokenId)
-      );
-      const tokensToLoad = [];
-      for (let tokenId of tokenIds) {
-        const token = tokensById[tokenId];
-        if (token && token.type === "file" && !token.file) {
-          tokensToLoad.push(tokenId);
-        }
-      }
-      if (tokensToLoad.length > 0) {
-        await loadTokens(tokensToLoad);
-      }
-    }
-
-    if (mapState) {
-      loadFileTokens();
-    }
-  }, [mapState, tokensById, loadTokens]);
-
   function getMapTokenCategoryWeight(category) {
     switch (category) {
       case "character":
@@ -55,38 +28,28 @@ function MapTokens({
 
   // Sort so vehicles render below other tokens
   function sortMapTokenStates(a, b, tokenDraggingOptions) {
-    const tokenA = tokensById[a.tokenId];
-    const tokenB = tokensById[b.tokenId];
-    if (tokenA && tokenB) {
-      // If categories are different sort in order "prop", "vehicle", "character"
-      if (tokenB.category !== tokenA.category) {
-        const aWeight = getMapTokenCategoryWeight(tokenA.category);
-        const bWeight = getMapTokenCategoryWeight(tokenB.category);
-        return bWeight - aWeight;
-      } else if (
-        tokenDraggingOptions &&
-        tokenDraggingOptions.dragging &&
-        tokenDraggingOptions.tokenState.id === a.id
-      ) {
-        // If dragging token a move above
-        return 1;
-      } else if (
-        tokenDraggingOptions &&
-        tokenDraggingOptions.dragging &&
-        tokenDraggingOptions.tokenState.id === b.id
-      ) {
-        // If dragging token b move above
-        return -1;
-      } else {
-        // Else sort so last modified is on top
-        return a.lastModified - b.lastModified;
-      }
-    } else if (tokenA) {
+    // If categories are different sort in order "prop", "vehicle", "character"
+    if (b.category !== a.category) {
+      const aWeight = getMapTokenCategoryWeight(a.category);
+      const bWeight = getMapTokenCategoryWeight(b.category);
+      return bWeight - aWeight;
+    } else if (
+      tokenDraggingOptions &&
+      tokenDraggingOptions.dragging &&
+      tokenDraggingOptions.tokenState.id === a.id
+    ) {
+      // If dragging token a move above
       return 1;
-    } else if (tokenB) {
+    } else if (
+      tokenDraggingOptions &&
+      tokenDraggingOptions.dragging &&
+      tokenDraggingOptions.tokenState.id === b.id
+    ) {
+      // If dragging token b move above
       return -1;
     } else {
-      return 0;
+      // Else sort so last modified is on top
+      return a.lastModified - b.lastModified;
     }
   }
 
@@ -97,7 +60,6 @@ function MapTokens({
         .map((tokenState) => (
           <MapToken
             key={tokenState.id}
-            token={tokensById[tokenState.tokenId]}
             tokenState={tokenState}
             onTokenStateChange={onMapTokenStateChange}
             onTokenMenuOpen={handleTokenMenuOpen}