@expofp/floorplan 0.0.0-experimental.2d6c681

package/dist/esm/components/Map/drawing/config/config-booth-labels.d.ts

@@ -0,0 +1,63 @@
+import { Rect } from '@expofp/geometry';
+import { type ImageDef, type TextAlignment, type TextDef } from '@expofp/renderer';
+import { type FontSizeFactor } from '../../../../engine/defs';
+import { type CustomFonts } from '../../../../engine/fonts';
+import { type Booth } from '../../../../store/BoothStore';
+import { type Exhibitor } from '../../../../store/ExhibitorStore';
+import { BoothDrawerBaseWithoutPainter } from './BoothDrawerBase';
+interface Prefix {
+    fontSize: number;
+    name: string;
+    short?: boolean;
+}
+export default function configBoothLabels(booth: Booth): BoothLabelDrawer | undefined;
+export declare function getMinZoomFactorForDot(scaleFactors: number[]): number;
+export declare const isDirectionsMode: () => boolean;
+export declare function getFontUrlByWeight(weight: number, customFonts?: CustomFonts[], style?: string): string;
+interface LabelFontWeights {
+    main: number;
+    details: number;
+}
+export declare function getBoothLabelWeights(): LabelFontWeights;
+export declare function getExhibitorLabelWeights(): LabelFontWeights;
+export declare function getBadgeFontWeight(): number;
+export declare class BoothLabelDrawer extends BoothDrawerBaseWithoutPainter {
+    protected canvasRect: Rect;
+    protected paddingScaled: [number, number];
+    protected padding: number;
+    protected minZoomDotVisible: number;
+    protected maxZoomDotVisible: number;
+    protected exh: Exhibitor[];
+    protected shapeLabel: TextDef;
+    protected shapeDot: ImageDef;
+    protected fontSizes: [FontSizeFactor[], FontSizeFactor[]];
+    protected lines: [string[], string[]];
+    protected topLeftAlignment: TextAlignment;
+    protected centerAlignment: TextAlignment;
+    protected prefixes: Prefix[];
+    protected fontUrls: [string, string];
+    constructor(booth: Booth);
+    getShape(): (ImageDef | TextDef)[];
+    /**
+     * Lays this booth's label out for a new pixel size: the font-size step, the alignment that follows
+     * it, and the padding that scales with it.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns The label when it moved, empty when nothing changed so the renderer skips the write.
+     */
+    layOutLabel(pixelSize: number): TextDef[];
+    /**
+     * Lays this booth's dot out for a new pixel size: it is drawn only in the band between the zoom
+     * where the label stops fitting and the zoom where the dot itself would overflow the booth.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns The dot when it moved, empty when nothing changed so the renderer skips the write.
+     */
+    layOutDot(pixelSize: number): ImageDef[];
+    getShapeDot(): void;
+    private createLines;
+    private calculateFontSizeFactors;
+    private calcArea;
+    private optimizationLevel;
+    private measureText;
+}
+export {};
+//# sourceMappingURL=config-booth-labels.d.ts.map

package/dist/esm/components/Map/drawing/config/config-booth-labels.js

