trails/packages/gpx/src/parse.ts
Ullrich Schäfer 14b179bb0c Fix waypoint loading in Edit in Planner flow
Three issues fixed:

1. GPX parser used browser DOMParser which doesn't exist in Node/Vite SSR.
   Added async parseGpxAsync() using linkedom for server-side parsing.

2. Server-side session initialization stored waypoints in a Yjs doc
   instance separate from the Vite WebSocket plugin's doc store.
   Moved waypoint initialization to client-side: API returns parsed
   waypoints, client adds them to Yjs after sync.

3. GPX was encoded in URL params causing HTTP 431. Now the Journal
   creates a Planner session via API (POST body), and only passes
   compact waypoint coordinates in URL params.

Verified: Journal route → Edit in Planner → 4 waypoints loaded,
route computed (79.3km), elevation profile, Save to Journal ready.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-24 20:22:58 +00:00

133 lines
4.1 KiB
TypeScript

import type { Waypoint } from "@trails-cool/types";
import type { GpxData, TrackPoint, ElevationProfile } from "./types";
/**
* Parse a GPX XML string into structured data.
*/
let _LinkedDOMParser: typeof DOMParser | null = null;
async function getDOMParser(): Promise<typeof DOMParser> {
if (typeof DOMParser !== "undefined") return DOMParser;
if (!_LinkedDOMParser) {
const linkedom = await import("linkedom");
_LinkedDOMParser = linkedom.DOMParser as unknown as typeof DOMParser;
}
return _LinkedDOMParser;
}
export function parseGpx(xml: string): GpxData {
// Synchronous path for browser
if (typeof DOMParser !== "undefined") {
return parseGpxWithParser(new DOMParser(), xml);
}
// Fallback: try linkedom synchronously (works in Node with top-level await or CJS)
try {
// eslint-disable-next-line @typescript-eslint/no-require-imports
const { DOMParser: LP } = require("linkedom");
return parseGpxWithParser(new LP() as unknown as DOMParser, xml);
} catch {
throw new Error("DOMParser not available — install linkedom for Node.js");
}
}
export async function parseGpxAsync(xml: string): Promise<GpxData> {
const Parser = await getDOMParser();
return parseGpxWithParser(new Parser(), xml);
}
function parseGpxWithParser(parser: DOMParser, xml: string): GpxData {
const doc = parser.parseFromString(xml, "application/xml") as unknown as Document;
const parserError = doc.querySelector("parsererror");
if (parserError) {
throw new Error(`Invalid GPX XML: ${parserError.textContent}`);
}
const name = doc.querySelector("metadata > name")?.textContent ?? undefined;
const waypoints = parseWaypoints(doc);
const tracks = parseTracks(doc);
const elevation = computeElevation(tracks);
return { name, waypoints, tracks, elevation };
}
function parseWaypoints(doc: Document): Waypoint[] {
const wpts = doc.querySelectorAll("wpt");
return Array.from(wpts).map((wpt) => {
const lat = parseFloat(wpt.getAttribute("lat") ?? "0");
const lon = parseFloat(wpt.getAttribute("lon") ?? "0");
const name = wpt.querySelector("name")?.textContent ?? undefined;
return { lat, lon, name };
});
}
function parseTracks(doc: Document): TrackPoint[][] {
const tracks: TrackPoint[][] = [];
const trksegs = doc.querySelectorAll("trk > trkseg");
for (const seg of trksegs) {
const points: TrackPoint[] = [];
for (const pt of seg.querySelectorAll("trkpt")) {
const lat = parseFloat(pt.getAttribute("lat") ?? "0");
const lon = parseFloat(pt.getAttribute("lon") ?? "0");
const eleText = pt.querySelector("ele")?.textContent;
const time = pt.querySelector("time")?.textContent ?? undefined;
points.push({
lat,
lon,
ele: eleText ? parseFloat(eleText) : undefined,
time,
});
}
tracks.push(points);
}
return tracks;
}
function computeElevation(tracks: TrackPoint[][]): GpxData["elevation"] {
let gain = 0;
let loss = 0;
const profile: ElevationProfile[] = [];
let totalDistance = 0;
for (const track of tracks) {
for (let i = 0; i < track.length; i++) {
const pt = track[i]!;
if (i > 0) {
const prev = track[i - 1]!;
totalDistance += haversineDistance(prev.lat, prev.lon, pt.lat, pt.lon);
if (pt.ele !== undefined && prev.ele !== undefined) {
const diff = pt.ele - prev.ele;
if (diff > 0) gain += diff;
else loss += Math.abs(diff);
}
}
if (pt.ele !== undefined) {
profile.push({ distance: totalDistance, elevation: pt.ele });
}
}
}
return { gain: Math.round(gain), loss: Math.round(loss), profile };
}
/** Haversine distance between two points in meters */
function haversineDistance(
lat1: number,
lon1: number,
lat2: number,
lon2: number,
): number {
const R = 6371000;
const toRad = (deg: number) => (deg * Math.PI) / 180;
const dLat = toRad(lat2 - lat1);
const dLon = toRad(lon2 - lon1);
const a =
Math.sin(dLat / 2) ** 2 +
Math.cos(toRad(lat1)) * Math.cos(toRad(lat2)) * Math.sin(dLon / 2) ** 2;
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
}