Added brush grid snapping

src/components/Map.js

@@ -45,6 +45,7 @@ function Map({
 
   const [selectedTool, setSelectedTool] = useState("pan");
   const [brushColor, setBrushColor] = useState("black");
+  const [useBrushGridSnapping, setUseBrushGridSnapping] = useState(false);
 
   const [drawnShapes, setDrawnShapes] = useState([]);
   function handleShapeAdd(shape) {
@@ -192,7 +193,9 @@ function Map({
   const mapRef = useRef(null);
   const mapContainerRef = useRef();
   const gridX = mapData && mapData.gridX;
-  const tokenSizePercent = (1 / gridX) * 100;
+  const gridY = mapData && mapData.gridY;
+  const gridSizeNormalized = { x: 1 / gridX || 0, y: 1 / gridY || 0 };
+  const tokenSizePercent = gridSizeNormalized.x * 100;
   const aspectRatio = (mapData && mapData.width / mapData.height) || 1;
 
   const mapImage = (
@@ -280,6 +283,8 @@ function Map({
               onShapeAdd={handleShapeAdd}
               onShapeRemove={handleShapeRemove}
               brushColor={brushColor}
+              useGridSnapping={useBrushGridSnapping}
+              gridSize={gridSizeNormalized}
             />
             {mapTokens}
           </Box>
@@ -296,6 +301,8 @@ function Map({
           brushColor={brushColor}
           onBrushColorChange={setBrushColor}
           onEraseAll={handleShapeRemoveAll}
+          useBrushGridSnapping={useBrushGridSnapping}
+          onBrushGridSnappingChange={setUseBrushGridSnapping}
         />
       </Box>
       <ProxyToken

src/components/MapControls.js

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { Flex, Box, IconButton, Button } from "theme-ui";
+import { Flex, Box, IconButton, Button, Label } from "theme-ui";
 
 import AddMapButton from "./AddMapButton";
 import ExpandMoreIcon from "../icons/ExpandMoreIcon";
@@ -8,6 +8,8 @@ import BrushToolIcon from "../icons/BrushToolIcon";
 import EraseToolIcon from "../icons/EraseToolIcon";
 import UndoIcon from "../icons/UndoIcon";
 import RedoIcon from "../icons/RedoIcon";
+import GridOnIcon from "../icons/GridOnIcon";
+import GridOffIcon from "../icons/GridOffIcon";
 
 import colors, { colorOptions } from "../helpers/colors";
 
@@ -25,6 +27,8 @@ function MapControls({
   brushColor,
   onBrushColorChange,
   onEraseAll,
+  useBrushGridSnapping,
+  onBrushGridSnappingChange,
 }) {
   const [isExpanded, setIsExpanded] = useState(false);
 
@@ -66,6 +70,33 @@ function MapControls({
             </Box>
           ))}
         </Box>
+        <Box>
+          <Label
+            sx={{
+              fontSize: 1,
+              alignItems: "center",
+              ":hover": { color: "primary", cursor: "pointer" },
+              ":active": { color: "secondary" },
+            }}
+          >
+            <IconButton
+              aria-label={
+                useBrushGridSnapping
+                  ? "Disable Brush Grid Snapping"
+                  : "Enable Brush Grid Snapping"
+              }
+              title={
+                useBrushGridSnapping
+                  ? "Disable Brush Grid Snapping"
+                  : "Enable Brush Grid Snapping"
+              }
+              onClick={() => onBrushGridSnappingChange(!useBrushGridSnapping)}
+            >
+              {useBrushGridSnapping ? <GridOffIcon /> : <GridOnIcon />}
+            </IconButton>
+            Grid Lock
+          </Label>
+        </Box>
       </Box>
     ),
     erase: (

src/components/MapDrawing.js

@@ -3,6 +3,7 @@ import simplify from "simplify-js";
 import shortid from "shortid";
 
 import colors from "../helpers/colors";
+import { snapPositionToGrid } from "../helpers/shared";
 
 function MapDrawing({
   width,
@@ -12,6 +13,8 @@ function MapDrawing({
   onShapeAdd,
   onShapeRemove,
   brushColor,
+  useGridSnapping,
+  gridSize,
 }) {
   const canvasRef = useRef();
   const containerRef = useRef();
@@ -46,7 +49,10 @@ function MapDrawing({
     setPointerPosition(position);
     setIsDrawing(true);
     if (selectedTool === "brush") {
-      setBrushPoints([position]);
+      const brushPosition = useGridSnapping
+        ? snapPositionToGrid(position, gridSize)
+        : position;
+      setBrushPoints([brushPosition]);
     }
   }
 
@@ -61,7 +67,15 @@ function MapDrawing({
     }
     if (isDrawing && selectedTool === "brush") {
       setPointerPosition(position);
-      setBrushPoints((prevPoints) => [...prevPoints, position]);
+      const brushPosition = useGridSnapping
+        ? snapPositionToGrid(position, gridSize)
+        : position;
+      setBrushPoints((prevPoints) => {
+        if (prevPoints[prevPoints.length - 1] === brushPosition) {
+          return prevPoints;
+        }
+        return [...prevPoints, brushPosition];
+      });
     }
   }