Added snap to grid option to map settings

src/components/map/Map.js

@@ -284,6 +284,7 @@ function Map({
 
   const mapDrawing = (
     <MapDrawing
+      map={map}
       shapes={mapShapes}
       onShapeAdd={handleMapShapeAdd}
       onShapesRemove={handleMapShapesRemove}
@@ -296,6 +297,7 @@ function Map({
 
   const mapFog = (
     <MapFog
+      map={map}
       shapes={fogShapes}
       onShapeAdd={handleFogShapeAdd}
       onShapeSubtract={handleFogShapeSubtract}
@@ -315,6 +317,7 @@ function Map({
 
   const mapMeasure = (
     <MapMeasure
+      map={map}
       active={selectedToolId === "measure"}
       gridSize={gridSizeNormalized}
       selectedToolSettings={toolSettings[selectedToolId]}

src/components/map/MapDrawing.js

@@ -18,6 +18,7 @@ import { getRelativePointerPositionNormalized } from "../../helpers/konva";
 import colors from "../../helpers/colors";
 
 function MapDrawing({
+  map,
   shapes,
   onShapeAdd,
   onShapesRemove,
@@ -52,6 +53,7 @@ function MapDrawing({
     function getBrushPosition() {
       const mapImage = mapStage.findOne("#mapImage");
       return getBrushPositionForTool(
+        map,
         getRelativePointerPositionNormalized(mapImage),
         toolId,
         toolSettings,
@@ -153,23 +155,7 @@ function MapDrawing({
       interactionEmitter.off("drag", handleBrushMove);
       interactionEmitter.off("dragEnd", handleBrushUp);
     };
-  }, [
-    drawingShape,
-    erasingShapes,
-    gridSize,
-    isBrush,
-    isBrushDown,
-    active,
-    toolId,
-    isShape,
-    mapStageRef,
-    onShapeAdd,
-    onShapesRemove,
-    toolSettings,
-    shapes,
-    stageScale,
-    interactionEmitter,
-  ]);
+  });
 
   function handleShapeOver(shape, isDown) {
     if (shouldHover && isDown) {

src/components/map/MapFog.js

@@ -22,6 +22,7 @@ import {
 } from "../../helpers/konva";
 
 function MapFog({
+  map,
   shapes,
   onShapeAdd,
   onShapeSubtract,
@@ -57,6 +58,7 @@ function MapFog({
     function getBrushPosition() {
       const mapImage = mapStage.findOne("#mapImage");
       return getBrushPositionForTool(
+        map,
         getRelativePointerPositionNormalized(mapImage),
         toolId,
         toolSettings,
@@ -223,23 +225,7 @@ function MapFog({
       mapStage.off("mousemove touchmove", handlePolygonMove);
       mapStage.off("click tap", handlePolygonClick);
     };
-  }, [
-    mapStageRef,
-    active,
-    drawingShape,
-    editingShapes,
-    gridSize,
-    isBrushDown,
-    onShapeAdd,
-    onShapeSubtract,
-    onShapesEdit,
-    onShapesRemove,
-    toolId,
-    toolSettings,
-    shapes,
-    stageScale,
-    interactionEmitter,
-  ]);
+  });
 
   const finishDrawingPolygon = useCallback(() => {
     const subtract = toolSettings.useFogSubtract;

src/components/map/MapMeasure.js

@@ -13,7 +13,7 @@ import {
 import { getRelativePointerPositionNormalized } from "../../helpers/konva";
 import * as Vector2 from "../../helpers/vector2";
 
-function MapMeasure({ selectedToolSettings, active, gridSize }) {
+function MapMeasure({ map, selectedToolSettings, active, gridSize }) {
   const { stageScale, mapWidth, mapHeight, interactionEmitter } = useContext(
     MapInteractionContext
   );
@@ -36,6 +36,7 @@ function MapMeasure({ selectedToolSettings, active, gridSize }) {
     function getBrushPosition() {
       const mapImage = mapStage.findOne("#mapImage");
       return getBrushPositionForTool(
+        map,
         getRelativePointerPositionNormalized(mapImage),
         "drawing",
         { type: "line" },
@@ -87,15 +88,7 @@ function MapMeasure({ selectedToolSettings, active, gridSize }) {
       interactionEmitter.off("drag", handleBrushMove);
       interactionEmitter.off("dragEnd", handleBrushUp);
     };
-  }, [
-    drawingShapeData,
-    gridSize,
-    isBrushDown,
-    mapStageRef,
-    interactionEmitter,
-    active,
-    selectedToolSettings,
-  ]);
+  });
 
   function renderShape(shapeData) {
     const linePoints = shapeData.points.reduce(

src/components/map/MapSettings.js

@@ -103,7 +103,7 @@ function MapSettings({
           <Flex
             mt={2}
             mb={map.type === "default" ? 2 : 0}
-            sx={{ alignItems: "center" }}
+            sx={{ alignItems: "flex-end" }}
           >
             <Box sx={{ width: "50%" }}>
               <Label>Grid Type</Label>
@@ -116,14 +116,28 @@ function MapSettings({
                 <option disabled>Hex (Coming Soon)</option>
               </Select>
             </Box>
-            <Label sx={{ width: "50%" }} ml={2}>
+            <Flex sx={{ width: "50%", flexDirection: "column" }} ml={2}>
+              <Label>
                 <Checkbox
                   checked={!mapEmpty && map.showGrid}
                   disabled={mapEmpty || map.type === "default"}
-                onChange={(e) => onSettingsChange("showGrid", e.target.checked)}
+                  onChange={(e) =>
+                    onSettingsChange("showGrid", e.target.checked)
+                  }
                 />
                 Show Grid
               </Label>
+              <Label>
+                <Checkbox
+                  checked={!mapEmpty && map.snapToGrid}
+                  disabled={mapEmpty || map.type === "default"}
+                  onChange={(e) =>
+                    onSettingsChange("snapToGrid", e.target.checked)
+                  }
+                />
+                Snap to Grid
+              </Label>
+            </Flex>
           </Flex>
           {!mapEmpty && map.type !== "default" && (
             <Flex my={2} sx={{ alignItems: "center" }}>

src/contexts/MapDataContext.js

@@ -44,6 +44,7 @@ export function MapDataProvider({ children }) {
           lastModified: Date.now() + i,
           gridType: "grid",
           showGrid: false,
+          snapToGrid: true,
         });
         // Add a state for the map if there isn't one already
         const state = await database.table("states").get(id);

src/database.js

@@ -144,6 +144,17 @@ function loadVersions(db) {
           }
         });
     });
+  // v1.5.0 - Added map snap to grid option
+  db.version(8)
+    .stores({})
+    .upgrade((tx) => {
+      return tx
+        .table("maps")
+        .toCollection()
+        .modify((map) => {
+          map.snapToGrid = true;
+        });
+    });
 }
 
 // Get the dexie database used in DatabaseContext

src/helpers/drawing.js

@@ -6,6 +6,7 @@ import { toDegrees, omit } from "./shared";
 
 const snappingThreshold = 1 / 5;
 export function getBrushPositionForTool(
+  map,
   brushPosition,
   tool,
   toolSettings,
@@ -14,12 +15,13 @@ export function getBrushPositionForTool(
 ) {
   let position = brushPosition;
   const useGridSnappning =
-    (tool === "drawing" &&
+    map.snapToGrid &&
+    ((tool === "drawing" &&
       (toolSettings.type === "line" ||
         toolSettings.type === "rectangle" ||
         toolSettings.type === "circle" ||
         toolSettings.type === "triangle")) ||
-    (tool === "fog" && toolSettings.type === "polygon");
+      (tool === "fog" && toolSettings.type === "polygon"));
 
   if (useGridSnappning) {
     // Snap to corners of grid

src/modals/SelectMapModal.js

@@ -22,6 +22,7 @@ const defaultMapProps = {
   // TODO: add support for hex horizontal and hex vertical
   gridType: "grid",
   showGrid: false,
+  snapToGrid: true,
   quality: "original",
 };