Optimise grid and interaction context

src/components/map/MapDrawing.js

@@ -2,9 +2,17 @@ import React, { useState, useEffect } from "react";
 import shortid from "shortid";
 import { Group, Line, Rect, Circle } from "react-konva";
 
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
+import {
+  useDebouncedStageScale,
+  useMapWidth,
+  useMapHeight,
+  useInteractionEmitter,
+} from "../../contexts/MapInteractionContext";
 import { useMapStage } from "../../contexts/MapStageContext";
-import { useGrid } from "../../contexts/GridContext";
+import {
+  useGridCellNormalizedSize,
+  useGridStrokeWidth,
+} from "../../contexts/GridContext";
 
 import Vector2 from "../../helpers/Vector2";
 import {
@@ -25,13 +33,14 @@ function MapDrawing({
   active,
   toolSettings,
 }) {
-  const {
-    stageScale,
-    mapWidth,
-    mapHeight,
-    interactionEmitter,
-  } = useMapInteraction();
-  const { gridCellNormalizedSize, gridStrokeWidth } = useGrid();
+  const stageScale = useDebouncedStageScale();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const interactionEmitter = useInteractionEmitter();
+
+  const gridCellNormalizedSize = useGridCellNormalizedSize();
+  const gridStrokeWidth = useGridStrokeWidth();
+
   const mapStageRef = useMapStage();
   const [drawingShape, setDrawingShape] = useState(null);
   const [isBrushDown, setIsBrushDown] = useState(false);

src/components/map/MapFog.js

@@ -5,9 +5,21 @@ import useImage from "use-image";
 
 import diagonalPattern from "../../images/DiagonalPattern.png";
 
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
+import {
+  useDebouncedStageScale,
+  useMapWidth,
+  useMapHeight,
+  useInteractionEmitter,
+} from "../../contexts/MapInteractionContext";
 import { useMapStage } from "../../contexts/MapStageContext";
-import { useGrid } from "../../contexts/GridContext";
+import {
+  useGrid,
+  useGridCellPixelSize,
+  useGridCellNormalizedSize,
+  useGridStrokeWidth,
+  useGridCellPixelOffset,
+  useGridOffset,
+} from "../../contexts/GridContext";
 import { useKeyboard } from "../../contexts/KeyboardContext";
 
 import Vector2 from "../../helpers/Vector2";
@@ -41,20 +53,18 @@ function MapFog({
   toolSettings,
   editable,
 }) {
-  const {
-    stageScale,
-    mapWidth,
-    mapHeight,
-    interactionEmitter,
-  } = useMapInteraction();
-  const {
-    grid,
-    gridCellNormalizedSize,
-    gridCellPixelSize,
-    gridStrokeWidth,
-    gridCellPixelOffset,
-    gridOffset,
-  } = useGrid();
+  const stageScale = useDebouncedStageScale();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const interactionEmitter = useInteractionEmitter();
+
+  const grid = useGrid();
+  const gridCellNormalizedSize = useGridCellNormalizedSize();
+  const gridCellPixelSize = useGridCellPixelSize();
+  const gridStrokeWidth = useGridStrokeWidth();
+  const gridCellPixelOffset = useGridCellPixelOffset();
+  const gridOffset = useGridOffset();
+
   const [gridSnappingSensitivity] = useSetting("map.gridSnappingSensitivity");
   const mapStageRef = useMapStage();
 

src/components/map/MapGridEditor.js

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

src/components/map/MapMeasure.js

@@ -1,9 +1,20 @@
 import React, { useState, useEffect } from "react";
 import { Group, Line, Text, Label, Tag } from "react-konva";
 
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
+import {
+  useDebouncedStageScale,
+  useMapWidth,
+  useMapHeight,
+  useInteractionEmitter,
+} from "../../contexts/MapInteractionContext";
 import { useMapStage } from "../../contexts/MapStageContext";
-import { useGrid } from "../../contexts/GridContext";
+import {
+  useGrid,
+  useGridCellPixelSize,
+  useGridCellNormalizedSize,
+  useGridStrokeWidth,
+  useGridOffset,
+} from "../../contexts/GridContext";
 
 import {
   getDefaultShapeData,
@@ -16,19 +27,17 @@ import { parseGridScale, gridDistance } from "../../helpers/grid";
 import useGridSnapping from "../../hooks/useGridSnapping";
 
 function MapMeasure({ map, active }) {
-  const {
-    stageScale,
-    mapWidth,
-    mapHeight,
-    interactionEmitter,
-  } = useMapInteraction();
-  const {
-    grid,
-    gridCellNormalizedSize,
-    gridStrokeWidth,
-    gridCellPixelSize,
-    gridOffset,
-  } = useGrid();
+  const stageScale = useDebouncedStageScale();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const interactionEmitter = useInteractionEmitter();
+
+  const grid = useGrid();
+  const gridCellNormalizedSize = useGridCellNormalizedSize();
+  const gridCellPixelSize = useGridCellPixelSize();
+  const gridStrokeWidth = useGridStrokeWidth();
+  const gridOffset = useGridOffset();
+
   const mapStageRef = useMapStage();
   const [drawingShapeData, setDrawingShapeData] = useState(null);
   const [isBrushDown, setIsBrushDown] = useState(false);

src/components/map/MapNotes.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef } from "react";
 import shortid from "shortid";
 import { Group } from "react-konva";
 
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
+import { useInteractionEmitter } from "../../contexts/MapInteractionContext";
 import { useMapStage } from "../../contexts/MapStageContext";
 import { useAuth } from "../../contexts/AuthContext";
 
@@ -27,7 +27,7 @@ function MapNotes({
   onNoteDragEnd,
   fadeOnHover,
 }) {
-  const { interactionEmitter } = useMapInteraction();
+  const interactionEmitter = useInteractionEmitter();
   const { userId } = useAuth();
   const mapStageRef = useMapStage();
   const [isBrushDown, setIsBrushDown] = useState(false);

src/components/map/MapPointer.js

@@ -1,9 +1,13 @@
 import React, { useEffect } from "react";
 import { Group } from "react-konva";
 
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
+import {
+  useMapWidth,
+  useMapHeight,
+  useInteractionEmitter,
+} from "../../contexts/MapInteractionContext";
 import { useMapStage } from "../../contexts/MapStageContext";
-import { useGrid } from "../../contexts/GridContext";
+import { useGridStrokeWidth } from "../../contexts/GridContext";
 
 import {
   getRelativePointerPositionNormalized,
@@ -22,8 +26,10 @@ function MapPointer({
   visible,
   color,
 }) {
-  const { mapWidth, mapHeight, interactionEmitter } = useMapInteraction();
-  const { gridStrokeWidth } = useGrid();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const interactionEmitter = useInteractionEmitter();
+  const gridStrokeWidth = useGridStrokeWidth();
   const mapStageRef = useMapStage();
 
   useEffect(() => {

src/components/map/MapTest.js

@@ -0,0 +1,5 @@
+import React from "react";
+
+function MapTest() {}
+
+export default MapTest;

src/components/map/MapToken.js

@@ -10,8 +10,13 @@ import usePrevious from "../../hooks/usePrevious";
 import useGridSnapping from "../../hooks/useGridSnapping";
 
 import { useAuth } from "../../contexts/AuthContext";
-import { useMapInteraction } from "../../contexts/MapInteractionContext";
-import { useGrid } from "../../contexts/GridContext";
+import {
+  useSetPreventMapInteraction,
+  useMapWidth,
+  useMapHeight,
+  useDebouncedStageScale,
+} from "../../contexts/MapInteractionContext";
+import { useGridCellPixelSize } from "../../contexts/GridContext";
 
 import TokenStatus from "../token/TokenStatus";
 import TokenLabel from "../token/TokenLabel";
@@ -31,13 +36,13 @@ function MapToken({
   map,
 }) {
   const { userId } = useAuth();
-  const {
-    setPreventMapInteraction,
-    mapWidth,
-    mapHeight,
-    stageScale,
-  } = useMapInteraction();
-  const { gridCellPixelSize } = useGrid();
+
+  const stageScale = useDebouncedStageScale();
+  const mapWidth = useMapWidth();
+  const mapHeight = useMapHeight();
+  const setPreventMapInteraction = useSetPreventMapInteraction();
+
+  const gridCellPixelSize = useGridCellPixelSize();
 
   const tokenSource = useDataSource(token, tokenSources, unknownSource);
   const [tokenSourceImage, tokenSourceStatus] = useImage(tokenSource);