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

Added shared grid context and moved away from calling useContext directly

Browse Source
This commit is contained in:
Mitchell McCaffrey
2021-02-06 13:32:38 +11:00
parent 8991be923e
commit f20173de35
60 changed files with 672 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/map/Map.js
View File

@@ -1,4 +1,4 @@
import React, { useState, useContext } from "react";
import React, { useState } from "react";
import { Group } from "react-konva";
import MapControls from "./MapControls";
@@ -11,8 +11,8 @@ import MapMeasure from "./MapMeasure";
import NetworkedMapPointer from "../../network/NetworkedMapPointer";
import MapNotes from "./MapNotes";
import TokenDataContext from "../../contexts/TokenDataContext";
import SettingsContext from "../../contexts/SettingsContext";
import { useTokenData } from "../../contexts/TokenDataContext";
import { useSettings } from "../../contexts/SettingsContext";
import TokenMenu from "../token/TokenMenu";
import TokenDragOverlay from "../token/TokenDragOverlay";
@@ -49,19 +49,10 @@ function Map({
disabledTokens,
session,
}) {
const { tokensById } = useContext(TokenDataContext);
const gridX = map && map.grid.size.x;
const gridY = map && map.grid.size.y;
const inset = map && map.grid.inset;
const gridSizeNormalized = {
x: gridX ? (inset.bottomRight.x - inset.topLeft.x) / gridX : 0,
y: gridY ? (inset.bottomRight.y - inset.topLeft.y) / gridY : 0,
};
const tokenSizePercent = gridSizeNormalized.x;
const { tokensById } = useTokenData();
const [selectedToolId, setSelectedToolId] = useState("pan");
const { settings, setSettings } = useContext(SettingsContext);
const { settings, setSettings } = useSettings();
function handleToolSettingChange(tool, change) {
setSettings((prevSettings) => ({
@@ -243,7 +234,6 @@ function Map({
key={tokenState.id}
token={tokensById[tokenState.tokenId]}
tokenState={tokenState}
tokenSizePercent={tokenSizePercent}
onTokenStateChange={onMapTokenStateChange}
onTokenMenuOpen={handleTokenMenuOpen}
onTokenDragStart={(e) =>
@@ -306,7 +296,6 @@ function Map({
onShapesRemove={handleMapShapesRemove}
active={selectedToolId === "drawing"}
toolSettings={settings.drawing}
gridSize={gridSizeNormalized}
/>
);
@@ -320,7 +309,6 @@ function Map({
onShapesEdit={handleFogShapesEdit}
active={selectedToolId === "fog"}
toolSettings={settings.fog}
gridSize={gridSizeNormalized}
editable={allowFogDrawing && !settings.fog.preview}
/>
);
@@ -331,7 +319,6 @@ function Map({
<MapMeasure
map={map}
active={selectedToolId === "measure"}
gridSize={gridSizeNormalized}
selectedToolSettings={settings[selectedToolId]}
/>
);
@@ -339,7 +326,6 @@ function Map({
const mapPointer = (
<NetworkedMapPointer
active={selectedToolId === "pointer"}
gridSize={gridSizeNormalized}
session={session}
/>
);
@@ -377,7 +363,6 @@ function Map({
<MapNotes
map={map}
active={selectedToolId === "note"}
gridSize={gridSizeNormalized}
selectedToolSettings={settings[selectedToolId]}
onNoteAdd={onMapNoteChange}
onNoteChange={onMapNoteChange}

43
src/components/map/MapDrawing.js
View File

@@ -1,9 +1,10 @@
import React, { useContext, useState, useEffect } from "react";
import React, { useState, useEffect } from "react";
import shortid from "shortid";
import { Group, Line, Rect, Circle } from "react-konva";
import MapInteractionContext from "../../contexts/MapInteractionContext";
import MapStageContext from "../../contexts/MapStageContext";
import { useMapInteraction } from "../../contexts/MapInteractionContext";
import { useMapStage } from "../../contexts/MapStageContext";
import { useGrid } from "../../contexts/GridContext";
import Vector2 from "../../helpers/Vector2";
import {
@@ -11,7 +12,6 @@ import {
getDefaultShapeData,
getUpdatedShapeData,
simplifyPoints,
getStrokeWidth,
} from "../../helpers/drawing";
import colors from "../../helpers/colors";
@@ -23,12 +23,15 @@ function MapDrawing({
onShapesRemove,
active,
toolSettings,
gridSize,
}) {
const { stageScale, mapWidth, mapHeight, interactionEmitter } = useContext(
MapInteractionContext
);
const mapStageRef = useContext(MapStageContext);
const {
stageScale,
mapWidth,
mapHeight,
interactionEmitter,
} = useMapInteraction();
const { gridCellNormalizedSize, gridStrokeWidth } = useGrid();
const mapStageRef = useMapStage();
const [drawingShape, setDrawingShape] = useState(null);
const [isBrushDown, setIsBrushDown] = useState(false);
const [erasingShapes, setErasingShapes] = useState([]);
@@ -53,7 +56,7 @@ function MapDrawing({
map,
mapStage,
map.snapToGrid && isShape,
gridSize
gridCellNormalizedSize
);
const commonShapeData = {
color: toolSettings.color,
@@ -85,7 +88,7 @@ function MapDrawing({
map,
mapStage,
map.snapToGrid && isShape,
gridSize
gridCellNormalizedSize
);
if (isBrushDown && drawingShape) {
if (isBrush) {
@@ -102,7 +105,7 @@ function MapDrawing({
}
const simplified = simplifyPoints(
[...prevPoints, brushPosition],
gridSize,
gridCellNormalizedSize,
stageScale
);
return {
@@ -117,7 +120,7 @@ function MapDrawing({
prevShape.shapeType,
prevShape.data,
brushPosition,
gridSize
gridCellNormalizedSize
),
}));
}
@@ -191,12 +194,7 @@ function MapDrawing({
fillEnabled={shape.pathType === "fill"}
lineCap="round"
lineJoin="round"
strokeWidth={getStrokeWidth(
shape.strokeWidth,
gridSize,
mapWidth,
mapHeight
)}
strokeWidth={gridStrokeWidth * shape.strokeWidth}
{...defaultProps}
/>
);
@@ -239,12 +237,7 @@ function MapDrawing({
(acc, point) => [...acc, point.x * mapWidth, point.y * mapHeight],
[]
)}
strokeWidth={getStrokeWidth(
shape.strokeWidth,
gridSize,
mapWidth,
mapHeight
)}
strokeWidth={gridStrokeWidth * shape.strokeWidth}
stroke={colors[shape.color] || shape.color}
lineCap="round"
{...defaultProps}

9
src/components/map/MapEditor.js
View File

@@ -13,6 +13,7 @@ import { getGridDefaultInset, getGridMaxZoom } from "../../helpers/grid";
import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
import KeyboardContext from "../../contexts/KeyboardContext";
import { GridProvider } from "../../contexts/GridContext";
import ResetMapIcon from "../../icons/ResetMapIcon";
import GridOnIcon from "../../icons/GridOnIcon";
@@ -130,10 +131,14 @@ function MapEditor({ map, onSettingsChange }) {
<KeyboardContext.Provider value={keyboardValue}>
<MapInteractionProvider value={mapInteraction}>
{showGridControls && canEditGrid && (
<>
<GridProvider
grid={map.grid}
width={mapWidth}
height={mapHeight}
>
<MapGrid map={map} strokeWidth={0.5} />
<MapGridEditor map={map} onGridChange={handleGridChange} />
</>
</GridProvider>
)}
</MapInteractionProvider>
</KeyboardContext.Provider>

49
src/components/map/MapFog.js
View File

@@ -1,30 +1,24 @@
import React, {
useContext,
useState,
useEffect,
useCallback,
useRef,
} from "react";
import React, { useState, useEffect, useCallback, useRef } from "react";
import shortid from "shortid";
import { Group, Rect } from "react-konva";
import useImage from "use-image";
import diagonalPattern from "../../images/DiagonalPattern.png";
import MapInteractionContext from "../../contexts/MapInteractionContext";
import MapStageContext from "../../contexts/MapStageContext";
import { useMapInteraction } from "../../contexts/MapInteractionContext";
import { useMapStage } from "../../contexts/MapStageContext";
import { useGrid } from "../../contexts/GridContext";
import { useKeyboard } from "../../contexts/KeyboardContext";
import Vector2 from "../../helpers/Vector2";
import {
getFogBrushPosition,
simplifyPoints,
getStrokeWidth,
mergeShapes,
} from "../../helpers/drawing";
import colors from "../../helpers/colors";
import { HoleyLine, Tick } from "../../helpers/konva";
import useKeyboard from "../../hooks/useKeyboard";
import useDebounce from "../../hooks/useDebounce";
function MapFog({
@@ -36,13 +30,17 @@ function MapFog({
onShapesEdit,
active,
toolSettings,
gridSize,
editable,
}) {
const { stageScale, mapWidth, mapHeight, interactionEmitter } = useContext(
MapInteractionContext
);
const mapStageRef = useContext(MapStageContext);
const {
stageScale,
mapWidth,
mapHeight,
interactionEmitter,
} = useMapInteraction();
const { gridCellNormalizedSize, gridStrokeWidth } = useGrid();
const mapStageRef = useMapStage();
const [drawingShape, setDrawingShape] = useState(null);
const [isBrushDown, setIsBrushDown] = useState(false);
const [editingShapes, setEditingShapes] = useState([]);
@@ -70,7 +68,7 @@ function MapFog({
map,
mapStage,
useGridSnapping,
gridSize,
gridCellNormalizedSize,
toolSettings.useEdgeSnapping,
shapes
);
@@ -114,7 +112,7 @@ function MapFog({
map,
mapStage,
useGridSnapping,
gridSize,
gridCellNormalizedSize,
toolSettings.useEdgeSnapping,
shapes
);
@@ -144,7 +142,7 @@ function MapFog({
map,
mapStage,
useGridSnapping,
gridSize,
gridCellNormalizedSize,
toolSettings.useEdgeSnapping,
shapes,
prevPoints
@@ -185,7 +183,7 @@ function MapFog({
...drawingShape.data,
points: simplifyPoints(
drawingShape.data.points,
gridSize,
gridCellNormalizedSize,
// Downscale fog as smoothing doesn't currently work with edge snapping
stageScale / 2
),
@@ -211,7 +209,7 @@ function MapFog({
map,
mapStage,
useGridSnapping,
gridSize,
gridCellNormalizedSize,
toolSettings.useEdgeSnapping,
shapes
);
@@ -247,7 +245,7 @@ function MapFog({
map,
mapStage,
useGridSnapping,
gridSize,
gridCellNormalizedSize,
toolSettings.useEdgeSnapping,
shapes
);
@@ -378,12 +376,7 @@ function MapFog({
closed
lineCap="round"
lineJoin="round"
strokeWidth={getStrokeWidth(
shape.strokeWidth,
gridSize,
mapWidth,
mapHeight
)}
strokeWidth={gridStrokeWidth * shape.strokeWidth}
opacity={editable ? 0.5 : 1}
fillPatternImage={patternImage}
fillPriority={active && !shape.visible ? "pattern" : "color"}

14
src/components/map/MapGrid.js
View File

@@ -1,8 +1,6 @@
import React, { useContext, useEffect, useState } from "react";
import React, { useEffect, useState } from "react";
import useImage from "use-image";
import MapInteractionContext from "../../contexts/MapInteractionContext";
import useDataSource from "../../hooks/useDataSource";
import { mapSources as defaultMapSources } from "../../maps";
@@ -11,8 +9,6 @@ import { getImageLightness } from "../../helpers/image";
import Grid from "../Grid";
function MapGrid({ map, strokeWidth }) {
const { mapWidth, mapHeight } = useContext(MapInteractionContext);
let mapSourceMap = map;
// Use lowest resolution for grid lightness
if (map && map.type === "file" && map.resolutions) {
@@ -34,13 +30,7 @@ function MapGrid({ map, strokeWidth }) {
}, [mapImage, mapLoadingStatus]);
return (
<Grid
grid={map?.grid}
strokeWidth={strokeWidth}
width={mapWidth}
height={mapHeight}
stroke={isImageLight ? "black" : "white"}
/>
<Grid strokeWidth={strokeWidth} stroke={isImageLight ? "black" : "white"} />
);
}

9
src/components/map/MapGridEditor.js
View File

@@ -1,19 +1,18 @@
import React, { useContext, useRef } from "react";
import React, { useRef } from "react";
import { Group, Circle, Rect } from "react-konva";
import MapInteractionContext from "../../contexts/MapInteractionContext";
import { useMapInteraction } from "../../contexts/MapInteractionContext";
import { useKeyboard } from "../../contexts/KeyboardContext";
import Vector2 from "../../helpers/Vector2";
import useKeyboard from "../../hooks/useKeyboard";
function MapGridEditor({ map, onGridChange }) {
const {
mapWidth,
mapHeight,
stageScale,
setPreventMapInteraction,
} = useContext(MapInteractionContext);
} = useMapInteraction();
const mapSize = { x: mapWidth, y: mapHeight };

33
src/components/map/MapInteraction.js
View File

@@ -6,19 +6,18 @@ import { EventEmitter } from "events";
import useMapImage from "../../hooks/useMapImage";
import usePreventOverscroll from "../../hooks/usePreventOverscroll";
import useKeyboard from "../../hooks/useKeyboard";
import useStageInteraction from "../../hooks/useStageInteraction";
import useImageCenter from "../../hooks/useImageCenter";
import { getGridMaxZoom } from "../../helpers/grid";
import { MapInteractionProvider } from "../../contexts/MapInteractionContext";
import MapStageContext, {
MapStageProvider,
} from "../../contexts/MapStageContext";
import AuthContext from "../../contexts/AuthContext";
import SettingsContext from "../../contexts/SettingsContext";
import { MapStageProvider, useMapStage } from "../../contexts/MapStageContext";
import AuthContext, { useAuth } from "../../contexts/AuthContext";
import SettingsContext, { useSettings } from "../../contexts/SettingsContext";
import KeyboardContext from "../../contexts/KeyboardContext";
import { GridProvider } from "../../contexts/GridContext";
import { useKeyboard } from "../../contexts/KeyboardContext";
function MapInteraction({
map,
@@ -53,7 +52,7 @@ function MapInteraction({
// Avoid state udpates when panning the map by using a ref and updating the konva element directly
const stageTranslateRef = useRef({ x: 0, y: 0 });
const mapStageRef = useContext(MapStageContext);
const mapStageRef = useMapStage();
const mapLayerRef = useRef();
const mapImageRef = useRef();
@@ -177,8 +176,8 @@ function MapInteraction({
}
}
const auth = useContext(AuthContext);
const settings = useContext(SettingsContext);
const auth = useAuth();
const settings = useSettings();
const mapInteraction = {
stageScale,
@@ -223,9 +222,15 @@ function MapInteraction({
<SettingsContext.Provider value={settings}>
<KeyboardContext.Provider value={keyboardValue}>
<MapInteractionProvider value={mapInteraction}>
<MapStageProvider value={mapStageRef}>
{mapLoaded && children}
</MapStageProvider>
<GridProvider
grid={map?.grid}
width={mapWidth}
height={mapHeight}
>
<MapStageProvider value={mapStageRef}>
{mapLoaded && children}
</MapStageProvider>
</GridProvider>
</MapInteractionProvider>
</KeyboardContext.Provider>
</SettingsContext.Provider>
@@ -234,7 +239,9 @@ function MapInteraction({
</Stage>
</ReactResizeDetector>
<MapInteractionProvider value={mapInteraction}>
{controls}
<GridProvider grid={map?.grid} width={mapWidth} height={mapHeight}>
{controls}
</GridProvider>
</MapInteractionProvider>
</Box>
);

6
src/components/map/MapLoadingOverlay.js
View File

@@ -1,12 +1,12 @@
import React, { useContext } from "react";
import React from "react";
import { Box } from "theme-ui";
import MapLoadingContext from "../../contexts/MapLoadingContext";
import { useMapLoading } from "../../contexts/MapLoadingContext";
import LoadingBar from "../LoadingBar";
function MapLoadingOverlay() {
const { isLoading, loadingProgressRef } = useContext(MapLoadingContext);
const { isLoading, loadingProgressRef } = useMapLoading();
return (
isLoading && (

42
src/components/map/MapMeasure.js
View File

@@ -1,22 +1,26 @@
import React, { useContext, useState, useEffect } from "react";
import React, { useState, useEffect } from "react";
import { Group, Line, Text, Label, Tag } from "react-konva";
import MapInteractionContext from "../../contexts/MapInteractionContext";
import MapStageContext from "../../contexts/MapStageContext";
import { useMapInteraction } from "../../contexts/MapInteractionContext";
import { useMapStage } from "../../contexts/MapStageContext";
import { useGrid } from "../../contexts/GridContext";
import {
getBrushPosition,
getDefaultShapeData,
getUpdatedShapeData,
getStrokeWidth,
} from "../../helpers/drawing";
import Vector2 from "../../helpers/Vector2";
function MapMeasure({ map, selectedToolSettings, active, gridSize }) {
const { stageScale, mapWidth, mapHeight, interactionEmitter } = useContext(
MapInteractionContext
);
const mapStageRef = useContext(MapStageContext);
function MapMeasure({ map, selectedToolSettings, active }) {
const {
stageScale,
mapWidth,
mapHeight,
interactionEmitter,
} = useMapInteraction();
const { gridCellNormalizedSize, gridStrokeWidth } = useGrid();
const mapStageRef = useMapStage();
const [drawingShapeData, setDrawingShapeData] = useState(null);
const [isBrushDown, setIsBrushDown] = useState(false);
@@ -52,7 +56,7 @@ function MapMeasure({ map, selectedToolSettings, active, gridSize }) {
map,
mapStage,
map.snapToGrid,
gridSize
gridCellNormalizedSize
);
const { points } = getDefaultShapeData("line", brushPosition);
const length = 0;
@@ -65,20 +69,26 @@ function MapMeasure({ map, selectedToolSettings, active, gridSize }) {
map,
mapStage,
map.snapToGrid,
gridSize
gridCellNormalizedSize
);
if (isBrushDown && drawingShapeData) {
const { points } = getUpdatedShapeData(
"line",
drawingShapeData,
brushPosition,
gridSize
gridCellNormalizedSize
);
// Round the grid positions to the nearest 0.1 to aviod floating point issues
const precision = { x: 0.1, y: 0.1 };
const length = Vector2.distance(
Vector2.roundTo(Vector2.divide(points[0], gridSize), precision),
Vector2.roundTo(Vector2.divide(points[1], gridSize), precision),
Vector2.roundTo(
Vector2.divide(points[0], gridCellNormalizedSize),
precision
),
Vector2.roundTo(
Vector2.divide(points[1], gridCellNormalizedSize),
precision
),
selectedToolSettings.type
);
setDrawingShapeData({
@@ -119,13 +129,13 @@ function MapMeasure({ map, selectedToolSettings, active, gridSize }) {
<Group>
<Line
points={linePoints}
strokeWidth={getStrokeWidth(1.5, gridSize, mapWidth, mapHeight)}
strokeWidth={1.5 * gridStrokeWidth}
stroke="hsla(230, 25%, 18%, 0.8)"
lineCap="round"
/>
<Line
points={linePoints}
strokeWidth={getStrokeWidth(0.25, gridSize, mapWidth, mapHeight)}
strokeWidth={0.25 * gridStrokeWidth}
stroke="white"
lineCap="round"
/>

21
src/components/map/MapNotes.js
View File

@@ -1,10 +1,11 @@
import React, { useContext, useState, useEffect, useRef } from "react";
import React, { useState, useEffect, useRef } from "react";
import shortid from "shortid";
import { Group } from "react-konva";
import MapInteractionContext from "../../contexts/MapInteractionContext";
import MapStageContext from "../../contexts/MapStageContext";
import AuthContext from "../../contexts/AuthContext";
import { useMapInteraction } from "../../contexts/MapInteractionContext";
import { useMapStage } from "../../contexts/MapStageContext";
import { useAuth } from "../../contexts/AuthContext";
import { useGrid } from "../../contexts/GridContext";
import { getBrushPosition } from "../../helpers/drawing";
@@ -15,7 +16,6 @@ const defaultNoteSize = 2;
function MapNotes({
map,
active,
gridSize,
onNoteAdd,
onNoteChange,
notes,
@@ -25,9 +25,10 @@ function MapNotes({
onNoteDragEnd,
fadeOnHover,
}) {
const { interactionEmitter } = useContext(MapInteractionContext);
const { userId } = useContext(AuthContext);
const mapStageRef = useContext(MapStageContext);
const { interactionEmitter } = useMapInteraction();
const { userId } = useAuth();
const { gridCellNormalizedSize } = useGrid();
const mapStageRef = useMapStage();
const [isBrushDown, setIsBrushDown] = useState(false);
const [noteData, setNoteData] = useState(null);
@@ -44,7 +45,7 @@ function MapNotes({
map,
mapStage,
map.snapToGrid,
gridSize
gridCellNormalizedSize
);
setNoteData({
x: brushPosition.x,
@@ -68,7 +69,7 @@ function MapNotes({
map,
mapStage,
map.snapToGrid,
gridSize
gridCellNormalizedSize
);
setNoteData((prev) => ({
...prev,

18
src/components/map/MapPointer.js
View File

@@ -1,10 +1,10 @@
import React, { useContext, useEffect } from "react";
import React, { useEffect } from "react";
import { Group } from "react-konva";
import MapInteractionContext from "../../contexts/MapInteractionContext";
import MapStageContext from "../../contexts/MapStageContext";
import { useMapInteraction } from "../../contexts/MapInteractionContext";
import { useMapStage } from "../../contexts/MapStageContext";
import { useGrid } from "../../contexts/GridContext";
import { getStrokeWidth } from "../../helpers/drawing";
import {
getRelativePointerPositionNormalized,
Trail,
@@ -14,7 +14,6 @@ import Vector2 from "../../helpers/Vector2";
import colors from "../../helpers/colors";
function MapPointer({
gridSize,
active,
position,
onPointerDown,
@@ -23,10 +22,9 @@ function MapPointer({
visible,
color,
}) {
const { mapWidth, mapHeight, interactionEmitter } = useContext(
MapInteractionContext
);
const mapStageRef = useContext(MapStageContext);
const { mapWidth, mapHeight, interactionEmitter } = useMapInteraction();
const { gridStrokeWidth } = useGrid();
const mapStageRef = useMapStage();
useEffect(() => {
if (!active) {
@@ -63,7 +61,7 @@ function MapPointer({
};
});
const size = getStrokeWidth(2, gridSize, mapWidth, mapHeight);
const size = 2 * gridStrokeWidth;
return (
<Group>

6
src/components/map/MapTiles.js
View File

@@ -1,4 +1,4 @@
import React, { useContext } from "react";
import React from "react";
import { Flex, Box, Text, IconButton, Close, Label } from "theme-ui";
import SimpleBar from "simplebar-react";
import Case from "case";
@@ -11,7 +11,7 @@ import MapTile from "./MapTile";
import Link from "../Link";
import FilterBar from "../FilterBar";
import DatabaseContext from "../../contexts/DatabaseContext";
import { useDatabase } from "../../contexts/DatabaseContext";
import useResponsiveLayout from "../../hooks/useResponsiveLayout";
@@ -32,7 +32,7 @@ function MapTiles({
onSearchChange,
onMapsGroup,
}) {
const { databaseStatus } = useContext(DatabaseContext);
const { databaseStatus } = useDatabase();
const layout = useResponsiveLayout();
let hasMapState = false;

17
src/components/map/MapToken.js
View File

@@ -1,4 +1,4 @@
import React, { useContext, useState, useEffect, useRef } from "react";
import React, { useState, useEffect, useRef } from "react";
import { Image as KonvaImage, Group } from "react-konva";
import { useSpring, animated } from "react-spring/konva";
import useImage from "use-image";
@@ -10,8 +10,9 @@ import usePrevious from "../../hooks/usePrevious";
import { snapNodeToGrid } from "../../helpers/grid";
import AuthContext from "../../contexts/AuthContext";
import MapInteractionContext from "../../contexts/MapInteractionContext";
import { useAuth } from "../../contexts/AuthContext";
import { useMapInteraction } from "../../contexts/MapInteractionContext";
import { useGrid } from "../../contexts/GridContext";
import TokenStatus from "../token/TokenStatus";
import TokenLabel from "../token/TokenLabel";
@@ -23,7 +24,6 @@ const snappingThreshold = 1 / 7;
function MapToken({
token,
tokenState,
tokenSizePercent,
onTokenStateChange,
onTokenMenuOpen,
onTokenDragStart,
@@ -33,13 +33,14 @@ function MapToken({
fadeOnHover,
map,
}) {
const { userId } = useContext(AuthContext);
const { userId } = useAuth();
const {
setPreventMapInteraction,
mapWidth,
mapHeight,
stageScale,
} = useContext(MapInteractionContext);
} = useMapInteraction();
const { gridCellPixelSize } = useGrid();
const tokenSource = useDataSource(token, tokenSources, unknownSource);
const [tokenSourceImage, tokenSourceStatus] = useImage(tokenSource);
@@ -182,9 +183,9 @@ function MapToken({
}
}
const tokenWidth = tokenSizePercent * mapWidth * tokenState.size;
const tokenWidth = gridCellPixelSize.width * tokenState.size;
const tokenHeight =
tokenSizePercent * (mapWidth / tokenAspectRatio) * tokenState.size;
(gridCellPixelSize.width / tokenAspectRatio) * tokenState.size;
const debouncedStageScale = useDebounce(stageScale, 50);
const imageRef = useRef();

10
src/components/map/SelectMapButton.js
View File

@@ -1,11 +1,11 @@
import React, { useState, useContext } from "react";
import React, { useState } from "react";
import { IconButton } from "theme-ui";
import SelectMapModal from "../../modals/SelectMapModal";
import SelectMapIcon from "../../icons/SelectMapIcon";
import MapDataContext from "../../contexts/MapDataContext";
import AuthContext from "../../contexts/AuthContext";
import { useMapData } from "../../contexts/MapDataContext";
import { useAuth } from "../../contexts/AuthContext";
function SelectMapButton({
onMapChange,
@@ -16,8 +16,8 @@ function SelectMapButton({
}) {
const [isModalOpen, setIsModalOpen] = useState(false);
const { updateMapState } = useContext(MapDataContext);
const { userId } = useContext(AuthContext);
const { updateMapState } = useMapData();
const { userId } = useAuth();
function openModal() {
if (currentMapState && currentMap && currentMap.owner === userId) {
updateMapState(currentMapState.mapId, currentMapState);

2
src/components/map/controls/DrawingToolSettings.js
View File

@@ -22,7 +22,7 @@ import RedoButton from "./RedoButton";
import Divider from "../../Divider";
import useKeyboard from "../../../hooks/useKeyboard";
import { useKeyboard } from "../../../contexts/KeyboardContext";
function DrawingToolSettings({
settings,

2
src/components/map/controls/FogToolSettings.js
View File

@@ -20,7 +20,7 @@ import ToolSection from "./ToolSection";
import Divider from "../../Divider";
import useKeyboard from "../../../hooks/useKeyboard";
import { useKeyboard } from "../../../contexts/KeyboardContext";
function BrushToolSettings({
settings,

2
src/components/map/controls/MeasureToolSettings.js
View File

@@ -9,7 +9,7 @@ import MeasureAlternatingIcon from "../../../icons/MeasureAlternatingIcon";
import Divider from "../../Divider";
import useKeyboard from "../../../hooks/useKeyboard";
import { useKeyboard } from "../../../contexts/KeyboardContext";
function MeasureToolSettings({ settings, onSettingChange }) {
// Keyboard shortcuts