@expofp/floorplan 0.0.0-experimental.cf063fc

package/dist/esm/components/Maplibre/useVenueLayers.js

@@ -0,0 +1,463 @@
+import { polygonCentroid } from '@expofp/geometry';
+import { reaction } from 'mobx';
+import { useEffect } from 'react';
+import { getLayerMeshLookup, getLayerSvg } from '../../data/svg';
+import { compareIds } from '../../data/venues';
+import store from '../../store';
+import { convertLocalToGps } from '../../utils/gps';
+import { beforeLayer, POI_MARKER_FLOOR_LAYER_ID, VENUE_MARKER_FLOOR_LAYER_ID, } from './utils/marker-layer-order';
+import { pickUprightTextFont } from './utils/style-fonts';
+import { hasOpaquePixel, rasterizeVenuePinLayer, VENUE_PIN_WIDTH_PX, } from './utils/venue-pin-rasterize';
+import { venueTapHitTest } from './utils/venue-tap-hit-test';
+const VENUE_CONTOUR_SOURCE_ID = 'expofp-venue-contours';
+const VENUE_PIN_SOURCE_ID = 'expofp-venue-pins';
+const VENUE_HIT_TARGET_LAYER_ID = 'expofp-venue-hit-target';
+const VENUE_MARKER_HIT_TARGET_LAYER_ID = 'expofp-venue-marker-hit-target';
+const VENUE_CONTOUR_FILL_LAYER_ID = 'expofp-venue-contour-fill';
+const VENUE_CONTOUR_LINE_LAYER_ID = 'expofp-venue-contour-line';
+const VENUE_PIN_CIRCLE_LAYER_ID = VENUE_MARKER_FLOOR_LAYER_ID;
+const VENUE_AUTHORED_PIN_LAYER_ID = 'expofp-venue-authored-pin';
+const VENUE_PIN_LABEL_LAYER_ID = 'expofp-venue-pin-label';
+const VENUE_LAYER_IDS = [
+    VENUE_HIT_TARGET_LAYER_ID,
+    VENUE_MARKER_HIT_TARGET_LAYER_ID,
+    VENUE_CONTOUR_FILL_LAYER_ID,
+    VENUE_CONTOUR_LINE_LAYER_ID,
+    VENUE_PIN_CIRCLE_LAYER_ID,
+    VENUE_AUTHORED_PIN_LAYER_ID,
+    VENUE_PIN_LABEL_LAYER_ID,
+];
+/**
+ * The layers whose features a tap should treat as a degraded-venue target
+ * (KTD-6): the invisible contour-wide hit fill covers every kind — authored
+ * contour/custom artwork included, since aux layers have no native
+ * hit-testing — and the pin/label symbols extend the target to marker visuals
+ * that poke outside the contour.
+ */
+const VENUE_TAP_LAYER_IDS = [
+    VENUE_HIT_TARGET_LAYER_ID,
+    VENUE_MARKER_HIT_TARGET_LAYER_ID,
+    VENUE_PIN_CIRCLE_LAYER_ID,
+    VENUE_AUTHORED_PIN_LAYER_ID,
+    VENUE_PIN_LABEL_LAYER_ID,
+];
+const authoredPinImageId = (venueId) => `expofp-venue-pin-${venueId}`;
+/** The authored marker ref — the parser enforces at most one per venue. */
+const authoredPinRef = (venue) => venue.auxLayers.find((ref) => ref.render === 'marker');
+/**
+ * Whether authored artwork is lettering the venue itself right now: a layer
+ * whose resolved `suppressesLabel` is true and that is visible at the current
+ * size. Suppression is range-scoped like `replacesDefault` (ADR-0005), so it
+ * lifts wherever that layer is not drawn — and for a `brokenLayer` the
+ * rasterizer could not draw, whose place the named procedural pin takes.
+ */
+const labelSuppressed = (venue, brokenLayer) => {
+    const visible = venue.presentationState?.visibleAuxLayers ?? [];
+    return venue.auxLayers.some((ref) => ref.suppressesLabel && ref.layer !== brokenLayer && visible.includes(ref.layer));
+};
+/**
+ * The venue name label accompanies both pin presentations and the procedural
+ * contour (R14), and drops once floor detail takes over — or once authored
+ * artwork carrying its own name stands in for it (§7).
+ */
+const labelVisible = (venue, brokenLayer) => !venue.detailVisible && !labelSuppressed(venue, brokenLayer);
+const isFinitePoint = (point) => !!point && Number.isFinite(point.x) && Number.isFinite(point.y);
+/** Plan-space bounds of a venue's authored marker layer, or null when it has none. */
+const pinLayerBounds = (ref) => {
+    const layer = ref
+        ? store.layerStore.layers.find((candidate) => candidate.name === ref.layer)
+        : null;
+    return layer?.rect ?? layer?.viewbox ?? null;
+};
+/** One plan-space anchor shared by marker artwork, procedural pins, and labels. */
+const venueAnchor = (venue, ref) => {
+    const bounds = pinLayerBounds(ref);
+    if (bounds &&
+        Number.isFinite(bounds.min.x) &&
+        Number.isFinite(bounds.max.x) &&
+        Number.isFinite(bounds.max.y)) {
+        return { x: bounds.center.x, y: bounds.max.y };
+    }
+    if (isFinitePoint(venue.markerPoint))
+        return venue.markerPoint;
+    return polygonCentroid(venue.contour);
+};
+const CONTOUR_FILL_COLOR = '#b7c3d4';
+const CONTOUR_LINE_COLOR = '#7d8ea6';
+const PIN_COLOR = '#3b6ef5';
+const PIN_RADIUS_PX = 6;
+const PIN_HIT_RADIUS_PX = VENUE_PIN_WIDTH_PX / 2;
+const PIN_LABEL_SIZE_PX = 13;
+const FALLBACK_FADE_MS = 300;
+/**
+ * Native MapLibre rendering of the procedural per-kind fallbacks (R9, R10): a
+ * contour fill/line pair and a named pinhead, each visible within its zoom
+ * range when no authored layer of that kind suppresses it. The geometry is
+ * static (one GeoJSON feature per venue, plan-local coordinates projected to
+ * GPS once); zoom-state changes only touch per-feature state, and paint
+ * transitions cross-fade the appearance. The floor-detail counterpart —
+ * dropping a below-cutoff venue's levels from the custom scene layer — lives
+ * in useLayerVisibilitySync, the single owner of `LayerDef.hidden`.
+ */
+export function useVenueLayers(rendererReady, mapRef, geoConfig) {
+    useEffect(() => {
+        const map = mapRef.current;
+        if (!rendererReady || !map || !geoConfig || !store.venueStore.isCampusMode)
+            return;
+        const { gpsConfig } = geoConfig;
+        const venues = store.venueStore.venues;
+        // Everything below is fixed for the effect's lifetime — the authored marker
+        // ref, its plan-space anchor and the GPS projection of that anchor. Only the
+        // label sort key and visibility change, so resolve these once instead of on
+        // every pin-source rebuild (which fires at each zoom-threshold crossing).
+        const pinRefs = new Map(venues.map((venue) => [venue.id, authoredPinRef(venue)]));
+        // Venues whose marker artwork could not be drawn — no SVG group, a failed
+        // decode, or a blank bitmap. Where that artwork would show, the procedural
+        // pin it replaces draws instead: a broken marker degrades to the default,
+        // never to nothing.
+        const brokenPins = new Set();
+        // `icon-offset` per venue that keeps a frame grown past the rect anchored
+        // at the rect's bottom-center; known once the raster lands.
+        const pinIconOffsets = new Map();
+        const brokenPinLayer = (venue) => brokenPins.has(venue.id) ? pinRefs.get(venue.id)?.layer : undefined;
+        const anchors = new Map(venues.map((venue) => {
+            const anchor = venueAnchor(venue, pinRefs.get(venue.id));
+            return [venue.id, convertLocalToGps(anchor.x, anchor.y, gpsConfig)];
+        }));
+        const contourData = {
+            type: 'FeatureCollection',
+            features: venues.map((venue) => {
+                const ring = venue.contour.map((p) => convertLocalToGps(p.x, p.y, gpsConfig));
+                if (ring.length > 0)
+                    ring.push(ring[0]); // GeoJSON rings close explicitly
+                return {
+                    type: 'Feature',
+                    geometry: { type: 'Polygon', coordinates: [ring] },
+                    properties: { id: venue.id, name: venue.name },
+                };
+            }),
+        };
+        const buildPinData = () => {
+            const contextId = store.venueStore.focusedVenueId;
+            const labelRanks = new Map([...venues]
+                .sort((a, b) => Number(a.id !== contextId) - Number(b.id !== contextId) ||
+                a.order - b.order ||
+                compareIds(a.id, b.id))
+                .map((venue, index) => [venue.id, index]));
+            return {
+                type: 'FeatureCollection',
+                features: venues.map((venue) => ({
+                    type: 'Feature',
+                    geometry: { type: 'Point', coordinates: anchors.get(venue.id) },
+                    properties: {
+                        id: venue.id,
+                        name: venue.name,
+                        labelSortKey: labelRanks.get(venue.id) ?? 0,
+                        labelVisible: labelVisible(venue, brokenPinLayer(venue)),
+                        // Static per venue: authored pin artwork renders through its own
+                        // symbol layer; the icon registers asynchronously (rasterization).
+                        ...(pinRefs.get(venue.id)
+                            ? {
+                                pinIcon: authoredPinImageId(venue.id),
+                                pinIconOffset: pinIconOffsets.get(venue.id) ?? [0, 0],
+                            }
+                            : {}),
+                    },
+                })),
+            };
+        };
+        // Opacity by per-feature flags from the venue zoom state; unset state
+        // (before the mount-time evaluation) renders nothing, matching the
+        // unevaluated-counts-as-detail boot behavior.
+        const flagOpacity = (flag, max) => ['case', ['boolean', ['feature-state', flag], false], max, 0];
+        const pinOpacity = flagOpacity('pin', 1);
+        const labelOpacity = flagOpacity('label', 1);
+        map.addSource(VENUE_CONTOUR_SOURCE_ID, {
+            type: 'geojson',
+            data: contourData,
+            promoteId: 'id',
+        });
+        map.addSource(VENUE_PIN_SOURCE_ID, { type: 'geojson', data: buildPinData(), promoteId: 'id' });
+        // Contours and labels sit under the outdoor POI stack, the markers above
+        // it (marker-layer-order) — whichever hook mounts first.
+        const belowPoiMarkers = beforeLayer(map, POI_MARKER_FLOOR_LAYER_ID);
+        const addUnderPoiMarkers = (layer) => map.addLayer(layer, belowPoiMarkers);
+        // Invisible contour-wide tap target (KTD-6). Zero opacity keeps it
+        // queryable; whether a tap acts is gated per venue in the click handler
+        // (feature-state cannot drive layer filters), so clicks above the detail
+        // cutoff fall through to the regular booth pipeline.
+        addUnderPoiMarkers({
+            id: VENUE_HIT_TARGET_LAYER_ID,
+            type: 'fill',
+            source: VENUE_CONTOUR_SOURCE_ID,
+            paint: { 'fill-color': '#000000', 'fill-opacity': 0 },
+        });
+        addUnderPoiMarkers({
+            id: VENUE_MARKER_HIT_TARGET_LAYER_ID,
+            type: 'circle',
+            source: VENUE_PIN_SOURCE_ID,
+            paint: {
+                'circle-radius': PIN_HIT_RADIUS_PX,
+                'circle-opacity': 0,
+                'circle-pitch-alignment': 'viewport',
+            },
+        });
+        addUnderPoiMarkers({
+            id: VENUE_CONTOUR_FILL_LAYER_ID,
+            type: 'fill',
+            source: VENUE_CONTOUR_SOURCE_ID,
+            paint: {
+                'fill-color': CONTOUR_FILL_COLOR,
+                'fill-opacity': flagOpacity('contour', 0.35),
+                'fill-opacity-transition': { duration: FALLBACK_FADE_MS },
+            },
+        });
+        addUnderPoiMarkers({
+            id: VENUE_CONTOUR_LINE_LAYER_ID,
+            type: 'line',
+            source: VENUE_CONTOUR_SOURCE_ID,
+            paint: {
+                'line-color': CONTOUR_LINE_COLOR,
+                'line-width': 2,
+                'line-opacity': flagOpacity('contour', 0.9),
+                'line-opacity-transition': { duration: FALLBACK_FADE_MS },
+            },
+        });
+        addUnderPoiMarkers({
+            id: VENUE_PIN_LABEL_LAYER_ID,
+            type: 'symbol',
+            source: VENUE_PIN_SOURCE_ID,
+            filter: ['==', ['get', 'labelVisible'], true],
+            layout: {
+                'text-field': ['get', 'name'],
+                'text-font': pickUprightTextFont(map),
+                'text-size': PIN_LABEL_SIZE_PX,
+                // Below the pin first; beside it when something already holds that
+                // spot (venue and outdoor POI markers are placed before this layer),
+                // so the name moves instead of being covered. Never above — authored
+                // pin artwork stands there.
+                'text-variable-anchor-offset': ['top', [0, 0.8], 'left', [0.9, 0], 'right', [-0.9, 0]],
+                'symbol-sort-key': ['get', 'labelSortKey'],
+            },
+            paint: {
+                'text-color': '#243247',
+                'text-halo-color': '#ffffff',
+                'text-halo-width': 1.2,
+                'text-opacity': labelOpacity,
+                'text-opacity-transition': { duration: FALLBACK_FADE_MS },
+            },
+        });
+        // The markers go on top of the style, above the outdoor POI stack.
+        map.addLayer({
+            id: VENUE_PIN_CIRCLE_LAYER_ID,
+            type: 'circle',
+            source: VENUE_PIN_SOURCE_ID,
+            paint: {
+                'circle-radius': PIN_RADIUS_PX,
+                'circle-color': PIN_COLOR,
+                'circle-stroke-color': '#ffffff',
+                'circle-stroke-width': 2,
+                'circle-opacity': pinOpacity,
+                'circle-opacity-transition': { duration: FALLBACK_FADE_MS },
+                'circle-stroke-opacity': pinOpacity,
+                'circle-stroke-opacity-transition': { duration: FALLBACK_FADE_MS },
+                'circle-pitch-alignment': 'viewport',
+            },
+        });
+        map.addLayer({
+            id: VENUE_AUTHORED_PIN_LAYER_ID,
+            type: 'symbol',
+            source: VENUE_PIN_SOURCE_ID,
+            filter: ['has', 'pinIcon'],
+            layout: {
+                'icon-image': ['get', 'pinIcon'],
+                'icon-anchor': 'bottom',
+                'icon-offset': ['get', 'pinIconOffset'],
+                // Drawn over anything, but its footprint is reserved so the labels
+                // placed after it move off the artwork.
+                'icon-allow-overlap': true,
+            },
+            paint: {
+                'icon-opacity': flagOpacity('authoredPin', 1),
+                // Authored layers use hard show/hide toggles in v1; the fade stays on
+                // the procedural fallbacks only (see the plan's deferred follow-ups).
+                'icon-opacity-transition': { duration: 0 },
+            },
+        });
+        // Rasterize each authored pin layer's artwork to a style image (KTD-5).
+        // Asynchronous and failure-tolerant: until the image lands the venue
+        // shows its label only; if it never does, the procedural pin takes over.
+        const registeredImages = new Set();
+        let disposed = false;
+        const pixelRatio = window.devicePixelRatio || 1;
+        const markPinBroken = (venue, reason, error) => {
+            const message = `useVenueLayers: pin layer "${pinRefs.get(venue.id)?.layer}" ${reason}; drawing the procedural pin instead`;
+            if (error === undefined)
+                console.warn(message);
+            else
+                console.warn(message, error);
+            brokenPins.add(venue.id);
+        };
+        // Raster callbacks settle after the mount-time evaluation below, so they
+        // re-apply the state themselves; a synchronous failure is picked up by it.
+        const fallBackToProceduralPin = (venue, reason, error) => {
+            markPinBroken(venue, reason, error);
+            applyZoomState();
+        };
+        for (const venue of venues) {
+            const ref = pinRefs.get(venue.id);
+            if (!ref)
+                continue;
+            const bounds = pinLayerBounds(ref);
+            const group = getLayerSvg(ref.layer)?.querySelector(`[data-layer="${ref.layer}"]`);
+            if (!bounds || !group) {
+                markPinBroken(venue, 'has no geometry or SVG group');
+                continue;
+            }
+            void rasterizeVenuePinLayer(group, bounds, VENUE_PIN_WIDTH_PX, pixelRatio, getLayerMeshLookup(ref.layer))
+                .then((raster) => {
+                if (disposed)
+                    return;
+                if (!raster) {
+                    fallBackToProceduralPin(venue, 'failed to rasterize');
+                    return;
+                }
+                try {
+                    const context = raster.canvas.getContext('2d');
+                    if (!context) {
+                        fallBackToProceduralPin(venue, 'failed to rasterize');
+                        return;
+                    }
+                    const imageData = context.getImageData(0, 0, raster.canvas.width, raster.canvas.height);
+                    if (!hasOpaquePixel(imageData.data)) {
+                        fallBackToProceduralPin(venue, 'rasterized fully transparent');
+                        return;
+                    }
+                    const id = authoredPinImageId(venue.id);
+                    // Replace the transparent placeholder styleimagemissing may have added.
+                    if (map.hasImage(id))
+                        map.removeImage(id);
+                    map.addImage(id, imageData, { pixelRatio });
+                    registeredImages.add(id);
+                    if (raster.iconOffset.some((value) => value !== 0)) {
+                        pinIconOffsets.set(venue.id, raster.iconOffset);
+                        map.getSource(VENUE_PIN_SOURCE_ID)?.setData(buildPinData());
+                    }
+                }
+                catch (error) {
+                    fallBackToProceduralPin(venue, 'failed to rasterize', error);
+                }
+            })
+                .catch((error) => {
+                if (!disposed)
+                    fallBackToProceduralPin(venue, 'failed to rasterize', error);
+            });
+        }
+        const stateFlags = (venue) => {
+            const pinLayer = pinRefs.get(venue.id)?.layer;
+            const markerShown = !!pinLayer && !!venue.presentationState?.visibleAuxLayers.includes(pinLayer);
+            const broken = brokenPins.has(venue.id);
+            return {
+                contour: venue.presentationState?.fallbackSceneVisible ?? false,
+                pin: (venue.presentationState?.fallbackMarkerVisible ?? false) || (markerShown && broken),
+                authoredPin: markerShown && !broken,
+                label: labelVisible(venue, brokenPinLayer(venue)),
+            };
+        };
+        const stateKey = ({ contour, pin, authoredPin, label }) => `${contour ? 1 : 0}${pin ? 1 : 0}${authoredPin ? 1 : 0}${label ? 1 : 0}`;
+        const appliedByVenue = new Map();
+        const applyZoomState = () => {
+            let sourceDataChanged = false;
+            for (const venue of store.venueStore.venues) {
+                const state = stateFlags(venue);
+                const key = stateKey(state);
+                if (appliedByVenue.get(venue.id) === key)
+                    continue;
+                sourceDataChanged = true;
+                map.setFeatureState({ source: VENUE_CONTOUR_SOURCE_ID, id: venue.id }, state);
+                map.setFeatureState({ source: VENUE_PIN_SOURCE_ID, id: venue.id }, state);
+                appliedByVenue.set(venue.id, key);
+            }
+            if (sourceDataChanged) {
+                map.getSource(VENUE_PIN_SOURCE_ID)?.setData(buildPinData());
+            }
+        };
+        // --- Tap-to-focus (R13, KTD-6) ---------------------------------------
+        /** The topmost degraded venue under a screen point, or null. */
+        const degradedVenueAt = (x, y) => {
+            // With every venue at full detail (the common state) no tap target can
+            // match, so skip the renderer query entirely.
+            if (store.venueStore.venues.every((venue) => venue.detailVisible))
+                return null;
+            const layers = VENUE_TAP_LAYER_IDS.filter((id) => !!map.getLayer(id));
+            if (!layers.length)
+                return null;
+            for (const feature of map.queryRenderedFeatures([x, y], { layers })) {
+                const id = feature.properties?.id;
+                const venue = typeof id === 'string' ? store.venueStore.venues.find((v) => v.id === id) : undefined;
+                if (venue && !venue.detailVisible)
+                    return venue;
+            }
+            return null;
+        };
+        const handleMapClick = (event) => {
+            const venue = degradedVenueAt(event.point.x, event.point.y);
+            // focusVenue flies the camera to the venue's level and notifies the
+            // embedder; the selector follows via selectorMode once detail shows.
+            if (venue)
+                store.venueStore.focusVenue(venue);
+        };
+        // Hover feedback fires on every pointer move; limit the renderer query to
+        // one per rendered frame against the latest point (the camera-tracking
+        // hook throttles its move handler the same way).
+        let hoverFrame;
+        let hoverPoint = { x: 0, y: 0 };
+        const handleMouseMove = (event) => {
+            hoverPoint = { x: event.point.x, y: event.point.y };
+            if (hoverFrame !== undefined)
+                return;
+            hoverFrame = requestAnimationFrame(() => {
+                hoverFrame = undefined;
+                map.getCanvas().style.cursor = degradedVenueAt(hoverPoint.x, hoverPoint.y) ? 'pointer' : '';
+            });
+        };
+        map.on('click', handleMapClick);
+        map.on('mousemove', handleMouseMove);
+        // Claim degraded-venue taps from the plan's click seam (`clickedPlan` in
+        // Map/pointer.ts) so a hidden booth underneath isn't also selected.
+        venueTapHitTest.set((x, y) => {
+            const point = map.project(convertLocalToGps(x, y, gpsConfig));
+            return !!degradedVenueAt(point.x, point.y);
+        });
+        applyZoomState();
+        const disposeStateReaction = reaction(() => store.venueStore.venues
+            .map((venue) => `${venue.id}:${stateKey(stateFlags(venue))}`)
+            .join(','), applyZoomState);
+        const disposeContextReaction = reaction(() => store.venueStore.focusedVenueId, () => {
+            map.getSource(VENUE_PIN_SOURCE_ID)?.setData(buildPinData());
+        });
+        return () => {
+            disposed = true;
+            disposeStateReaction();
+            disposeContextReaction();
+            venueTapHitTest.set(null);
+            if (hoverFrame !== undefined)
+                cancelAnimationFrame(hoverFrame);
+            map.off('click', handleMapClick);
+            map.off('mousemove', handleMouseMove);
+            map.getCanvas().style.cursor = '';
+            for (const id of VENUE_LAYER_IDS) {
+                if (map.getLayer(id))
+                    map.removeLayer(id);
+            }
+            if (map.getSource(VENUE_CONTOUR_SOURCE_ID))
+                map.removeSource(VENUE_CONTOUR_SOURCE_ID);
+            if (map.getSource(VENUE_PIN_SOURCE_ID))
+                map.removeSource(VENUE_PIN_SOURCE_ID);
+            for (const id of registeredImages) {
+                if (map.hasImage(id))
+                    map.removeImage(id);
+            }
+        };
+    }, [rendererReady, geoConfig, mapRef]);
+}

