diff --git a/src/components/map/Map.js b/src/components/map/Map.js index fddc9a7..2e7d854 100644 --- a/src/components/map/Map.js +++ b/src/components/map/Map.js @@ -284,6 +284,7 @@ function Map({ const mapDrawing = ( { const subtract = toolSettings.useFogSubtract; diff --git a/src/components/map/MapMeasure.js b/src/components/map/MapMeasure.js index 0288e6b..c3544a7 100644 --- a/src/components/map/MapMeasure.js +++ b/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( diff --git a/src/components/map/MapSettings.js b/src/components/map/MapSettings.js index 31743eb..1f11809 100644 --- a/src/components/map/MapSettings.js +++ b/src/components/map/MapSettings.js @@ -103,7 +103,7 @@ function MapSettings({ @@ -116,14 +116,28 @@ function MapSettings({ - + + + + {!mapEmpty && map.type !== "default" && ( diff --git a/src/contexts/MapDataContext.js b/src/contexts/MapDataContext.js index 1a3bc84..57bdc71 100644 --- a/src/contexts/MapDataContext.js +++ b/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); diff --git a/src/database.js b/src/database.js index d6876db..56ad355 100644 --- a/src/database.js +++ b/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 diff --git a/src/helpers/drawing.js b/src/helpers/drawing.js index 363bac2..5c5c4d8 100644 --- a/src/helpers/drawing.js +++ b/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 diff --git a/src/modals/SelectMapModal.js b/src/modals/SelectMapModal.js index 474f459..3737027 100644 --- a/src/modals/SelectMapModal.js +++ b/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", };