diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js index e866c89..ccb2770 100644 --- a/src/components/map/MapToken.js +++ b/src/components/map/MapToken.js @@ -24,7 +24,6 @@ import TokenLabel from "../token/TokenLabel"; import { tokenSources, unknownSource } from "../../tokens"; function MapToken({ - token, tokenState, onTokenStateChange, onTokenMenuOpen, @@ -43,7 +42,7 @@ function MapToken({ const gridCellPixelSize = useGridCellPixelSize(); - const tokenSource = useDataURL(token, tokenSources, unknownSource); + const tokenSource = useDataURL(tokenState, tokenSources, unknownSource); const [tokenSourceImage, tokenSourceStatus] = useImage(tokenSource); const [tokenAspectRatio, setTokenAspectRatio] = useState(1); @@ -59,7 +58,7 @@ function MapToken({ const tokenGroup = event.target; const tokenImage = imageRef.current; - if (token && token.category === "vehicle") { + if (tokenState.category === "vehicle") { // Enable hit detection for .intersects() function Konva.hitOnDragEnabled = true; @@ -99,7 +98,7 @@ function MapToken({ const tokenGroup = event.target; const mountChanges = {}; - if (token && token.category === "vehicle") { + if (tokenState.category === "vehicle") { Konva.hitOnDragEnabled = false; const parent = tokenGroup.getParent(); @@ -196,8 +195,16 @@ function MapToken({ const canvas = image.getCanvas(); const pixelRatio = canvas.pixelRatio || 1; - if (tokenSourceStatus === "loaded" && tokenWidth > 0 && tokenHeight > 0) { - const maxImageSize = token ? Math.max(token.width, token.height) : 512; // Default to 512px + if ( + tokenSourceStatus === "loaded" && + tokenWidth > 0 && + tokenHeight > 0 && + tokenSourceImage + ) { + const maxImageSize = Math.max( + tokenSourceImage.width, + tokenSourceImage.height + ); const maxTokenSize = Math.max(tokenWidth, tokenHeight); // Constrain image buffer to original image size const maxRatio = maxImageSize / maxTokenSize; @@ -210,7 +217,13 @@ function MapToken({ }); image.drawHitFromCache(); } - }, [debouncedStageScale, tokenWidth, tokenHeight, tokenSourceStatus, token]); + }, [ + debouncedStageScale, + tokenWidth, + tokenHeight, + tokenSourceStatus, + tokenSourceImage, + ]); // Animate to new token positions if edited by others const tokenX = tokenState.x * mapWidth; @@ -232,8 +245,8 @@ function MapToken({ // Token name is used by on click to find whether a token is a vehicle or prop let tokenName = ""; - if (token) { - tokenName = token.category; + if (tokenState) { + tokenName = tokenState.category; } if (tokenState && tokenState.locked) { tokenName = tokenName + "-locked"; diff --git a/src/components/map/MapTokens.js b/src/components/map/MapTokens.js index 426dcfe..957d038 100644 --- a/src/components/map/MapTokens.js +++ b/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) => ( - +