package/dist/esm/components/Maplibre/useWayfindingAndMarkers.d.ts

@@ -0,0 +1,11 @@
+import { type SceneDef } from '@expofp/renderer';
+import { type RefObject } from 'react';
+/**
+ * Starts wayfinding and markers once the scene exists, and tears them down with it — the same
+ * declarative forms the standalone map uses: both fill layers `configAll` put in the scene, and
+ * layout and picking reach them through the handlers their own defs declare.
+ * @param scene - The prepared scene the map draws, once it exists.
+ * @param canvas - The canvas the plan draws on — the map's own, read lazily.
+ */
+export declare function useWayfindingAndMarkers(scene: SceneDef | null, canvas: RefObject<HTMLCanvasElement | null>): void;
+//# sourceMappingURL=useWayfindingAndMarkers.d.ts.map

package/dist/esm/components/Maplibre/useWayfindingAndMarkers.js

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import store from '../../store';
+import { createWayfinding } from '../../wayfinding';
+import { configMarkers } from '../Map/drawing/config/config-markers';
+/**
+ * Starts wayfinding and markers once the scene exists, and tears them down with it — the same
+ * declarative forms the standalone map uses: both fill layers `configAll` put in the scene, and
+ * layout and picking reach them through the handlers their own defs declare.
+ * @param scene - The prepared scene the map draws, once it exists.
+ * @param canvas - The canvas the plan draws on — the map's own, read lazily.
+ */
+export function useWayfindingAndMarkers(scene, canvas) {
+    useEffect(() => {
+        if (!scene)
+            return;
+        const disposeWayfinding = createWayfinding({ scene, store, canvas });
+        const disposeMarkers = configMarkers({ scene });
+        return () => {
+            disposeWayfinding();
+            disposeMarkers();
+        };
+    }, [scene, canvas]);
+}

