mirror of
https://github.com/mauriceboe/TREK.git
synced 2026-10-18 21:16:47 +00:00
Maurice
03d6457bde
PAD-05B: a click on an obstacle on the map or on the route band opens its card in the look of the via ferrata card: the kind with its glyph, the name, how it stands to the route (on it at a distance along it, near it with the link marked unclear, or only in the area), the paddling rule its tags give with canoe read before boat, a condition as written, height, grade, hours and fees, the source with the date of the data and the OpenStreetMap link. A missing rule reads as unknown, never as allowed, and a portage way recorded as private says so. Objects only in the area show from zoom 13 on, on Leaflet and GL alike; on GL the lines only near the route are dashed as on Leaflet, one click handler picks the marker over the line, and a picked marker no longer flickers. The route band marks the obstacles on and near the route by their share of the measured line. The obstacle notice also names an answer cut at its limit. PAD-05A: the admin area gets a Paddle water data card under the addons, on desktop and phone: a search in Geofabrik's list with each region's path, the regions with their state (waiting, reading with its progress, ready with objects and data date, failed with the reason), reading again and removing after a confirmation. The list follows a read without reloading. Region changes write audit rows. Map colours of paddle objects and portages come from theme tokens read at draw time, as the via ferratas do; the ferrata layer now shares that reader. The rail takes the planner page's parts as one bag, the map hit tests of the tour layers are one helper, and the unused noWaterData string is gone from every locale.
50 lines
2.2 KiB
TypeScript
50 lines
2.2 KiB
TypeScript
import { useEffect, useState } from 'react';
|
|
|
|
/**
|
|
* Colours for map paint, read off the theme. Map paint cannot take a
|
|
* `var(--token)`: Leaflet writes the colour into an SVG attribute and GL
|
|
* paint wants a resolved colour string. So the map layers name the tokens
|
|
* they draw with, and the colours are read off the document when they draw,
|
|
* which keeps light and dark mode apart without a colour literal in a layer.
|
|
*/
|
|
|
|
/** The attributes `applyAppearance()` writes on `<html>` that change what the tokens resolve to. */
|
|
const THEME_ATTRIBUTES = ['class', 'style', 'data-scheme'];
|
|
|
|
/** What each token resolves to on the root, `currentColor` where nothing defines it (a test DOM). */
|
|
export function readMapPaint<K extends string>(tokens: Readonly<Record<K, string>>): Record<K, string> {
|
|
const style = typeof document === 'undefined' ? null : getComputedStyle(document.documentElement);
|
|
const keys = Object.keys(tokens) as K[];
|
|
return Object.fromEntries(
|
|
keys.map((key) => [key, style?.getPropertyValue(tokens[key]).trim() || 'currentColor'])
|
|
) as Record<K, string>;
|
|
}
|
|
|
|
export function sameMapPaint<K extends string>(
|
|
a: Readonly<Record<K, string>>,
|
|
b: Readonly<Record<K, string>>
|
|
): boolean {
|
|
return (Object.keys(a) as K[]).every((key) => a[key] === b[key]);
|
|
}
|
|
|
|
/**
|
|
* The colours, read again whenever the light or dark class, the colour scheme
|
|
* or a custom accent on `<html>` changes; without this a theme toggle would
|
|
* leave a layer in the old scheme's colours. The answer only changes identity
|
|
* when a colour does, so a memo keyed on it does not churn. `tokens` is a
|
|
* constant of the caller's module.
|
|
*/
|
|
export function useMapPaint<K extends string>(tokens: Readonly<Record<K, string>>): Record<K, string> {
|
|
const [paint, setPaint] = useState(() => readMapPaint(tokens));
|
|
useEffect(() => {
|
|
if (typeof document === 'undefined') return;
|
|
const observer = new MutationObserver(() => {
|
|
const next = readMapPaint(tokens);
|
|
setPaint((current) => (sameMapPaint(current, next) ? current : next));
|
|
});
|
|
observer.observe(document.documentElement, { attributes: true, attributeFilter: THEME_ATTRIBUTES });
|
|
return () => observer.disconnect();
|
|
}, [tokens]);
|
|
return paint;
|
|
}
|