diff --git a/src/components/map/MapGridEditor.js b/src/components/map/MapGridEditor.js index fcca37e..ccc316d 100644 --- a/src/components/map/MapGridEditor.js +++ b/src/components/map/MapGridEditor.js @@ -67,7 +67,7 @@ function MapGridEditor({ map, onGridChange }) { // Find distance and direction of dragging const previousPosition = handlePreviousPositionRef.current; const position = getHandleNormalizedPosition(handle); - const distance = Vector2.distance(previousPosition, position, "euclidean"); + const distance = Vector2.distance(previousPosition, position); const direction = Vector2.normalize( Vector2.subtract(position, previousPosition) ); diff --git a/src/components/map/MapMeasure.js b/src/components/map/MapMeasure.js index 95f1170..18d28d2 100644 --- a/src/components/map/MapMeasure.js +++ b/src/components/map/MapMeasure.js @@ -11,6 +11,7 @@ import { } from "../../helpers/drawing"; import Vector2 from "../../helpers/Vector2"; import { getRelativePointerPosition } from "../../helpers/konva"; +import { parseGridScale, gridDistance } from "../../helpers/grid"; import useGridSnapping from "../../hooks/useGridSnapping"; @@ -21,31 +22,17 @@ function MapMeasure({ map, active }) { mapHeight, interactionEmitter, } = useMapInteraction(); - const { grid, gridCellNormalizedSize, gridStrokeWidth } = useGrid(); + const { + grid, + gridCellNormalizedSize, + gridStrokeWidth, + gridCellPixelSize, + } = useGrid(); const mapStageRef = useMapStage(); const [drawingShapeData, setDrawingShapeData] = useState(null); const [isBrushDown, setIsBrushDown] = useState(false); - function parseToolScale(scale) { - if (typeof scale === "string") { - const match = scale.match(/(\d*)(\.\d*)?([a-zA-Z]*)/); - const integer = parseFloat(match[1]); - const fractional = parseFloat(match[2]); - const unit = match[3] || ""; - if (!isNaN(integer) && !isNaN(fractional)) { - return { - multiplier: integer + fractional, - unit: unit, - digits: match[2].length - 1, - }; - } else if (!isNaN(integer) && isNaN(fractional)) { - return { multiplier: integer, unit: unit, digits: 0 }; - } - } - return { multiplier: 1, unit: "", digits: 0 }; - } - - const measureScale = parseToolScale(active && grid.measurement.scale); + const gridScale = parseGridScale(active && grid.measurement.scale); const snapPositionToGrid = useGridSnapping(); @@ -54,6 +41,7 @@ function MapMeasure({ map, active }) { return; } const mapStage = mapStageRef.current; + const mapImage = mapStage?.findOne("#mapImage"); function getBrushPosition() { const mapImage = mapStage.findOne("#mapImage"); @@ -84,19 +72,16 @@ function MapMeasure({ map, active }) { brushPosition, gridCellNormalizedSize ); - // Round the grid positions to the nearest 0.1 to aviod floating point issues - const precision = { x: 0.1, y: 0.1 }; - const length = Vector2.distance( - Vector2.roundTo( - Vector2.divide(points[0], gridCellNormalizedSize), - precision - ), - Vector2.roundTo( - Vector2.divide(points[1], gridCellNormalizedSize), - precision - ), - grid.measurement.type - ); + // Convert back to pixel values + const a = Vector2.multiply(points[0], { + x: mapImage.width(), + y: mapImage.height(), + }); + const b = Vector2.multiply(points[1], { + x: mapImage.width(), + y: mapImage.height(), + }); + const length = gridDistance(grid, a, b, gridCellPixelSize); setDrawingShapeData({ length, points, @@ -155,9 +140,9 @@ function MapMeasure({ map, active }) { >