@expofp/floorplan 0.0.0-experimental.2d6c681

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

@@ -0,0 +1,130 @@
+import { Box } from '@expofp/geometry';
+import { type RegularBooth } from '../../../../store/BoothStore.js';
+/** What a badge's anchor search reads off its booth. */
+export type BadgeBooth = Pick<RegularBooth, 'rect' | 'rotate'>;
+/** Where a badge sits in one booth corner, and how large it may grow there. */
+export interface BadgeFit {
+    /** The x of the badge's top-left corner on the plan, before rotation. */
+    readonly x: number;
+    /** The y of the badge's top-left corner on the plan, before rotation. */
+    readonly y: number;
+    /** The largest scale that keeps the badge inside the booth's footprint. */
+    readonly maxScale: number;
+}
+/**
+ * The places a booth's badge can sit, one per booth corner, each computed on the first visit to
+ * that corner and kept.
+ *
+ * The plan's roll moves the badge to another booth corner every quarter turn, and every badge on
+ * the plan moves in the same frame. Finding a corner's anchor tests the booth's vertices against
+ * its own triangles, so it is too slow to repeat for hundreds of badges at once. The result
+ * depends only on the corner: the rotation the scale search uses is the booth's own plus the
+ * quarter turns to that corner, the same at every visit to it up to whole turns of 2π.
+ *
+ * The first visit to a corner still searches, for every badge at once, so {@link prefetch} works
+ * the other corners out ahead, while the page is idle.
+ */
+export declare class BoothBadgeAnchors {
+    private readonly booth;
+    private readonly triangles;
+    private readonly border;
+    private readonly source;
+    /** The badges with corners still to work out while the page is idle, in the order queued. */
+    private static readonly idle;
+    private static idleScheduled;
+    private readonly fits;
+    /** The rotation at corner 0 the idle work counts quarter turns from. */
+    private prefetchRotation;
+    private readonly polygon;
+    private readonly bbox;
+    /** The booth's distinct vertices in first-seen order, built on the first search. */
+    private vertices;
+    /**
+     * @param booth - The booth the badge belongs to.
+     * @param triangles - The booth's footprint as triangles; empty when it has no paths.
+     * @param border - How far the badge stays in from the booth's edge.
+     * @param source - The badge's width and height at scale 1.
+     */
+    constructor(booth: BadgeBooth, triangles: number[][][], border: number, source: {
+        readonly x: number;
+        readonly y: number;
+    });
+    /**
+     * The badge's place in a booth corner.
+     * @param corner - The booth corner, clockwise from top-left (0) to bottom-left (3).
+     * @param rotation - The badge's rotation in radians: the booth's own plus the quarter turns that
+     *   brought the badge to this corner. Read on the first visit only.
+     * @returns The anchor and the largest scale, the same object at every visit.
+     */
+    fit(corner: number, rotation: number): BadgeFit;
+    /**
+     * Works out the three corners not yet visited while the page is idle, so the first quarter turn
+     * into each finds it ready. Queuing again while queued changes nothing.
+     * @param rotation - The badge's rotation at corner 0: the booth's own.
+     */
+    prefetch(rotation: number): void;
+    /** Drops the idle work {@link prefetch} queued and has not done yet. */
+    cancelPrefetch(): void;
+    private static scheduleIdle;
+    /** Runs the idle work for one {@link FRAME_SLICE_MS} slice, where no idle period is on offer. */
+    private static runSlice;
+    /**
+     * Works out one corner after another while the idle period lasts, for at most a slice, then asks
+     * for another.
+     * @param deadline - How much of the idle period is left.
+     */
+    private static runIdle;
+    /**
+     * Works out the next corner not yet known, at the rotation the quarter turns to it give.
+     * @returns Whether a corner is still unknown after this one.
+     */
+    private prefetchNext;
+    /**
+     * Searches a corner: the anchor, then the largest scale at it.
+     * @param corner - The booth corner, clockwise from top-left (0).
+     * @param rotation - The badge's rotation at that corner, in radians.
+     * @returns The corner's fit.
+     */
+    private compute;
+    /**
+     * The largest scale the booth's rect allows. At odd corners the badge's width and height lie
+     * along the booth's height and width.
+     * @param swapped - Whether the badge's axes are swapped against the booth's.
+     * @returns The scale.
+     */
+    private rectMaxScale;
+    /**
+     * The booth vertex, moved in by the border, nearest the target corner of the booth's bounding
+     * box and still inside the booth. Uses booth.rotate (the booth's true tilt) for the fallback,
+     * never the badge's stepped rotation: the booth does not move when the badge steps.
+     *
+     * The candidates are tested nearest first, so the search stops at the first one inside instead
+     * of testing every vertex. Ties keep the vertex seen first, as a full scan would.
+     * @param signX - 1 to aim at the left edge, -1 at the right.
+     * @param signY - 1 to aim at the top edge, -1 at the bottom.
+     * @returns The anchor.
+     */
+    private findAnchor;
+    /**
+     * Binary-searches the largest scale, up to the rect's cap, that keeps all badge corners inside
+     * the booth's footprint.
+     * @param anchorX - The badge's anchor.
+     * @param anchorY - The badge's anchor.
+     * @param rectMaxScale - The cap the booth's rect allows.
+     * @param rotation - The badge's rotation, in radians.
+     * @returns The scale; the cap itself when the booth has no footprint or the anchor lies outside.
+     */
+    private clampScale;
+    /**
+     * The booth's distinct vertices, in the order the triangles first name them.
+     * @returns The vertices, built once.
+     */
+    private distinctVertices;
+}
+/**
+ * The bounding box of a booth's triangles.
+ * @param triangles - The triangles, as `[x, y]` vertex triples.
+ * @returns The box, or `null` when there are no triangles.
+ */
+export declare function trianglesBoundingBox(triangles: number[][][]): Box | null;
+//# sourceMappingURL=booth-badge-anchor.d.ts.map

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

