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

Fix token and map editing and viewing

Browse Source
This commit is contained in:
Mitchell McCaffrey 2021-04-23 11:48:24 +10:00
parent 6b9665ffe8
commit a023ef61ed
6 changed files with 155 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
src/contexts/AssetsContext.js
View File

@ -20,9 +20,15 @@ import { omit } from "../helpers/shared";
* @returns {Promise<Asset|undefined>}
*/
/**
* @callback addAssets
* @param {Asset[]} assets
*/
/**
* @typedef AssetsContext
* @property {getAsset} getAsset
* @property {addAssets} addAssets
*/
/**
@ -31,7 +37,7 @@ import { omit } from "../helpers/shared";
const AssetsContext = React.createContext();
export function AssetsProvider({ children }) {
const { worker } = useDatabase();
const { worker, database } = useDatabase();
const getAsset = useCallback(
async (assetId) => {
@ -41,10 +47,20 @@ export function AssetsProvider({ children }) {
[worker]
);
const addAssets = useCallback(
async (assets) => {
return database.table("assets").bulkAdd(assets);
},
[database]
);
const value = {
getAsset,
addAssets,
};
return (
<AssetsContext.Provider value={{ getAsset }}>
{children}
</AssetsContext.Provider>
<AssetsContext.Provider value={value}>{children}</AssetsContext.Provider>
);
}
@ -107,10 +123,10 @@ export function AssetURLsProvider({ children }) {
* @param {string} assetId
* @param {"file"|"default"} type
* @param {Object.<string, string>} defaultSources
* @param {string} unknownSource
* @returns {string}
* @param {string|undefined} unknownSource
* @returns {string|undefined}
*/
export function useAssetURL(assetId, type, defaultSources, unknownSource = "") {
export function useAssetURL(assetId, type, defaultSources, unknownSource) {
const assetURLs = useContext(AssetURLsStateContext);
if (assetURLs === undefined) {
throw new Error("useAssetURL must be used within a AssetURLsProvider");
@ -183,7 +199,7 @@ export function useAssetURL(assetId, type, defaultSources, unknownSource = "") {
}
if (type === "file") {
return assetURLs[assetId]?.url;
return assetURLs[assetId]?.url || unknownSource;
}
return unknownSource;
@ -210,14 +226,14 @@ const dataResolutions = ["ultra", "high", "medium", "low"];
* Load a map or token into a URL taking into account a thumbnail and multiple resolutions
* @param {FileData|DefaultData} data
* @param {Object.<string, string>} defaultSources
* @param {string} unknownSource
* @param {string|undefined} unknownSource
* @param {boolean} thumbnail
* @returns {string}
* @returns {string|undefined}
*/
export function useDataURL(
data,
defaultSources,
unknownSource = "",
unknownSource,
thumbnail = false
) {
const { database } = useDatabase();

4
src/database.js
View File

@ -509,14 +509,10 @@ const versions = {
if (asset.prevType === "map") {
tx.table("maps").update(asset.prevId, {
file: asset.id,
width: undefined,
height: undefined,
});
} else if (asset.prevType === "token") {
tx.table("tokens").update(asset.prevId, {
file: asset.id,
width: undefined,
height: undefined,
});
} else if (asset.prevType === "mapThumbnail") {
tx.table("maps").update(asset.prevId, { thumbnail: asset.id });

9
src/helpers/KonvaBridge.js
View File

@ -43,6 +43,7 @@ import {
GridStrokeWidthContext,
GridCellPixelOffsetContext,
} from "../contexts/GridContext";
import DatabaseContext, { useDatabase } from "../contexts/DatabaseContext";
/**
* Provide a bridge for konva that forwards our contexts
@ -74,7 +75,10 @@ function KonvaBridge({ stageRender, children }) {
const gridCellPixelOffset = useGridCellPixelOffset();
const gridOffset = useGridOffset();
const database = useDatabase();
return stageRender(
<DatabaseContext.Provider value={database}>
<AuthContext.Provider value={auth}>
<SettingsContext.Provider value={settings}>
<KeyboardContext.Provider value={keyboardValue}>
@ -93,7 +97,9 @@ function KonvaBridge({ stageRender, children }) {
<StageHeightContext.Provider value={stageHeight}>
<MapWidthContext.Provider value={mapWidth}>
<MapHeightContext.Provider value={mapHeight}>
<StageScaleContext.Provider value={stageScale}>
<StageScaleContext.Provider
value={stageScale}
>
<DebouncedStageScaleContext.Provider
value={debouncedStageScale}
>
@ -140,6 +146,7 @@ function KonvaBridge({ stageRender, children }) {
</KeyboardContext.Provider>
</SettingsContext.Provider>
</AuthContext.Provider>
</DatabaseContext.Provider>
);
}

16
src/helpers/image.js
View File

@ -1,3 +1,5 @@
import { v4 as uuid } from "uuid";
import blobToBuffer from "./blobToBuffer";
const lightnessDetectionOffset = 0.1;
@ -88,12 +90,12 @@ export async function resizeImage(image, size, type, quality) {
}
/**
* @typedef ImageFile
* @property {Uint8Array|null} file
* @typedef Asset
* @property {string} id
* @property {number} width
* @property {number} height
* @property {"file"} type
* @property {string} id
* @property {Uint8Array} file
* @property {string} mime
*/
/**
@ -102,7 +104,7 @@ export async function resizeImage(image, size, type, quality) {
* @param {string} type the mime type of the image
* @param {number} size the width and height of the thumbnail
* @param {number} quality if image is a jpeg or webp this is the quality setting
* @returns {Promise<ImageFile>}
* @returns {Promise<Asset>}
*/
export async function createThumbnail(image, type, size = 300, quality = 0.5) {
let canvas = document.createElement("canvas");
@ -150,7 +152,7 @@ export async function createThumbnail(image, type, size = 300, quality = 0.5) {
file: thumbnailBuffer,
width: thumbnailImage.width,
height: thumbnailImage.height,
type: "file",
id: "thumbnail",
mime: type,
id: uuid(),
};
}

41
src/modals/SelectMapModal.js
View File

@ -1,6 +1,6 @@
import React, { useRef, useState } from "react";
import { Button, Flex, Label } from "theme-ui";
import shortid from "shortid";
import { v4 as uuid } from "uuid";
import Case from "case";
import { useToasts } from "react-toast-notifications";
@ -28,6 +28,7 @@ import useResponsiveLayout from "../hooks/useResponsiveLayout";
import { useMapData } from "../contexts/MapDataContext";
import { useAuth } from "../contexts/AuthContext";
import { useKeyboard, useBlur } from "../contexts/KeyboardContext";
import { useAssets } from "../contexts/AssetsContext";
import shortcuts from "../shortcuts";
@ -72,6 +73,7 @@ function SelectMapModal({
getMapFromDB,
getMapStateFromDB,
} = useMapData();
const { addAssets } = useAssets();
/**
* Search
@ -221,6 +223,8 @@ function SelectMapModal({
gridSize = { x: 22, y: 22 };
}
let assets = [];
// Create resolutions
const resolutions = {};
for (let resolution of mapResolutions) {
@ -239,26 +243,38 @@ function SelectMapModal({
resolution.quality
);
if (resized.blob) {
const assetId = uuid();
resolutions[resolution.id] = assetId;
const resizedBuffer = await blobToBuffer(resized.blob);
resolutions[resolution.id] = {
const asset = {
file: resizedBuffer,
width: resized.width,
height: resized.height,
type: "file",
id: resolution.id,
id: assetId,
mime: file.type,
};
assets.push(asset);
}
}
}
// Create thumbnail
const thumbnail = await createThumbnail(image, file.type);
assets.push(thumbnail);
handleMapAdd({
// Save as a buffer to send with msgpack
const fileAsset = {
id: uuid(),
file: buffer,
resolutions,
thumbnail,
width: image.width,
height: image.height,
mime: file.type,
};
assets.push(fileAsset);
const map = {
name,
resolutions,
file: fileAsset.id,
thumbnail: thumbnail.id,
type: "file",
grid: {
size: gridSize,
@ -275,13 +291,15 @@ function SelectMapModal({
},
width: image.width,
height: image.height,
id: shortid.generate(),
id: uuid(),
created: Date.now(),
lastModified: Date.now(),
lastUsed: Date.now(),
owner: userId,
...defaultMapProps,
});
};
handleMapAdd(map, assets);
setIsLoading(false);
URL.revokeObjectURL(url);
resolve();
@ -311,8 +329,9 @@ function SelectMapModal({
selectedMapIds.includes(state.mapId)
);
async function handleMapAdd(map) {
async function handleMapAdd(map, assets) {
await addMap(map);
await addAssets(assets);
setSelectedMapIds([map.id]);
}

31
src/modals/SelectTokensModal.js
View File

@ -1,6 +1,6 @@
import React, { useRef, useState } from "react";
import { Flex, Label, Button } from "theme-ui";
import shortid from "shortid";
import { v4 as uuid } from "uuid";
import Case from "case";
import { useToasts } from "react-toast-notifications";
@ -22,6 +22,7 @@ import useResponsiveLayout from "../hooks/useResponsiveLayout";
import { useTokenData } from "../contexts/TokenDataContext";
import { useAuth } from "../contexts/AuthContext";
import { useKeyboard, useBlur } from "../contexts/KeyboardContext";
import { useAssets } from "../contexts/AssetsContext";
import shortcuts from "../shortcuts";
@ -36,6 +37,7 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
updateTokens,
tokensLoading,
} = useTokenData();
const { addAssets } = useAssets();
/**
* Search
@ -160,13 +162,24 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
return new Promise((resolve, reject) => {
image.onload = async function () {
let assets = [];
const thumbnail = await createThumbnail(image, file.type);
assets.push(thumbnail);
handleTokenAdd({
const fileAsset = {
id: uuid(),
file: buffer,
thumbnail,
width: image.width,
height: image.height,
mime: file.type,
};
assets.push(fileAsset);
const token = {
name,
id: shortid.generate(),
thumbnail: thumbnail.id,
file: fileAsset.id,
id: uuid(),
type: "file",
created: Date.now(),
lastModified: Date.now(),
@ -178,8 +191,11 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
group: "",
width: image.width,
height: image.height,
});
};
handleTokenAdd(token, assets);
setIsLoading(false);
URL.revokeObjectURL(url);
resolve();
};
image.onerror = reject;
@ -196,8 +212,9 @@ function SelectTokensModal({ isOpen, onRequestClose }) {
selectedTokenIds.includes(token.id)
);
function handleTokenAdd(token) {
addToken(token);
async function handleTokenAdd(token, assets) {
await addToken(token);
await addAssets(assets);
setSelectedTokenIds([token.id]);
}