@expofp/floorplan 0.0.0-experimental.cf063fc

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

@@ -0,0 +1,240 @@
+import { __decorate } from "tslib";
+import { Rect } from '@expofp/geometry';
+import { update } from '@expofp/renderer';
+import Color from 'color';
+import colorInterpolate from 'color-interpolate';
+import { computed } from 'mobx';
+import data from '../../../../data';
+import { getFpSvgJs } from '../../../../data/fp-payloads';
+import { createShapeDef } from '../../../../engine/defs';
+import store, { boothStore, heatmapStore, layersStore, uiState } from '../../../../store';
+import { RegularBooth, SpecialBooth } from '../../../../store/BoothStore';
+import { RebookingState } from '../../../../store/ExhibitorStore';
+import { LayersMode } from '../../../../store/LayerStore';
+import { rebookingStateConfig } from '../../../../tools/rebooking-config';
+import settings from '../../../../tools/settings';
+import { planReaction } from '../../../../utils/plan-reactions.js';
+import { BoothDrawerBaseWithoutPainter } from './BoothDrawerBase';
+import { buildPathDef } from './config-bg';
+export default function configBoothBg(booth) {
+    return new BoothBgDrawer(booth);
+}
+function groupBy(arr) {
+    if (arr.length === 0)
+        return null;
+    const firstValue = arr[0];
+    const isSame = arr.every((value) => value === firstValue);
+    return isSame ? firstValue : null;
+}
+export function pathToShapeDef(paths, layer) {
+    const shapeDefs = [];
+    for (const p of paths) {
+        const pathDef = buildPathDef({ index: p.index, color: p.color, unblinking: p.unblinking }, layer);
+        if (pathDef) {
+            shapeDefs.push(pathDef);
+        }
+    }
+    return shapeDefs;
+}
+class BoothBgDrawer extends BoothDrawerBaseWithoutPainter {
+    constructor(booth) {
+        super(booth);
+        if (booth.paths) {
+            const shapeDefs = pathToShapeDef(booth.paths, store.layerStore.mode !== LayersMode.Default ? booth.layer.name : '');
+            booth.shapes = shapeDefs.map((s) => {
+                const color = uiState.monochrome
+                    ? Color(s.color).grayscale().rgb().string()
+                    : this.getBoothColor().string();
+                if (s.color === 'transparent')
+                    s.color = color;
+                else
+                    s.defaultColor = s.color;
+                return s;
+            });
+        }
+        else {
+            const width = booth.borderColor === 'none'
+                ? 0
+                : isNaN(booth.borderWidth)
+                    ? boothStore.borderWidth
+                    : booth.borderWidth;
+            // booth.rect is an unrotated Box. withPadding deflated (positive =
+            // inner padding); Box.expand inflates on positive, so negate to deflate
+            // by width/2 on each axis. Combine the deflated footprint with
+            // booth.rotate into a geometry Rect for the renderer seam.
+            const box = this.booth.rect.expand(-width / 2);
+            const color = this.getBoothColor().string();
+            booth.shapes = [
+                createShapeDef(new Rect(box.center, box.size, this.booth.rotate, this.booth.elevation), color),
+            ];
+        }
+        planReaction(() => this.booth.hover, () => !this.booth.selected && this.update());
+        planReaction(() => [
+            layersStore.layersLoaded,
+            this.booth.skipDim,
+            this.booth.selected,
+            this.boothShape.selectBgAnimationPart,
+        ], () => this.update());
+    }
+    getShape() {
+        return this.booth.shapes;
+    }
+    update() {
+        if (!layersStore.layersLoaded)
+            return;
+        for (const shape of this.booth.shapes) {
+            shape.dim = this.booth.skipDim ? 0 : undefined;
+            if (shape.color && !shape.unblinking) {
+                const newColor = shape.defaultColor
+                    ? this.getBoothPathColor(shape.defaultColor)
+                    : this.getBoothColor();
+                shape.color = newColor.string();
+            }
+            update(shape);
+        }
+    }
+    /**
+     * Whether this booth is a PoI icon that a highlight has singled out — a category filter, a search
+     * hit, the public `highlightBooths` API — and that is not the selected booth.
+     *
+     * PoI icons are authored gray, and dimming converges on gray too: it desaturates and halves in
+     * linear space, so white lands on the same mid-gray the icons are drawn in. Un-dimming a
+     * highlighted icon therefore leaves it indistinguishable from its dimmed neighbors — issue #1632 —
+     * and the only thing that reads as a highlight is a color of its own.
+     *
+     * `poiTypeId` is a cheap stand-in for "authored gray". The general condition is any color that
+     * dimming converges on, which is the shape to generalize to if this ever bites a booth that is not
+     * a PoI.
+     */
+    get poiHighlighted() {
+        const booth = this.booth;
+        return !booth.selected && booth.poiTypeId != null && booth.skipDim;
+    }
+    getBoothPathColor(defaultColor) {
+        if (uiState.heatmap) {
+            return this.getHeatmapColor();
+        }
+        const booth = this.booth;
+        const selectedColor = settings.colors.booths.selected;
+        let colorInfo = Color(this.poiHighlighted ? selectedColor : defaultColor).hsl();
+        if (booth.selected) {
+            if (getFpSvgJs().__fpSettings?.fpVer) {
+                const color = this.selectedColorInterpolateFunc(this.boothShape.selectBgAnimationPart);
+                const selected = Color(color === 'none' ? selectedColor : color);
+                return uiState.monochrome ? selected.grayscale() : selected;
+            }
+            const selColor = Color(selectedColor).hsl();
+            const startLightness = selColor.lightness();
+            const curLightness = startLightness * this.boothShape.selectBgAnimationPart;
+            colorInfo = colorInfo.hue(selColor.hue()).lightness(curLightness);
+        }
+        else if (booth.hover) {
+            colorInfo = colorInfo.darken(0.1);
+        }
+        if (uiState.monochrome) {
+            colorInfo = colorInfo.grayscale();
+        }
+        return colorInfo;
+    }
+    getHeatmapColor() {
+        const booth = this.booth;
+        const heatmapColor = heatmapStore.getHeatmapColorForBooth(booth);
+        if (booth.selected) {
+            const color = this.selectedColorInterpolateFunc(this.boothShape.selectBgAnimationPart);
+            return Color(color === 'none' ? '#f33' : color);
+        }
+        if (booth.hover) {
+            return heatmapColor.darken(0.2).alpha(heatmapColor.alpha() * 1.5);
+        }
+        return heatmapColor;
+    }
+    get defaultColor() {
+        const b = this.booth;
+        let defColor = settings.colors.booths.default;
+        if (b instanceof SpecialBooth) {
+            defColor = b.color || settings.colors.booths.empty;
+        }
+        else if (b instanceof RegularBooth) {
+            if (data.isRebooking) {
+                if (!b.exhibitors?.length)
+                    return rebookingStateConfig[RebookingState.Unasked].color.primary;
+                const state = groupBy((b.exhibitors ?? []).map((e) => e.rebookingState));
+                return state !== null
+                    ? rebookingStateConfig[state].color.primary
+                    : '#000000';
+            }
+            const settingsColors = settings.colors.booths;
+            if (b.onHold) {
+                defColor = b.holdColor || settingsColors.defaultHold;
+            }
+            else if (b.exhibitors.length || b.reserved) {
+                defColor = b.soldColor || settingsColors.defaultSold;
+            }
+            else {
+                defColor = b.availColor || settingsColors.empty;
+            }
+        }
+        try {
+            if (defColor === 'none')
+                defColor = settings.colors.booths.default;
+            Color(defColor);
+        }
+        catch (e) {
+            defColor = settings.colors.booths.default;
+            console.error('Booth: defaultColor', e);
+        }
+        return defColor;
+    }
+    get selectedColorInterpolateFunc() {
+        const color0 = settings.colors.booths.seectedLight ||
+            (!Color(this.booth.labelColor || settings.boothLabelColor).isLight() ? '#fff' : '#000');
+        const color1 = uiState.selectedRoute
+            ? settings?.colors?.booths?.wayfinding?.selected
+            : settings?.colors?.booths?.selected;
+        return colorInterpolate([color0, color1]);
+    }
+    getBoothColor() {
+        const booth = this.booth;
+        if (uiState.heatmap) {
+            return this.getHeatmapColor();
+        }
+        let color;
+        if (booth.error) {
+            color = '#f33';
+        }
+        else if (data.isRebooking) {
+            color = this.defaultColor;
+        }
+        else if (booth.selected) {
+            color = this.selectedColorInterpolateFunc(this.boothShape.selectBgAnimationPart);
+        }
+        else if (this.poiHighlighted) {
+            // Same reason as in getBoothPathColor: a PoI icon authored with no fill of its own, or with
+            // no paths at all, reaches its color through here and needs the highlight just as much.
+            color = settings.colors.booths.selected;
+        }
+        else {
+            color = this.defaultColor;
+        }
+        let colorInfo;
+        try {
+            colorInfo = Color(color === 'none' ? '#f33' : color);
+        }
+        catch {
+            colorInfo = Color(this.defaultColor);
+        }
+        if ((booth.hover && !booth.selected) || (booth.selected && data.isRebooking)) {
+            colorInfo = colorInfo.darken(0.2).alpha(colorInfo.alpha() * 1.5);
+        }
+        if (uiState.monochrome || uiState.heatmapYah) {
+            colorInfo = colorInfo.grayscale();
+        }
+        return colorInfo;
+    }
+}
+__decorate([
+    computed({ keepAlive: true })
+], BoothBgDrawer.prototype, "defaultColor", null);
+__decorate([
+    computed({ keepAlive: true })
+], BoothBgDrawer.prototype, "selectedColorInterpolateFunc", null);

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

