Added alternating diagonals map measurement

src/components/map/MapMeasure.js

@@ -77,9 +77,11 @@ function MapMeasure({ map, selectedToolSettings, active, gridSize }) {
           brushPosition,
           gridSize
         );
+        // 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.divide(points[0], gridSize),
+          Vector2.roundTo(Vector2.divide(points[0], gridSize), precision),
-          Vector2.divide(points[1], gridSize),
+          Vector2.roundTo(Vector2.divide(points[1], gridSize), precision),
           selectedToolSettings.type
         );
         setDrawingShapeData({

src/components/map/controls/MeasureToolSettings.js

@@ -5,6 +5,7 @@ import ToolSection from "./ToolSection";
 import MeasureChebyshevIcon from "../../../icons/MeasureChebyshevIcon";
 import MeasureEuclideanIcon from "../../../icons/MeasureEuclideanIcon";
 import MeasureManhattanIcon from "../../../icons/MeasureManhattanIcon";
+import MeasureAlternatingIcon from "../../../icons/MeasureAlternatingIcon";
 
 import Divider from "../../Divider";
 
@@ -19,6 +20,8 @@ function MeasureToolSettings({ settings, onSettingChange }) {
       onSettingChange({ type: "euclidean" });
     } else if (key === "c") {
       onSettingChange({ type: "manhattan" });
+    } else if (key === "a") {
+      onSettingChange({ type: "alternating" });
     }
   }
 
@@ -31,6 +34,12 @@ function MeasureToolSettings({ settings, onSettingChange }) {
       isSelected: settings.type === "chebyshev",
       icon: <MeasureChebyshevIcon />,
     },
+    {
+      id: "alternating",
+      title: "Alternating Diagonal Distance (A)",
+      isSelected: settings.type === "alternating",
+      icon: <MeasureAlternatingIcon />,
+    },
     {
       id: "euclidean",
       title: "Line Distance (L)",

src/helpers/vector2.js

@@ -363,7 +363,7 @@ export function compare(a, b, threshold) {
  * Returns the distance between two vectors
  * @param {Vector2} a
  * @param {Vector2} b
- * @param {string} type - `chebyshev | euclidean | manhattan`
+ * @param {string} type - `chebyshev | euclidean | manhattan | alternating`
  */
 export function distance(a, b, type) {
   switch (type) {
@@ -373,6 +373,12 @@ export function distance(a, b, type) {
       return length(subtract(a, b));
     case "manhattan":
       return Math.abs(a.x - b.x) + Math.abs(a.y - b.y);
+    case "alternating":
+      // Alternating diagonal distance like D&D 3.5 and Pathfinder
+      const delta = abs(subtract(a, b));
+      const ma = max(delta);
+      const mi = min(delta);
+      return ma - mi + Math.floor(1.5 * mi);
     default:
       return length(subtract(a, b));
   }

src/icons/MeasureAlternatingIcon.js

@@ -0,0 +1,18 @@
+import React from "react";
+
+function MeasureAlternatingIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M15.54 4.93a2.5 2.5 0 1 1 .85 4.1l-.94.94a4 4 0 0 1-5.48 5.48l-.95.94a2.5 2.5 0 1 1-1.41-1.41l.94-.95a4 4 0 0 1 5.48-5.48l.95-.94a2.5 2.5 0 0 1 .56-2.68z" />
+    </svg>
+  );
+}
+
+export default MeasureAlternatingIcon;