Atlas48/grungnet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move tokenState to work without backing token, add asset sync

Browse Source
This commit is contained in:
Mitchell McCaffrey
2021-04-23 17:10:10 +10:00
parent a023ef61ed
commit 245a9cee43
13 changed files with 198 additions and 285 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/map/MapToken.js
+22 -9
View File
@@ -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";
src/components/map/MapTokens.js
+20 -58
View File
@@ -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}