@@ -0,0 +1,24 @@
+import { Rect } from '@expofp/geometry';
+import { type ImageDef } from '@expofp/renderer';
+import type { Booth } from '../../../../store/BoothStore';
+import { BoothDrawerBaseWithoutPainter } from './BoothDrawerBase';
+export default function configBoothBookmarkImage(booth: Booth): BoothBookmarkDrawer | undefined;
+export declare class BoothBookmarkDrawer extends BoothDrawerBaseWithoutPainter {
+    protected shape: ImageDef;
+    protected bookmarkId: string;
+    protected readonly canvas: HTMLCanvasElement;
+    protected rect: Rect;
+    protected padding: number;
+    constructor(booth: Booth);
+    getShape: () => ImageDef;
+    update(bookmarked: boolean): void;
+    /**
+     * Lays this bookmark out for a new pixel size: the ribbon holds its on-screen size, clamped to what
+     * fits in the top-right corner of the booth.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns The bookmark unless hidden — nothing draws a hidden one, and `update()` syncs it on
+     *   the way back into view.
+     */
+    layOutBookmark(pixelSize: number): ImageDef[];
+}
+//# sourceMappingURL=config-booth-bookmark.d.ts.map

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

@@ -0,0 +1,65 @@
+import { Rect } from '@expofp/geometry';
+import { update } from '@expofp/renderer';
+import { createImageDef } from '../../../../engine/defs';
+import { getClampedBoundsCanvas, getQuarterTurns, getRollValue, rotateRectByQuarters, } from '../../../../engine/update-def';
+import { layersStore, uiState } from '../../../../store';
+import { planReaction } from '../../../../utils/plan-reactions.js';
+import { BoothDrawerBaseWithoutPainter } from './BoothDrawerBase';
+import { bookmarkCanvasCssSize, createBookmarkCanvas } from './canvases';
+export default function configBoothBookmarkImage(booth) {
+    if (uiState.kiosk)
+        return;
+    return new BoothBookmarkDrawer(booth);
+}
+export class BoothBookmarkDrawer extends BoothDrawerBaseWithoutPainter {
+    constructor(booth) {
+        super(booth);
+        this.getShape = () => this.shape;
+        this.padding = this.booth.borderWidth / 2;
+        // booth.rect is an unrotated Box; combine it with booth.rotate into a Rect.
+        this.rect = new Rect(this.booth.rect.center, this.booth.rect.size, this.booth.rotate, this.booth.elevation);
+        this.canvas = createBookmarkCanvas(BOOKMARK_WIDTH_PX, devicePixelRatio);
+        this.bookmarkId = `bookmark-${this.booth.id}`;
+        this.shape = createImageDef(this.canvas, this.rect, { hidden: !booth.bookmarked });
+        // Wrapped in an arrow because handlers are called with no receiver — a bare method reference
+        // would lose `this`.
+        this.shape.onScale = ({ pixelSize }) => this.layOutBookmark(pixelSize);
+        planReaction(() => [booth.bookmarked, layersStore.layersLoaded, this.booth.skipDim], () => this.update(booth.bookmarked), { fireImmediately: booth.bookmarked });
+        planReaction(() => uiState.mapSettings, ({ roll }) => {
+            if (!getRollValue(roll ?? 0))
+                return;
+            this.shape.onRoll = ({ roll: angle, pixelSize }) => {
+                const turns = getQuarterTurns(angle, this.rect.rotation);
+                if (turns === 0)
+                    return undefined;
+                this.rect = rotateRectByQuarters(this.rect, turns);
+                this.layOutBookmark(pixelSize);
+                return [this.shape];
+            };
+        }, { fireImmediately: true });
+    }
+    update(bookmarked) {
+        if (!layersStore.layersLoaded)
+            return;
+        // No re-clamp and no handler teardown here: a hidden bookmark is laid out along with every
+        // other — scale and roll alike — so its bounds are already current for this camera, and the
+        // sync below carries both the flags and those bounds. (The imperative path dropped a hidden
+        // bookmark's roll handler and never re-registered it; the registry made that repair obsolete.)
+        this.shape.hidden = !bookmarked;
+        this.shape.dim = this.booth.skipDim ? 0 : undefined;
+        update(this.shape);
+    }
+    /**
+     * Lays this bookmark out for a new pixel size: the ribbon holds its on-screen size, clamped to what
+     * fits in the top-right corner of the booth.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns The bookmark unless hidden — nothing draws a hidden one, and `update()` syncs it on
+     *   the way back into view.
+     */
+    layOutBookmark(pixelSize) {
+        this.shape.bounds = getClampedBoundsCanvas(this.rect, bookmarkCanvasCssSize(BOOKMARK_WIDTH_PX), this.padding, pixelSize);
+        return this.shape.hidden ? [] : [this.shape];
+    }
+}
+/** The bookmark ribbon's width in CSS pixels. */
+const BOOKMARK_WIDTH_PX = 11;

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

