@expofp/floorplan 0.0.0-experimental.2d6c681

package/dist/esm/components/Map/drawing/config/config-pins.js

@@ -0,0 +1,533 @@
+import { Rect } from '@expofp/geometry';
+import { update, } from '@expofp/renderer';
+import { comparer, reaction } from 'mobx';
+import { createImageDef } from '../../../../engine/defs';
+import { DEFAULT_FONT_URL } from '../../../../engine/fonts';
+import { boothStore, uiState } from '../../../../store';
+import { createDimmingAnimator } from '../../../../utils/dimming';
+import { createClusterPinCanvas, createPoiPinCanvas } from './canvases';
+import { clusterCounterCircle, clusterCountFontPx, clusterCountText, COUNT_BLOCK_HALF_EM, PIN_ASPECT, } from './pin-geometry';
+/**
+ * Draws a pin over every booth an active POI-type search button selects, and draws the renderer's
+ * clusters of those pins from a pool of hidden markers.
+ *
+ * The pins key off `uiState.selectedPoiTypeFilters`, which is what both a single `poi_type` button
+ * and a `poi_types` group button write — so one filter or a whole group reaches this the same way.
+ *
+ * This module only *substitutes*. The renderer decides which pins collide, hides every pin in a
+ * cluster through its own `onPlace`, and reports the clusters to the pin layer's `clustering`. What
+ * this draws for a report is a pooled marker per cluster, in two sibling layers that declare neither
+ * `placement` nor `clustering`, so a marker can never be clustered as its own input.
+ *
+ * Nothing is created or destroyed on a camera move. The pins are built when the booth set changes,
+ * one per booth, and so is the pool: a cluster needs two pins, so `floor(n / 2)` markers is every
+ * marker a report can ask for. A report writes positions and counts onto defs already mounted, and
+ * no layer's `children` is reassigned by anything but a booth-set change.
+ *
+ * Takes the layers rather than the scene, so it runs in `config-all` beside the layers' creation:
+ * nothing here needs the renderer, and `update` before the scene mounts is a documented no-op that
+ * the mount's own full sync covers.
+ * @param pinLayer - The layer for pins, which `config-all` creates.
+ * @param clusterLayer - The layer for cluster teardrops, created directly above `pinLayer`.
+ * @param countLayer - The layer for cluster counts, created directly above `clusterLayer`.
+ * @returns A disposer.
+ */
+export function configPins(pinLayer, clusterLayer, countLayer) {
+    const disposers = [];
+    let fades = [];
+    /** The booths an active filter selects, written by the reaction below. */
+    let booths = [];
+    /** The pooled cluster markers, sized when the booth set changes and at no other time. */
+    let pool = [];
+    /**
+     * The booths an active filter selects.
+     *
+     * A booth with no rect was never drawn — `config-booths` drops it — so it gets no pin either. Nor
+     * does a booth on a floor that is off: the placement pass ignores `hidden`, on purpose, so an
+     * invisible pin would still win its footprint on screen and blank the visible pin standing on it.
+     * Leaving it out of the layer unregisters it, which frees that room and owes a fresh pass.
+     * @returns The booths to mark, empty when no POI-type filter is on.
+     */
+    function filteredBooths() {
+        const poiTypes = uiState.selectedPoiTypeFilters;
+        if (!poiTypes.length)
+            return [];
+        const poiTypeIds = new Set(poiTypes.map((poiType) => poiType.id));
+        return boothStore.booths.filter((booth) => booth.visible && poiTypeIds.has(booth.poiTypeId) && booth.rect);
+    }
+    const track = (fade) => {
+        fades.push(fade);
+    };
+    /** Stops every running fade, so a discarded def is not written to or updated after the fact. */
+    function stopFades() {
+        fades.forEach((fade) => fade.stop());
+        fades = [];
+    }
+    /** Builds one pin per booth into the pin layer. Only on a booth-set change. */
+    function buildPins() {
+        pinLayer.children = booths.map((booth) => createPin(booth, track));
+    }
+    /**
+     * Builds the pool of hidden markers into the cluster and count layers. Only on a booth-set
+     * change, and bar `cleanup` the only writer of either layer's `children`.
+     */
+    function buildPool() {
+        pool = Array.from({ length: Math.floor(booths.length / 2) }, () => createUnit(track));
+        clusterLayer.children = pool.map((unit) => unit.image);
+        countLayer.children = pool.map((unit) => unit.count);
+    }
+    /**
+     * Draws a cluster report: the only writer of a pooled unit's fields.
+     *
+     * Every marker fades: in as its cluster appears, out as it leaves, in the pass that decides fresh
+     * pins as in any later one. The pins a cluster hides fade out over the same time, so a crowd
+     * cross-fades into its marker and is never an empty patch while the marker comes in.
+     *
+     * A `Cluster` has no identity, so a unit follows the nearest cluster within {@link MOVE_RADIUS_PX}
+     * of where it stands ({@link assign}). A cluster that moves keeps its unit and that unit's opacity:
+     * the marker moves to its new place in one step, without blinking. One that leaves releases its unit to fade out where it
+     * stood, and one that appears takes a free unit and fades it in.
+     * @param clusters - The renderer's full current set.
+     * @param view - What the camera shows, for the move radius in plan units.
+     * @returns Every def that changed, which the renderer writes: a rule must never call `update`.
+     */
+    function show(clusters, view) {
+        const changed = new Set();
+        const add = (defs) => defs?.forEach((d) => changed.add(d));
+        const owners = assign(pool, clusters, MOVE_RADIUS_PX * view.pixelSize);
+        owners.forEach((unit, i) => {
+            if (writeUnit(unit, clusters[i]))
+                add([unit.image, unit.count]);
+            add(unit.fader.place(true));
+        });
+        const owned = new Set(owners);
+        for (const unit of pool) {
+            if (!owned.has(unit))
+                add(unit.fader.place(false));
+        }
+        return changed.size ? [...changed] : undefined;
+    }
+    // One options object for the life of this setup, never swapped: the renderer tells the handler it
+    // last told, so a new object while the set is unchanged would never hear the current set.
+    const clustering = {
+        onCluster: (clusters, view) => show(clusters, view),
+        // The teardrop as `createUnit` draws it, standing on its tip at the cluster's anchor, so a
+        // pin the drawn marker would cover joins its cluster instead of showing beside it.
+        marker: { width: CLUSTER_WIDTH_PX, height: CLUSTER_HEIGHT_PX, origin: PIN_ORIGIN },
+    };
+    pinLayer.clustering = clustering;
+    disposers.push(reaction(
+    // The booths that carry a pin, which already depends on the POI-type filter and on each
+    // booth's floor, so one reaction covers a filter click and a floor switch alike. Not
+    // `layersStore.visible`: that changes on any layer toggle, and a rebuild restarts every fade.
+    // The shallow comparison keeps a re-evaluation that selects the same booths from rebuilding.
+    () => filteredBooths(), (next) => {
+        booths = next;
+        // Everything is built fresh and the old defs drop at once: a pin of a floor that is off
+        // must not linger and win room from the visible ones.
+        stopFades();
+        buildPins();
+        buildPool();
+        // One call for the three layers: `update` is variadic and a rebuild is one change.
+        update(pinLayer, clusterLayer, countLayer);
+    }, 
+    // A plan opened on a `?poiType=` link already carries the filter, so its pins have to appear
+    // with the scene rather than wait for the next click.
+    { equals: comparer.shallow, fireImmediately: true }));
+    return function cleanup() {
+        disposers.forEach((dispose) => dispose());
+        disposers.length = 0;
+        stopFades();
+        pool = [];
+        pinLayer.clustering = undefined;
+        pinLayer.children = [];
+        clusterLayer.children = [];
+        countLayer.children = [];
+        update(pinLayer, clusterLayer, countLayer);
+    };
+}
+/**
+ * Builds the fade a set of defs shares: one eased value, whatever drives it.
+ *
+ * A def that has faded to nothing is set `hidden`, so it costs nothing to draw. The placement pass
+ * ignores `hidden` on purpose, so a hidden pin keeps competing and keeps seeding, and the grouping
+ * never depends on what this module drew for it.
+ * @param defs - Every def the fade writes, which `update` writes together.
+ * @param paint - Writes an opacity onto them.
+ * @param read - Reads the opacity they hold.
+ * @param track - Tracks the animator.
+ * @param shown - Whether the defs start drawn. They must already be built to match: opacity 1 and
+ *   not hidden, or opacity 0 and hidden.
+ * @returns The fade.
+ */
+function createFader(defs, paint, read, track, shown) {
+    let fade;
+    // The verdict the fade is heading for.
+    let wanted = shown;
+    // Set for the length of a call into the animator, so a write it makes synchronously (it does when
+    // there is no `requestAnimationFrame`) is reported through the return value, or not at all.
+    let placing = false;
+    // Whether a write made while `placing` changed a def.
+    let dirty = false;
+    const write = (hidden) => {
+        const opacity = 1 - Math.min(Math.max(hidden, 0), 1);
+        let changed = false;
+        if (read() !== opacity) {
+            paint(opacity);
+            changed = true;
+        }
+        if (!wanted && hidden >= 1 && defs.some((def) => !def.hidden)) {
+            for (const def of defs)
+                def.hidden = true;
+            changed = true;
+        }
+        if (!changed)
+            return;
+        if (placing)
+            dirty = true;
+        else
+            update(...defs);
+    };
+    const animator = () => {
+        if (!fade) {
+            fade = createDimmingAnimator(write, PIN_FADE_MS);
+            track(fade);
+            if (!shown) {
+                // The animator starts at "not hidden"; one built hidden starts it at the other end, without
+                // a frame. Nothing changes, since the defs already hold that state. Called from inside
+                // `place`, so it leaves `placing` as it found it.
+                const outer = placing;
+                placing = true;
+                fade.setTarget(true, { immediate: true });
+                placing = outer;
+            }
+        }
+        return fade;
+    };
+    return {
+        place(next) {
+            // A repeat would retarget the animator mid-flight and restart its clock from the current value.
+            if (next === wanted)
+                return undefined;
+            wanted = next;
+            let changed = false;
+            // Drawn again before the fade starts, so its first frame is seen.
+            if (next && defs.some((def) => def.hidden)) {
+                for (const def of defs)
+                    def.hidden = false;
+                changed = true;
+            }
+            placing = true;
+            dirty = false;
+            animator().setTarget(!next);
+            placing = false;
+            return changed || dirty ? defs : undefined;
+        },
+    };
+}
+/**
+ * Sizes one pin or teardrop for a new pixel size — the `onScale` each declares.
+ *
+ * The **only** writer of its bounds size, so nothing else here tracks a scale. Writes through the
+ * existing `Rect` rather than replacing it, which keeps the center and the elevation.
+ * The size comes from a CSS width and the teardrop's aspect, never from the canvas: a canvas's
+ * backing store is in the device pixels it was rasterized at, which says how crisp the pin is and
+ * nothing about how big.
+ * @param pin - The pin to size.
+ * @param widthPx - Its width in CSS pixels.
+ * @param aspect - Its canvas's height over its width.
+ * @param pixelSize - Plan units per CSS pixel.
+ * @returns The def, or nothing when the size was already right — a settled camera costs no writes.
+ */
+function rescalePin(pin, widthPx, aspect, pixelSize) {
+    const { bounds } = pin;
+    const width = widthPx * pixelSize;
+    const height = widthPx * aspect * pixelSize;
+    if (bounds.size.x === width && bounds.size.y === height)
+        return undefined;
+    bounds.set(bounds.center.x, bounds.center.y, width, height, bounds.rotation, bounds.elevation);
+    return [pin];
+}
+/**
+ * The shared pin image, rasterized on first use.
+ *
+ * Drawn at the device ratio for crispness only. {@link rescalePin} sizes the def from
+ * `PIN_WIDTH_PX` alone, so the pin is that many CSS px on a 1x screen and on a 3x one alike.
+ * @returns The canvas every pin draws.
+ */
+function getPinCanvas() {
+    if (!pinCanvas)
+        pinCanvas = createPoiPinCanvas(PIN_WIDTH_PX, window.devicePixelRatio);
+    return pinCanvas;
+}
+/**
+ * The shared cluster marker image, rasterized on first use.
+ *
+ * Module scope, like {@link getPinCanvas}: a canvas per marker is a distinct `ImageSource`, and the
+ * renderer repacks its atlas whenever the *set* of images changes. With the count drawn as text
+ * and every pooled teardrop drawing this one canvas, two images reach the atlas for the plan's life.
+ * @returns The canvas every cluster marker draws.
+ */
+function getClusterCanvas() {
+    if (!clusterCanvas) {
+        clusterCanvas = createClusterPinCanvas(CLUSTER_WIDTH_PX, window.devicePixelRatio);
+    }
+    return clusterCanvas;
+}
+/**
+ * Builds one booth's pin, standing on the center of its bounding box.
+ *
+ * `screenSpace` stands the pin up to face the viewer: it marks a point rather than covering ground,
+ * so on a tilted plan a flat one would smear into the floor. A camera-facing sprite pivots about its
+ * own anchor, so the bottom-center `origin` puts the drop's tip on the booth center and the head
+ * above it. The size passed here is a placeholder: the renderer lays the def out as it registers,
+ * and `onScale` rebuilds the bounds from the real pixel size.
+ *
+ * No `placement.group`: a lone pin is one def, so it is one unit of a cluster.
+ *
+ * Every verdict fades, the first one too. A pin clustered from the start is drawn whole and fades
+ * out while its marker fades in, so the crowd cross-fades into the marker rather than leaving a gap
+ * the marker then fills.
+ * @param booth - The booth to mark.
+ * @param track - Tracks the pin's fade animator, so the owner can stop it.
+ * @returns The pin.
+ */
+function createPin(booth, track) {
+    // `booth.rect` is the unrotated bounding box, so its center is the anchor. The elevation lifts the
+    // pin clear of the booth's own volume rather than leaving it on the floor inside one — doubled, so
+    // the drop floats above the roof instead of resting on it.
+    const bounds = new Rect(booth.rect.center, { x: PIN_WIDTH_PX, y: PIN_WIDTH_PX * PIN_ASPECT }, 0, booth.elevation * 2);
+    const pin = {
+        ...createImageDef(getPinCanvas(), bounds, { hidden: false, origin: PIN_ORIGIN }),
+        screenSpace: true,
+        // Fully drawn until the first verdict says otherwise, which `onPlace` compares against.
+        opacity: 1,
+    };
+    // No `onRoll`: a roll rule would still run on a screen-space def and spin the drop about the
+    // screen's normal. Facing the camera is what keeps it pointing down the screen.
+    pin.onScale = ({ pixelSize }) => rescalePin(pin, PIN_WIDTH_PX, PIN_ASPECT, pixelSize);
+    // A pin the pass hides fades rather than vanishing, so a crowd collapsing into its marker reads
+    // as motion. The renderer decides, this decides what the decision looks like.
+    const fader = createFader([pin], (opacity) => {
+        pin.opacity = opacity;
+    }, () => pin.opacity ?? 1, track, true);
+    pin.placement = { onPlace: (placed) => fader.place(placed) };
+    return pin;
+}
+/**
+ * Writes an opacity onto a count line's color, as the eight-digit hex colord parses into troika's
+ * `fillOpacity`. A `TextDef` has no `opacity` of its own.
+ * @param opacity - The opacity, `0` to `1`.
+ * @returns The line color: {@link COUNT_COLOR} with that alpha.
+ */
+function countColor(opacity) {
+    const byte = Math.round(Math.min(Math.max(opacity, 0), 1) * 255).toString(16);
+    return `${COUNT_COLOR}${byte.padStart(2, '0')}`;
+}
+/**
+ * Builds one pooled cluster marker, hidden: a teardrop carrying an empty counter circle, and the
+ * count that stands in that circle.
+ *
+ * Two defs rather than one, because baking the count into the canvas makes a different image source
+ * per count and the renderer repacks its atlas when the *set* of images changes.
+ *
+ * Neither carries `placement`. The marker is the renderer's cluster drawn back, so it must never
+ * re-enter the pass as its own input, and it lives in layers that declare no `clustering`. Each
+ * half sizes itself through its own `onScale`; {@link writeUnit} moves it.
+ * @param track - Tracks the unit's fade animator, so the owner can stop it.
+ * @returns The unit.
+ */
+function createUnit(track) {
+    const bounds = new Rect({ x: 0, y: 0 }, { x: CLUSTER_WIDTH_PX, y: CLUSTER_HEIGHT_PX }, 0, 0);
+    const image = {
+        ...createImageDef(getClusterCanvas(), bounds, { hidden: true, origin: PIN_ORIGIN }),
+        screenSpace: true,
+        opacity: 0,
+    };
+    image.onScale = ({ pixelSize }) => rescalePin(image, CLUSTER_WIDTH_PX, PIN_ASPECT, pixelSize);
+    const count = createCount(image);
+    // One animator drives both halves from the same eased value.
+    const fader = createFader([image, count], (opacity) => {
+        image.opacity = opacity;
+        count.lines[0].color = countColor(opacity);
+    }, () => image.opacity ?? 1, track, false);
+    return { image, count, fader };
+}
+/**
+ * Builds the count that stands in a cluster marker's counter circle.
+ *
+ * A screen-space text anchors its whole block at `bounds.center` and has no `origin`,
+ * so the count shares the image's center and elevation exactly. Offsetting it in plan units would
+ * rotate with the plan's roll and foreshorten under tilt, detaching the number from the circle. The
+ * offset lives inside the billboarded quad instead: the bounds carry the marker's pixel extent and
+ * a height that puts the `top`-aligned line's top edge `COUNT_BLOCK_HALF_EM` em above the circle's
+ * center, which lands the glyphs on the circle at every camera. The renderer scales that offset by
+ * depth, as it does the image, so the two stay together under perspective.
+ * @param image - The marker's teardrop, whose anchor the count shares.
+ * @returns The count, hidden and invisible like its teardrop.
+ */
+function createCount(image) {
+    const count = {
+        lines: [
+            {
+                // A placeholder until the first cluster writes its own: the least any cluster stands for.
+                text: clusterCountText(2),
+                color: countColor(0),
+                fontUrl: DEFAULT_FONT_URL,
+                fontSize: 0,
+            },
+        ],
+        bounds: new Rect({ x: image.bounds.center.x, y: image.bounds.center.y }, { x: 0, y: 0 }, 0, image.bounds.elevation),
+        padding: [0, 0],
+        // `top`, not `center`: a centered single line sits on `bounds.center` and cannot be offset.
+        alignment: { horizontal: 'center', vertical: 'top', text: 'center' },
+        screenSpace: true,
+        hidden: true,
+    };
+    count.onScale = ({ pixelSize }) => {
+        const fontSize = clusterCountFontPx(COUNT_CIRCLE.r) * pixelSize;
+        const width = CLUSTER_WIDTH_PX * pixelSize;
+        // The sprite is drawn CLUSTER_HEIGHT_PX tall whatever its backing store holds, so the circle
+        // sits that much less its own center above the anchor.
+        const above = CLUSTER_HEIGHT_PX - COUNT_CIRCLE.cy;
+        const height = 2 * (above * pixelSize + COUNT_BLOCK_HALF_EM * fontSize);
+        const { bounds } = count;
+        const [line] = count.lines;
+        if (line.fontSize === fontSize && bounds.size.x === width && bounds.size.y === height) {
+            return undefined;
+        }
+        line.fontSize = fontSize;
+        bounds.set(image.bounds.center.x, image.bounds.center.y, width, height, bounds.rotation, image.bounds.elevation);
+        return [count];
+    };
+    return count;
+}
+/**
+ * Pairs each cluster with the pooled unit that draws it.
+ *
+ * A unit already drawn, or still fading, keeps the nearest cluster within `radius` of its anchor,
+ * closest pairs first, so a cluster that moved keeps its marker. Every other cluster takes a free
+ * unit, the least visible first: a hidden one when there is one, so a marker fading out where its
+ * cluster left is reused only when the pool has nothing else. When it is, that marker jumps to its
+ * new cluster while still partly visible and turns its fade around there: the pool is exhausted
+ * only when nearly every pin stands in a pair, and a jump then is cheaper than growing the pool.
+ *
+ * The pool always has a unit for every cluster the pass can make. A report past it is one the pass
+ * cannot make, and the pool does not grow for it: its clusters past the pool's length go undrawn.
+ * @param pool - The pooled units.
+ * @param clusters - The renderer's full current set.
+ * @param radius - How far, in plan units, a cluster may move and keep its unit.
+ * @returns The unit for each cluster, by the cluster's index.
+ */
+function assign(pool, clusters, radius) {
+    const count = Math.min(clusters.length, pool.length);
+    const owners = [];
+    const taken = new Set();
+    const pairs = [];
+    pool.forEach(({ image }, unit) => {
+        if (image.hidden)
+            return;
+        for (let cluster = 0; cluster < count; cluster++) {
+            const { x, y } = clusters[cluster];
+            const distance = Math.hypot(x - image.bounds.center.x, y - image.bounds.center.y);
+            if (distance <= radius)
+                pairs.push({ distance, cluster, unit });
+        }
+    });
+    // Every key spelled out: `sort` is not stable on the oldest WebView target.
+    pairs.sort((p, q) => p.distance - q.distance || p.cluster - q.cluster || p.unit - q.unit);
+    for (const { cluster, unit } of pairs) {
+        if (owners[cluster] || taken.has(pool[unit]))
+            continue;
+        owners[cluster] = pool[unit];
+        taken.add(pool[unit]);
+    }
+    const free = pool
+        .map((unit, index) => ({ unit, index }))
+        .filter(({ unit }) => !taken.has(unit))
+        .sort((p, q) => visibility(p.unit) - visibility(q.unit) || p.index - q.index);
+    let next = 0;
+    for (let cluster = 0; cluster < count; cluster++) {
+        if (!owners[cluster])
+            owners[cluster] = free[next++].unit;
+    }
+    return owners;
+}
+/**
+ * How visible a pooled unit is, for {@link assign} to reuse the least visible first.
+ * @param unit - The unit.
+ * @returns `0` for a hidden unit, otherwise its opacity.
+ */
+function visibility({ image }) {
+    return image.hidden ? 0 : (image.opacity ?? 1);
+}
+/**
+ * Moves a pooled unit onto a cluster and writes its count, keeping each half's size.
+ *
+ * Everything comes from the cluster verbatim. The count in particular is `unitCount` and nothing
+ * else: a `Cluster` carries no member list, and the renderer already counted its units with a
+ * `placement.group` as one thing. Every pin is a lone def, so here it is how many pins stand
+ * behind the marker.
+ * @param unit - The unit to write.
+ * @param cluster - The cluster it now stands for.
+ * @returns Whether anything changed.
+ */
+function writeUnit({ image, count }, cluster) {
+    const { x, y, elevation, unitCount } = cluster;
+    const text = clusterCountText(unitCount);
+    const [line] = count.lines;
+    const at = image.bounds;
+    if (at.center.x === x && at.center.y === y && at.elevation === elevation && line.text === text) {
+        return false;
+    }
+    at.set(x, y, at.size.x, at.size.y, at.rotation, elevation);
+    const { bounds } = count;
+    bounds.set(x, y, bounds.size.x, bounds.size.y, bounds.rotation, elevation);
+    line.text = text;
+    return true;
+}
+/** The layer `config-all` pre-creates for pins, and the one whose clustering this module declares. */
+export const PIN_LAYER_NAME = 'poiFilterPins';
+/** The layer `config-all` pre-creates for cluster teardrops, drawn directly above the pins. */
+export const PIN_CLUSTER_LAYER_NAME = 'poiFilterPinClusters';
+/** The layer `config-all` pre-creates for cluster counts, drawn directly above the teardrops. */
+export const PIN_COUNT_LAYER_NAME = 'poiFilterPinCounts';
+/**
+ * How long a pin takes to fade in or out, in milliseconds. MapLibre's `fadeDuration` default, which
+ * the placement spec's research cites: long enough that a crowd thinning out reads as motion, short
+ * enough that a zoom does not leave half-faded pins behind the camera.
+ */
+export const PIN_FADE_MS = 300;
+/** The pin's on-screen width in CSS pixels, which {@link rescalePin} holds it to at every zoom. */
+const PIN_WIDTH_PX = 32;
+/** Bottom-center: the drop's tip is what marks the booth, not its middle. */
+const PIN_ORIGIN = [0.5, 1];
+/** A cluster marker's on-screen width in CSS pixels, wider than a lone pin so a count is legible. */
+const CLUSTER_WIDTH_PX = 44;
+// No minimum cluster size. A cluster *is* a collision, so two is the placement pass's own answer
+// and not a parameter: the renderer never reports a cluster of fewer than two units.
+/**
+ * How far a cluster's anchor may move between two reports, in CSS pixels, and keep its marker: a
+ * marker's own width. A cluster that grows or splits shifts its mean by a fraction of the crowd it
+ * covers, well inside this, while one that left and another that appeared elsewhere are farther
+ * apart and fade rather than slide.
+ */
+const MOVE_RADIUS_PX = CLUSTER_WIDTH_PX;
+/** The count glyphs' color: the black that already edges the pin. */
+const COUNT_COLOR = '#000000';
+/** The counter circle's place inside the marker, in CSS pixels. Computed once. */
+const COUNT_CIRCLE = clusterCounterCircle(CLUSTER_WIDTH_PX);
+/**
+ * The marker's height in CSS pixels, from the teardrop's aspect: `44 * 93 / 81 = 50.5185`.
+ *
+ * The height the sprite is drawn at. Anchored at its bottom edge, so the circle sits
+ * `CLUSTER_HEIGHT_PX - cy` above the anchor.
+ */
+const CLUSTER_HEIGHT_PX = CLUSTER_WIDTH_PX * PIN_ASPECT;
+/**
+ * The pin image. Module scope rather than per `configPins` call: every pin on the plan is the same
+ * picture, and a scene rebuild draws that same picture again.
+ */
+let pinCanvas;
+/** The cluster marker image, cached by {@link getClusterCanvas}. */
+let clusterCanvas;