@@ -0,0 +1,380 @@
+import { Rect } from '@expofp/geometry';
+import { update } from '@expofp/renderer';
+import { FONT_WEIGHT_PRIMARY_BOOTH, FONT_WEIGHT_PRIMARY_EXHIBITOR, FONT_WEIGHT_SECONDARY_BOOTH, FONT_WEIGHT_SECONDARY_EXHIBITOR, } from '../../../../constants';
+import data from '../../../../data';
+import { createShapeDot, createTextDef, createTextDefLines, SHAPE_DOT_CSS_PX, } from '../../../../engine/defs';
+import { DEFAULT_FONT_LIGHT_URL, DEFAULT_FONT_URL, loadCustomFontsUrls, } from '../../../../engine/fonts';
+import { getQuarterTurns, getRollValue, rotateRectByQuarters, rotateTextDefByQuarters, updateLinesScale, } from '../../../../engine/update-def';
+import { boothStore, layersStore, uiState } from '../../../../store';
+import { RegularBooth, SpecialBooth } from '../../../../store/BoothStore';
+import settings from '../../../../tools/settings';
+import { t } from '../../../../utils/i18n';
+import isMobile from '../../../../utils/is-mobile';
+import isWebview from '../../../../utils/is-webview';
+import { planReaction } from '../../../../utils/plan-reactions.js';
+import { isArabicText } from '../../../../utils/rtl';
+import { BoothDrawerBaseWithoutPainter } from './BoothDrawerBase';
+import { getFont } from './canvases';
+import { getLabelBorderInset } from './label-inset.js';
+/** The live event's label color (one expo overrides the configured one). */
+function fillStyle() {
+    if (settings.EXPO === 'tqs2021')
+        return '#000';
+    return settings.boothLabelColor;
+}
+const isMobileDevice = isMobile || isWebview;
+const truncateText = (x) => x.replace(' ', '').substring(0, 4).replace(/[0-9]/g, '3').replace(/[A-Z]/gi, 'A');
+const ctx2d = document.createElement('canvas').getContext('2d');
+export default function configBoothLabels(booth) {
+    if (!(booth instanceof RegularBooth) || booth.noLabels)
+        return;
+    return new BoothLabelDrawer(booth);
+}
+export function getMinZoomFactorForDot(scaleFactors) {
+    if (Array.isArray(scaleFactors) && scaleFactors.length > 0) {
+        return Math.max(...scaleFactors.map((sf) => sf));
+    }
+    return typeof scaleFactors === 'number' ? scaleFactors : -0;
+}
+export const isDirectionsMode = () => {
+    return Boolean(uiState.selectedRoute?.from && uiState.selectedRoute?.to);
+};
+export function getFontUrlByWeight(weight, customFonts = [], style = 'normal') {
+    const fonts = [
+        ...customFonts,
+        { weight: 500, url: DEFAULT_FONT_URL, style: 'normal' },
+        { weight: 300, url: DEFAULT_FONT_LIGHT_URL, style: 'normal' },
+    ];
+    const fontByWeight = fonts.find((f) => +f.weight === weight && f.style === style);
+    return fontByWeight?.url || DEFAULT_FONT_URL;
+}
+function readCssWeight(cssVar, fallback) {
+    return Number(getComputedStyle(document.body).getPropertyValue(cssVar)) || fallback;
+}
+export function getBoothLabelWeights() {
+    return {
+        main: readCssWeight(FONT_WEIGHT_PRIMARY_BOOTH, 500),
+        details: readCssWeight(FONT_WEIGHT_SECONDARY_BOOTH, 300),
+    };
+}
+export function getExhibitorLabelWeights() {
+    return {
+        main: readCssWeight(FONT_WEIGHT_PRIMARY_EXHIBITOR, 500),
+        details: readCssWeight(FONT_WEIGHT_SECONDARY_EXHIBITOR, 300),
+    };
+}
+// Badge text is the booth number — same role as the main line of a booth
+// label. Mirror that weight so the link stays explicit in one place.
+export function getBadgeFontWeight() {
+    return getBoothLabelWeights().main;
+}
+const DETAILS_PREFIX = 'Details';
+export class BoothLabelDrawer extends BoothDrawerBaseWithoutPainter {
+    constructor(booth) {
+        super(booth);
+        this.minZoomDotVisible = 0;
+        this.maxZoomDotVisible = 0;
+        this.exh = [];
+        // Both defs are built further down this constructor for a regular booth and
+        // by BoothLabelSpecialDrawer for a special one — the early return below hides
+        // that from the checker, and Babel's decorator pipeline rejects `!` fields.
+        this.shapeLabel = undefined;
+        this.shapeDot = undefined;
+        this.fontSizes = [[], []];
+        this.lines = [[], []];
+        this.fontUrls = ['', ''];
+        // booth.rect is an unrotated Box; combine it with booth.rotate into a
+        // geometry Rect held as the canvas rect (converted to the renderer only
+        // at the def factories / rotateRectByQuarters).
+        this.canvasRect = new Rect(booth.rect.center, booth.rect.size, booth.rotate, booth.elevation);
+        this.paddingScaled = [4, 4];
+        // same stroke config-booth-border paints, so the text clears the border it
+        // actually has; the subclass inherits this inset rather than recomputing it
+        this.padding = getLabelBorderInset(booth.borderWidth || boothStore.borderWidth, booth.rect.size);
+        this.topLeftAlignment = { horizontal: uiState.rtl ? 'right' : 'left', vertical: 'top' };
+        this.centerAlignment = { horizontal: 'center', vertical: 'center' };
+        this.prefixes = isMobileDevice
+            ? [
+                { fontSize: 7, name: 'XS', short: true },
+                { fontSize: 10, name: 'S', short: true },
+                { fontSize: 16, name: DETAILS_PREFIX, short: false },
+            ]
+            : [
+                { fontSize: 7, name: 'XS', short: true },
+                { fontSize: 10, name: 'S', short: true },
+                { fontSize: 12, name: 'M', short: true },
+                { fontSize: 14, name: 'L', short: true },
+                { fontSize: 18, name: DETAILS_PREFIX, short: false },
+            ];
+        if (booth instanceof SpecialBooth)
+            return;
+        this.exh = data.hideExhibitors
+            ? []
+            : !data.onlyFeaturedExhibitors
+                ? booth.exhibitors
+                : booth.exhibitors.filter((e) => e.featured);
+        if (isMobileDevice && this.optimizationLevel() >= 3) {
+            this.prefixes = this.prefixes.filter((p) => p.name !== 'S');
+        }
+        this.createLines();
+        this.calculateFontSizeFactors();
+        this.shapeLabel = createTextDef(createTextDefLines(this.lines, this.booth.labelColor || fillStyle(), 0, this.fontUrls), new Rect(this.booth.rect.center, this.booth.rect.size, this.booth.rotate, this.booth.elevation), [...this.paddingScaled], { horizontal: 'left', vertical: 'top' });
+        // Wrapped in an arrow because handlers are called with no receiver — a bare method reference
+        // would lose `this`. See `LayoutHandlers.onScale` for what such a closure may capture.
+        this.shapeLabel.onScale = ({ pixelSize }) => this.layOutLabel(pixelSize);
+        this.getShapeDot();
+        // A boolean, so the reaction runs only for the booths whose own `skipDim` flipped. Directions
+        // un-dims every label at once, on the chunk's label layer (`configBooths`).
+        planReaction(() => layersStore.layersLoaded && this.booth.skipDim === true, (skipDim) => {
+            // `dim` is a number in [0, 1], `undefined` inheriting from the layer; `0` is what un-dims
+            // a def inside a dimmed one, and what the badge and bookmark drawers already write.
+            this.shapeLabel.dim = skipDim ? 0 : undefined;
+            this.shapeDot.dim = skipDim ? 0 : undefined;
+            update(this.shapeLabel, this.shapeDot);
+        });
+        planReaction(() => uiState.mapSettings, ({ roll }) => {
+            if (!getRollValue(roll ?? 0))
+                return;
+            // Declared on the def, so the renderer runs it as the plan turns; assigning again on a
+            // later settings change is idempotent, as re-registering under one name used to be.
+            this.shapeLabel.onRoll = ({ roll: angle, pixelSize }) => {
+                const turns = getQuarterTurns(angle, this.shapeLabel.bounds.rotation);
+                if (turns === 0)
+                    return undefined;
+                const { size } = this.canvasRect;
+                this.shapeLabel = rotateTextDefByQuarters(this.shapeLabel, turns);
+                if (!this.shapeLabel.hidden && !this.exh.length && size.x !== size.y) {
+                    this.canvasRect = rotateRectByQuarters(this.canvasRect, turns);
+                    this.calculateFontSizeFactors();
+                    this.layOutLabel(pixelSize);
+                    this.layOutDot(pixelSize);
+                }
+                return [this.shapeLabel, this.shapeDot];
+            };
+        }, { fireImmediately: true });
+    }
+    getShape() {
+        return [this.shapeLabel, this.shapeDot];
+    }
+    /**
+     * Lays this booth's label out for a new pixel size: the font-size step, the alignment that follows
+     * it, and the padding that scales with it.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns The label when it moved, empty when nothing changed so the renderer skips the write.
+     */
+    layOutLabel(pixelSize) {
+        const detailsLines = this.lines[1] ?? [];
+        const detailFontSizes = this.fontSizes[1] ?? [];
+        if (settings.EXPO !== 'wineparis2026') {
+            const alignment = !this.exh.length
+                ? detailsLines.length
+                    ? pixelSize < detailFontSizes[detailFontSizes.length - 1].scaleFactor
+                        ? this.topLeftAlignment
+                        : this.centerAlignment
+                    : this.topLeftAlignment
+                : this.topLeftAlignment;
+            this.shapeLabel.alignment = alignment;
+        }
+        const haveLinesChanged = updateLinesScale(this.shapeLabel.lines, pixelSize, this.fontSizes);
+        if (!haveLinesChanged)
+            return [];
+        this.shapeLabel.padding[0] = this.paddingScaled[0] * pixelSize + this.padding;
+        this.shapeLabel.padding[1] = this.paddingScaled[1] * pixelSize + this.padding;
+        return [this.shapeLabel];
+    }
+    /**
+     * Lays this booth's dot out for a new pixel size: it is drawn only in the band between the zoom
+     * where the label stops fitting and the zoom where the dot itself would overflow the booth.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns The dot when it moved, empty when nothing changed so the renderer skips the write.
+     */
+    layOutDot(pixelSize) {
+        const isVisible = pixelSize >= this.minZoomDotVisible && pixelSize <= this.maxZoomDotVisible;
+        if (!isVisible && this.shapeDot.hidden)
+            return []; // already hidden, nothing to write
+        const bounds = this.shapeDot.bounds;
+        // Resize the dot to its CSS size × pixel size about its center. The factor is target-over-
+        // current, so repeated layouts do not drift.
+        bounds.scale({
+            x: (SHAPE_DOT_CSS_PX * pixelSize) / bounds.size.x,
+            y: (SHAPE_DOT_CSS_PX * pixelSize) / bounds.size.y,
+        }, bounds.center, bounds);
+        this.shapeDot.hidden = !isVisible;
+        return [this.shapeDot];
+    }
+    getShapeDot() {
+        this.shapeDot = createShapeDot(this.canvasRect, this.booth.labelColor || fillStyle());
+        this.shapeDot.hidden = true;
+        // Like the label's closure; `this.layOutDot` dispatches to the special drawer's override when
+        // this drawer is one.
+        this.shapeDot.onScale = ({ pixelSize }) => this.layOutDot(pixelSize);
+        // The pixel size past which the dot, drawn at its CSS size, would overflow the booth.
+        this.maxZoomDotVisible = Math.min(this.canvasRect.size.x / SHAPE_DOT_CSS_PX, this.canvasRect.size.y / SHAPE_DOT_CSS_PX);
+    }
+    createLines() {
+        const booth = this.booth;
+        const mainLines = [];
+        const detailsLines = [];
+        const linesLimit = isMobileDevice && this.optimizationLevel() >= 3 ? 1 : 3;
+        if (this.exh.length) {
+            const primaryExhibitors = booth.exhibitors.filter((e) => e.order === 0);
+            const exhibitorsWithOrder = booth.exhibitors.filter((e) => e.order);
+            if (primaryExhibitors.length > 0) {
+                mainLines.push(...primaryExhibitors.map((e) => e.name));
+            }
+            else if (data.onlyFeaturedExhibitors) {
+                mainLines.push(...booth.exhibitors.filter((e) => e.featured).map((e) => e.name));
+            }
+            else if (exhibitorsWithOrder.length > 0) {
+                mainLines.push(...exhibitorsWithOrder.map((e) => e.name));
+                const exhibitorsWithoutOrder = booth.exhibitors.filter((e) => e.order === undefined);
+                if (exhibitorsWithoutOrder.length > 0) {
+                    mainLines.push(t('and {{moreCount}} more', { moreCount: exhibitorsWithoutOrder.length }));
+                }
+            }
+            else {
+                if (booth.exhibitors.length > linesLimit) {
+                    mainLines.push(`${booth.exhibitors.length} ${data.exhibitorTermPlural}`);
+                }
+                else {
+                    mainLines.push(...booth.exhibitors.map((e) => e.name));
+                }
+            }
+            detailsLines.push(booth.title || booth.name);
+        }
+        else {
+            const onlyId = !!booth.exhibitors.length;
+            mainLines.push(booth.title || booth.name);
+            if (booth.onHold) {
+                detailsLines.push(t('On Hold'));
+            }
+            else if (booth.reserved) {
+                detailsLines.push(t('Reserved'));
+            }
+            else if (!onlyId) {
+                detailsLines.push(...booth.exhibitors.map((e) => e.name).sort((a, b) => (a > b ? 1 : -1)));
+            }
+            if (booth.size)
+                detailsLines.push(booth.size.indexOf('/') > -1
+                    ? booth.size.substring(0, booth.size.indexOf('/')).trim()
+                    : booth.size);
+            if (booth.price && booth.price !== '0' && !uiState.previewMode)
+                detailsLines.push(booth.price);
+        }
+        if (uiState.rtl) {
+            mainLines.forEach((text, i) => {
+                // Adding an invisible character to display punctuation marks correctly in the right-to-left version
+                if (text.endsWith('.') || text.endsWith('!') || text.endsWith('?')) {
+                    mainLines[i] = mainLines[i] + '\u200F';
+                }
+                // Adding a 2-space suffix to fix rendering of Arabic text
+                if (isArabicText(text)) {
+                    mainLines[i] = mainLines[i] + '\u0020\u0020';
+                }
+            });
+        }
+        this.lines = [mainLines, detailsLines];
+    }
+    // The table is in CSS pixels: both columns. A `scaleFactor` is the pixel size at which text of
+    // that size exactly fills the booth, measured against a canvas laid out at `fontSize`, so the
+    // `value` beside it has to be that same measured size — `updateLinesScale` multiplies it by the
+    // pixel size to reach the plan units the renderer draws in.
+    calculateFontSizeFactors() {
+        const mainLines = this.lines[0];
+        // only read on the exhibitor branch below, which assigns it first
+        let detailsLines;
+        const bounds = this.canvasRect;
+        const mainFontSizes = [];
+        const detailsFontSizes = [];
+        const prefixes = this.prefixes.slice(0, this.exh.length ? this.prefixes.length : this.prefixes.length - 1);
+        const { main: weightMain, details: weightDetails } = this.exh.length
+            ? getExhibitorLabelWeights()
+            : getBoothLabelWeights();
+        for (const { fontSize, short } of prefixes) {
+            const mainFontSize = fontSize;
+            const detailFontSize = 0.9 * fontSize;
+            const mainFont = getFont(mainFontSize, weightMain);
+            const detailFont = getFont(detailFontSize, weightDetails);
+            const onlyMain = data.hideExhibitorBoothNumber || short;
+            let w;
+            let h;
+            let width;
+            let height;
+            if (this.exh.length) {
+                detailsLines = short ? [] : this.lines[1];
+                width = Math.max(...mainLines.map((line) => this.measureText(line, mainFont).width), ...detailsLines.map((line) => this.measureText(line, detailFont).width));
+                w = Math.max(...mainLines.map((line) => {
+                    if (this.exh.length) {
+                        return this.measureText(truncateText(line), mainFont).width;
+                    }
+                    else {
+                        return this.measureText(truncateText(line), mainFont).width + 3 + 3;
+                    }
+                }), ...detailsLines.map((line) => this.measureText(truncateText(line), detailFont).width));
+                height =
+                    mainFontSize * mainLines.length +
+                        detailFontSize * detailsLines.length +
+                        (mainLines.length + detailsLines.length) +
+                        3;
+                h = onlyMain ? height / mainLines.length : null;
+            }
+            else {
+                const text = mainLines[0].replace(/[0-9]/g, '3').replace(/[A-Z]/g, 'A');
+                const vPad = 4;
+                width = this.measureText(text, mainFont).width + 3 + 3;
+                height = mainFontSize + vPad;
+            }
+            const xFactor = bounds.size.x / (w || width);
+            const yFactor = bounds.size.y / (h || height);
+            const scaleFactor = Math.min(xFactor, yFactor);
+            // `lines` carries the fitter's line breaks for special labels; this path
+            // picks a font size by factor alone, so it stays empty.
+            mainFontSizes.push({ scaleFactor, value: mainFontSize, lines: [] });
+            if (!onlyMain)
+                detailsFontSizes.push({ scaleFactor, value: detailFontSize, lines: [] });
+        }
+        // Details without exhibitors are show at:
+        if (!this.exh.length) {
+            const lastFactor = mainFontSizes[mainFontSizes.length - 1];
+            const prefixDetails = this.prefixes.find((p) => p.name === DETAILS_PREFIX);
+            // the Details prefix is always one of the two sets built in the constructor
+            if (prefixDetails) {
+                mainFontSizes.push({
+                    scaleFactor: lastFactor.scaleFactor / 1.8,
+                    value: prefixDetails.fontSize,
+                    lines: [],
+                });
+                detailsFontSizes.push({
+                    scaleFactor: lastFactor.scaleFactor / 1.8,
+                    value: prefixDetails.fontSize * (!isMobileDevice ? 0.9 : 1),
+                    lines: [],
+                });
+            }
+        }
+        // Read here rather than off the renderer service, whose copy is only filled when an imperative
+        // renderer is created or attached — under the new `Map` neither happens, and every custom font the plan
+        // declares would be silently replaced by the default.
+        const customFonts = loadCustomFontsUrls();
+        this.fontUrls = [
+            getFontUrlByWeight(weightMain, customFonts),
+            getFontUrlByWeight(weightDetails, customFonts),
+        ];
+        this.minZoomDotVisible = getMinZoomFactorForDot(mainFontSizes.map((f) => f.scaleFactor));
+        this.fontSizes = [mainFontSizes, detailsFontSizes];
+    }
+    calcArea(width, height) {
+        const magicNumber = 1000; // Just to reduce the number.
+        return Math.floor((Math.max(0, width) * Math.max(0, height)) / magicNumber);
+    }
+    optimizationLevel() {
+        const limit = 5000;
+        const maxLevel = 3;
+        return Math.min(data.viewOptimizationLevel
+            ? data.viewOptimizationLevel
+            : Math.floor(this.calcArea(this.canvasRect.size.x, this.canvasRect.size.y) / limit), maxLevel);
+    }
+    measureText(text, font) {
+        ctx2d.font = font;
+        return ctx2d.measureText(text);
+    }
+}

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

