Added a grid snapping sensitivity accessibility option

src/components/map/MapToken.js

@@ -18,8 +18,6 @@ import TokenLabel from "../token/TokenLabel";
 
 import { tokenSources, unknownSource } from "../../tokens";
 
-const snappingThreshold = 1 / 7;
-
 function MapToken({
   token,
   tokenState,
@@ -51,7 +49,7 @@ function MapToken({
     }
   }, [tokenSourceImage]);
 
-  const snapNodeToGrid = useGridSnapping(snappingThreshold);
+  const snapNodeToGrid = useGridSnapping();
 
   function handleDragStart(event) {
     const tokenGroup = event.target;

src/components/note/Note.js

@@ -11,8 +11,6 @@ import colors from "../../helpers/colors";
 import usePrevious from "../../hooks/usePrevious";
 import useGridSnapping from "../../hooks/useGridSnapping";
 
-const snappingThreshold = 1 / 5;
-
 function Note({
   note,
   map,
@@ -35,7 +33,7 @@ function Note({
   const noteHeight = noteWidth;
   const notePadding = noteWidth / 10;
 
-  const snapNodeToGrid = useGridSnapping(snappingThreshold);
+  const snapNodeToGrid = useGridSnapping();
 
   function handleDragStart(event) {
     onNoteDragStart && onNoteDragStart(event, note.id);

src/hooks/useGridSnapping.js

@@ -9,13 +9,20 @@ import {
   getCellCorners,
 } from "../helpers/grid";
 
+import useSetting from "./useSetting";
+
 import { useGrid } from "../contexts/GridContext";
 
 /**
  * Returns a function that when called will snap a node to the current grid
- * @param {number} snappingThreshold 1 = Always snap, 0 = never snap
+ * @param {number=} snappingSensitivity 1 = Always snap, 0 = never snap if undefined the default user setting will be used
  */
-function useGridSnapping(snappingThreshold) {
+function useGridSnapping(snappingSensitivity) {
+  const [defaultSnappingSensitivity] = useSetting(
+    "map.gridSnappingSensitivity"
+  );
+  snappingSensitivity = snappingSensitivity || defaultSnappingSensitivity;
+
   const { grid, gridOffset, gridCellPixelSize } = useGrid();
 
   /**
@@ -57,7 +64,7 @@ function useGridSnapping(snappingThreshold) {
       const distanceToSnapPoint = Vector2.distance(offsetPosition, snapPoint);
       if (
         distanceToSnapPoint <
-        Vector2.min(gridCellPixelSize) * snappingThreshold
+        Vector2.min(gridCellPixelSize) * snappingSensitivity
       ) {
         // Reverse grid offset
         let offsetSnapPoint = Vector2.add(snapPoint, gridOffset);

src/modals/SettingsModal.js

@@ -26,6 +26,9 @@ function SettingsModal({ isOpen, onRequestClose }) {
   const { userId } = useAuth();
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const [labelSize, setLabelSize] = useSetting("map.labelSize");
+  const [gridSnappingSensitivity, setGridSnappingSensitivity] = useSetting(
+    "map.gridSnappingSensitivity"
+  );
   const [storageEstimate, setStorageEstimate] = useState();
   const [isImportExportModalOpen, setIsImportExportModalOpen] = useState(false);
 
@@ -113,6 +116,21 @@ function SettingsModal({ isOpen, onRequestClose }) {
               labelFunc={(value) => `${value}x`}
             />
           </Label>
+          <Label py={2}>
+            Grid Snapping Sensitivity
+            <Slider
+              step={0.05}
+              min={0}
+              max={0.5}
+              ml={1}
+              sx={{ width: "initial" }}
+              value={gridSnappingSensitivity}
+              onChange={(e) =>
+                setGridSnappingSensitivity(parseFloat(e.target.value))
+              }
+              labelFunc={(value) => `${value * 2}`}
+            />
+          </Label>
           <Divider bg="text" />
           <Flex py={2}>
             <Button sx={{ flexGrow: 1 }} onClick={handleClearCache}>

src/settings.js

@@ -37,10 +37,11 @@ function loadVersions(settings) {
     ...prev,
     game: { usePassword: true },
   }));
-  // v1.7.1 - Added pointer color
+  // v1.8.0 - Added pointer color and grid snapping sensitivity
   settings.version(4, (prev) => ({
     ...prev,
     pointer: { color: "red" },
+    map: { ...prev.map, gridSnappingSensitivity: 0.2 },
   }));
 }