package/dist/esm/components/Map/drawing/config/label-inset.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Geometry shared by the booth label drawers for holding label text clear of
+ * the booth border.
+ */
+/** Margin held around a booth label, as a share of each rect dimension. */
+export declare const LABEL_MARGIN_FRACTION = 0.05;
+/**
+ * How far a label box is pulled in from the booth footprint to clear the drawn
+ * border — half the stroke, since the border straddles the footprint edge.
+ *
+ * Capped at the margin and floored at zero: a plan can publish a
+ * `boothBorderWidth` far larger than the strokes it actually draws, and an
+ * uncapped inset then deflates the label box to nothing, so no font size fits
+ * and the label never renders at all. NaN and negative widths reach here too —
+ * an unparsable `stroke-width`, or the empty-booths `0 / 0` in
+ * `boothStore.borderWidth` — and fall out to zero rather than poisoning the box.
+ *
+ * @param borderWidth - stroke width actually painted for the booth
+ * @param size - the booth footprint
+ * @returns a non-negative inset, at most `LABEL_MARGIN_FRACTION` of the short side
+ */
+export declare function getLabelBorderInset(borderWidth: number, size: {
+    width: number;
+    height: number;
+}): number;
+//# sourceMappingURL=label-inset.d.ts.map

package/dist/esm/components/Map/drawing/config/label-inset.js