@@ -0,0 +1,306 @@
+import { Box, pointRotate, Polygon } from '@expofp/geometry';
+const MAX_BADGE_WIDTH_RATIO = 0.5;
+const MAX_BADGE_HEIGHT_RATIO = 0.3;
+const SCALE_SEARCH_ITERATIONS = 10;
+// The longest the idle work runs at a time, so a gesture that starts meanwhile waits at most this
+// long. Browsers grant idle periods of up to 50 ms.
+const IDLE_SLICE_MS = 8;
+// Without requestIdleCallback (Safari, every iOS browser), the work runs in a slice this long right
+// after each frame, when the next frame is furthest away.
+const FRAME_SLICE_MS = 4;
+// Without requestAnimationFrame either, the slices run on a timer this far apart.
+const TIMER_SLICE_GAP_MS = 50;
+/**
+ * The places a booth's badge can sit, one per booth corner, each computed on the first visit to
+ * that corner and kept.
+ *
+ * The plan's roll moves the badge to another booth corner every quarter turn, and every badge on
+ * the plan moves in the same frame. Finding a corner's anchor tests the booth's vertices against
+ * its own triangles, so it is too slow to repeat for hundreds of badges at once. The result
+ * depends only on the corner: the rotation the scale search uses is the booth's own plus the
+ * quarter turns to that corner, the same at every visit to it up to whole turns of 2π.
+ *
+ * The first visit to a corner still searches, for every badge at once, so {@link prefetch} works
+ * the other corners out ahead, while the page is idle.
+ */
+export class BoothBadgeAnchors {
+    /** The badges with corners still to work out while the page is idle, in the order queued. */
+    static { this.idle = new Set(); }
+    static { this.idleScheduled = false; }
+    /**
+     * @param booth - The booth the badge belongs to.
+     * @param triangles - The booth's footprint as triangles; empty when it has no paths.
+     * @param border - How far the badge stays in from the booth's edge.
+     * @param source - The badge's width and height at scale 1.
+     */
+    constructor(booth, triangles, border, source) {
+        this.booth = booth;
+        this.triangles = triangles;
+        this.border = border;
+        this.source = source;
+        this.fits = [];
+        /** The rotation at corner 0 the idle work counts quarter turns from. */
+        this.prefetchRotation = 0;
+        /** The booth's distinct vertices in first-seen order, built on the first search. */
+        this.vertices = null;
+        this.polygon = trianglesToPolygon(triangles);
+        this.bbox = trianglesBoundingBox(triangles);
+    }
+    /**
+     * The badge's place in a booth corner.
+     * @param corner - The booth corner, clockwise from top-left (0) to bottom-left (3).
+     * @param rotation - The badge's rotation in radians: the booth's own plus the quarter turns that
+     *   brought the badge to this corner. Read on the first visit only.
+     * @returns The anchor and the largest scale, the same object at every visit.
+     */
+    fit(corner, rotation) {
+        let fit = this.fits[corner];
+        if (!fit) {
+            this.fits[corner] = fit = this.compute(corner, rotation);
+            // Every corner is known: the vertices will not be searched again.
+            if (this.fits.filter(Boolean).length === 4)
+                this.vertices = null;
+        }
+        return fit;
+    }
+    /**
+     * Works out the three corners not yet visited while the page is idle, so the first quarter turn
+     * into each finds it ready. Queuing again while queued changes nothing.
+     * @param rotation - The badge's rotation at corner 0: the booth's own.
+     */
+    prefetch(rotation) {
+        if (BoothBadgeAnchors.idle.has(this))
+            return;
+        this.prefetchRotation = rotation;
+        BoothBadgeAnchors.idle.add(this);
+        BoothBadgeAnchors.scheduleIdle();
+    }
+    /** Drops the idle work {@link prefetch} queued and has not done yet. */
+    cancelPrefetch() {
+        BoothBadgeAnchors.idle.delete(this);
+    }
+    static scheduleIdle() {
+        if (BoothBadgeAnchors.idleScheduled || !BoothBadgeAnchors.idle.size)
+            return;
+        BoothBadgeAnchors.idleScheduled = true;
+        if (typeof requestIdleCallback === 'function') {
+            requestIdleCallback(BoothBadgeAnchors.runIdle);
+        }
+        else if (typeof requestAnimationFrame === 'function') {
+            // A timeout set from a frame callback runs once that frame has been drawn.
+            requestAnimationFrame(() => setTimeout(BoothBadgeAnchors.runSlice, 0));
+        }
+        else {
+            setTimeout(BoothBadgeAnchors.runSlice, TIMER_SLICE_GAP_MS);
+        }
+    }
+    /** Runs the idle work for one {@link FRAME_SLICE_MS} slice, where no idle period is on offer. */
+    static runSlice() {
+        const end = performance.now() + FRAME_SLICE_MS;
+        BoothBadgeAnchors.runIdle({ timeRemaining: () => end - performance.now() });
+    }
+    /**
+     * Works out one corner after another while the idle period lasts, for at most a slice, then asks
+     * for another.
+     * @param deadline - How much of the idle period is left.
+     */
+    static runIdle(deadline) {
+        BoothBadgeAnchors.idleScheduled = false;
+        const sliceEnd = performance.now() + IDLE_SLICE_MS;
+        try {
+            for (const anchors of BoothBadgeAnchors.idle) {
+                if (deadline.timeRemaining() <= 0 || performance.now() >= sliceEnd)
+                    break;
+                let more = false;
+                try {
+                    more = anchors.prefetchNext();
+                }
+                finally {
+                    // A badge whose search throws is dropped, so it cannot stall the badges behind it.
+                    if (!more)
+                        BoothBadgeAnchors.idle.delete(anchors);
+                }
+            }
+        }
+        finally {
+            BoothBadgeAnchors.scheduleIdle();
+        }
+    }
+    /**
+     * Works out the next corner not yet known, at the rotation the quarter turns to it give.
+     * @returns Whether a corner is still unknown after this one.
+     */
+    prefetchNext() {
+        for (let corner = 1; corner < 4; corner++) {
+            if (this.fits[corner])
+                continue;
+            this.fit(corner, this.prefetchRotation + (corner * Math.PI) / 2);
+            return corner < 3;
+        }
+        return false;
+    }
+    /**
+     * Searches a corner: the anchor, then the largest scale at it.
+     * @param corner - The booth corner, clockwise from top-left (0).
+     * @param rotation - The badge's rotation at that corner, in radians.
+     * @returns The corner's fit.
+     */
+    compute(corner, rotation) {
+        const signX = corner === 0 || corner === 3 ? 1 : -1;
+        const signY = corner === 0 || corner === 1 ? 1 : -1;
+        const anchor = this.findAnchor(signX, signY);
+        const maxScale = this.clampScale(anchor.x, anchor.y, this.rectMaxScale(corner % 2 === 1), rotation);
+        return { x: anchor.x, y: anchor.y, maxScale };
+    }
+    /**
+     * The largest scale the booth's rect allows. At odd corners the badge's width and height lie
+     * along the booth's height and width.
+     * @param swapped - Whether the badge's axes are swapped against the booth's.
+     * @returns The scale.
+     */
+    rectMaxScale(swapped) {
+        const boothW = this.booth.rect.size.width;
+        const boothH = this.booth.rect.size.height;
+        const capW = swapped ? boothH : boothW;
+        const capH = swapped ? boothW : boothH;
+        return Math.min(capW > 0 ? (capW * MAX_BADGE_WIDTH_RATIO) / this.source.x : Infinity, capH > 0 ? (capH * MAX_BADGE_HEIGHT_RATIO) / this.source.y : Infinity);
+    }
+    /**
+     * The booth vertex, moved in by the border, nearest the target corner of the booth's bounding
+     * box and still inside the booth. Uses booth.rotate (the booth's true tilt) for the fallback,
+     * never the badge's stepped rotation: the booth does not move when the badge steps.
+     *
+     * The candidates are tested nearest first, so the search stops at the first one inside instead
+     * of testing every vertex. Ties keep the vertex seen first, as a full scan would.
+     * @param signX - 1 to aim at the left edge, -1 at the right.
+     * @param signY - 1 to aim at the top edge, -1 at the bottom.
+     * @returns The anchor.
+     */
+    findAnchor(signX, signY) {
+        const { booth, border, bbox } = this;
+        if (bbox) {
+            const targetX = signX > 0 ? bbox.min.x : bbox.max.x;
+            const targetY = signY > 0 ? bbox.min.y : bbox.max.y;
+            const candidates = [];
+            for (const [px, py] of this.distinctVertices()) {
+                const x = px + border * signX;
+                const y = py + border * signY;
+                const score = Math.abs(x - targetX) + Math.abs(y - targetY);
+                // A full scan only takes a score below Infinity, which also leaves NaN out.
+                if (score < Infinity)
+                    candidates.push({ x, y, score, order: candidates.length });
+            }
+            // The order is compared explicitly: Array#sort is not stable before Chrome 70.
+            candidates.sort((a, b) => a.score - b.score || a.order - b.order);
+            for (const c of candidates) {
+                // A plain point, as every other caller passes: one more object shape slows the test down.
+                const point = { x: c.x, y: c.y };
+                if (this.polygon.containsPoint(point))
+                    return point;
+            }
+        }
+        const localX = signX > 0 ? booth.rect.min.x + border : booth.rect.max.x - border;
+        const localY = signY > 0 ? booth.rect.min.y + border : booth.rect.max.y - border;
+        const boothRotation = booth.rotate ?? 0;
+        if (!boothRotation)
+            return { x: localX, y: localY };
+        return pointRotate({ x: localX, y: localY }, boothRotation, booth.rect.center);
+    }
+    /**
+     * Binary-searches the largest scale, up to the rect's cap, that keeps all badge corners inside
+     * the booth's footprint.
+     * @param anchorX - The badge's anchor.
+     * @param anchorY - The badge's anchor.
+     * @param rectMaxScale - The cap the booth's rect allows.
+     * @param rotation - The badge's rotation, in radians.
+     * @returns The scale; the cap itself when the booth has no footprint or the anchor lies outside.
+     */
+    clampScale(anchorX, anchorY, rectMaxScale, rotation) {
+        const { polygon, source } = this;
+        if (!this.triangles.length)
+            return rectMaxScale;
+        const anchor = { x: anchorX, y: anchorY };
+        if (!polygon.containsPoint(anchor))
+            return rectMaxScale;
+        let lo = 0;
+        let hi = rectMaxScale;
+        for (let i = 0; i < SCALE_SEARCH_ITERATIONS; i++) {
+            const mid = (lo + hi) / 2;
+            const w = source.x * mid;
+            const h = source.y * mid;
+            const allInside = polygon.containsPoint(pointRotate({ x: anchorX + w, y: anchorY }, rotation, anchor)) &&
+                polygon.containsPoint(pointRotate({ x: anchorX, y: anchorY + h }, rotation, anchor)) &&
+                polygon.containsPoint(pointRotate({ x: anchorX + w, y: anchorY + h }, rotation, anchor));
+            if (allInside) {
+                lo = mid;
+            }
+            else {
+                hi = mid;
+            }
+        }
+        return lo;
+    }
+    /**
+     * The booth's distinct vertices, in the order the triangles first name them.
+     * @returns The vertices, built once.
+     */
+    distinctVertices() {
+        if (this.vertices)
+            return this.vertices;
+        const seen = new Set();
+        const vertices = [];
+        for (const tri of this.triangles) {
+            for (const p of tri) {
+                const key = `${p[0]},${p[1]}`;
+                if (seen.has(key))
+                    continue;
+                seen.add(key);
+                vertices.push([p[0], p[1]]);
+            }
+        }
+        return (this.vertices = vertices);
+    }
+}
+/**
+ * The bounding box of a booth's triangles.
+ * @param triangles - The triangles, as `[x, y]` vertex triples.
+ * @returns The box, or `null` when there are no triangles.
+ */
+export function trianglesBoundingBox(triangles) {
+    if (!triangles.length)
+        return null;
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (const tri of triangles) {
+        for (const [x, y] of tri) {
+            if (x < minX)
+                minX = x;
+            if (y < minY)
+                minY = y;
+            if (x > maxX)
+                maxX = x;
+            if (y > maxY)
+                maxY = y;
+        }
+    }
+    return Box.fromMinMax({ x: minX, y: minY }, { x: maxX, y: maxY });
+}
+/**
+ * The booth's triangles as one {@link Polygon}, one vertex triple per triangle.
+ * @param triangles - The triangles, as `[x, y]` vertex triples.
+ * @returns The polygon.
+ */
+function trianglesToPolygon(triangles) {
+    const vertices = [];
+    const indices = [];
+    for (const tri of triangles) {
+        const base = vertices.length;
+        vertices.push({ x: tri[0][0], y: tri[0][1] });
+        vertices.push({ x: tri[1][0], y: tri[1][1] });
+        vertices.push({ x: tri[2][0], y: tri[2][1] });
+        indices.push([base, base + 1, base + 2]);
+    }
+    return new Polygon(vertices, indices);
+}

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