package/dist/esm/components/Maplibre/utils/basemap-palette.d.ts

@@ -0,0 +1,19 @@
+import { type StyleSpecification } from 'maplibre-gl';
+/**
+ * Paint properties to set, keyed by the id of the style layer they apply to.
+ * A property named here replaces the layer's own value; the rest of its paint
+ * stays as the style wrote it.
+ */
+export type PaintOverrides = Readonly<Record<string, Readonly<Record<string, unknown>>>>;
+/**
+ * Return a copy of `style` whose named layers carry the override paint.
+ *
+ * Overrides for layers the style does not have are skipped, so an upstream
+ * rename falls back to the upstream color rather than breaking the map.
+ */
+export declare function recolorStyle(style: StyleSpecification, overrides: PaintOverrides): StyleSpecification;
+/** CARTO Positron colors for the OpenFreeMap `positron` style. */
+export declare const POSITRON_PAINT: PaintOverrides;
+/** CARTO Dark Matter colors for the OpenFreeMap `dark` style. */
+export declare const DARK_MATTER_PAINT: PaintOverrides;
+//# sourceMappingURL=basemap-palette.d.ts.map

package/dist/esm/components/Maplibre/utils/basemap-palette.js

@@ -0,0 +1,125 @@
+/**
+ * Return a copy of `style` whose named layers carry the override paint.
+ *
+ * Overrides for layers the style does not have are skipped, so an upstream
+ * rename falls back to the upstream color rather than breaking the map.
+ */
+export function recolorStyle(style, overrides) {
+    return {
+        ...style,
+        layers: style.layers.map((layer) => {
+            const paint = overrides[layer.id];
+            if (!paint)
+                return layer;
+            return { ...layer, paint: { ...layer.paint, ...paint } };
+        }),
+    };
+}
+/*
+ * The online basemap is OpenFreeMap's Positron/Dark pair, recolored to the
+ * CARTO Positron and Dark Matter palettes the SDK shipped before (and the
+ * offline basemap still copies — `offline-map-style.ts` in `@expofp/offline`).
+ * Both pairs descend from the same CARTO originals over the OpenMapTiles
+ * schema, so the layers line up; only the colors drifted.
+ *
+ * Keys are OpenFreeMap layer ids; values are the colors of the CARTO layer
+ * that draws the same features. Layers left out already match closely enough.
+ */
+const POSITRON_PLACE_LABEL = {
+    'text-color': '#697b89',
+    'text-halo-color': 'rgba(255,255,255,0.5)',
+};
+const POSITRON_COUNTRY_LABEL = { 'text-color': '#8a99a4', 'text-halo-color': '#fafaf8' };
+const POSITRON_ROAD_LABEL = { 'text-color': '#838383', 'text-halo-color': '#fff' };
+const POSITRON_WATER_LABEL = { 'text-color': '#7a96a0', 'text-halo-color': '#f5f5f3' };
+const POSITRON_GREEN = { 'fill-color': 'rgba(234, 241, 233, 0.5)' };
+const POSITRON_ROAD_CASING = { 'line-color': '#dddddd' };
+/** CARTO Positron colors for the OpenFreeMap `positron` style. */
+export const POSITRON_PAINT = {
+    background: { 'background-color': '#fafaf8' },
+    park: POSITRON_GREEN,
+    landcover_wood: POSITRON_GREEN,
+    landuse_residential: { 'fill-color': 'rgba(237, 237, 237, 0.5)' },
+    water: { 'fill-color': '#d4dadc' },
+    waterway: { 'line-color': '#d1dbdf' },
+    // CARTO's `building-top`: its `building` is the extruded wall under it.
+    building: { 'fill-color': '#ededed', 'fill-outline-color': '#dfdfdf' },
+    // CARTO draws minor and service roads near-white inside a pale casing;
+    // upstream has a single uncased line, so it takes the casing tone, lighter
+    // still for service roads.
+    highway_minor: { 'line-color': ['match', ['get', 'class'], 'service', '#efefef', '#e6e6e6'] },
+    tunnel_motorway_casing: POSITRON_ROAD_CASING,
+    highway_major_casing: POSITRON_ROAD_CASING,
+    highway_motorway_casing: POSITRON_ROAD_CASING,
+    highway_motorway_bridge_casing: POSITRON_ROAD_CASING,
+    highway_path: { 'line-color': '#d5d5d5' },
+    // CARTO tints administrative borders a pale pink, not gray.
+    boundary_2: { 'line-color': '#ebd6d8' },
+    boundary_3: { 'line-color': '#e1c5c7' },
+    boundary_disputed: { 'line-color': '#ebd6d8' },
+    'highway-name-path': POSITRON_ROAD_LABEL,
+    'highway-name-minor': POSITRON_ROAD_LABEL,
+    'highway-name-major': POSITRON_ROAD_LABEL,
+    waterway_line_label: POSITRON_WATER_LABEL,
+    water_name_point_label: POSITRON_WATER_LABEL,
+    water_name_line_label: POSITRON_WATER_LABEL,
+    label_other: POSITRON_PLACE_LABEL,
+    label_village: POSITRON_PLACE_LABEL,
+    label_town: POSITRON_PLACE_LABEL,
+    label_city: POSITRON_PLACE_LABEL,
+    label_city_capital: POSITRON_PLACE_LABEL,
+    label_state: { 'text-color': '#97a4ae', 'text-halo-color': '#fafaf8' },
+    label_country_1: POSITRON_COUNTRY_LABEL,
+    label_country_2: POSITRON_COUNTRY_LABEL,
+    label_country_3: POSITRON_COUNTRY_LABEL,
+};
+const DARK_MATTER_ROAD_CASING = { 'line-color': '#232323' };
+const DARK_MATTER_COUNTRY_BORDER = { 'line-color': 'rgb(96, 96, 96)' };
+const DARK_MATTER_SUBURB_LABEL = { 'text-color': '#666', 'text-halo-color': '#222' };
+const DARK_MATTER_CITY_LABEL = { 'text-color': 'rgb(211, 228, 236)', 'text-halo-color': '#222' };
+const DARK_MATTER_COUNTRY_LABEL = { 'text-color': 'rgb(158, 182, 189)', 'text-halo-color': '#111' };
+// Dark Matter paints parks and woods the background color: no tint at all.
+const DARK_MATTER_HIDDEN_FILL = { 'fill-opacity': 0 };
+/** CARTO Dark Matter colors for the OpenFreeMap `dark` style. */
+export const DARK_MATTER_PAINT = {
+    background: { 'background-color': '#0e0e0e' },
+    landcover_wood: DARK_MATTER_HIDDEN_FILL,
+    landuse_park: DARK_MATTER_HIDDEN_FILL,
+    water: { 'fill-color': '#2c353c' },
+    waterway: { 'line-color': 'rgb(63, 90, 109)' },
+    // CARTO's `building-top`: its `building` is the extruded wall, transparent here.
+    building: { 'fill-color': '#393939', 'fill-outline-color': '#0e0e0e' },
+    highway_path: { 'line-color': '#262626' },
+    // One layer upstream for three CARTO ones: only minor streets get the blue
+    // tint; service roads stay near-black and tracks take the path color.
+    highway_minor: {
+        'line-color': [
+            'match',
+            ['get', 'class'],
+            'minor',
+            'rgb(65, 71, 88)',
+            'service',
+            '#1c1c1c',
+            '#262626',
+        ],
+    },
+    highway_major_casing: DARK_MATTER_ROAD_CASING,
+    highway_major_inner: { 'line-color': 'rgb(83, 86, 102)' },
+    highway_motorway_casing: DARK_MATTER_ROAD_CASING,
+    highway_motorway_inner: { 'line-color': 'rgb(73, 73, 73)' },
+    highway_name_other: { 'text-color': 'rgb(181, 180, 180)', 'text-halo-color': '#111' },
+    water_name: { 'text-color': 'rgb(155, 155, 155)', 'text-halo-color': '#181818' },
+    boundary_state: { 'line-color': 'rgb(103, 103, 114)' },
+    'boundary_country_z0-4': DARK_MATTER_COUNTRY_BORDER,
+    'boundary_country_z5-': DARK_MATTER_COUNTRY_BORDER,
+    place_other: DARK_MATTER_SUBURB_LABEL,
+    place_suburb: DARK_MATTER_SUBURB_LABEL,
+    place_village: { 'text-color': 'rgb(154, 153, 153)', 'text-halo-color': '#222' },
+    place_town: { 'text-color': 'rgb(204, 208, 228)', 'text-halo-color': '#222' },
+    place_city: DARK_MATTER_CITY_LABEL,
+    place_city_large: DARK_MATTER_CITY_LABEL,
+    place_state: { 'text-color': 'rgb(203, 230, 230)', 'text-halo-color': '#111' },
+    place_country_other: DARK_MATTER_COUNTRY_LABEL,
+    place_country_minor: DARK_MATTER_COUNTRY_LABEL,
+    place_country_major: DARK_MATTER_COUNTRY_LABEL,
+};