diff --git a/src/components/map/MapToken.js b/src/components/map/MapToken.js
index eae04c8..6f127c4 100644
--- a/src/components/map/MapToken.js
+++ b/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;
diff --git a/src/components/note/Note.js b/src/components/note/Note.js
index 914b78a..3df90a8 100644
--- a/src/components/note/Note.js
+++ b/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);
diff --git a/src/hooks/useGridSnapping.js b/src/hooks/useGridSnapping.js
index 7da3cb4..56e0095 100644
--- a/src/hooks/useGridSnapping.js
+++ b/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);
diff --git a/src/modals/SettingsModal.js b/src/modals/SettingsModal.js
index e579922..5c9467e 100644
--- a/src/modals/SettingsModal.js
+++ b/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`}
/>
+