@@ -0,0 +1,5 @@
+import { type LayerDef } from '@expofp/renderer';
+import type { Booth } from '../../../../store/BoothStore';
+export declare const BOOTHS_CHUNK_SIZE = 350;
+export default function configBooths(layerID: string, booths: Booth[]): LayerDef;
+//# sourceMappingURL=config-booths.d.ts.map

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

@@ -0,0 +1,152 @@
+import { Rect } from '@expofp/geometry';
+import { update, } from '@expofp/renderer';
+import debug from 'debug';
+import { SEPARATOR } from '../../../../constants';
+import { createImageDef } from '../../../../engine/defs';
+import { flipImageDef, isInnerInsideOuter, rotateImageDef, } from '../../../../engine/utils/rotation';
+import { planGeneration } from '../../../../plan-lifecycle.js';
+import { boothStore, layersStore, uiState } from '../../../../store';
+import settings from '../../../../tools/settings';
+import { loadBlobsInBatchesById } from '../../../../utils/loadImagesInBatches';
+import { planReaction } from '../../../../utils/plan-reactions.js';
+import { clearHoveredBooth, hoverBooth, rememberBoothShapes, selectBooth } from '../../pointer';
+import { createLogoPreparer } from './booth-logos';
+import configBoothBg from './config-booth-bg';
+import configBoothBookmark from './config-booth-bookmark';
+import configBoothBorder from './config-booth-border';
+import configBoothLabels, { isDirectionsMode } from './config-booth-labels';
+import configBoothLabelsSpecial from './config-booth-labels-special';
+import { registerLayerImages } from './layer-images';
+import { createBoothImg, getImageLayerName, mapBoothsLogos } from './loadBoothsImages';
+const log = debug('efp:booth-logos');
+export const BOOTHS_CHUNK_SIZE = 350;
+export default function configBooths(layerID, booths) {
+    const buildBoothsLayerDef = (booths) => {
+        const name = layerID;
+        const bgShapes = [];
+        const boothLabels = [];
+        const specialBoothLabels = [];
+        const boothsBorders = [];
+        const boothsBookmark = [];
+        const imageLayerName = getImageLayerName(name);
+        const imageLayer = { name: imageLayerName, children: [] };
+        for (const booth of booths) {
+            const bg = configBoothBg(booth)?.getShape();
+            if (bg) {
+                bgShapes.push(...bg);
+                // What a pointer hit resolves through: the renderer reports the def, and this is where the
+                // def and its booth are both in hand.
+                rememberBoothShapes(booth, bg);
+            }
+            const labels = configBoothLabels(booth)?.getShape();
+            if (labels)
+                boothLabels.push(...labels);
+            const special = configBoothLabelsSpecial(booth)?.getShape();
+            if (special)
+                specialBoothLabels.push(...special);
+            if (!settings.borderless) {
+                const border = configBoothBorder(booth)?.getShape();
+                if (border)
+                    boothsBorders.push(border);
+            }
+            const bookmark = configBoothBookmark(booth)?.getShape();
+            if (bookmark)
+                boothsBookmark.push(bookmark);
+        }
+        const labels = boothLabels.filter((e) => e.lines);
+        const specialLabels = specialBoothLabels.filter((e) => e.lines);
+        const dots = boothLabels.filter((e) => e.source);
+        const specialDots = specialBoothLabels.filter((e) => e.source);
+        if (!uiState.hideLogoInBooth) {
+            const boothsLogoUrls = mapBoothsLogos(booths);
+            const plan = planGeneration();
+            registerLayerImages(imageLayerName, async () => {
+                const loaded = await loadBlobsInBatchesById(boothsLogoUrls, BOOTHS_CHUNK_SIZE);
+                // The logos outlived the plan that asked for them: the booths they belong to went with it,
+                // so reading the barrel here would land either in the dead window or — mid-swap — in the
+                // next event's graph, drawing this event's logos onto its plan (ADR-0011).
+                if (planGeneration() !== plan)
+                    return undefined;
+                const children = [];
+                // One preparer for the whole batch: it shares a converted Blob and a measured ratio
+                // between the booths that share a logo.
+                const prepareLogo = createLogoPreparer();
+                // Every logo starts before any of them is awaited, so the browser's decoder overlaps
+                // the work. Nothing here limits how many decodes run at once, and nothing has to: a
+                // logo is decoded only when the event data states no ratio for it, and the decoded
+                // bitmap is closed the moment its size has been read.
+                const prepared = await Promise.all([...loaded].map(async ([boothId, blob]) => {
+                    const booth = boothStore.boothById.get(boothId);
+                    return [boothId, booth, booth ? await prepareLogo(booth, blob) : null];
+                }));
+                // The same question again: the decodes are a second await, and the loop reads the barrel.
+                if (planGeneration() !== plan)
+                    return undefined;
+                for (const [boothId, booth, logo] of prepared) {
+                    if (!booth) {
+                        log('dropped a logo: no booth has id %s', boothId);
+                        continue;
+                    }
+                    // The bytes did not decode. The loop drops the logo instead of drawing it at a
+                    // guessed ratio, and says so: a silent drop is how SVG logos went missing before.
+                    if (!logo) {
+                        log('dropped the logo of booth %s: the image could not be read', boothId);
+                        continue;
+                    }
+                    const { blob, aspectRatio } = logo;
+                    // `createImageDef` keeps this `Rect` by reference, and `rotateImageDef` and
+                    // `flipImageDef` rotate it in place. `createBoothImg` builds a fresh one per booth,
+                    // so no other owner sees those writes.
+                    const { bounds } = createBoothImg(booth, aspectRatio);
+                    const logoShape = createImageDef(blob, bounds);
+                    const borderWidth = booth.borderWidth || boothStore.borderWidth;
+                    const parentBox = booth.rect.expand(-borderWidth);
+                    const parentRect = new Rect(parentBox.center, parentBox.size, booth.rotate);
+                    logoShape.onRoll = isInnerInsideOuter(logoShape.bounds, parentRect)
+                        ? ({ roll }) => (rotateImageDef(logoShape, roll) ? [logoShape] : undefined)
+                        : ({ roll }) => (flipImageDef(logoShape, roll) ? [logoShape] : undefined);
+                    booth.shapes.push(logoShape);
+                    children.push(logoShape);
+                }
+                return { layer: imageLayer, children };
+            });
+        }
+        // Labels and dots under one layer, so that Directions un-dims all of them with one field on it
+        // rather than an override on each of the chunk's defs. An update on a layer whose children are
+        // layers renders that layer alone; the same update on a leaf would sweep its whole container.
+        const labelGroup = {
+            name: `${name}${SEPARATOR}labelGroup`,
+            children: [
+                { name: `${name}${SEPARATOR}labels`, children: labels },
+                { name: `${name}${SEPARATOR}specialLabels`, children: specialLabels },
+                { name: `${name}${SEPARATOR}dots`, children: dots },
+                { name: `${name}${SEPARATOR}specialDots`, children: specialDots },
+            ],
+        };
+        planReaction(() => layersStore.layersLoaded && isDirectionsMode(), (directions) => {
+            labelGroup.dim = directions ? 0 : undefined;
+            update(labelGroup);
+        }, { fireImmediately: true });
+        let children = [];
+        if (booths.length) {
+            const prefix = name + SEPARATOR;
+            children = [
+                // Declaring handlers is what makes this the layer booths are picked in — no other layer is
+                // raycast. One shared function each, so the plan's chunks cost three references apiece.
+                {
+                    name: `${prefix}boothBackground`,
+                    children: bgShapes,
+                    onPointerMove: hoverBooth,
+                    onPointerOut: clearHoveredBooth,
+                    onClick: selectBooth,
+                },
+                labelGroup,
+                imageLayer,
+                { name: `${prefix}boothsBookmark`, children: boothsBookmark },
+                { name: `${name}${SEPARATOR}boothBorder`, children: boothsBorders },
+            ];
+        }
+        return { name, children };
+    };
+    return buildBoothsLayerDef(booths);
+}

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

@@ -0,0 +1,4 @@
+import { type LayerDef } from '@expofp/renderer';
+import { type Layer } from '../../../../store/LayerStore';
+export default function loadLayer(layer: Layer): Promise<LayerDef>;
+//# sourceMappingURL=config-load-layer.d.ts.map