Changed map drag position to use a ref value to avoid re-renders

Added a useMapBrush helper

src/components/map/MapDrawing.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState, useCallback } from "react";
 import shortid from "shortid";
 import { Group, Line, Rect, Circle } from "react-konva";
 
@@ -14,6 +14,7 @@ import {
 } from "../../helpers/drawing";
 
 import colors from "../../helpers/colors";
+import useMapBrush from "../../helpers/useMapBrush";
 
 function MapDrawing({
   shapes,
@@ -23,13 +24,7 @@ function MapDrawing({
   selectedToolSettings,
   gridSize,
 }) {
-  const {
+  const { stageScale, mapWidth, mapHeight } = useContext(MapInteractionContext);
-    stageDragState,
-    mapDragPosition,
-    stageScale,
-    mapWidth,
-    mapHeight,
-  } = useContext(MapInteractionContext);
   const [drawingShape, setDrawingShape] = useState(null);
 
   const shouldHover = selectedToolId === "erase";
@@ -38,14 +33,11 @@ function MapDrawing({
     selectedToolId === "shape" ||
     selectedToolId === "erase";
 
-  useEffect(() => {
+  const handleShapeDraw = useCallback(
-    if (!isEditing) {
+    (brushState, mapBrushPosition) => {
-      return;
-    }
-
       function startShape() {
         const brushPosition = getBrushPositionForTool(
-        mapDragPosition,
+          mapBrushPosition,
           selectedToolId,
           selectedToolSettings,
           gridSize,
@@ -77,7 +69,7 @@ function MapDrawing({
 
       function continueShape() {
         const brushPosition = getBrushPositionForTool(
-        mapDragPosition,
+          mapBrushPosition,
           selectedToolId,
           selectedToolSettings,
           gridSize,
@@ -129,11 +121,11 @@ function MapDrawing({
         setDrawingShape(null);
       }
 
-    switch (stageDragState) {
+      switch (brushState) {
         case "first":
           startShape();
           return;
-      case "dragging":
+        case "drawing":
           continueShape();
           return;
         case "last":
@@ -142,18 +134,19 @@ function MapDrawing({
         default:
           return;
       }
-  }, [
+    },
-    stageDragState,
+    [
-    mapDragPosition,
       selectedToolId,
       selectedToolSettings,
-    isEditing,
       gridSize,
       stageScale,
       onShapeAdd,
       shapes,
       drawingShape,
-  ]);
+    ]
+  );
+
+  useMapBrush(isEditing, handleShapeDraw);
 
   function handleShapeClick(_, shape) {
     if (selectedToolId === "erase") {

src/components/map/MapFog.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect, useState } from "react";
+import React, { useContext, useState, useCallback } from "react";
 import shortid from "shortid";
 import { Group, Line } from "react-konva";
 import useImage from "use-image";
@@ -15,6 +15,7 @@ import {
 } from "../../helpers/drawing";
 
 import colors from "../../helpers/colors";
+import useMapBrush from "../../helpers/useMapBrush";
 
 function MapFog({
   shapes,
@@ -25,13 +26,7 @@ function MapFog({
   selectedToolSettings,
   gridSize,
 }) {
-  const {
+  const { stageScale, mapWidth, mapHeight } = useContext(MapInteractionContext);
-    stageDragState,
-    mapDragPosition,
-    stageScale,
-    mapWidth,
-    mapHeight,
-  } = useContext(MapInteractionContext);
   const [drawingShape, setDrawingShape] = useState(null);
 
   const isEditing = selectedToolId === "fog";
@@ -42,14 +37,11 @@ function MapFog({
 
   const [patternImage] = useImage(diagonalPattern);
 
-  useEffect(() => {
+  const handleShapeDraw = useCallback(
-    if (!isEditing) {
+    (brushState, mapBrushPosition) => {
-      return;
-    }
-
       function startShape() {
         const brushPosition = getBrushPositionForTool(
-        mapDragPosition,
+          mapBrushPosition,
           selectedToolId,
           selectedToolSettings,
           gridSize,
@@ -70,7 +62,7 @@ function MapFog({
 
       function continueShape() {
         const brushPosition = getBrushPositionForTool(
-        mapDragPosition,
+          mapBrushPosition,
           selectedToolId,
           selectedToolSettings,
           gridSize,
@@ -116,11 +108,11 @@ function MapFog({
         setDrawingShape(null);
       }
 
-    switch (stageDragState) {
+      switch (brushState) {
         case "first":
           startShape();
           return;
-      case "dragging":
+        case "drawing":
           continueShape();
           return;
         case "last":
@@ -129,18 +121,19 @@ function MapFog({
         default:
           return;
       }
-  }, [
+    },
-    stageDragState,
+    [
-    mapDragPosition,
       selectedToolId,
       selectedToolSettings,
-    isEditing,
       gridSize,
       stageScale,
       onShapeAdd,
       shapes,
       drawingShape,
-  ]);
+    ]
+  );
+
+  useMapBrush(isEditing, handleShapeDraw);
 
   function handleShapeClick(_, shape) {
     if (!isEditing) {

src/components/map/MapInteraction.js

@@ -29,12 +29,12 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
   // "none" | "first" | "dragging" | "last"
   const [stageDragState, setStageDragState] = useState("none");
   const [preventMapInteraction, setPreventMapInteraction] = useState(false);
-  const [mapDragPosition, setMapDragPosition] = useState({ x: 0, y: 0 });
 
   const stageWidthRef = useRef(stageWidth);
   const stageHeightRef = useRef(stageHeight);
   // 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 mapDragPositionRef = useRef({ x: 0, y: 0 });
 
   useEffect(() => {
     const layer = mapLayerRef.current;
@@ -103,9 +103,11 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
         layer.y(newTranslate.y);
         layer.draw();
         stageTranslateRef.current = newTranslate;
-      } else {
+      }
-        setMapDragPosition(getMapDragPosition(xy));
+      mapDragPositionRef.current = getMapDragPosition(xy);
-        setStageDragState(first ? "first" : last ? "last" : "dragging");
+      const newDragState = first ? "first" : last ? "last" : "dragging";
+      if (stageDragState !== newDragState) {
+        setStageDragState(newDragState);
       }
     },
     onDragEnd: () => {
@@ -153,7 +155,7 @@ function MapInteraction({ map, children, controls, selectedToolId }) {
     setPreventMapInteraction,
     mapWidth,
     mapHeight,
-    mapDragPosition,
+    mapDragPositionRef,
   };
 
   return (

src/contexts/MapInteractionContext.js

@@ -4,9 +4,11 @@ const MapInteractionContext = React.createContext({
   stageScale: 1,
   stageWidth: 1,
   stageHeight: 1,
+  stageDragState: "none",
   setPreventMapInteraction: () => {},
   mapWidth: 1,
   mapHeight: 1,
+  mapDragPositionRef: { current: undefined },
 });
 export const MapInteractionProvider = MapInteractionContext.Provider;
 

src/helpers/useMapBrush.js

@@ -0,0 +1,71 @@
+import { useContext, useRef, useEffect } from "react";
+
+import MapInteractionContext from "../contexts/MapInteractionContext";
+
+import { compare } from "./vector2";
+
+import usePrevious from "./usePrevious";
+
+/**
+ * @callback onBrushUpdate
+ * @param {string} drawState "first" | "drawing" | "last"
+ * @param {Object} brushPosition the normalized x and y coordinates of the brush on the map
+ */
+
+/**
+ * Helper to get the maps drag position as it changes
+ * @param {boolean} shouldUpdate
+ * @param {onBrushUpdate} onBrushUpdate
+ */
+function useMapBrush(shouldUpdate, onBrushUpdate) {
+  const { stageDragState, mapDragPositionRef } = useContext(
+    MapInteractionContext
+  );
+
+  const requestRef = useRef();
+  const previousDragState = usePrevious(stageDragState);
+  const previousBrushPositionRef = useRef(mapDragPositionRef.current);
+
+  useEffect(() => {
+    function updateBrush(forceUpdate) {
+      const drawState =
+        stageDragState === "dragging" ? "drawing" : stageDragState;
+      const brushPosition = mapDragPositionRef.current;
+      const previousBrushPostition = previousBrushPositionRef.current;
+      // Only update brush when it has moved
+      if (
+        !compare(brushPosition, previousBrushPostition, 0.0001) ||
+        forceUpdate
+      ) {
+        onBrushUpdate(drawState, brushPosition);
+        previousBrushPositionRef.current = brushPosition;
+      }
+    }
+
+    function animate() {
+      if (!shouldUpdate) {
+        return;
+      }
+      requestRef.current = requestAnimationFrame(animate);
+      updateBrush(false);
+    }
+
+    requestRef.current = requestAnimationFrame(animate);
+
+    if (stageDragState !== previousDragState && shouldUpdate) {
+      updateBrush(true);
+    }
+
+    return () => {
+      cancelAnimationFrame(requestRef.current);
+    };
+  }, [
+    shouldUpdate,
+    onBrushUpdate,
+    stageDragState,
+    mapDragPositionRef,
+    previousDragState,
+  ]);
+}
+
+export default useMapBrush;