3b9672e0ff
The routeData Y.Map's ~15 string keys (geojson, coordinates, segmentBoundaries, road metadata, profile, colorMode, baseLayer, overlays, poiCategories) were read and written raw at ~30 call sites, each with its own JSON parsing and casts; parseJsonArray existed twice and waypoint extraction four times. GPX assembly was duplicated between SaveToJournalButton and ExportButton, so the saved plan and the exported file could silently diverge. - new lib/route-data.ts owns the routeData (+ noGoAreas) schema: typed read/write, JSON encoding internal, ColorMode moves here (re-exported from ColoredRoute for existing importers) - new lib/gpx-export.ts owns GPX assembly: buildRouteGpx / buildPlanGpx / buildDayGpxFiles / hasDayBreaks; multi-day splitting becomes a pure, tested function - waypoint-ymap.ts gains extractWaypoints / extractWaypointData; the four hand-rolled copies (use-routing, use-waypoint-manager, WaypointSidebar, use-days) now share it, and WaypointSidebar's moveWaypoint reuses the round-trip helpers instead of re-listing every waypoint field - all hooks/components consume the seam; no raw routeData key strings remain outside route-data.ts Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import type { YjsState } from "./use-yjs.ts";
|
|
import type { PoiState } from "./use-pois.ts";
|
|
import { getPoiCategories, setPoiCategories } from "./route-data.ts";
|
|
|
|
/**
|
|
* Bidirectional sync between POI/overlay state and Yjs routeData.
|
|
* - When local state changes → write to Yjs
|
|
* - When Yjs changes (from another participant) → update local state
|
|
*/
|
|
export function useYjsPoiSync(yjs: YjsState | null, poiState: PoiState): void {
|
|
const suppressYjsUpdate = useRef(false);
|
|
const prevCategories = useRef<string[]>([]);
|
|
|
|
// Local → Yjs: write enabledCategories to Yjs when they change
|
|
useEffect(() => {
|
|
if (!yjs) return;
|
|
const current = poiState.enabledCategories;
|
|
if (arraysEqual(current, prevCategories.current)) return;
|
|
prevCategories.current = current;
|
|
|
|
suppressYjsUpdate.current = true;
|
|
setPoiCategories(yjs.routeData, current);
|
|
// Allow Yjs observer to fire but suppress our handler
|
|
queueMicrotask(() => { suppressYjsUpdate.current = false; });
|
|
}, [yjs, poiState.enabledCategories]);
|
|
|
|
// Yjs → Local: observe Yjs changes from other participants
|
|
useEffect(() => {
|
|
if (!yjs) return;
|
|
|
|
const handleChange = () => {
|
|
if (suppressYjsUpdate.current) return;
|
|
|
|
const categories = getPoiCategories(yjs.routeData);
|
|
if (!categories) return;
|
|
|
|
if (!arraysEqual(categories, prevCategories.current)) {
|
|
prevCategories.current = categories;
|
|
poiState.setEnabledCategories(categories);
|
|
}
|
|
};
|
|
|
|
yjs.routeData.observe(handleChange);
|
|
|
|
// On initial connect, load from Yjs if state exists
|
|
handleChange();
|
|
|
|
return () => yjs.routeData.unobserve(handleChange);
|
|
}, [yjs, poiState.setEnabledCategories]);
|
|
}
|
|
|
|
function arraysEqual(a: string[], b: string[]): boolean {
|
|
if (a.length !== b.length) return false;
|
|
for (let i = 0; i < a.length; i++) {
|
|
if (a[i] !== b[i]) return false;
|
|
}
|
|
return true;
|
|
}
|