@@ -0,0 +1,26 @@
+/**
+ * Geometry shared by the booth label drawers for holding label text clear of
+ * the booth border.
+ */
+/** Margin held around a booth label, as a share of each rect dimension. */
+export const LABEL_MARGIN_FRACTION = 0.05;
+/**
+ * How far a label box is pulled in from the booth footprint to clear the drawn
+ * border — half the stroke, since the border straddles the footprint edge.
+ *
+ * Capped at the margin and floored at zero: a plan can publish a
+ * `boothBorderWidth` far larger than the strokes it actually draws, and an
+ * uncapped inset then deflates the label box to nothing, so no font size fits
+ * and the label never renders at all. NaN and negative widths reach here too —
+ * an unparsable `stroke-width`, or the empty-booths `0 / 0` in
+ * `boothStore.borderWidth` — and fall out to zero rather than poisoning the box.
+ *
+ * @param borderWidth - stroke width actually painted for the booth
+ * @param size - the booth footprint
+ * @returns a non-negative inset, at most `LABEL_MARGIN_FRACTION` of the short side
+ */
+export function getLabelBorderInset(borderWidth, size) {
+    const maxInset = LABEL_MARGIN_FRACTION * Math.min(size.width, size.height);
+    // `>` is false for NaN, so a NaN border width or footprint falls out to zero
+    return borderWidth > 0 && maxInset > 0 ? Math.min(borderWidth / 2, maxInset) : 0;
+}

