@expofp/floorplan 0.0.0-experimental.2d6c681

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

@@ -0,0 +1,37 @@
+/**
+ * Pure visibility predicate for booth number badges.
+ *
+ * Badges are the one piece of plan content that lives *outside* the per-floor
+ * def tree: `configAll` stacks every badge of every venue into one flat
+ * `root::badges` layer so they sit above designer foreground artwork. That
+ * layer has no counterpart in LayerStore, so `useLayerVisibilitySync` — the
+ * single owner of `LayerDef.hidden` for floor content — never visits it, and
+ * the parent-hidden cascade that hides bg/booths/fg never reaches it either.
+ *
+ * Each badge therefore has to answer the visibility question for itself, and
+ * it has to mirror every reason `useLayerVisibilitySync` hides a floor def —
+ * all three of them, or badges float over plan content that is no longer
+ * drawn:
+ *
+ * - `Layer.visible` — level switching and layer toggles.
+ * - Venue degradation (R6) — expressed purely as `LayerDef.hidden`, it never
+ *   flips `Layer.visible`, so consulting visibility alone left badges over
+ *   venues degraded to their contour.
+ * - Quarantine — a layer referenced by a venue that failed validation is
+ *   hidden from ordinary rendering, but nothing ever activates it, so it keeps
+ *   whatever `visible` `init-layers` gave it and its venue never parsed (no
+ *   degradation signal exists for it either).
+ *
+ * Extracted so that decision can be table-tested without a renderer, canvas or
+ * mobx — the same reason `isBoothBadgeEligible` lives next door.
+ */
+export interface BoothBadgeVisibility {
+    /** The booth's own layer is on (`Layer.visible`); a booth with no layer counts as visible. */
+    layerVisible: boolean;
+    /** The layer (or its root parent) was quarantined by venue validation. */
+    layerQuarantined: boolean;
+    /** The layer's venue draws full floor detail; `true` when the layer belongs to no venue. */
+    venueDetailVisible: boolean;
+}
+export declare function isBoothBadgeHidden(v: BoothBadgeVisibility): boolean;
+//# sourceMappingURL=config-booth-badge-visibility.d.ts.map

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

@@ -0,0 +1,3 @@
+export function isBoothBadgeHidden(v) {
+    return v.layerQuarantined || !v.layerVisible || !v.venueDetailVisible;
+}

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

@@ -0,0 +1,90 @@
+import { type LayerDef, type ShapeDef, type TextDef } from '@expofp/renderer';
+import { type Booth, RegularBooth } from '../../../../store/BoothStore';
+export declare function createBoothBadge(booth: RegularBooth): {
+    bg: ShapeDef;
+    text: TextDef;
+    dispose: () => void;
+};
+/**
+ * Lays a booth's badge out as the plan zooms: the background rect, and the booth number inside it.
+ *
+ * One instance per badge, holding the geometry the layout reads — where the badge is anchored inside
+ * the booth's footprint, its size at scale 1, and the scale beyond which it would spill out of the
+ * polygon. The defs' `onScale` closures delegate to the methods here.
+ */
+export declare class BoothBadgeDrawer {
+    private readonly placement;
+    /**
+     * @param placement - Everything the layout reads: the booth, where the badge is anchored, its size
+     *   at scale 1, the booth's rotation, the scale it may not exceed, and the two defs it writes.
+     */
+    constructor(placement: BadgePlacement);
+    private bgScale;
+    private textScale;
+    /** Forgets the last layout, for when the placement itself changed — the next one is written. */
+    invalidate(): void;
+    /**
+     * Lays the background rect out for a new pixel size.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns The background unless the badge is hidden or its scale did not change — the rect is
+     *   kept current either way, so showing it draws the right size straight away.
+     */
+    layOutBg(pixelSize: number): ShapeDef[];
+    /**
+     * Lays the booth number out for a new pixel size.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns The text unless the badge is hidden or its scale did not change, as for the
+     *   background.
+     */
+    layOutText(pixelSize: number): TextDef[];
+    /**
+     * The plate's scale: {@link BADGE_FONT_SIZE} on screen, or smaller when the booth has no room.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns The plate's scale.
+     */
+    private scaleFor;
+    /**
+     * The badge's rect at a scale.
+     *
+     * The anchor is in world space and names the badge's top-left corner, so the center is
+     * `anchor + R(rotation) · (w/2, h/2)`; the renderer then rotates the badge about that center, which
+     * lands it where the anchor says.
+     * @param scale - The plate's scale.
+     * @returns The rect.
+     */
+    private rectAt;
+}
+/** Everything {@link BoothBadgeDrawer} needs to place a badge, gathered once when it is built. */
+export interface BadgePlacement {
+    /** The booth the badge belongs to. */
+    booth: RegularBooth;
+    /** Where the badge's top-left corner sits on the plan, before rotation. */
+    anchor: {
+        x: number;
+        y: number;
+    };
+    /** The badge's width and height at scale 1. */
+    source: {
+        x: number;
+        y: number;
+    };
+    /** The booth's rotation, in radians. */
+    rotation: number;
+    /** The largest scale that still fits inside the booth's footprint. */
+    maxScale: number;
+    /** The badge's background rect. */
+    bg: ShapeDef;
+    /** The booth number drawn inside it. */
+    text: TextDef;
+    /**
+     * Whether the badge is hidden — the same predicate the visibility reaction uses
+     * (`isBoothBadgeHidden`), so a zoom step never re-shows a badge over a venue that has
+     * degraded to its contour.
+     */
+    isHidden: () => boolean;
+}
+export declare function configBoothsBadges(layerName: string, booths: Booth[]): {
+    layer: LayerDef | null;
+    cleanup: () => void;
+};
+//# sourceMappingURL=config-booth-badge.d.ts.map

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