@@ -0,0 +1,12 @@
+import { ShapeDef } from '@expofp/renderer';
+import { Booth } from '../../../../store/BoothStore';
+import { BoothDrawerBaseWithoutPainter } from './BoothDrawerBase';
+export default function configBoothBorder(booth: Booth): BoothBorderDrawer | undefined;
+declare class BoothBorderDrawer extends BoothDrawerBaseWithoutPainter {
+    protected readonly shape: ShapeDef;
+    constructor(booth: Booth);
+    private getBorderColor;
+    getShape(): ShapeDef;
+}
+export {};
+//# sourceMappingURL=config-booth-border.d.ts.map

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

@@ -0,0 +1,92 @@
+/* eslint-disable @typescript-eslint/consistent-type-imports */
+import { Polygon, Rect } from '@expofp/geometry';
+import { update } from '@expofp/renderer';
+import Color from 'color';
+import data from '../../../../data';
+import { createShapeDef } from '../../../../engine/defs';
+import { boothStore, heatmapStore, layersStore, uiState } from '../../../../store';
+import settings from '../../../../tools/settings';
+import { planReaction } from '../../../../utils/plan-reactions.js';
+import { BoothDrawerBaseWithoutPainter } from './BoothDrawerBase';
+import { selectedBorderColor } from './selection-style.js';
+export default function configBoothBorder(booth) {
+    // if (EFP_EXPO === "vaughanribfest19") return null;
+    if (settings.EXPO === 'confex20')
+        return;
+    if (booth.poiType ||
+        booth.borderColor === 'none' ||
+        (booth.borderWidth === 0 && !boothStore.borderWidth) ||
+        (booth.paths && !booth.pathsWithRect))
+        return;
+    return new BoothBorderDrawer(booth);
+}
+class BoothBorderDrawer extends BoothDrawerBaseWithoutPainter {
+    constructor(booth) {
+        super(booth);
+        // booth.rect is an unrotated Box (center + size).
+        const r = this.booth.rect;
+        const { x: cx, y: cy } = r.center;
+        const { width: rw, height: rh } = r.size;
+        const width = booth.borderWidth || boothStore.borderWidth;
+        const polygonsList = [];
+        const addPolygon = (segCx, segCy, w, h) => {
+            // Build the unrotated border segment, then rotate it (positive =
+            // clockwise, y-down) about the booth's rect center — matching the
+            // renderer/geometry winding now that booth.rotate is stored
+            // positive-clockwise (Task 4).
+            // The elevation rides along: `toPolygon` carries it onto the polygon, `rotate` preserves
+            // it, and `Polygon.merge` takes it from the first segment — so the whole border lands on the
+            // booth's roof rather than on the floor beneath it.
+            const segment = new Rect({ x: segCx, y: segCy }, { x: w, y: h }, 0, booth.elevation).toPolygon();
+            polygonsList.push(segment.rotate(booth.rotate ?? 0, { x: cx, y: cy }));
+        };
+        addPolygon(cx, cy - rh / 2, rw + width, width);
+        addPolygon(cx, cy + rh / 2, rw + width, width);
+        addPolygon(cx - rw / 2, cy, width, rh + width);
+        addPolygon(cx + rw / 2, cy, width, rh + width);
+        // Merge in geometry space; createShapeDef converts to the renderer.
+        const polygon = Polygon.merge(...polygonsList);
+        const borderColor = this.getBorderColor();
+        this.shape = createShapeDef(polygon, borderColor.string());
+        planReaction(() => [
+            this.booth.skipDim,
+            layersStore.layersLoaded,
+            this.booth.hover,
+            this.booth.selected,
+            uiState.heatmap,
+            // Only changes the border color in `solid` selection style (it picks the
+            // wayfinding vs plain fill); in `blink` mode this re-fires a no-op color
+            // write. Kept in the deps so solid mode repaints on route change.
+            uiState.selectedRoute,
+        ], () => {
+            if (!layersStore.layersLoaded)
+                return;
+            this.shape.dim = this.booth.skipDim ? 0 : undefined;
+            this.shape.color = this.getBorderColor().string();
+            update(this.shape);
+        });
+    }
+    getBorderColor() {
+        const booth = this.booth;
+        if (uiState.heatmap) {
+            const heatmapColor = heatmapStore.getHeatmapColorForBooth(booth);
+            if (booth.selected) {
+                const selectedBorder = settings.colors.booths.selectedBorder;
+                return selectedBorder ? Color(selectedBorder) : heatmapColor.darken(0.4);
+            }
+            if (booth.hover) {
+                return heatmapColor.darken(0.3);
+            }
+            return heatmapColor.darken(0.2);
+        }
+        if (!booth.selected)
+            return Color(booth.borderColor || settings.colors.booths.default);
+        const fill = uiState.selectedRoute
+            ? settings.colors.booths.wayfinding.selected
+            : settings.colors.booths.selected;
+        return Color(selectedBorderColor(data.selectionStyle, settings.colors.booths.selectedBorder, fill, settings.colors.booths.default));
+    }
+    getShape() {
+        return this.shape;
+    }
+}

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

