@meri-imperiumi/signalk-dead-reckoning 0.14.1 → 0.14.2

package/CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.14.2] - 2026-10-19
+
+### Fixed
+- **Routes and tracks crossing the antimeridian no longer draw a line around the planet.** An active-route leg straddling ±180° longitude (Fiji↔Samoa, Tonga's eastern islands, the Bering Strait) rendered as a horizontal stroke spanning the whole chart width — Leaflet joins two raw longitudes straight through the primary world frame instead of hopping the seam. Route lines draw unwrapped (`vm.unwrapLineLongitudes`: every point shifted ±360° onto the previous point's longitude strip) and repeat on the ±360° world copies the view can sit over (`vm.worldCopies`), so the leg renders as the short hop over the dateline with waypoint markers and the "next" emphasis intact; the ghost (DR) and GPS tracks get the same treatment, as a boat logging fixes across the seam produced the identical artifact in its track.
+
 ## [0.14.1] - 2026-10-19
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meri-imperiumi/signalk-dead-reckoning",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "description": "Offline-first dead reckoning and sensor fusion engine for Signal K",
   "main": "plugin/index.js",
   "scripts": {

package/public/dr-map-view.js

@@ -1840,28 +1840,32 @@ class DrMapView extends HTMLElement {
     this.layers.ghost?.clearLayers();
     if (pts.length < 2) return;
     const t = vm.STYLE.track;
-    L.polyline(pts, {
-      color: t.casingColor,
-      weight: t.ghostWeight + t.casingWidth,
-      opacity: 0.85,
-      interactive: false,
-    }).addTo(this.layers.ghost);
-    L.polyline(pts, {
-      color: vm.STYLE.ghostTrack,
-      weight: t.ghostWeight,
-      opacity: 0.95,
-      interactive: false,
-    }).addTo(this.layers.ghost);
     const course = vm.courseText(movement);
-    if (course) {
-      L.marker(pts[pts.length - 2], {
-        icon: L.divIcon({
-          className: "dr-course-label",
-          html: `<span>${course}</span>`,
-        }),
+    // Unwrapped across the antimeridian and drawn per world copy —
+    // the same seam handling as the active route.
+    for (const line of vm.worldCopies(vm.unwrapLineLongitudes(pts))) {
+      L.polyline(line, {
+        color: t.casingColor,
+        weight: t.ghostWeight + t.casingWidth,
+        opacity: 0.85,
+        interactive: false,
+      }).addTo(this.layers.ghost);
+      L.polyline(line, {
+        color: vm.STYLE.ghostTrack,
+        weight: t.ghostWeight,
+        opacity: 0.95,
         interactive: false,
-        keyboard: false,
       }).addTo(this.layers.ghost);
+      if (course) {
+        L.marker(line[line.length - 2], {
+          icon: L.divIcon({
+            className: "dr-course-label",
+            html: `<span>${course}</span>`,
+          }),
+          interactive: false,
+          keyboard: false,
+        }).addTo(this.layers.ghost);
+      }
     }
   }
 
@@ -1873,8 +1877,11 @@ class DrMapView extends HTMLElement {
    */
   replacePolyline(key, pts, opts) {
     this.layers[key]?.clearLayers();
-    if (pts.length >= 2) {
-      L.polyline(pts, opts).addTo(this.layers[key]);
+    if (pts.length < 2) return;
+    // Tracks draw unwrapped across the antimeridian, per world copy
+    // (same seam handling as the ghost track).
+    for (const line of vm.worldCopies(vm.unwrapLineLongitudes(pts))) {
+      L.polyline(line, opts).addTo(this.layers[key]);
     }
   }
 
@@ -2325,7 +2332,10 @@ class DrMapView extends HTMLElement {
    * point currently being navigated to emphasized. Dr-app pushes a
    * `routeRenderSpec`; null (course cleared, or a destination that
    * isn't a route) empties the layer. The whole layer is toggleable
-   * via the layers control ("Active route").
+   * via the layers control ("Active route"). The line draws unwrapped
+   * across the antimeridian (each leg the short way over the ±180°
+   * seam, repeated on the world copies the view can sit over) — a raw
+   * polyline renders a crossing leg as a line around the planet.
    *
    * @param {{name: string, points: Array<[number, number]>,
    *   targetIndex: number, labels?: Array<string>}|null} spec
@@ -2336,33 +2346,35 @@ class DrMapView extends HTMLElement {
     if (!layer) return;
     layer.clearLayers();
     if (!spec || spec.points?.length < 2) return;
-    // Route line over a dark casing — same cartographic trick as the
-    // ghost track so the magenta stays legible over light raster tiles.
-    L.polyline(spec.points, {
-      color: vm.STYLE.track.casingColor,
-      weight: 4.5,
-      opacity: 0.85,
-      interactive: false,
-    }).addTo(layer);
-    L.polyline(spec.points, {
-      color: vm.STYLE.route,
-      weight: 2.5,
-      opacity: 0.95,
-    })
-      .bindTooltip(spec.name, { direction: "top" })
-      .addTo(layer);
-    for (let i = 0; i < spec.points.length; i++) {
-      const target = i === spec.targetIndex;
-      const label = spec.labels?.[i] ?? `WP ${i + 1}`;
-      L.circleMarker(spec.points[i], {
-        radius: target ? 6 : 4,
+    for (const pts of vm.worldCopies(vm.unwrapLineLongitudes(spec.points))) {
+      // Route line over a dark casing — same cartographic trick as the
+      // ghost track so the magenta stays legible over light raster tiles.
+      L.polyline(pts, {
+        color: vm.STYLE.track.casingColor,
+        weight: 4.5,
+        opacity: 0.85,
+        interactive: false,
+      }).addTo(layer);
+      L.polyline(pts, {
         color: vm.STYLE.route,
-        fillColor: target ? vm.STYLE.route : "transparent",
-        fillOpacity: target ? 0.9 : 0,
-        weight: 2,
+        weight: 2.5,
+        opacity: 0.95,
       })
-        .bindTooltip(target ? `${label} — next` : label, { direction: "top" })
+        .bindTooltip(spec.name, { direction: "top" })
         .addTo(layer);
+      for (let i = 0; i < pts.length; i++) {
+        const target = i === spec.targetIndex;
+        const label = spec.labels?.[i] ?? `WP ${i + 1}`;
+        L.circleMarker(pts[i], {
+          radius: target ? 6 : 4,
+          color: vm.STYLE.route,
+          fillColor: target ? vm.STYLE.route : "transparent",
+          fillOpacity: target ? 0.9 : 0,
+          weight: 2,
+        })
+          .bindTooltip(target ? `${label} — next` : label, { direction: "top" })
+          .addTo(layer);
+      }
     }
   }
 

package/public/dr-viewmodel.js

@@ -2401,6 +2401,56 @@ export function aisTargetsForRender(store, nowMs, own, opts = {}) {
   return specs;
 }
 
+/**
+ * Unwraps a polyline's longitudes to a continuous strip: every point
+ * after the first is shifted by ±360° so no leg spans more than 180°
+ * of longitude. On the chart this makes an antimeridian-crossing leg
+ * draw as the short hop over the ±180° seam — Leaflet projects
+ * unwrapped longitudes onto the neighbouring world copies — instead
+ * of a straight line around the planet. Takes [lat, lng] points as
+ * the map's render specs carry them; the input list is untouched.
+ *
+ * @param {Array<[number, number]>} pts
+ * @returns {Array<[number, number]>} unwrapped copy
+ */
+export function unwrapLineLongitudes(pts) {
+  const out = [];
+  for (const pt of pts) {
+    let lng = pt[1];
+    if (out.length > 0) {
+      const prev = out[out.length - 1][1];
+      while (lng - prev > 180) lng -= 360;
+      while (lng - prev < -180) lng += 360;
+    }
+    out.push([pt[0], lng]);
+  }
+  return out;
+}
+
+/**
+ * The world copies of an unwrapped line the chart must draw for the
+ * geometry to show from any view frame: the line itself, plus a
+ * ±360°-shifted sibling whenever it crosses out of the primary
+ * [-180, 180] frame — the rest of the chartwork (vessel, fixes,
+ * waypoints) plots raw longitudes, so either side of the seam is a
+ * legitimate frame to look at the line from.
+ *
+ * @param {Array<[number, number]>} pts - unwrapped [lat, lng] points
+ * @returns {Array<Array<[number, number]>>} one point list per copy
+ */
+export function worldCopies(pts) {
+  let min = Infinity;
+  let max = -Infinity;
+  for (const pt of pts) {
+    if (pt[1] < min) min = pt[1];
+    if (pt[1] > max) max = pt[1];
+  }
+  const copies = [pts];
+  if (max > 180) copies.push(pts.map(([lat, lng]) => [lat, lng - 360]));
+  if (min < -180) copies.push(pts.map(([lat, lng]) => [lat, lng + 360]));
+  return copies;
+}
+
 /**
  * Extracts the resource id from a Signal K resource href —
  * `/resources/routes/{id}` → `{id}`, `/resources/waypoints/{id}` →

package/tests/dr-route.test.js

@@ -11,6 +11,8 @@
 
 const test = require("node:test");
 const assert = require("node:assert/strict");
+const { readFileSync } = require("node:fs");
+const { join } = require("node:path");
 
 const vmPromise = import("../public/dr-viewmodel.js");
 
@@ -211,3 +213,110 @@ test("routeWaypointLabels uses coordinatesMeta names, 1-based WP fallback", asyn
   assert.deepEqual(vm.routeWaypointLabels(null, 2), ["WP 1", "WP 2"]);
   assert.deepEqual(vm.routeWaypointLabels({}, 1), ["WP 1"]);
 });
+
+test("unwrapLineLongitudes leaves an in-frame line untouched", async () => {
+  const vm = await loadVm();
+  const line = [
+    [60.1, 24.9],
+    [60.2, 24.8],
+    [60.3, 24.7],
+  ];
+  assert.deepEqual(vm.unwrapLineLongitudes(line), line);
+});
+
+test("unwrapLineLongitudes carries an antimeridian leg the short way", async () => {
+  const vm = await loadVm();
+  // Fiji → Samoa eastward across the seam: -179.9 must come out as
+  // 180.1 so the leg hops the dateline instead of wrapping the planet.
+  const crossing = [
+    [-17.8, 179.9],
+    [-17.7, -179.9],
+  ];
+  assert.deepEqual(vm.unwrapLineLongitudes(crossing), [
+    [-17.8, 179.9],
+    [-17.7, 180.1],
+  ]);
+  // …and westward the mirror image: 179.9 comes out as -180.1.
+  assert.deepEqual(vm.unwrapLineLongitudes([...crossing].reverse()), [
+    [-17.7, -179.9],
+    [-17.8, -180.1],
+  ]);
+});
+
+test("unwrapLineLongitudes keeps a multi-leg route continuous", async () => {
+  const vm = await loadVm();
+  // Steps of 1° east from 179°: the whole tail beyond the seam stays
+  // on one continuous strip (…, 180, 181, 182, 183), every leg 1°
+  // wide, no wrap-around jumps.
+  const pts = [
+    [0, 179],
+    [0, -180],
+    [0, -179],
+    [0, -178],
+    [0, -177],
+  ];
+  const unwrapped = vm.unwrapLineLongitudes(pts);
+  for (let i = 1; i < unwrapped.length; i++) {
+    const d = unwrapped[i][1] - unwrapped[i - 1][1];
+    assert.ok(Math.abs(d - 1) < 1e-9, `leg ${i} spans ${d}°, expected 1°`);
+  }
+  assert.equal(unwrapped[unwrapped.length - 1][1], 183);
+});
+
+test("worldCopies adds only the neighbours a seam-crossing line needs", async () => {
+  const vm = await loadVm();
+  // In-frame line: a single copy, the line itself.
+  const plain = [
+    [60, 24],
+    [61, 25],
+  ];
+  assert.deepEqual(vm.worldCopies(plain), [plain]);
+  // Eastward across +180: the -360° sibling covers the west-side view.
+  const overEast = [
+    [-17.8, 179.9],
+    [-17.7, 180.1],
+  ];
+  assert.deepEqual(vm.worldCopies(overEast), [
+    overEast,
+    [
+      [-17.8, -180.1],
+      [-17.7, -179.9],
+    ],
+  ]);
+  // Westward across -180: the +360° sibling covers the east-side view.
+  const overWest = [
+    [-17.7, -179.9],
+    [-17.8, -180.1],
+  ];
+  assert.deepEqual(vm.worldCopies(overWest), [
+    overWest,
+    [
+      [-17.7, 180.1],
+      [-17.8, 179.9],
+    ],
+  ]);
+});
+
+test("dr-map-view draws the route and tracks through the seam helpers", () => {
+  // Source smoketest (no DOM in the test env): the Leaflet adapter
+  // must run every seam-spanning line — active route, ghost track,
+  // GPS track — through unwrapLineLongitudes + worldCopies, or an
+  // antimeridian leg renders as a line around the planet again.
+  const mapSrc = readFileSync(join(__dirname, "../public/dr-map-view.js"), {
+    encoding: "utf8",
+  });
+  for (const name of [
+    "renderRoute(spec) {",
+    "renderGhostTrack(pts, movement = null) {",
+    "replacePolyline(key, pts, opts) {",
+  ]) {
+    const at = mapSrc.indexOf(name);
+    assert.ok(at > -1, `${name} exists`);
+    const body = mapSrc.slice(at, at + 2000);
+    assert.match(
+      body,
+      /vm\.worldCopies\(vm\.unwrapLineLongitudes\(/,
+      `${name} must unwrap longitudes and draw world copies`,
+    );
+  }
+});