@@ -0,0 +1,326 @@
+import { pointRotate, Rect } from '@expofp/geometry';
+import { update } from '@expofp/renderer';
+import Color from 'color';
+import { reaction } from 'mobx';
+import { SEPARATOR } from '../../../../constants';
+import data from '../../../../data';
+import { getTrianglesFromFpPaths } from '../../../../data/svg';
+import { createShapeDef, createTextDef, createTextDefLines } from '../../../../engine/defs';
+import { loadCustomFontsUrls } from '../../../../engine/fonts';
+import { getQuarterTurns, getRollValue } from '../../../../engine/update-def';
+import store, { boothStore, uiState } from '../../../../store';
+import { RegularBooth } from '../../../../store/BoothStore';
+import settings from '../../../../tools/settings';
+import { getContrastTextColor } from '../../../../utils/getContrastTextColor';
+import isPhone from '../../../../utils/is-phone';
+import { BoothBadgeAnchors } from './booth-badge-anchor';
+import { getFont } from './canvases';
+import { isBoothBadgeEligible } from './config-booth-badge-eligibility';
+import { getBadgeScale } from './config-booth-badge-scale';
+import { isBoothBadgeHidden } from './config-booth-badge-visibility';
+import { getBadgeFontWeight, getFontUrlByWeight } from './config-booth-labels';
+const BADGE_MAX_CHARS = 15;
+// The badge's font size in css pixels when the booth has room for it; a booth too small for it
+// shrinks the badge to what fits. Only phones get the smaller size: tablets and kiosks are read
+// from further away.
+const BADGE_FONT_SIZE = isPhone ? 16 : 18;
+const BADGE_MEASURE_FONT_SIZE = 30;
+// Kept tight: the booth caps the plate, not the text, so every pixel of padding is taken from the
+// number's font size.
+const BADGE_MEASURE_PADDING_X = 6;
+const BADGE_MEASURE_PADDING_Y = 4;
+const BADGE_DISPLAY_RATIO = 0.8;
+const BADGE_TEXT_FONT_SIZE = BADGE_MEASURE_FONT_SIZE * BADGE_DISPLAY_RATIO;
+const badgeMeasureCtx = document.createElement('canvas').getContext('2d');
+function truncateBadgeText(text) {
+    if (text.length <= BADGE_MAX_CHARS)
+        return text;
+    return text.slice(0, BADGE_MAX_CHARS - 1) + '\u2026';
+}
+function getBoothTriangles(booth) {
+    if (!booth.paths?.length)
+        return [];
+    const layerSuffix = booth.layer?.name || '';
+    const triangles = [];
+    for (const path of booth.paths) {
+        for (const tri of getTrianglesFromFpPaths(path.index, layerSuffix)) {
+            triangles.push(tri);
+        }
+    }
+    return triangles;
+}
+function normalizeColor(color) {
+    return color && color !== 'none' ? color : undefined;
+}
+function getBadgeBgColor(booth) {
+    const borderColor = normalizeColor(booth.borderColor) ||
+        normalizeColor(settings.boothBorderColor) ||
+        settings.colors.booths.default;
+    if (booth.paths?.length > 1) {
+        return normalizeColor(booth.paths[booth.paths.length - 1].color) || borderColor;
+    }
+    return borderColor;
+}
+export function createBoothBadge(booth) {
+    const text = truncateBadgeText(booth.title || booth.name);
+    const bgColor = getBadgeBgColor(booth);
+    const textColor = getContrastTextColor(Color(bgColor).hex());
+    const fontWeight = getBadgeFontWeight();
+    const font = getFont(BADGE_MEASURE_FONT_SIZE, fontWeight);
+    badgeMeasureCtx.font = font;
+    const textWidth = badgeMeasureCtx.measureText(text).width;
+    const logicalWidth = Math.ceil(textWidth + BADGE_MEASURE_PADDING_X * 2);
+    const logicalHeight = BADGE_MEASURE_FONT_SIZE + BADGE_MEASURE_PADDING_Y * 2;
+    const border = (booth.borderWidth || boothStore.borderWidth) / 2;
+    const sourceW = logicalWidth * BADGE_DISPLAY_RATIO;
+    const sourceH = logicalHeight * BADGE_DISPLAY_RATIO;
+    const anchors = new BoothBadgeAnchors(booth, getBoothTriangles(booth), border, {
+        x: sourceW,
+        y: sourceH,
+    });
+    let rotation = booth.rotate ?? 0;
+    // Which booth corner the badge is anchored to, clockwise from top-left (0).
+    let cornerIndex = 0;
+    // Assigned by the `recomputeAnchor()` below, and again on every roll — the placement reads them
+    // directly, which is more than the checker can follow through the closure.
+    let anchorX = 0;
+    let anchorY = 0;
+    let maxBadgeScale = 0;
+    // A lookup after the first visit to each corner: every badge on the plan steps in the same frame.
+    const recomputeAnchor = () => {
+        const fit = anchors.fit(cornerIndex, rotation);
+        anchorX = fit.x;
+        anchorY = fit.y;
+        maxBadgeScale = fit.maxScale;
+    };
+    recomputeAnchor();
+    // center = anchor + R(rotation) · (w/2, h/2), so the anchor corner lands correctly after rotation.
+    const makeBadgeRect = (w, h) => {
+        const hx = w / 2;
+        const hy = h / 2;
+        const center = pointRotate({ x: anchorX + hx, y: anchorY + hy }, rotation, {
+            x: anchorX,
+            y: anchorY,
+        });
+        return new Rect(center, { x: w, y: h }, rotation, booth.elevation);
+    };
+    const fontUrl = getFontUrlByWeight(fontWeight, loadCustomFontsUrls());
+    // Background — native ShapeDef rectangle.
+    //
+    // Hidden until the first layout, which is what turns the unit rect below into a badge of a real
+    // size: the renderer lays a def out as it registers, hidden or not, so this holds the badge back
+    // for exactly as long as it has no size to be drawn at.
+    const bgShape = createShapeDef(makeBadgeRect(1, 1), bgColor);
+    bgShape.hidden = true;
+    bgShape.dim = booth.skipDim ? 0 : undefined;
+    const textShape = createTextDef(createTextDefLines([[text], []], textColor, 0, [fontUrl, fontUrl]), makeBadgeRect(1, 1), [0, 0], { horizontal: 'center', vertical: 'center' });
+    textShape.hidden = true;
+    textShape.dim = booth.skipDim ? 0 : undefined;
+    // Badges sit in the flat `root::badges` layer, outside the per-floor def
+    // tree that useLayerVisibilitySync hides — see config-booth-badge-visibility
+    // for why this predicate, not the cascade, owns their visibility.
+    const badgeVisibilityInputs = () => {
+        const layer = booth.layer;
+        if (!layer)
+            return { layerVisible: true, layerQuarantined: false, venueDetailVisible: true };
+        // venueOfLayer keys on level layer names, so resolve child layers (booth
+        // sub-layers) through their root parent, exactly as useLayerVisibilitySync
+        // does. isLayerQuarantined walks to the root parent itself.
+        const venue = store.venueStore.venueOfLayer(layer.rootParent?.name ?? layer.name);
+        return {
+            layerVisible: layer.visible,
+            layerQuarantined: store.layerStore.isLayerQuarantined(layer),
+            venueDetailVisible: venue ? venue.detailVisible : true,
+        };
+    };
+    const isBadgeHidden = () => isBoothBadgeHidden(badgeVisibilityInputs());
+    const placement = {
+        booth,
+        anchor: { x: anchorX, y: anchorY },
+        source: { x: sourceW, y: sourceH },
+        rotation,
+        maxScale: maxBadgeScale,
+        bg: bgShape,
+        text: textShape,
+        isHidden: isBadgeHidden,
+    };
+    const drawer = new BoothBadgeDrawer(placement);
+    // Arrow-wrapped because handlers are called with no receiver — a bare method reference would
+    // lose its `this`.
+    bgShape.onScale = ({ pixelSize }) => drawer.layOutBg(pixelSize);
+    textShape.onScale = ({ pixelSize }) => drawer.layOutText(pixelSize);
+    const disposers = [];
+    disposers.push(reaction(() => booth.skipDim, (skipDim) => {
+        bgShape.dim = skipDim ? 0 : undefined;
+        textShape.dim = skipDim ? 0 : undefined;
+        update(bgShape, textShape);
+    }));
+    // Tracks venue degradation as well as layer visibility: degradation is
+    // zoom-driven and the onScale handlers above re-assert `hidden` anyway,
+    // but a programmatic focus that degrades a venue without a scale change
+    // would otherwise leave the badges behind.
+    disposers.push(reaction(() => isBadgeHidden(), (hidden) => {
+        bgShape.hidden = hidden;
+        textShape.hidden = hidden;
+        update(bgShape, textShape);
+    }));
+    // Roll does more than lay the badge out again: it moves the anchor to a different booth corner,
+    // so both the anchor and the scale the badge may grow to are looked up (computed on the first
+    // visit to that corner) and written back to the placement the `onScale` handlers above read.
+    // Declared on the background def — the anchor's owner — and returning both defs, which the
+    // renderer writes.
+    disposers.push(reaction(() => uiState.mapSettings, ({ roll }) => {
+        if (!getRollValue(roll ?? 0))
+            return;
+        // The first quarter turn would otherwise search the next corner of every badge at once.
+        anchors.prefetch(booth.rotate ?? 0);
+        bgShape.onRoll = ({ roll: angle, pixelSize }) => {
+            const turns = getQuarterTurns(angle, rotation);
+            if (turns === 0)
+                return undefined;
+            // One booth corner per quarter; the double modulo keeps a negative count in [0, 3].
+            rotation += (turns * Math.PI) / 2;
+            cornerIndex = (((cornerIndex + turns) % 4) + 4) % 4;
+            recomputeAnchor();
+            placement.anchor.x = anchorX;
+            placement.anchor.y = anchorY;
+            placement.rotation = rotation;
+            placement.maxScale = maxBadgeScale;
+            drawer.invalidate();
+            return [...drawer.layOutBg(pixelSize), ...drawer.layOutText(pixelSize)];
+        };
+    }, 
+    // mapSettings rarely changes after mount, so without fireImmediately onRoll never gets assigned.
+    { fireImmediately: true }), () => anchors.cancelPrefetch());
+    const dispose = () => {
+        disposers.forEach((d) => d());
+        disposers.length = 0;
+    };
+    return { bg: bgShape, text: textShape, dispose };
+}
+/**
+ * Lays a booth's badge out as the plan zooms: the background rect, and the booth number inside it.
+ *
+ * One instance per badge, holding the geometry the layout reads — where the badge is anchored inside
+ * the booth's footprint, its size at scale 1, and the scale beyond which it would spill out of the
+ * polygon. The defs' `onScale` closures delegate to the methods here.
+ */
+export class BoothBadgeDrawer {
+    /**
+     * @param placement - Everything the layout reads: the booth, where the badge is anchored, its size
+     *   at scale 1, the booth's rotation, the scale it may not exceed, and the two defs it writes.
+     */
+    constructor(placement) {
+        this.placement = placement;
+        // The scale each def was last laid out at, so a zoom step that leaves it unchanged — every badge
+        // already shrunk to its booth, at far zoom — skips the renderer's write.
+        this.bgScale = NaN;
+        this.textScale = NaN;
+    }
+    /** Forgets the last layout, for when the placement itself changed — the next one is written. */
+    invalidate() {
+        this.bgScale = NaN;
+        this.textScale = NaN;
+    }
+    /**
+     * Lays the background rect out for a new pixel size.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns The background unless the badge is hidden or its scale did not change — the rect is
+     *   kept current either way, so showing it draws the right size straight away.
+     */
+    layOutBg(pixelSize) {
+        const { bg } = this.placement;
+        const scale = this.scaleFor(pixelSize);
+        if (scale === this.bgScale)
+            return [];
+        this.bgScale = scale;
+        bg.shape = this.rectAt(scale);
+        bg.hidden = this.placement.isHidden();
+        return bg.hidden ? [] : [bg];
+    }
+    /**
+     * Lays the booth number out for a new pixel size.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns The text unless the badge is hidden or its scale did not change, as for the
+     *   background.
+     */
+    layOutText(pixelSize) {
+        const { text } = this.placement;
+        const scale = this.scaleFor(pixelSize);
+        if (scale === this.textScale)
+            return [];
+        this.textScale = scale;
+        text.lines[0].fontSize = BADGE_TEXT_FONT_SIZE * scale;
+        text.bounds = this.rectAt(scale);
+        text.hidden = this.placement.isHidden();
+        return text.hidden ? [] : [text];
+    }
+    /**
+     * The plate's scale: {@link BADGE_FONT_SIZE} on screen, or smaller when the booth has no room.
+     * @param pixelSize - Plan units per CSS pixel.
+     * @returns The plate's scale.
+     */
+    scaleFor(pixelSize) {
+        return getBadgeScale({
+            pixelSize,
+            fontSize: BADGE_FONT_SIZE,
+            plateFontSize: BADGE_TEXT_FONT_SIZE,
+            maxScale: this.placement.maxScale,
+        });
+    }
+    /**
+     * The badge's rect at a scale.
+     *
+     * The anchor is in world space and names the badge's top-left corner, so the center is
+     * `anchor + R(rotation) · (w/2, h/2)`; the renderer then rotates the badge about that center, which
+     * lands it where the anchor says.
+     * @param scale - The plate's scale.
+     * @returns The rect.
+     */
+    rectAt(scale) {
+        const { anchor, booth, source, rotation } = this.placement;
+        const width = source.x * scale;
+        const height = source.y * scale;
+        const center = pointRotate({ x: anchor.x + width / 2, y: anchor.y + height / 2 }, rotation, anchor);
+        // Rebuilt from scalars on every scale step, so the booth's elevation is re-read here rather
+        // than inherited — a badge that dropped it would sink through its own booth's roof.
+        return new Rect(center, { x: width, y: height }, rotation, booth.elevation);
+    }
+}
+export function configBoothsBadges(layerName, booths) {
+    const badgeBgs = [];
+    const badgeTexts = [];
+    const disposers = [];
+    for (const booth of booths) {
+        if (booth instanceof RegularBooth &&
+            isBoothBadgeEligible({
+                hideExhibitorBoothNumber: data.hideExhibitorBoothNumber,
+                hideBoothBadges: data.hideBoothBadges,
+                hideLogoInBooth: uiState.hideLogoInBooth,
+                noLabels: booth.noLabels,
+                hasExhibitors: booth.exhibitors.length > 0,
+                hasLogoInBooth: booth.exhibitors.some((e) => e.logoInBooth && e.logo),
+            })) {
+            const { bg, text, dispose } = createBoothBadge(booth);
+            badgeBgs.push(bg);
+            badgeTexts.push(text);
+            disposers.push(dispose);
+        }
+    }
+    const cleanup = () => {
+        disposers.forEach((d) => d());
+        disposers.length = 0;
+    };
+    if (!badgeBgs.length)
+        return { layer: null, cleanup };
+    return {
+        layer: {
+            name: `${layerName}${SEPARATOR}badges`,
+            children: [
+                { name: `${layerName}${SEPARATOR}badgeBgs`, children: badgeBgs },
+                { name: `${layerName}${SEPARATOR}badgeTexts`, children: badgeTexts },
+            ],
+        },
+        cleanup,
+    };
+}

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

@@ -0,0 +1,33 @@
+import { type ColorInput, type ShapeDef } from '@expofp/renderer';
+import Color from 'color';
+import { type Booth } from '../../../../store/BoothStore';
+import type { PathInfo, ShapeBgDef } from '../../../../types/drawing.types';
+import { BoothDrawerBaseWithoutPainter } from './BoothDrawerBase';
+export default function configBoothBg(booth: Booth): BoothBgDrawer;
+export declare function pathToShapeDef(paths: PathInfo[], layer: string): ShapeDef[];
+declare class BoothBgDrawer extends BoothDrawerBaseWithoutPainter {
+    constructor(booth: Booth);
+    getShape(): ShapeBgDef[];
+    update(): void;
+    /**
+     * 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.
+     */
+    private get poiHighlighted();
+    getBoothPathColor(defaultColor: ColorInput): Color<string>;
+    private getHeatmapColor;
+    get defaultColor(): string;
+    get selectedColorInterpolateFunc(): (index: number) => string;
+    getBoothColor(): Color<string>;
+}
+export {};
+//# sourceMappingURL=config-booth-bg.d.ts.map