@@ -0,0 +1,28 @@
+import { type ImageDef, type TextDef } from '@expofp/renderer';
+import { type FontSizeFactor } from '../../../../engine/defs';
+import { type Booth, SpecialBooth } from '../../../../store/BoothStore';
+import { BoothLabelDrawer } from './config-booth-labels';
+export default function configBoothLabelsSpecial(booth: Booth): BoothLabelSpecialDrawer | undefined;
+export declare class BoothLabelSpecialDrawer extends BoothLabelDrawer {
+    protected steps: FontSizeFactor[];
+    protected labelIsVertical: boolean;
+    protected text: string;
+    constructor(booth: SpecialBooth);
+    getShape(): (ImageDef | TextDef)[];
+    /**
+     * Lays a special booth's label out: the text fitter's steps are indexed by the inverse pixel size,
+     * and a plan too far out for the smallest step drops the label to nothing.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns Always the label; every step writes the line, and the fitter's text may change with it.
+     */
+    layOutLabel(pixelSize: number): TextDef[];
+    /**
+     * Lays a special booth's dot out: it stands in for the label exactly when no step fits.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns Always the dot; the bounds are rewritten on every step.
+     */
+    layOutDot(pixelSize: number): ImageDef[];
+    setFactors(text: string): void;
+    setText(): void;
+}
+//# sourceMappingURL=config-booth-labels-special.d.ts.map

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

