@kahwee/sf-map-svg 4.3.1 → 4.4.0

package/dist/src/guide-data.js

@@ -15,6 +15,7 @@ export const guideMapData = deepFreeze({
     map: {
         coast: coast.features[0].geometry,
         neighborhoods: neighborhoodData.features.map((feature) => ({
+            id: feature.id,
             name: feature.properties.canonicalName,
             geometry: feature.geometry,
         })),

package/dist/src/guide-static.js

@@ -9,6 +9,7 @@ export function createGuideSVG(options = {}) {
         districtLines: false,
         districtLabels: false,
         neighborhoodLines: true,
+        neighborhoodLabels: options.labelLayout !== undefined,
         landmarks: true,
         highways: true,
         keyRoads: true,

package/dist/src/label-candidates.d.ts

@@ -0,0 +1,24 @@
+import type { NeighborhoodExplorerOptions } from './types.js';
+export interface LabelItem {
+    point: [number, number];
+    name: string;
+    kind: string;
+    level?: 'primary' | 'secondary';
+}
+export interface RenderLabel extends LabelItem {
+    fontSize: number;
+    fontWeight: number;
+    fill: string;
+    halo: string;
+    offset: number;
+}
+/** Shared priority and overview visibility for server and browser labels. */
+export declare function labelCandidates(groups: {
+    selected: LabelItem[];
+    districts: LabelItem[];
+    stations: LabelItem[];
+    parks: LabelItem[];
+    roads: LabelItem[];
+    neighborhoods: LabelItem[];
+}, width: number, zoom: number): LabelItem[];
+export declare function styleLabels(candidates: LabelItem[], { colors, labelStyle, labelSize, markerRadius, }: Pick<NeighborhoodExplorerOptions, 'colors' | 'labelStyle' | 'labelSize' | 'markerRadius'>): RenderLabel[];

package/dist/src/label-candidates.js

@@ -0,0 +1,29 @@
+/** Shared priority and overview visibility for server and browser labels. */
+export function labelCandidates(groups, width, zoom) {
+    return [
+        ...groups.selected,
+        ...groups.districts,
+        ...(zoom >= 1.8 ? groups.stations : []),
+        ...groups.parks.filter((park) => zoom >= 1.8 ||
+            park.name === 'Golden Gate Park' ||
+            (width >= 550 && park.name === 'Presidio')),
+        ...groups.roads.filter((road) => road.level === 'primary' || zoom >= 1.8),
+        ...groups.neighborhoods,
+    ];
+}
+export function styleLabels(candidates, { colors = {}, labelStyle = {}, labelSize = {}, markerRadius = 6, }) {
+    return candidates.map((item) => ({
+        ...item,
+        fontSize: Math.max(labelSize.min ?? 11, Math.min(labelSize.max ?? 12, item.kind === 'road' ? 11 : 12)),
+        fontWeight: labelStyle.fontWeight ??
+            (item.kind.startsWith('selected') || item.kind === 'district' ? 700 : 550),
+        fill: colors.label ??
+            (item.kind === 'park'
+                ? (colors.landmark ?? '#426641')
+                : item.kind === 'road'
+                    ? '#77736b'
+                    : '#163d61'),
+        halo: labelStyle.haloColor ?? '#ffffff',
+        offset: item.kind === 'selected-marker' ? markerRadius + 9 : item.kind === 'bart' ? 11 : 0,
+    }));
+}

package/dist/src/label-renderer.d.ts

@@ -1,14 +1,5 @@
 import type { Bounds } from '../data/types.js';
-export interface RenderLabel {
-    point: [number, number];
-    name: string;
-    kind: string;
-    fontSize: number;
-    fontWeight: number;
-    fill: string;
-    halo: string;
-    offset: number;
-}
+import type { RenderLabel } from './label-candidates.js';
 /** Reuse text nodes and screen-space metrics throughout a camera animation. */
 export declare function createLabelRenderer(layer: SVGGElement): {
     invalidateMetrics(): void;

package/dist/src/label-renderer.js

@@ -1,3 +1,4 @@
+import { setAttributeIfChanged } from './dom.js';
 import { layoutLabels } from './explorer-layout.js';
 /** Reuse text nodes and screen-space metrics throughout a camera animation. */
 export function createLabelRenderer(layer) {
@@ -14,7 +15,14 @@ export function createLabelRenderer(layer) {
         draw(labels, view, width, obstacles) {
             const unit = view[2] / width;
             const keys = new Set();
-            const pending = labels.map((label) => {
+            const pending = labels
+                .filter((label) => {
+                const y = (label.point[1] - view[1]) / unit;
+                // Labels are centered horizontally; an anchor outside vertically cannot fit.
+                const margin = label.fontSize * 1.25 + label.offset + 3;
+                return y >= -margin && y <= width + margin;
+            })
+                .map((label) => {
                 const key = JSON.stringify([
                     label.kind,
                     label.name,
@@ -34,11 +42,11 @@ export function createLabelRenderer(layer) {
                     entries.set(key, entry);
                 }
                 const { node } = entry;
-                node.setAttribute('font-size', String(label.fontSize * unit));
-                node.setAttribute('font-weight', String(label.fontWeight));
-                node.setAttribute('fill', label.fill);
-                node.setAttribute('stroke', label.halo);
-                node.setAttribute('stroke-width', String(3 * unit));
+                setAttributeIfChanged(node, 'font-size', label.fontSize * unit);
+                setAttributeIfChanged(node, 'font-weight', label.fontWeight);
+                setAttributeIfChanged(node, 'fill', label.fill);
+                setAttributeIfChanged(node, 'stroke', label.halo);
+                setAttributeIfChanged(node, 'stroke-width', 3 * unit);
                 // Batch writes before measuring new labels. Hidden candidates stay detached.
                 if (entry.width === undefined && !node.parentNode)
                     layer.append(node);
@@ -68,8 +76,8 @@ export function createLabelRenderer(layer) {
                     node.remove();
             let previous = null;
             for (const item of placed) {
-                item.node.setAttribute('x', String(view[0] + item.left * unit));
-                item.node.setAttribute('y', String(view[1] + (item.top + item.fontSize) * unit));
+                setAttributeIfChanged(item.node, 'x', view[0] + item.left * unit);
+                setAttributeIfChanged(item.node, 'y', view[1] + (item.top + item.fontSize) * unit);
                 const next = previous ? previous.nextSibling : layer.firstChild;
                 if (next !== item.node)
                     layer.insertBefore(item.node, next);

package/dist/src/map-core.d.ts

@@ -1,10 +1,12 @@
 import type { Geometry, Position } from '../data/types.js';
 import type { DistrictYear, SFMapOptions } from './types.js';
 export type { DistrictYear, MapMarker, MapOverlay, SFMapOptions } from './types.js';
+import { type Project } from './geometry.js';
 export interface SFMapData {
     coast: Geometry;
     districts?: Readonly<Partial<Record<DistrictYear, readonly DistrictRowData[]>>>;
     neighborhoods?: readonly {
+        id?: string;
         name: string;
         geometry: Geometry;
     }[];
@@ -95,7 +97,7 @@ export declare function resolveMapColors(theme: SFMapOptions['theme'], colors?:
     selected: string;
 };
 /** Make an offline SVG and the matching longitude/latitude projection. */
-export declare function createSFMapWithData(options: SFMapOptions, data: SFMapData): {
+export declare function createSFMapWithData(options: SFMapOptions, data: SFMapData, renderLabels?: (project: Project) => string): {
     svg: string;
     project: (coordinates: Position) => [number, number];
     viewBox: [number, number, number, number];

package/dist/src/map-core.js

@@ -110,7 +110,7 @@ export function resolveMapColors(theme, colors = {}) {
 }
 let sequence = 0;
 /** Make an offline SVG and the matching longitude/latitude projection. */
-export function createSFMapWithData(options, data) {
+export function createSFMapWithData(options, data, renderLabels) {
     const { theme = 'districts', width = 800, height = 800, year = 2022, districtLines = true, neighborhoodLines = false, districtFills = true, districtLabels = true, labels = true, highways = false, keyRoads = false, landmarks = false, bartStations = false, markers = [], title = 'San Francisco map', idPrefix = `sf-map-${++sequence}`, } = options;
     validateMarkers(markers);
     validateOverlays(options.overlays ?? []);
@@ -182,17 +182,19 @@ export function createSFMapWithData(options, data) {
     if (districtLines)
         parts.push(layers.districtLines(districtPaths, context));
     parts.push(`<path data-layer="coastline" d="${coastPath}" ${stroke(colors.district, 0.65)}${animated ? ' pathLength="1"' : ''}/>`);
-    if (labels && districtLabels)
+    if (labels && !renderLabels && districtLabels)
         parts.push(layers.districtLabels(districts, context));
-    if (labels && landmarks)
+    if (labels && !renderLabels && landmarks)
         parts.push(layers.landmarkLabels(landmarkData, context));
-    if (labels && roadLabels)
+    if (labels && !renderLabels && roadLabels)
         parts.push(layers.keyRoadLabels(roadData, context));
     if (bartStations)
-        parts.push(layers.bartStations(stationData, context));
+        parts.push(layers.bartStations(stationData, { ...context, labels: labels && !renderLabels }));
     for (const overlay of options.overlays ?? []) {
         parts.push(`<path data-overlay-id="${escapeXml(overlay.id)}"${overlay.label ? ` aria-label="${escapeXml(overlay.label)}"` : ''} d="${path(overlay.geometry)}" fill="${escapeXml(overlay.fill ?? 'none')}" fill-opacity="${overlay.fillOpacity ?? 1}" stroke="${escapeXml(overlay.stroke ?? colors.road)}" stroke-width="${overlay.strokeWidth ?? 2}" vector-effect="non-scaling-stroke"${animated ? ' pathLength="1"' : ''}${overlay.visible === false ? ' display="none"' : ''}/>`);
     }
+    if (labels && renderLabels)
+        parts.push(renderLabels(project));
     parts.push(layers.markers(markers, context), '</g></svg>');
     return {
         svg: parts.join(''),

package/dist/src/marker-catalog.d.ts

@@ -0,0 +1,11 @@
+import type { createMarkerLayer, MarkerItem } from './marker-layer.js';
+import type { MapMarker } from './types.js';
+/** Own ordered records and picker reconciliation; prepare before committing DOM changes. */
+export declare function createMarkerCatalog(renderer: ReturnType<typeof createMarkerLayer>, picker: HTMLSelectElement, project: (point: [number, number]) => [number, number]): {
+    readonly items: MarkerItem[];
+    prepare(markers: readonly MapMarker[], selected: string | null): {
+        selection: string | null;
+        focused: string | undefined;
+        commit(): void;
+    } | undefined;
+};

package/dist/src/marker-catalog.js

@@ -0,0 +1,67 @@
+import { element } from './dom.js';
+import { validateMarkers } from './validation.js';
+/** Own ordered records and picker reconciliation; prepare before committing DOM changes. */
+export function createMarkerCatalog(renderer, picker, project) {
+    let items = [];
+    return {
+        get items() {
+            return items;
+        },
+        prepare(markers, selected) {
+            validateMarkers(markers);
+            const existing = new Map(items.map((item) => [item.marker.id, item]));
+            const ids = new Set();
+            const next = markers.map((marker) => {
+                ids.add(marker.id);
+                const previous = existing.get(marker.id);
+                const point = previous?.marker.lng === marker.lng && previous.marker.lat === marker.lat
+                    ? previous.point
+                    : project([marker.lng, marker.lat]);
+                return { marker: { ...marker }, point };
+            });
+            const selection = selected && ids.has(selected)
+                ? selected
+                : (markers.find((marker) => marker.selected)?.id ?? null);
+            const keys = ['id', 'lng', 'lat', 'label', 'selected', 'color', 'radius'];
+            if (picker.options.length > 0 &&
+                selection === selected &&
+                next.length === items.length &&
+                next.every(({ marker }, index) => keys.every((key) => marker[key] === items[index].marker[key])))
+                return undefined;
+            const focused = items.find((item) => item.visual?.node === document.activeElement)?.marker.id;
+            return {
+                selection,
+                focused,
+                commit() {
+                    const options = new Map([...picker.options].map((option) => [option.value, option]));
+                    for (const item of items) {
+                        if (!ids.has(item.marker.id)) {
+                            renderer.remove(item);
+                            options.get(item.marker.id)?.remove();
+                        }
+                    }
+                    if (!options.has('')) {
+                        const empty = element('option', 'No marker selected');
+                        empty.value = '';
+                        picker.prepend(empty);
+                    }
+                    items = next.map(({ marker, point }, index) => {
+                        const previous = existing.get(marker.id);
+                        const item = previous ?? renderer.add(marker, point, index);
+                        if (previous)
+                            renderer.update(item, marker, point, index);
+                        const option = options.get(marker.id) ?? element('option');
+                        const label = marker.label ?? marker.id;
+                        if (option.textContent !== label)
+                            option.textContent = label;
+                        if (option.value !== marker.id)
+                            option.value = marker.id;
+                        if (picker.children[index + 1] !== option)
+                            picker.insertBefore(option, picker.children[index + 1] ?? null);
+                        return item;
+                    });
+                },
+            };
+        },
+    };
+}

package/dist/src/marker-chooser.d.ts

@@ -0,0 +1,6 @@
+import type { MapMarker } from './types.js';
+/** A modeless choice panel also available when compact embeds hide native pickers. */
+export declare function createMarkerChooser(canvas: HTMLElement, svg: SVGSVGElement, select: (id: string) => void): {
+    close: (restoreFocus?: boolean) => void;
+    open(markers: readonly MapMarker[], opener: SVGElement): void;
+};

package/dist/src/marker-chooser.js

@@ -0,0 +1,59 @@
+import { element } from './dom.js';
+/** A modeless choice panel also available when compact embeds hide native pickers. */
+export function createMarkerChooser(canvas, svg, select) {
+    let panel;
+    let events;
+    let origin;
+    function close(restoreFocus = true) {
+        const focused = panel?.contains(document.activeElement);
+        events?.abort();
+        panel?.remove();
+        panel = undefined;
+        if (focused && restoreFocus)
+            (origin?.isConnected && origin.getClientRects().length ? origin : svg).focus({
+                preventScroll: true,
+            });
+    }
+    return {
+        close,
+        open(markers, opener) {
+            close(false);
+            origin = opener;
+            events = new AbortController();
+            const signal = events.signal;
+            panel = element('div', '', 'sf-marker-chooser');
+            panel.setAttribute('role', 'dialog');
+            panel.setAttribute('aria-label', 'Choose a place at this location');
+            const title = element('strong', 'Choose a place');
+            const dismiss = element('button', 'Close');
+            dismiss.type = 'button';
+            dismiss.addEventListener('click', () => close(), { signal });
+            panel.append(title, dismiss);
+            for (const marker of markers) {
+                const button = element('button', marker.label ?? marker.id);
+                button.type = 'button';
+                button.dataset.markerChoice = marker.id;
+                button.addEventListener('click', () => {
+                    close(false);
+                    select(marker.id);
+                }, { signal });
+                panel.append(button);
+            }
+            panel.addEventListener('keydown', (event) => {
+                if (event.key === 'Escape') {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    close();
+                }
+            }, { signal });
+            panel.addEventListener('focusout', (event) => {
+                if (event.relatedTarget instanceof Node && !panel?.contains(event.relatedTarget))
+                    close(false);
+            }, { signal });
+            canvas.append(panel);
+            panel
+                .querySelector('[data-marker-choice]')
+                ?.focus({ preventScroll: true });
+        },
+    };
+}

package/dist/src/marker-layer.d.ts

@@ -1,25 +1,30 @@
 import type { normalizeFeatures } from './features.js';
 import type { MapMarker } from './types.js';
-export interface MarkerItem {
-    marker: MapMarker;
-    point: [number, number];
+export interface MarkerVisual {
     node: SVGGElement;
     dot: SVGCircleElement;
     hit: SVGCircleElement;
     ring: SVGCircleElement;
     title: SVGTitleElement;
 }
+export interface MarkerItem {
+    marker: MapMarker;
+    point: [number, number];
+    index: number;
+    enter: boolean;
+    visual: MarkerVisual | undefined;
+}
 /** Own marker visuals and entrances; selection/events remain with the controller. */
-export declare function createMarkerLayer(layer: SVGGElement): {
+export declare function createMarkerLayer(): {
     cancelEntrances: () => void;
-    clear(): void;
     remove(item: MarkerItem): void;
     update(item: MarkerItem, marker: MapMarker, point: [number, number], index: number): void;
-    add(marker: MapMarker, point: [number, number], index: number, { features, markerColor, selectedMarkerColor, reducedMotion, enter, }: {
+    add(marker: MapMarker, point: [number, number], index: number): MarkerItem;
+    materialize(item: MarkerItem, { features, markerColor, selectedMarkerColor, reducedMotion, selected, }: {
         features: ReturnType<typeof normalizeFeatures>;
         markerColor: string;
         selectedMarkerColor: string;
         reducedMotion: boolean;
-        enter: boolean;
-    }): MarkerItem;
+        selected: boolean;
+    }): MarkerVisual;
 };

package/dist/src/marker-layer.js

@@ -1,48 +1,65 @@
 import { svgElement } from './dom.js';
 /** Own marker visuals and entrances; selection/events remain with the controller. */
-export function createMarkerLayer(layer) {
+export function createMarkerLayer() {
+    const records = new Set();
     const animations = new Map();
     function cancelEntrances() {
         for (const animation of animations.values())
             animation.cancel();
         animations.clear();
+        for (const item of records)
+            item.enter = false;
     }
     return {
         cancelEntrances,
-        clear() {
-            cancelEntrances();
-            layer.replaceChildren();
-        },
         remove(item) {
-            animations.get(item.node)?.cancel();
-            animations.delete(item.node);
-            item.node.remove();
+            const visual = item.visual;
+            if (visual) {
+                animations.get(visual.node)?.cancel();
+                animations.delete(visual.node);
+                visual.node.remove();
+            }
+            records.delete(item);
+            item.enter = false;
         },
         update(item, marker, point, index) {
-            if (item.point[0] !== point[0] || item.point[1] !== point[1])
-                item.node.setAttribute('transform', `translate(${point[0]},${point[1]})`);
-            const label = marker.label ?? marker.id;
-            if (item.title.textContent !== label) {
-                item.title.textContent = label;
-                item.node.setAttribute('aria-label', label);
+            const visual = item.visual;
+            if (visual) {
+                if (item.point[0] !== point[0] || item.point[1] !== point[1])
+                    visual.node.setAttribute('transform', `translate(${point[0]},${point[1]})`);
+                const label = marker.label ?? marker.id;
+                if (visual.title.textContent !== label) {
+                    visual.title.textContent = label;
+                    visual.node.setAttribute('aria-label', label);
+                }
+                if (item.index !== index)
+                    visual.node.style.setProperty('--sf-marker-index', String(index));
             }
-            if (item.node.style.getPropertyValue('--sf-marker-index') !== String(index))
-                item.node.style.setProperty('--sf-marker-index', String(index));
             item.marker = marker;
             item.point = point;
+            item.index = index;
+        },
+        add(marker, point, index) {
+            const item = { marker, point, index, enter: true, visual: undefined };
+            records.add(item);
+            return item;
         },
-        add(marker, point, index, { features, markerColor, selectedMarkerColor, reducedMotion, enter, }) {
+        materialize(item, { features, markerColor, selectedMarkerColor, reducedMotion, selected, }) {
+            if (item.visual)
+                return item.visual;
+            const { marker, point, index, enter } = item;
+            item.enter = false;
             const node = svgElement('g', {
                 transform: `translate(${point[0]},${point[1]})`,
                 'data-marker-id': marker.id,
                 role: 'button',
-                tabindex: 0,
+                tabindex: -1,
                 'aria-label': marker.label ?? marker.id,
-                'aria-pressed': 'false',
+                'aria-pressed': String(selected),
             });
             const hit = svgElement('circle', { fill: 'transparent', 'pointer-events': 'all' });
             const dot = svgElement('circle', {
-                fill: marker.color ?? markerColor,
+                fill: selected ? selectedMarkerColor : (marker.color ?? markerColor),
                 stroke: '#fff9e9',
                 'stroke-width': 2,
                 'vector-effect': 'non-scaling-stroke',
@@ -58,7 +75,7 @@ export function createMarkerLayer(layer) {
                 'stroke-width': features.selectedMarkerRing ? features.selectedMarkerRing.width : 2,
                 'vector-effect': 'non-scaling-stroke',
                 'pointer-events': 'none',
-                display: 'none',
+                display: selected && features.selectedMarkerRing ? 'inline' : 'none',
             });
             node.style.setProperty('--sf-marker-index', String(index));
             node.append(title, hit, ring, dot);
@@ -79,8 +96,9 @@ export function createMarkerLayer(layer) {
                 };
                 animation.finished.then(release, release);
             }
-            layer.append(node);
-            return { marker, point, node, dot, hit, ring, title };
+            const visual = { node, dot, hit, ring, title };
+            item.visual = visual;
+            return visual;
         },
     };
 }

package/dist/src/marker-navigation.d.ts

@@ -0,0 +1,5 @@
+/** One tab stop for visible pins and clusters; bracket keys preserve arrow-key panning. */
+export declare function createMarkerNavigation(svg: SVGSVGElement, signal: AbortSignal): {
+    sync: (next?: SVGElement[]) => void;
+    recover(): boolean;
+};

package/dist/src/marker-navigation.js

@@ -0,0 +1,52 @@
+/** One tab stop for visible pins and clusters; bracket keys preserve arrow-key panning. */
+export function createMarkerNavigation(svg, signal) {
+    let nodes = [];
+    let activeKey = '';
+    let activeIndex = 0;
+    const key = (node) => node.dataset.markerId === undefined
+        ? `cluster:${node.dataset.clusterIds}`
+        : `marker:${node.dataset.markerId}`;
+    function sync(next = nodes) {
+        nodes = next.filter((node) => node.isConnected && node.style.display !== 'none');
+        const focusedNode = document.activeElement;
+        const focused = nodes.find((node) => node === focusedNode);
+        const active = focused ??
+            nodes.find((node) => key(node) === activeKey) ??
+            nodes[Math.min(activeIndex, nodes.length - 1)];
+        if (active) {
+            activeKey = key(active);
+            activeIndex = nodes.indexOf(active);
+        }
+        for (const node of next) {
+            const tabindex = node === active ? '0' : '-1';
+            if (node.getAttribute('tabindex') !== tabindex)
+                node.setAttribute('tabindex', tabindex);
+        }
+    }
+    svg.addEventListener('focusin', (event) => {
+        if (nodes.includes(event.target))
+            sync();
+    }, { signal });
+    svg.addEventListener('keydown', (event) => {
+        if (event.altKey ||
+            event.ctrlKey ||
+            event.metaKey ||
+            !nodes.includes(event.target))
+            return;
+        if (event.key !== '[' && event.key !== ']')
+            return;
+        event.preventDefault();
+        const index = nodes.indexOf(event.target);
+        nodes[(index + (event.key === ']' ? 1 : nodes.length - 1)) % nodes.length]?.focus({
+            preventScroll: true,
+        });
+    }, { signal });
+    return {
+        sync,
+        recover() {
+            const node = nodes.find((node) => key(node) === activeKey);
+            node?.focus({ preventScroll: true });
+            return !!node;
+        },
+    };
+}

package/dist/src/static-labels.d.ts

@@ -0,0 +1,7 @@
+import type { Project } from './geometry.js';
+import type { SFMapData } from './map-core.js';
+import type { SFMapOptions } from './types.js';
+/** Conservative portable metrics; the browser refines these with its actual font. */
+export declare function estimateLabelWidth(text: string, fontSize: number): number;
+/** Interactive overview rules, expressed entirely in screen pixels before serialization. */
+export declare function staticLabels(data: SFMapData, options: SFMapOptions, project: Project): string;