@@ -0,0 +1,38 @@
+import { type Booth } from '../../../../store/BoothStore';
+import { type Exhibitor } from '../../../../store/ExhibitorStore';
+/** One booth logo, ready to draw. */
+export interface BoothLogo {
+    /** The bytes the renderer packs. An SVG logo is rasterized and re-encoded as PNG. */
+    blob: Blob;
+    /** The logo's width divided by its height, which is what fits it inside the booth. */
+    aspectRatio: number;
+}
+/**
+ * The exhibitor whose logo is painted in this booth, if any.
+ *
+ * One function, so the logo URL and the stated ratio always come off the same exhibitor. A booth
+ * can hold several.
+ * @param booth - The booth to look at.
+ * @returns The exhibitor, or undefined when no exhibitor in the booth wants its logo painted.
+ */
+export declare function boothLogoExhibitor(booth: Booth): Exhibitor | undefined;
+/**
+ * The logo aspect ratio the event data states for this booth, when it states a usable one.
+ *
+ * A value that is not a finite positive number is not a ratio. It would mis-fit the logo in every
+ * booth the exhibitor holds, and nothing downstream would catch it, so it is rejected here and the
+ * caller measures the pixels instead.
+ * @param booth - The booth whose logo is being placed.
+ * @returns The ratio, or undefined when the data states none that can be used.
+ */
+export declare function statedLogoAspectRatio(booth: Booth): number | undefined;
+/**
+ * Makes the logo preparer for one batch of booths.
+ *
+ * The preparer answers two questions per booth: which bytes the renderer packs, and at what ratio
+ * the logo is fitted. It holds the batch's two caches, which is why it is built per batch rather
+ * than imported: booths share logos, and both answers must be shared with them.
+ * @returns A function preparing one booth's logo. It returns null when the logo cannot be drawn.
+ */
+export declare function createLogoPreparer(): (booth: Booth, blob: Blob) => Promise<BoothLogo | null>;
+//# sourceMappingURL=booth-logos.d.ts.map

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