@@ -0,0 +1,147 @@
+import { Rect } from '@expofp/geometry';
+import { update } from '@expofp/renderer';
+import { reaction } from 'mobx';
+import { FONT_WEIGHT_PRIMARY_BOOTH, FONT_WEIGHT_PRIMARY_SPECIAL } from '../../../../constants';
+import { createTextDef, SHAPE_DOT_CSS_PX } from '../../../../engine/defs';
+import { loadCustomFontsUrls } from '../../../../engine/fonts';
+import { getQuarterTurns, getRollValue, rotateRectByQuarters, rotateTextDefByQuarters, shouldFlip, } from '../../../../engine/update-def';
+import { heatmapStore, layersStore, uiState } from '../../../../store';
+import { SpecialBooth } from '../../../../store/BoothStore';
+import settings from '../../../../tools/settings';
+import { getFont } from './canvases';
+import { BoothLabelDrawer, getFontUrlByWeight, getMinZoomFactorForDot, } from './config-booth-labels';
+import { LABEL_MARGIN_FRACTION } from './label-inset.js';
+import TextFitter from './TextFitter';
+/** The font sizes a special booth's label steps through, in CSS pixels. */
+const FONT_SIZES_PX = [18, 16, 14, 12, 10, 7];
+/** The largest font size that may wrap onto several lines, in CSS pixels. */
+const MAX_MULTILINE_FONT_SIZE_PX = 14;
+export default function configBoothLabelsSpecial(booth) {
+    if (!(booth instanceof SpecialBooth) || booth.noLabels)
+        return;
+    return new BoothLabelSpecialDrawer(booth);
+}
+export class BoothLabelSpecialDrawer extends BoothLabelDrawer {
+    constructor(booth) {
+        super(booth);
+        // both are filled by setFactors/setText below, which the checker cannot see
+        // through, and Babel's decorator pipeline rejects `!` fields
+        this.steps = [];
+        this.text = '';
+        const rect = this.booth.rect;
+        const fontWeight = Number(getComputedStyle(document.body).getPropertyValue(FONT_WEIGHT_PRIMARY_SPECIAL)) ||
+            Number(getComputedStyle(document.body).getPropertyValue(FONT_WEIGHT_PRIMARY_BOOTH)) ||
+            500;
+        const fontUrl = getFontUrlByWeight(fontWeight, loadCustomFontsUrls());
+        // rect is an unrotated Box. The special label deflates by the margin on each
+        // dimension + the border inset (Box.expand inflates on positive, so negate).
+        const boothRectWithPadding = rect.expand({
+            x: -(rect.size.width * LABEL_MARGIN_FRACTION + this.padding),
+            y: -(rect.size.height * LABEL_MARGIN_FRACTION + this.padding),
+        });
+        this.setText();
+        this.canvasRect = new Rect(boothRectWithPadding.center, boothRectWithPadding.size, booth.rotate, booth.elevation);
+        this.setFactors(this.text);
+        this.labelIsVertical = Math.abs(Math.abs(booth.rotate) - Math.PI / 2) < 0.01;
+        this.fontSizes = [this.steps, []];
+        this.minZoomDotVisible = getMinZoomFactorForDot(this.steps.map((s) => s.scaleFactor));
+        this.shapeLabel = createTextDef([
+            {
+                text: this.text,
+                color: booth.labelColor || settings.boothLabelColor,
+                fontUrl,
+                fontSize: 0,
+            },
+        ], new Rect(boothRectWithPadding.center, boothRectWithPadding.size, booth.rotate, booth.elevation), [this.padding, this.padding], { horizontal: 'center', text: 'center', vertical: 'center' });
+        // Arrow-wrapped like the regular label's closure — a bare method reference would lose `this`.
+        this.shapeLabel.onScale = ({ pixelSize }) => this.layOutLabel(pixelSize);
+        this.getShapeDot();
+        // Like the regular label's: only this booth's own `skipDim`, since Directions un-dims the
+        // chunk's label layer as a whole.
+        reaction(() => layersStore.layersLoaded && this.booth.skipDim === true, (skipDim) => {
+            this.shapeLabel.dim = skipDim ? 0 : undefined;
+            this.shapeDot.dim = skipDim ? 0 : undefined;
+            update(this.shapeLabel, this.shapeDot);
+        });
+        reaction(() => uiState.mapSettings, ({ roll }) => {
+            if (!getRollValue(roll ?? 0))
+                return;
+            // Declared on the def, like the regular label's rule; the virtual dispatch the subclass
+            // used to get from the registry it now gets from the closure.
+            this.shapeLabel.onRoll = ({ roll: angle, pixelSize }) => {
+                const currentRotation = this.shapeLabel.bounds.rotation;
+                if (this.labelIsVertical) {
+                    if (!shouldFlip(angle, currentRotation))
+                        return undefined;
+                    // Flip the vertical label by negating its rotation. `rotate` adds a
+                    // delta about the center, so -2·current lands rotation at -current.
+                    this.shapeLabel.bounds.rotate(-2 * currentRotation, this.shapeLabel.bounds);
+                    return [this.shapeLabel, this.shapeDot];
+                }
+                const turns = getQuarterTurns(angle, currentRotation);
+                if (turns === 0)
+                    return undefined;
+                const { size } = this.canvasRect;
+                this.shapeLabel = rotateTextDefByQuarters(this.shapeLabel, turns);
+                if (size.x !== size.y && !this.shapeLabel.hidden) {
+                    this.canvasRect = rotateRectByQuarters(this.canvasRect, turns);
+                    this.setFactors(this.text);
+                    this.layOutLabel(pixelSize);
+                    this.layOutDot(pixelSize);
+                }
+                return [this.shapeLabel, this.shapeDot];
+            };
+        }, { fireImmediately: true });
+    }
+    getShape() {
+        return [this.shapeLabel, this.shapeDot];
+    }
+    /**
+     * Lays a special booth's label out: the text fitter's steps are indexed by the inverse pixel size,
+     * and a plan too far out for the smallest step drops the label to nothing.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns Always the label; every step writes the line, and the fitter's text may change with it.
+     */
+    layOutLabel(pixelSize) {
+        const step = this.steps.find((s) => s.scaleFactor < 1 / pixelSize);
+        if (!step) {
+            this.shapeLabel.lines[0].fontSize = 0;
+            return [this.shapeLabel];
+        }
+        // The fitter's steps are in CSS pixels, so the pixel size alone converts them to the plan units
+        // the renderer draws in.
+        this.shapeLabel.lines[0].fontSize = step.value * pixelSize;
+        this.shapeLabel.lines[0].text = step.lines.join('\n');
+        this.shapeLabel.padding = [
+            this.paddingScaled[0] * pixelSize + this.padding,
+            this.paddingScaled[1] * pixelSize + this.padding,
+        ];
+        return [this.shapeLabel];
+    }
+    /**
+     * Lays a special booth's dot out: it stands in for the label exactly when no step fits.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns Always the dot; the bounds are rewritten on every step.
+     */
+    layOutDot(pixelSize) {
+        const step = this.steps.find((s) => s.scaleFactor < 1 / pixelSize);
+        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 = !!step;
+        return [this.shapeDot];
+    }
+    setFactors(text) {
+        this.steps = new TextFitter(getFont, FONT_SIZES_PX, MAX_MULTILINE_FONT_SIZE_PX).getStepsForRect(text, this.canvasRect.size.x, this.canvasRect.size.y);
+    }
+    setText() {
+        const text = this.booth.title || this.booth.name;
+        const clicks = heatmapStore.getTotalClicksByBooth(this.booth);
+        const clickText = `Clicks: ${clicks}`;
+        this.text = uiState.heatmap ? `${text} - ${clickText}` : text;
+    }
+}