Added shared grid context and moved away from calling useContext directly

src/components/Grid.js

@@ -1,50 +1,43 @@
 import React from "react";
 import { Line, Group, RegularPolygon } from "react-konva";
 
-import { getStrokeWidth } from "../helpers/drawing";
 import {
-  getCellSize,
   getCellLocation,
   gridClipFunction,
   shouldClipCell,
 } from "../helpers/grid";
 
-function Grid({ grid, strokeWidth, width, height, stroke }) {
+import { useGrid } from "../contexts/GridContext";
+
+function Grid({ strokeWidth, stroke }) {
+  const {
+    grid,
+    gridStrokeWidth,
+    gridPixelSize,
+    gridOffset,
+    gridCellPixelSize,
+  } = useGrid();
+
   if (!grid?.size.x || !grid?.size.y) {
     return null;
   }
 
-  const gridSizeNormalized = {
-    x: (grid.inset.bottomRight.x - grid.inset.topLeft.x) / grid.size.x,
-    y: (grid.inset.bottomRight.y - grid.inset.topLeft.y) / grid.size.y,
-  };
-
-  const insetWidth = (grid.inset.bottomRight.x - grid.inset.topLeft.x) * width;
-  const insetHeight =
-    (grid.inset.bottomRight.y - grid.inset.topLeft.y) * height;
-
-  const offsetX = grid.inset.topLeft.x * width * -1;
-  const offsetY = grid.inset.topLeft.y * height * -1;
-
-  const cellSize = getCellSize(grid, insetWidth, insetHeight);
-
   const shapes = [];
   if (grid.type === "square") {
     for (let x = 1; x < grid.size.x; x++) {
       shapes.push(
         <Line
           key={`grid_x_${x}`}
-          points={[x * cellSize.width, 0, x * cellSize.width, insetHeight]}
+          points={[
+            x * gridCellPixelSize.width,
+            0,
+            x * gridCellPixelSize.width,
+            gridPixelSize.height,
+          ]}
           stroke={stroke}
-          strokeWidth={getStrokeWidth(
-            strokeWidth,
-            gridSizeNormalized,
-            width,
-            height
-          )}
+          strokeWidth={gridStrokeWidth * strokeWidth}
           opacity={0.5}
-          offsetX={offsetX}
-          offsetY={offsetY}
+          offset={gridOffset}
         />
       );
     }
@@ -52,17 +45,16 @@ function Grid({ grid, strokeWidth, width, height, stroke }) {
       shapes.push(
         <Line
           key={`grid_y_${y}`}
-          points={[0, y * cellSize.height, insetWidth, y * cellSize.height]}
+          points={[
+            0,
+            y * gridCellPixelSize.height,
+            gridPixelSize.width,
+            y * gridCellPixelSize.height,
+          ]}
           stroke={stroke}
-          strokeWidth={getStrokeWidth(
-            strokeWidth,
-            gridSizeNormalized,
-            width,
-            height
-          )}
+          strokeWidth={gridStrokeWidth * strokeWidth}
           opacity={0.5}
-          offsetX={offsetX}
-          offsetY={offsetY}
+          offset={gridOffset}
         />
       );
     }
@@ -70,29 +62,24 @@ function Grid({ grid, strokeWidth, width, height, stroke }) {
     // Start at -1 to overshoot the bounds of the grid to ensure all lines are drawn
     for (let x = -1; x < grid.size.x; x++) {
       for (let y = -1; y < grid.size.y; y++) {
-        const cellLocation = getCellLocation(grid, x, y, cellSize);
+        const cellLocation = getCellLocation(grid, x, y, gridCellPixelSize);
         shapes.push(
           <Group
             key={`grid_${x}_${y}`}
             clipFunc={
               shouldClipCell(grid, x, y) &&
-              ((context) => gridClipFunction(context, grid, x, y, cellSize))
+              ((context) =>
+                gridClipFunction(context, grid, x, y, gridCellPixelSize))
             }
             x={cellLocation.x}
             y={cellLocation.y}
-            offsetX={offsetX}
-            offsetY={offsetY}
+            offset={gridOffset}
           >
             <RegularPolygon
               sides={6}
-              radius={cellSize.radius}
+              radius={gridCellPixelSize.radius}
               stroke={stroke}
-              strokeWidth={getStrokeWidth(
-                strokeWidth,
-                gridSizeNormalized,
-                width,
-                height
-              )}
+              strokeWidth={gridStrokeWidth * strokeWidth}
               opacity={0.5}
               rotation={grid.type === "hexVertical" ? 0 : 90}
             />

src/components/dice/DiceTrayOverlay.js

@@ -1,10 +1,4 @@
-import React, {
-  useRef,
-  useCallback,
-  useEffect,
-  useContext,
-  useState,
-} from "react";
+import React, { useRef, useCallback, useEffect, useState } from "react";
 import { Vector3 } from "@babylonjs/core/Maths/math";
 import { DirectionalLight } from "@babylonjs/core/Lights/directionalLight";
 import { ShadowGenerator } from "@babylonjs/core/Lights/Shadows/shadowGenerator";
@@ -21,7 +15,7 @@ import DiceResults from "./DiceResults";
 
 import DiceTray from "../../dice/diceTray/DiceTray";
 
-import DiceLoadingContext from "../../contexts/DiceLoadingContext";
+import { useDiceLoading } from "../../contexts/DiceLoadingContext";
 
 import { getDiceRoll } from "../../helpers/dice";
 import useSetting from "../../hooks/useSetting";
@@ -43,9 +37,7 @@ function DiceTrayOverlay({
   const diceTrayRef = useRef();
 
   const [diceTraySize, setDiceTraySize] = useState("single");
-  const { assetLoadStart, assetLoadFinish, isLoading } = useContext(
-    DiceLoadingContext
-  );
+  const { assetLoadStart, assetLoadFinish, isLoading } = useDiceLoading();
   const [fullScreen] = useSetting("map.fullScreen");
 
   function handleAssetLoadStart() {

src/components/map/Map.js

@@ -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}

src/components/map/MapDrawing.js

@@ -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}

src/components/map/MapEditor.js

@@ -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>

src/components/map/MapFog.js

@@ -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"}

src/components/map/MapGrid.js

@@ -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"} />
   );
 }
 

src/components/map/MapGridEditor.js

@@ -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 };
 

src/components/map/MapInteraction.js

@@ -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>
   );

src/components/map/MapLoadingOverlay.js

@@ -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 && (

src/components/map/MapMeasure.js

@@ -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"
         />

src/components/map/MapNotes.js

@@ -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,

src/components/map/MapPointer.js

@@ -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>

src/components/map/MapTiles.js

@@ -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;

src/components/map/MapToken.js

@@ -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();

src/components/map/SelectMapButton.js

@@ -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);

src/components/map/controls/DrawingToolSettings.js

@@ -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,

src/components/map/controls/FogToolSettings.js

@@ -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,

src/components/map/controls/MeasureToolSettings.js

@@ -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

src/components/note/Note.js

@@ -1,9 +1,10 @@
-import React, { useContext, useEffect, useState, useRef } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import { Rect, Text } from "react-konva";
 import { useSpring, animated } from "react-spring/konva";
 
-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 { snapNodeToGrid } from "../../helpers/grid";
 import colors from "../../helpers/colors";
@@ -22,12 +23,11 @@ function Note({
   onNoteDragEnd,
   fadeOnHover,
 }) {
-  const { userId } = useContext(AuthContext);
-  const { mapWidth, mapHeight, setPreventMapInteraction } = useContext(
-    MapInteractionContext
-  );
+  const { userId } = useAuth();
+  const { mapWidth, mapHeight, setPreventMapInteraction } = useMapInteraction();
+  const { gridCellPixelSize } = useGrid();
 
-  const noteWidth = map && (mapWidth / map.grid.size.x) * note.size;
+  const noteWidth = gridCellPixelSize.width * note.size;
   const noteHeight = noteWidth;
   const notePadding = noteWidth / 10;
 

src/components/note/NoteMenu.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from "react";
+import React, { useEffect, useState } from "react";
 import { Box, Flex, Text, IconButton, Textarea } from "theme-ui";
 
 import Slider from "../Slider";
@@ -16,7 +16,7 @@ import HideIcon from "../../icons/TokenHideIcon";
 import NoteIcon from "../../icons/NoteToolIcon";
 import TextIcon from "../../icons/NoteTextIcon";
 
-import AuthContext from "../../contexts/AuthContext";
+import { useAuth } from "../../contexts/AuthContext";
 
 const defaultNoteMaxSize = 6;
 
@@ -28,7 +28,7 @@ function NoteMenu({
   onNoteChange,
   map,
 }) {
-  const { userId } = useContext(AuthContext);
+  const { userId } = useAuth();
 
   const wasOpen = usePrevious(isOpen);
 

src/components/party/Party.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from "react";
+import React, { useEffect } from "react";
 import { Flex, Box, Text } from "theme-ui";
 import SimpleBar from "simplebar-react";
 
@@ -13,16 +13,13 @@ import DiceTrayButton from "./DiceTrayButton";
 
 import useSetting from "../../hooks/useSetting";
 
-import PartyContext from "../../contexts/PartyContext";
-import {
-  PlayerUpdaterContext,
-  PlayerStateContext,
-} from "../../contexts/PlayerContext";
+import { useParty } from "../../contexts/PartyContext";
+import { usePlayerState, usePlayerUpdater } from "../../contexts/PlayerContext";
 
 function Party({ gameId, stream, partyStreams, onStreamStart, onStreamEnd }) {
-  const setPlayerState = useContext(PlayerUpdaterContext);
-  const playerState = useContext(PlayerStateContext);
-  const partyState = useContext(PartyContext);
+  const setPlayerState = usePlayerUpdater();
+  const playerState = usePlayerState();
+  const partyState = useParty();
 
   const [fullScreen] = useSetting("map.fullScreen");
   const [shareDice, setShareDice] = useSetting("dice.shareDice");

src/components/token/ProxyToken.js

@@ -1,11 +1,11 @@
-import React, { useEffect, useRef, useState, useContext } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 import { Image, Box } from "theme-ui";
 import interact from "interactjs";
 
 import usePortal from "../../hooks/usePortal";
 
-import MapStageContext from "../../contexts/MapStageContext";
+import { useMapStage } from "../../contexts/MapStageContext";
 
 /**
  * @callback onProxyDragEnd
@@ -34,7 +34,7 @@ function ProxyToken({ tokenClassName, onProxyDragEnd, tokens }) {
   }, [tokens]);
 
   const proxyOnMap = useRef(false);
-  const mapStageRef = useContext(MapStageContext);
+  const mapStageRef = useMapStage();
 
   useEffect(() => {
     interact(`.${tokenClassName}`).draggable({

src/components/token/TokenDragOverlay.js

@@ -1,7 +1,7 @@
-import React, { useContext } from "react";
+import React from "react";
 
-import AuthContext from "../../contexts/AuthContext";
-import MapInteractionContext from "../../contexts/MapInteractionContext";
+import { useAuth } from "../../contexts/AuthContext";
+import { useMapInteraction } from "../../contexts/MapInteractionContext";
 
 import DragOverlay from "../DragOverlay";
 
@@ -14,8 +14,8 @@ function TokenDragOverlay({
   dragging,
   mapState,
 }) {
-  const { userId } = useContext(AuthContext);
-  const { mapWidth, mapHeight } = useContext(MapInteractionContext);
+  const { userId } = useAuth();
+  const { mapWidth, mapHeight } = useMapInteraction();
 
   function handleTokenRemove() {
     // Handle other tokens when a vehicle gets deleted

src/components/token/TokenMenu.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useContext } from "react";
+import React, { useEffect, useState } from "react";
 import { Box, Input, Flex, Text, IconButton } from "theme-ui";
 
 import Slider from "../Slider";
@@ -14,7 +14,7 @@ import UnlockIcon from "../../icons/TokenUnlockIcon";
 import ShowIcon from "../../icons/TokenShowIcon";
 import HideIcon from "../../icons/TokenHideIcon";
 
-import AuthContext from "../../contexts/AuthContext";
+import { useAuth } from "../../contexts/AuthContext";
 
 const defaultTokenMaxSize = 6;
 function TokenMenu({
@@ -25,7 +25,7 @@ function TokenMenu({
   onTokenStateChange,
   map,
 }) {
-  const { userId } = useContext(AuthContext);
+  const { userId } = useAuth();
 
   const wasOpen = usePrevious(isOpen);
 

src/components/token/TokenPreview.js

@@ -10,6 +10,8 @@ import useDataSource from "../../hooks/useDataSource";
 import useImageCenter from "../../hooks/useImageCenter";
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
+import { GridProvider } from "../../contexts/GridContext";
+
 import GridOnIcon from "../../icons/GridOnIcon";
 import GridOffIcon from "../../icons/GridOffIcon";
 
@@ -110,7 +112,7 @@ function TokenPreview({ token }) {
             />
             {showGridPreview && (
               <Group offsetY={gridHeight - tokenHeight}>
-                <Grid
+                <GridProvider
                   grid={{
                     size: { x: gridX, y: gridY },
                     inset: {
@@ -121,7 +123,9 @@ function TokenPreview({ token }) {
                   }}
                   width={gridWidth}
                   height={gridHeight}
-                />
+                >
+                  <Grid />
+                </GridProvider>
                 <Rect
                   width={gridWidth}
                   height={gridHeight}

src/components/token/TokenTiles.js

@@ -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";
@@ -12,7 +12,7 @@ import TokenTile from "./TokenTile";
 import Link from "../Link";
 import FilterBar from "../FilterBar";
 
-import DatabaseContext from "../../contexts/DatabaseContext";
+import { useDatabase } from "../../contexts/DatabaseContext";
 
 import useResponsiveLayout from "../../hooks/useResponsiveLayout";
 
@@ -31,7 +31,7 @@ function TokenTiles({
   onTokensGroup,
   onTokensHide,
 }) {
-  const { databaseStatus } = useContext(DatabaseContext);
+  const { databaseStatus } = useDatabase();
   const layout = useResponsiveLayout();
 
   let hasSelectedDefaultToken = selectedTokens.some(

src/components/token/Tokens.js

@@ -1,4 +1,4 @@
-import React, { useContext } from "react";
+import React from "react";
 import { Box, Flex } from "theme-ui";
 import shortid from "shortid";
 import SimpleBar from "simplebar-react";
@@ -12,14 +12,14 @@ import { fromEntries } from "../../helpers/shared";
 
 import useSetting from "../../hooks/useSetting";
 
-import AuthContext from "../../contexts/AuthContext";
-import TokenDataContext from "../../contexts/TokenDataContext";
+import { useAuth } from "../../contexts/AuthContext";
+import { useTokenData } from "../../contexts/TokenDataContext";
 
 const listTokenClassName = "list-token";
 
 function Tokens({ onMapTokenStateCreate }) {
-  const { userId } = useContext(AuthContext);
-  const { ownedTokens, tokens, updateToken } = useContext(TokenDataContext);
+  const { userId } = useAuth();
+  const { ownedTokens, tokens, updateToken } = useTokenData();
   const [fullScreen] = useSetting("map.fullScreen");
 
   function handleProxyDragEnd(isOnMap, token) {