package/dist/esm/components/Map/drawing/config/layer-images.d.ts

@@ -0,0 +1,24 @@
+import { type ImageDef, type LayerDef } from '@expofp/renderer';
+/**
+ * Loads one configured layer's designer images and hands back where they belong.
+ *
+ * Resolves to `undefined` when there is nothing to place any more — an image load still in flight
+ * when the plan was destroyed, whose result no longer has a plan to be drawn into.
+ */
+export type LayerImagesHandler = () => Promise<{
+    layer: LayerDef;
+    children: ImageDef[];
+} | undefined>;
+/**
+ * Registers a layer's image loader under its layer name.
+ * @param name - The image layer's name.
+ * @param handler - Loads the images.
+ * @returns A disposer removing this registration, unless a newer one replaced it.
+ */
+export declare function registerLayerImages(name: string, handler: LayerImagesHandler): () => void;
+/**
+ * Starts every registered loader.
+ * @returns One promise per registered layer.
+ */
+export declare function invokeLayerImages(): ReturnType<LayerImagesHandler>[];
+//# sourceMappingURL=layer-images.d.ts.map

package/dist/esm/components/Map/drawing/config/layer-images.js

@@ -0,0 +1,32 @@
+import { eventScopedCache } from '../../../../tools/event-scoped-cache.js';
+/**
+ * The layer-image loaders, registered as layers configure and drained once the plan is up — the
+ * standalone registry that replaced `RendererService.layerImagesRegistry`, with the same contract:
+ * name-keyed, so a reconfigured layer's registration replaces its predecessor's rather than
+ * doubling it, and never cleared between scenes for the same reason.
+ *
+ * Per event, because "between scenes" stops at the plan: a layer name the next event does not use
+ * would otherwise keep the previous event's loader, and `invokeLayerImages()` would run it against
+ * a plan it was never built for (ADR-0011).
+ */
+const handlers = eventScopedCache();
+/**
+ * Registers a layer's image loader under its layer name.
+ * @param name - The image layer's name.
+ * @param handler - Loads the images.
+ * @returns A disposer removing this registration, unless a newer one replaced it.
+ */
+export function registerLayerImages(name, handler) {
+    handlers().set(name, handler);
+    return () => {
+        if (handlers().get(name) === handler)
+            handlers().delete(name);
+    };
+}
+/**
+ * Starts every registered loader.
+ * @returns One promise per registered layer.
+ */
+export function invokeLayerImages() {
+    return [...handlers().values()].map((handler) => handler());
+}

