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 }) {
>