@@ -0,0 +1,94 @@
+import { blobImageSize } from '../../../../utils/blob-image-size';
+import { isSvgBlob, svgToPngBlob } from '../../../../utils/rasterize-svg';
+/**
+ * The exhibitor whose logo is painted in this booth, if any.
+ *
+ * One function, so the logo URL and the stated ratio always come off the same exhibitor. A booth
+ * can hold several.
+ * @param booth - The booth to look at.
+ * @returns The exhibitor, or undefined when no exhibitor in the booth wants its logo painted.
+ */
+export function boothLogoExhibitor(booth) {
+    return booth.exhibitors.find((e) => e.logoInBooth && e.logo);
+}
+/**
+ * The logo aspect ratio the event data states for this booth, when it states a usable one.
+ *
+ * A value that is not a finite positive number is not a ratio. It would mis-fit the logo in every
+ * booth the exhibitor holds, and nothing downstream would catch it, so it is rejected here and the
+ * caller measures the pixels instead.
+ * @param booth - The booth whose logo is being placed.
+ * @returns The ratio, or undefined when the data states none that can be used.
+ */
+export function statedLogoAspectRatio(booth) {
+    const ratio = boothLogoExhibitor(booth)?.logoAspectRatio;
+    return typeof ratio === 'number' && Number.isFinite(ratio) && ratio > 0 ? ratio : undefined;
+}
+/**
+ * Makes the logo preparer for one batch of booths.
+ *
+ * The preparer answers two questions per booth: which bytes the renderer packs, and at what ratio
+ * the logo is fitted. It holds the batch's two caches, which is why it is built per batch rather
+ * than imported: booths share logos, and both answers must be shared with them.
+ * @returns A function preparing one booth's logo. It returns null when the logo cannot be drawn.
+ */
+export function createLogoPreparer() {
+    // Each unique Blob converts once, not once per booth. Two booths that share a logo must end up
+    // with the very same Blob object: the renderer dedupes image sources by identity, and that is
+    // what packs the logo into one atlas region instead of two.
+    const drawables = new Map();
+    const drawableOf = (blob) => {
+        let pending = drawables.get(blob);
+        if (!pending) {
+            pending = toDrawable(blob);
+            drawables.set(blob, pending);
+        }
+        return pending;
+    };
+    // One decode per unique Blob, and only for the logos the data states no ratio for.
+    const measured = new Map();
+    const measuredRatioOf = (drawable) => {
+        let pending = measured.get(drawable);
+        if (!pending) {
+            pending = measureAspectRatio(drawable);
+            measured.set(drawable, pending);
+        }
+        return pending;
+    };
+    return async (booth, blob) => {
+        const drawable = await drawableOf(blob);
+        if (!drawable)
+            return null;
+        // The decode runs only as a fallback. It is still the normal path: no event states a ratio
+        // until the platform starts sending one.
+        const aspectRatio = statedLogoAspectRatio(booth) ?? (await measuredRatioOf(drawable));
+        return aspectRatio === null ? null : { blob: drawable, aspectRatio };
+    };
+}
+/**
+ * Turns a fetched logo into bytes the renderer can pack.
+ *
+ * The renderer decodes every source with `createImageBitmap`, and Chrome refuses SVG bytes. An SVG
+ * logo is therefore drawn into a canvas and re-encoded as PNG. It stays a `Blob` on purpose: a
+ * layer packs in the atlas worker only while every one of its sources is a `Blob`, so one canvas
+ * among a thousand logos would drop the whole layer back onto the main thread.
+ * @param blob - The bytes the logo was fetched as.
+ * @returns The bytes to pack, or null when the SVG does not render.
+ */
+async function toDrawable(blob) {
+    return isSvgBlob(blob) ? svgToPngBlob(blob) : blob;
+}
+/**
+ * Measures a logo's aspect ratio by decoding it.
+ *
+ * `blobImageSize` decodes off the main thread and closes the bitmap as soon as it has read the
+ * size, so a whole batch of logos never sits in memory together.
+ * @param blob - The bytes to measure.
+ * @returns The width divided by the height, or null when the bytes do not decode.
+ */
+async function measureAspectRatio(blob) {
+    const size = await blobImageSize(blob);
+    // A decoded image with no height states no ratio. The caller drops the logo, which beats
+    // drawing it at a guessed one.
+    return size?.height ? size.width / size.height : null;
+}