package/dist/esm/components/Map/drawing/config/layer-models.d.ts

@@ -0,0 +1,31 @@
+import { type ModelDef } from '@expofp/renderer';
+/**
+ * The attribute that turns a designer `<image>` into a 3D model: the URL of a
+ * .glb/.gltf, authored relative to the drawing. `@expofp/config` rebases it
+ * with every other asset URL the drawing carries when the payload loads, so
+ * what arrives here is already resolved — absolute for a live load,
+ * page-relative or rooted for an offline copy.
+ */
+export declare const MODEL_3D_ATTRIBUTE = "data-model-3d";
+/**
+ * The rotation an element's `transform` carries, in radians.
+ *
+ * Only the first transform in the list is read, which is what the designer emits. It inherits the
+ * assumption `loadLayerImages` has always made: an SVG `rotate(a, cx, cy)` is treated as pivoting
+ * about the element's own center, because that is what a geometry `Rect` does. A transform with a
+ * different pivot is placed wrongly — pre-existing behavior, recorded rather than fixed here.
+ * @param element - The graphic to read.
+ * @returns The rotation in radians, positive = clockwise.
+ */
+export declare function svgTransformRotation(element: SVGGraphicsElement): number;
+/**
+ * Builds a {@link ModelDef} from an `<image>` carrying {@link MODEL_3D_ATTRIBUTE}.
+ *
+ * Bounds come from the element's own x/y/width/height — `Box.fromSvg` reads an `<image>` as readily
+ * as a `<rect>` — combined with its transform's rotation. The URL is taken verbatim: the drawing
+ * reaches the runtime with its asset URLs already resolved.
+ * @param element - The placeholder image.
+ * @returns The model def.
+ */
+export declare function createModelDefFromElement(element: SVGImageElement): ModelDef;
+//# sourceMappingURL=layer-models.d.ts.map