package/dist/esm/components/Map/drawing/config/canvases.d.ts

@@ -0,0 +1,96 @@
+import { Rect } from '@expofp/geometry';
+/**
+ * Creates a canvas that remembers the device pixel ratio it was rasterized at.
+ *
+ * The backing size is taken as given, and `style.width`/`style.height` hold the CSS size, the
+ * backing size over the ratio. The renderer sizes defs from that CSS size, so the ratio only sets
+ * how crisp the canvas is. A caller with a CSS size passes it times the ratio.
+ * @param width - The backing width in device pixels.
+ * @param height - The backing height in device pixels.
+ * @param pixelRatio - Device pixels per CSS pixel.
+ * @returns The canvas.
+ */
+export declare function createCanvas(width: number, height: number, pixelRatio?: number): HTMLCanvasElement;
+/**
+ * The CSS size a canvas from this module was drawn at, as it recorded when it was made.
+ *
+ * For a caller that holds a canvas and no longer holds the numbers it was made from. Prefer the
+ * size function that names the creator ({@link circleCanvasCssSize}, {@link imageCanvasCssSize})
+ * where the caller made the canvas itself.
+ * @param canvas - A canvas made by one of the creators here.
+ * @returns The canvas's CSS width and height.
+ */
+export declare function cssSizeOf(canvas: HTMLCanvasElement): {
+    width: number;
+    height: number;
+};
+export declare function getBounds(x: number, y: number, width: number, height: number, scale?: number, rotate?: number, elevation?: number): Rect;
+export declare function getFont(px: number, weight?: number, style?: string): string;
+export declare function createLabelCanvas(text: string, fontSize: number, pixelRatio: number, color: string | undefined, fontWeight: number, strokeStyle?: string, strokeWidth?: number): HTMLCanvasElement;
+/**
+ * The CSS size a circle canvas of this radius is drawn at — the one answer to "how big is this dot",
+ * and the number a def's bounds are sized from.
+ *
+ * A canvas's `width` is its backing store in the device pixels it was baked at, which is a different
+ * quantity: truncated to a whole pixel, and baked at a ratio that need not be the one the renderer
+ * draws into. Geometry reads this; the backing store is for crispness.
+ * @param radius - The dot's radius in CSS pixels.
+ * @returns The canvas's CSS width and height, which are equal.
+ */
+export declare function circleCanvasCssSize(radius: number): number;
+export declare function createCircleCanvas(radius: number, color: string): HTMLCanvasElement;
+/**
+ * The CSS size a bookmark canvas is drawn at: the width asked for, and the height its ribbon adds.
+ * @param maxSizePx - The ribbon's width in CSS pixels.
+ * @returns The canvas's CSS width and height.
+ */
+export declare function bookmarkCanvasCssSize(maxSizePx: number): {
+    width: number;
+    height: number;
+};
+export declare function createBookmarkCanvas(maxSizePx: number, pixelRatio: number): HTMLCanvasElement;
+/**
+ * The CSS size {@link createImageCanvas} draws an image at: the box it was asked for, shrunk on one
+ * axis to the image's own aspect.
+ * @param image - The image the canvas is drawn from.
+ * @param width - The box's width in CSS pixels.
+ * @param height - The box's height in CSS pixels.
+ * @param ptsScale - The scale the canvas was drawn at, as {@link createImageCanvas} takes it.
+ * @returns The canvas's CSS width and height.
+ */
+export declare function imageCanvasCssSize(image: HTMLImageElement, width: number, height: number, ptsScale?: number): {
+    width: number;
+    height: number;
+};
+export declare function createImageCanvas(image: HTMLImageElement, width: number, height: number, pixelRatio: number, ptsScale?: number, flip?: 'horizontal' | 'vertical'): HTMLCanvasElement;
+export declare function createCurrentCanvas(pixelRatio: number, color?: string, scale?: number, width?: number, height?: number, text?: string, textColor?: string): HTMLCanvasElement;
+export declare function createTargetCanvas(pixelRatio: number, color?: string, scale?: number): HTMLCanvasElement;
+export declare function createArrowCurrentCanvas(pixelRatio: number, color?: string, scale?: number): HTMLCanvasElement;
+export declare function createYahCanvas(pixelRatio: number, color?: string, scale?: number): HTMLCanvasElement;
+/**
+ * The pin marking a booth an active PoI-type filter selected: a teardrop pointing down, filled red,
+ * edged in black, with a white center in its head.
+ *
+ * The black edge is what carries the shape over a highlighted booth — the body and a highlighted
+ * booth are both red, so without it the drop dissolves into the booth and only the center reads.
+ *
+ * Hands back a canvas rather than the `ImageData` the two pins above return, because the renderer
+ * packs a canvas into its atlas directly and every pin on the plan shares this one image.
+ */
+export declare function createPoiPinCanvas(widthPx: number, pixelRatio: number): HTMLCanvasElement;
+/**
+ * The marker standing for a group of booths an active PoI-type filter selected: the same teardrop
+ * the lone pin draws, with an empty white counter circle filling its head.
+ *
+ * The count is **not** baked in. A number on the canvas would make one `ImageSource` per count, and
+ * the renderer's image container repacks its atlas when the *set* of images changes, so a zoom step
+ * that moved a cluster from 7 members to 12 would repack. Drawn empty, exactly two images ever
+ * reach the atlas — this one and the lone pin — and the set is fixed for the plan's life. The count
+ * is a separate screen-space text def in a sibling layer, standing on the marker's anchor; neither
+ * carries a placement, since both draw a cluster the renderer already decided.
+ * @param widthPx - The marker's width in CSS pixels.
+ * @param pixelRatio - Device pixels per CSS pixel.
+ * @returns The canvas every cluster marker draws.
+ */
+export declare function createClusterPinCanvas(widthPx: number, pixelRatio: number): HTMLCanvasElement;
+//# sourceMappingURL=canvases.d.ts.map