@expofp/floorplan 0.0.0-experimental.2632d13

package/dist/esm/components/Map/drawing/config/canvases.js

@@ -0,0 +1,434 @@
+import { Rect } from '@expofp/geometry';
+import { FONT_FACE, FONT_WEIGHT_PRIMARY_BOOTH } from '../../../../constants';
+import { clusterCounterCircle, PIN_ASPECT, PIN_EDGE_PX, PIN_HEAD_FACTOR } from './pin-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 function createCanvas(width, height, pixelRatio = 1) {
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    canvas.style.width = `${width / pixelRatio}px`;
+    canvas.style.height = `${height / pixelRatio}px`;
+    return canvas;
+}
+/**
+ * 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 function cssSizeOf(canvas) {
+    return { width: parseFloat(canvas.style.width), height: parseFloat(canvas.style.height) };
+}
+export function getBounds(x, y, width, height, scale = 1, rotate, elevation) {
+    const scaledWidth = width * scale;
+    const scaledHeight = height * scale;
+    return new Rect({ x, y }, { x: scaledWidth, y: scaledHeight }, rotate, elevation);
+}
+export function getFont(px, weight = 500, style = 'normal') {
+    const customFont = getComputedStyle(document.body).getPropertyValue(FONT_FACE);
+    const defaultFont = 'Oswald, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
+    const font = customFont ? `${customFont}, ${defaultFont}` : defaultFont;
+    return `${style} ${weight} ${px}px ${font}`;
+}
+// Created on first use, not at import: `engine/defs` imports this module and its specs run in node.
+let measureCtx;
+function measureText(font, text) {
+    measureCtx ??= document.createElement('canvas').getContext('2d');
+    measureCtx.font = font;
+    return measureCtx.measureText(text).width;
+}
+export function createLabelCanvas(text, fontSize, pixelRatio, color = '#fff', fontWeight, strokeStyle, strokeWidth) {
+    text = text.replace(/^_/, '');
+    fontSize *= pixelRatio;
+    const weight = Number(getComputedStyle(document.body).getPropertyValue(FONT_WEIGHT_PRIMARY_BOOTH));
+    const font = getFont(fontSize, weight || fontWeight);
+    const width = measureText(font, text.replace(/[0-9]/g, '3').replace(/[A-Z]/g, 'A')) + 3 + 3; //
+    const vPad = 4;
+    const height = fontSize + vPad;
+    const canvas = createCanvas(width * pixelRatio, height * pixelRatio, pixelRatio);
+    const c = canvas.getContext('2d');
+    c.font = font;
+    c.textAlign = 'center';
+    c.textBaseline = 'alphabetic';
+    // c.fillStyle = "#000";
+    // c.fillRect(0,0,canvas.width, canvas.height);
+    c.fillStyle = color;
+    if (strokeWidth && strokeStyle) {
+        c.lineWidth = strokeWidth;
+        c.strokeStyle = strokeStyle;
+        c.strokeText(text, width / 2, height - (vPad / 2) * pixelRatio);
+        c.lineJoin = 'round';
+    }
+    c.fillText(text, width / 2, height - (vPad / 2) * pixelRatio);
+    return canvas;
+}
+/**
+ * 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 function circleCanvasCssSize(radius) {
+    return radius * 2 + CIRCLE_PADDING_PX * 2;
+}
+export function createCircleCanvas(radius, color) {
+    const key = color.toUpperCase();
+    if (!circleCanvasCache.has(key)) {
+        const size = circleCanvasCssSize(radius);
+        const canvas = createCanvas(size * devicePixelRatio, size * devicePixelRatio, devicePixelRatio);
+        const ctx = canvas.getContext('2d');
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(canvas.width / 2, canvas.height / 2, radius * devicePixelRatio, 0, 2 * Math.PI);
+        ctx.fill();
+        circleCanvasCache.set(key, canvas);
+    }
+    return circleCanvasCache.get(key);
+}
+/**
+ * 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 function bookmarkCanvasCssSize(maxSizePx) {
+    return { width: maxSizePx, height: maxSizePx * 1.4 };
+}
+export function createBookmarkCanvas(maxSizePx, pixelRatio) {
+    const key = maxSizePx;
+    if (bookmarkCanvasCache.has(key))
+        return bookmarkCanvasCache.get(key);
+    const { width: logicalWidth, height: logicalHeight } = bookmarkCanvasCssSize(maxSizePx);
+    const w = Math.ceil(logicalWidth * pixelRatio);
+    const h = Math.ceil(logicalHeight * pixelRatio);
+    const canvas = createCanvas(w, h, pixelRatio);
+    const ctx = canvas.getContext('2d');
+    ctx.scale(pixelRatio, pixelRatio);
+    ctx.fillStyle = '#fdbf2b';
+    ctx.strokeStyle = '#fff';
+    ctx.lineWidth = 4 / pixelRatio;
+    ctx.beginPath();
+    ctx.moveTo(0, 0);
+    ctx.lineTo(0, logicalHeight);
+    ctx.lineTo(logicalWidth / 2, logicalHeight - logicalWidth / 2);
+    ctx.lineTo(logicalWidth, logicalHeight);
+    ctx.lineTo(logicalWidth, 0);
+    ctx.lineTo(0, 0);
+    ctx.fill();
+    ctx.stroke();
+    bookmarkCanvasCache.set(key, canvas);
+    return canvas;
+}
+/** The transparent margin around a circle canvas's dot, in CSS pixels, on each side. */
+const CIRCLE_PADDING_PX = 1;
+const circleCanvasCache = new Map();
+const bookmarkCanvasCache = new Map();
+/**
+ * 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 function imageCanvasCssSize(image, width, height, ptsScale = 1) {
+    const [cssWidth, cssHeight] = fitToAspect(image, width, height, width * ptsScale, height * ptsScale);
+    return { width: cssWidth, height: cssHeight };
+}
+export function createImageCanvas(image, width, height, pixelRatio, ptsScale = 1, flip) {
+    const [scaledWidth, scaledHeight] = fitToAspect(image, width, height, width * pixelRatio * ptsScale, height * pixelRatio * ptsScale);
+    const canvas = createCanvas(scaledWidth, scaledHeight, pixelRatio);
+    const ctx = canvas.getContext('2d');
+    canvas.id = image.id;
+    if (flip === 'horizontal') {
+        ctx.scale(-1, 1);
+        ctx.translate(-scaledWidth, 0);
+    }
+    else if (flip === 'vertical') {
+        ctx.scale(1, -1);
+        ctx.translate(0, -scaledHeight);
+    }
+    ctx.drawImage(image, 0, 0, scaledWidth, scaledHeight);
+    return canvas;
+}
+/**
+ * Shrinks a box on one axis to an image's aspect, so the image fills it without stretching.
+ * @param image - The image whose aspect to keep.
+ * @param width - The requested box's width, in any unit.
+ * @param height - The requested box's height, in the same unit.
+ * @param scaledWidth - The box's width in the unit the result is wanted in.
+ * @param scaledHeight - The box's height in that unit.
+ * @returns The fitted width and height, in that unit.
+ */
+function fitToAspect(image, width, height, scaledWidth, scaledHeight) {
+    const aspectRatio = image ? image.width / image.height : 1;
+    return width / height > aspectRatio
+        ? [scaledHeight * aspectRatio, scaledHeight]
+        : [scaledWidth, scaledWidth / aspectRatio];
+}
+export function createCurrentCanvas(pixelRatio, color = '#c8248b', scale = pixelRatio * 0.4, width, height, text, textColor = '#000') {
+    width = width || 95;
+    height = height || 95;
+    const canvas = createCanvas(width * scale, height * scale, pixelRatio);
+    const ctx = canvas.getContext('2d');
+    ctx.scale(scale, scale);
+    const cx = width / 2;
+    const cy = height / 2;
+    // when a label is shown below the pin, anchor the circle to the top so the text fits underneath
+    ctx.translate(cx - 35, text ? 0 : cy - 35);
+    ctx.beginPath();
+    ctx.fillStyle = '#FFFFFF';
+    ctx.moveTo(0.0, 35.0);
+    ctx.bezierCurveTo(0.0, 54.329966, 15.670034, 70.0, 35.0, 70.0);
+    ctx.bezierCurveTo(54.329966, 70.0, 70.0, 54.329966, 70.0, 35.0);
+    ctx.bezierCurveTo(70.0, 15.670034, 54.329966, 0.0, 35.0, 0.0);
+    ctx.bezierCurveTo(15.670034, 0.0, 0.0, 15.670034, 0.0, 35.0);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.fillStyle = color;
+    ctx.moveTo(10.0, 35.0);
+    ctx.bezierCurveTo(10.0, 48.807119, 21.192881, 60.0, 35.0, 60.0);
+    ctx.bezierCurveTo(48.807119, 60.0, 60.0, 48.807119, 60.0, 35.0);
+    ctx.bezierCurveTo(60.0, 21.192881, 48.807119, 10.0, 35.0, 10.0);
+    ctx.bezierCurveTo(21.192881, 10.0, 10.0, 21.192881, 10.0, 35.0);
+    ctx.fill();
+    if (text) {
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'alphabetic';
+        ctx.lineJoin = 'round';
+        ctx.strokeStyle = '#fff';
+        ctx.fillStyle = textColor;
+        const fontSize = 38;
+        ctx.font = getFont(fontSize);
+        ctx.lineWidth = 6;
+        // baseline below the circle (which spans 0..70 post-translate), with breathing room above text
+        const textY = 70 + fontSize;
+        ctx.strokeText(text, 35, textY, width);
+        ctx.fillText(text, 35, textY, width);
+    }
+    return canvas;
+}
+export function createTargetCanvas(pixelRatio, color = '#c8248b', scale = pixelRatio * 0.5) {
+    const width = 70 * scale;
+    const height = 100 * scale;
+    const canvas = createCanvas(width, height, pixelRatio);
+    const ctx = canvas.getContext('2d');
+    ctx.scale(scale, scale);
+    ctx.beginPath();
+    ctx.fillStyle = 'rgb(255, 255, 255)';
+    ctx.moveTo(32.6, 97.8);
+    ctx.bezierCurveTo(24.4, 81.5, 0.0, 57.0, 0.0, 32.6);
+    ctx.bezierCurveTo(0.0, 14.6, 14.6, 0.0, 32.6, 0.0);
+    ctx.bezierCurveTo(50.5, 0.0, 65.2, 14.6, 65.2, 32.6);
+    ctx.bezierCurveTo(65.2, 57.0, 40.7, 81.5, 32.6, 97.8);
+    ctx.fill();
+    // #path1440
+    ctx.beginPath();
+    ctx.fillStyle = color;
+    ctx.moveTo(32.6, 91.1);
+    ctx.bezierCurveTo(25.2, 76.3, 3.1, 54.2, 3.1, 32.1);
+    ctx.bezierCurveTo(3.1, 15.9, 16.3, 2.6, 32.6, 2.6);
+    ctx.bezierCurveTo(48.8, 2.6, 62.0, 15.9, 62.0, 32.1);
+    ctx.bezierCurveTo(62.0, 54.2, 39.9, 76.3, 32.6, 91.1);
+    ctx.fill();
+    // #path1442
+    ctx.beginPath();
+    ctx.fillStyle = 'rgb(255, 255, 255)';
+    ctx.moveTo(16.2, 32.6);
+    ctx.bezierCurveTo(16.2, 41.6, 23.5, 48.9, 32.5, 48.9);
+    ctx.bezierCurveTo(41.5, 48.9, 48.8, 41.6, 48.8, 32.6);
+    ctx.bezierCurveTo(48.8, 23.6, 41.5, 16.3, 32.5, 16.3);
+    ctx.bezierCurveTo(23.5, 16.3, 16.2, 23.6, 16.2, 32.6);
+    ctx.fill();
+    return canvas;
+}
+export function createArrowCurrentCanvas(pixelRatio, color = '#c8248b', scale = pixelRatio * 0.4) {
+    const width = 95 * scale;
+    const height = 95 * scale;
+    const canvas = createCanvas(width, height, pixelRatio);
+    const ctx = canvas.getContext('2d');
+    ctx.scale(scale, scale);
+    // the circle
+    ctx.beginPath();
+    ctx.arc(47, 47, 25, 0, 2 * Math.PI);
+    ctx.fillStyle = color;
+    ctx.fill();
+    // the arrow
+    ctx.beginPath();
+    ctx.fillStyle = color;
+    ctx.moveTo(75, 27);
+    ctx.lineTo(95, 47);
+    ctx.lineTo(75, 67);
+    ctx.lineTo(80, 47);
+    ctx.closePath();
+    ctx.fill();
+    return canvas;
+}
+export function createYahCanvas(pixelRatio, color = '#ff4343', scale = pixelRatio * 0.5) {
+    const width = 77 * scale;
+    const height = 116 * scale;
+    const canvas = createCanvas(width, height, pixelRatio);
+    const ctx = canvas.getContext('2d');
+    ctx.scale(scale, scale);
+    ctx.scale(scale, scale);
+    ctx.beginPath();
+    ctx.fillStyle = '#FFFFFF';
+    ctx.moveTo(68.303, 57.335);
+    ctx.bezierCurveTo(77.894, 39.304, 70.649, 15.785, 50.95, 8.04);
+    ctx.bezierCurveTo(30.727, 0, 8.375, 11.837, 3.207, 32.831);
+    ctx.bezierCurveTo(0, 46.185, 6.644, 57.323, 13.131, 68.211);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.fillStyle = color;
+    ctx.moveTo(51.565, 35.459);
+    ctx.bezierCurveTo(51.565, 43.256, 45.201, 49.575, 37.354, 49.575);
+    ctx.bezierCurveTo(29.516, 49.575, 23.159, 43.256, 23.159, 35.459);
+    ctx.bezierCurveTo(23.159, 27.668, 29.516, 21.345, 37.354, 21.345);
+    ctx.bezierCurveTo(45.201, 21.345, 51.565, 27.668, 51.565, 35.459);
+    ctx.closePath();
+    ctx.fill();
+    // #path4
+    ctx.beginPath();
+    ctx.moveTo(68.303, 57.335);
+    ctx.bezierCurveTo(77.894, 39.304, 70.649, 15.785, 50.95, 8.04);
+    ctx.bezierCurveTo(30.727, 0, 8.375, 11.837, 3.207, 32.831);
+    ctx.bezierCurveTo(0, 46.185, 6.644, 57.323, 13.131, 68.211);
+    ctx.lineTo(13.131, 68.211);
+    ctx.lineTo(13.131, 68.211);
+    ctx.bezierCurveTo(13.921, 69.533, 14.698, 70.829, 15.454, 72.137);
+    ctx.bezierCurveTo(19.465, 79.158, 23.533, 86.12, 27.571, 93.086);
+    ctx.lineTo(27.571, 93.086);
+    ctx.bezierCurveTo(30.098, 97.421, 32.611, 101.756, 35.116, 106.077);
+    ctx.bezierCurveTo(36.128, 107.868, 38.934, 107.868, 39.945, 106.077);
+    ctx.bezierCurveTo(49.387, 90.003, 58.708, 74.029, 68.031, 57.951);
+    ctx.bezierCurveTo(68.15, 57.743, 68.24, 57.543, 68.303, 57.335);
+    ctx.closePath();
+    ctx.moveTo(60.103, 60.395);
+    ctx.lineTo(63.201, 55.041);
+    ctx.lineTo(63.201, 55.041);
+    ctx.bezierCurveTo(73.31, 36.735, 61.285, 11.614, 39.04, 11.17);
+    ctx.bezierCurveTo(19.388, 10.714, 2.759, 29.479, 9.386, 49.013);
+    ctx.bezierCurveTo(10.726, 52.998, 12.657, 56.9, 14.84, 60.721);
+    ctx.bezierCurveTo(15.041, 58.454, 15.938, 56.258, 17.589, 54.586);
+    ctx.bezierCurveTo(19.708, 52.425, 22.216, 50.638, 24.996, 49.283);
+    ctx.bezierCurveTo(28.252, 52.249, 32.595, 54.051, 37.354, 54.051);
+    ctx.bezierCurveTo(42.123, 54.051, 46.47, 52.249, 49.73, 49.283);
+    ctx.bezierCurveTo(52.505, 50.638, 55.017, 52.425, 57.135, 54.586);
+    ctx.bezierCurveTo(58.701, 56.188, 59.701, 58.245, 60.103, 60.395);
+    ctx.closePath();
+    ctx.fill('evenodd');
+    // #path6
+    ctx.beginPath();
+    ctx.moveTo(29.024, 104.982);
+    ctx.bezierCurveTo(29.024, 103.626, 27.923, 102.527, 26.57, 102.527);
+    ctx.bezierCurveTo(25.214, 102.527, 24.114, 103.626, 24.114, 104.982);
+    ctx.bezierCurveTo(24.114, 111.395, 30.347, 116.838, 37.444, 116.838);
+    ctx.bezierCurveTo(44.54, 116.838, 50.771, 111.395, 50.771, 104.982);
+    ctx.bezierCurveTo(50.771, 103.626, 49.666, 102.527, 48.317, 102.527);
+    ctx.bezierCurveTo(46.961, 102.527, 45.855, 103.626, 45.855, 104.982);
+    ctx.bezierCurveTo(45.855, 108.193, 42.352, 111.956, 37.444, 111.956);
+    ctx.bezierCurveTo(32.528, 111.956, 29.024, 108.193, 29.024, 104.982);
+    ctx.closePath();
+    ctx.fill();
+    return canvas;
+}
+const PIN_STROKE_COLOR = '#ffffff';
+/** The white center's radius as a fraction of the head radius. */
+const POI_PIN_CENTER_FACTOR = 0.45;
+const POI_PIN_BODY_COLOR = '#e8112d';
+const POI_PIN_EDGE_COLOR = '#000000';
+// Teardrop pin outline: a circle of radius `r` centered at (w / 2, r + inset)
+// tapering to a tip at (w / 2, h - inset). `inset` keeps the caller's stroke
+// inside the canvas. Callers fill/stroke the prepared path.
+function drawPinPath(ctx, w, h, r, inset) {
+    const cx = w / 2;
+    const cy = r + inset;
+    const tipY = h - inset;
+    ctx.beginPath();
+    ctx.moveTo(cx, tipY);
+    ctx.bezierCurveTo(cx - r * 0.55, cy + r * 0.8, cx - r, cy + r * 0.35, cx - r, cy);
+    ctx.bezierCurveTo(cx - r, cy - r * 0.72, cx - r * 0.45, cy - r, cx, cy - r);
+    ctx.bezierCurveTo(cx + r * 0.45, cy - r, cx + r, cy - r * 0.72, cx + r, cy);
+    ctx.bezierCurveTo(cx + r, cy + r * 0.35, cx + r * 0.55, cy + r * 0.8, cx, tipY);
+    ctx.closePath();
+}
+// Rasterizes a filled + outlined teardrop pin `widthPx` wide at `pixelRatio`,
+// and hands back the head geometry so callers can place a glyph inside it.
+// `inset` doubles as the stroke width — it is exactly what keeps the stroke
+// inside the canvas. `edgeColor` defaults to the white outline the outdoor pins
+// draw; the filter pin passes black, which is what separates it from the red
+// booth it stands on.
+function createPinCanvas(widthPx, aspect, pixelRatio, radiusFactor, inset, color, edgeColor = PIN_STROKE_COLOR) {
+    const w = widthPx;
+    const h = widthPx * aspect;
+    const canvas = createCanvas(w * pixelRatio, h * pixelRatio, pixelRatio);
+    const ctx = canvas.getContext('2d');
+    ctx.scale(pixelRatio, pixelRatio);
+    const r = w * radiusFactor;
+    drawPinPath(ctx, w, h, r, inset);
+    ctx.fillStyle = color;
+    ctx.strokeStyle = edgeColor;
+    ctx.lineWidth = inset;
+    ctx.lineJoin = 'round';
+    ctx.fill();
+    ctx.stroke();
+    return { canvas, ctx, cx: w / 2, cy: r + inset, r };
+}
+/**
+ * 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 function createPoiPinCanvas(widthPx, pixelRatio) {
+    const { canvas, ctx, cx, cy, r } = createPinCanvas(widthPx, PIN_ASPECT, pixelRatio, PIN_HEAD_FACTOR, PIN_EDGE_PX, POI_PIN_BODY_COLOR, POI_PIN_EDGE_COLOR);
+    ctx.beginPath();
+    ctx.arc(cx, cy, r * POI_PIN_CENTER_FACTOR, 0, 2 * Math.PI);
+    ctx.fillStyle = PIN_STROKE_COLOR;
+    ctx.fill();
+    return canvas;
+}
+/**
+ * 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 function createClusterPinCanvas(widthPx, pixelRatio) {
+    const { canvas, ctx } = createPinCanvas(widthPx, PIN_ASPECT, pixelRatio, PIN_HEAD_FACTOR, PIN_EDGE_PX, POI_PIN_BODY_COLOR, POI_PIN_EDGE_COLOR);
+    const { cx, cy, r } = clusterCounterCircle(widthPx);
+    ctx.beginPath();
+    ctx.arc(cx, cy, r, 0, 2 * Math.PI);
+    ctx.fillStyle = PIN_STROKE_COLOR;
+    ctx.fill();
+    return canvas;
+}

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

@@ -0,0 +1,6 @@
+import { type LayerDef } from '@expofp/renderer';
+export default function configAll(): Promise<{
+    layers: LayerDef[];
+    cleanup: () => void;
+}>;
+//# sourceMappingURL=config-all.d.ts.map

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

@@ -0,0 +1,92 @@
+import { initWayfindingLayers } from '@expofp/wayfinding';
+import { createLayerDef } from '../../../../engine/defs';
+import store, { boothStore, uiState } from '../../../../store';
+import { isPathwayLayer } from '../../../../utils/is-pathway-layer';
+import { createTrafficLayers } from '../../traffic/trafficLayers';
+import { configBoothsBadges } from './config-booth-badge';
+import loadLayer from './config-load-layer';
+import { MARKER_LAYER_NAME } from './config-markers';
+import { configPins, PIN_CLUSTER_LAYER_NAME, PIN_COUNT_LAYER_NAME, PIN_LAYER_NAME, } from './config-pins';
+export default function configAll() {
+    const { defaultLayer } = store.layerStore;
+    let { layers } = store.layerStore;
+    if (defaultLayer) {
+        const lrs = [...layers];
+        const index = layers.indexOf(defaultLayer);
+        lrs.splice(index, 1);
+        layers = [defaultLayer, ...lrs];
+    }
+    const promises = layers.filter((l) => !l.rootParent).map((layer) => loadLayer(layer));
+    return Promise.all(promises).then((layers) => {
+        const markersLayer = createLayerDef(MARKER_LAYER_NAME, []);
+        // A marker sits on the floor, so a booth volume hides it from a tilted camera. The overlay tier
+        // is what keeps it visible, and `config-markers` stands the marker itself up from the same flag.
+        // Assigned rather than passed, because `overlay` is a `LayerDef` field and `createLayerDef`
+        // takes a `SharedDef`.
+        markersLayer.overlay = uiState.is3DView;
+        // PoI filter pins and their clusters exist only in 3D. A 2D plan shows a filter by highlighting
+        // the booths alone.
+        const pins = uiState.is3DView ? createPinLayers() : undefined;
+        // In 3D the route runs along the floor and a booth volume hides it from a tilted camera, so
+        // the block goes in the overlay tier. `is3DView` is the venue's own flag and it does not
+        // change while a plan is open, so reading it once here is enough.
+        const wayfindingLayer = initWayfindingLayers({ overlay: uiState.is3DView });
+        const planLayers = [];
+        const pathwayLayers = [];
+        for (const l of layers.flat()) {
+            if (isPathwayLayer(l.name)) {
+                l.dim = 0;
+                pathwayLayers.push(l);
+            }
+            else {
+                planLayers.push(l);
+            }
+        }
+        const { layer: badgeLayer, cleanup: badgesCleanup } = configBoothsBadges('root', boothStore.booths);
+        // Layer stack, bottom → top. Order matters: badges must sit above the
+        // plan (over designer-placed foreground logos) but below pathway layers
+        // so guided-tour hint cards stay visible; pathway must sit below
+        // traffic / markers / wayfinding so the active route wins on top
+        // (issue #1206).
+        return {
+            layers: [
+                // Floor plan (booths, halls, bg/fg, designer images)
+                ...planLayers,
+                // Booth badges (booths with no visible label: noLabels or logo-in-booth)
+                ...(badgeLayer ? [badgeLayer] : []),
+                // Guided-tour pathway
+                ...pathwayLayers,
+                // Traffic heatmap
+                ...createTrafficLayers(),
+                // Custom markers / pins
+                markersLayer,
+                // PoI filter pins, then their cluster markers' teardrops and counts
+                ...(pins?.layers ?? []),
+                // Wayfinding. What the block holds and how it stacks inside belongs to
+                // `@expofp/wayfinding`; this is only where the block sits.
+                wayfindingLayer,
+            ],
+            cleanup: () => {
+                badgesCleanup();
+                pins?.cleanup();
+            },
+        };
+    });
+}
+/**
+ * Creates the three PoI pin layers and fills them through {@link configPins}.
+ *
+ * Each layer is `overlay` and has `dim: 0`, so pins stay readable over a dimmed, tilted plan. The
+ * layers stack as pins, cluster teardrops, then counts. Only the pin layer takes part in placement.
+ * @returns The layers, bottom to top, and their cleanup.
+ */
+function createPinLayers() {
+    const layers = [PIN_LAYER_NAME, PIN_CLUSTER_LAYER_NAME, PIN_COUNT_LAYER_NAME].map((name) => {
+        const layer = createLayerDef(name, []);
+        layer.overlay = true;
+        layer.dim = 0;
+        return layer;
+    });
+    const [pinLayer, clusterLayer, countLayer] = layers;
+    return { layers, cleanup: configPins(pinLayer, clusterLayer, countLayer) };
+}

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

@@ -0,0 +1,8 @@
+import { LayerDef } from '@expofp/renderer';
+import { Layer } from '../../../../store/LayerStore';
+import { PathInfo, ShapeBgDef } from '../../../../types/drawing.types';
+export declare const BG_LAYER_NAME = "bg";
+export declare const FG_LAYER_NAME = "fg";
+export default function configBg(layer: Layer): Promise<LayerDef>;
+export declare function buildPathDef(path: PathInfo, layerName?: string): ShapeBgDef | undefined;
+//# sourceMappingURL=config-bg.d.ts.map

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

@@ -0,0 +1,54 @@
+import { select } from 'd3-selection';
+import { getLayerSvg, gtePathByIndex } from '../../../../data/svg';
+import { meshToShapeDef, rectToShapeDef } from '../../../../engine/defs';
+import store from '../../../../store';
+import { LayersMode } from '../../../../store/LayerStore';
+export const BG_LAYER_NAME = 'bg';
+export const FG_LAYER_NAME = 'fg';
+export default async function configBg(layer) {
+    let bg = [];
+    let fg = [];
+    const children = [];
+    const selected = select(getLayerSvg(layer)).select(`[data-layer="${layer.name}"]`);
+    const bgElements = selected
+        .selectAll(":scope > *:not([data-tagname='efp-booth']):not(g[data-is-editable='false']) path, :scope > path")
+        .nodes();
+    const fgElements = selected
+        .selectAll(":scope g[data-layer] > g[data-is-editable='false'] path, :scope > g[data-is-editable='false'] path, :scope > path[data-tagname='ptext']")
+        .nodes();
+    const layerName = store.layerStore.mode !== LayersMode.Default ? layer.rootParent?.name || layer.name : '';
+    for (const el of bgElements) {
+        const pathIndex = +el.getAttribute('data-index');
+        let shape;
+        if (el.tagName === 'path' && pathIndex !== -1)
+            shape = buildPathDef({ color: el.style.fill, index: pathIndex }, layerName);
+        else if (el.tagName === 'rect')
+            shape = rectToShapeDef(el);
+        if (shape)
+            bg.push(shape);
+    }
+    for (const el of fgElements) {
+        const pathIndex = +el.getAttribute('data-index');
+        let shape;
+        if (el.tagName === 'path' && pathIndex !== -1)
+            shape = buildPathDef({ color: el.style.fill, index: pathIndex }, layerName);
+        else if (el.tagName === 'rect')
+            shape = rectToShapeDef(el);
+        if (shape)
+            fg.push(shape);
+    }
+    children.push({ name: BG_LAYER_NAME, children: bg });
+    children.push({ name: FG_LAYER_NAME, children: fg });
+    return Promise.resolve({ name: layer.name, children: children.filter((l) => l.children.length) });
+}
+export function buildPathDef(path, layerName) {
+    if (path.index === -1 || Number.isNaN(path.index))
+        return;
+    if (!path.color || path.color === 'none')
+        path.color = 'transparent';
+    const d = parseInt(path.index.toString());
+    const mesh = gtePathByIndex(d, layerName);
+    const pathDef = meshToShapeDef(mesh, path.color);
+    pathDef.unblinking = path.unblinking;
+    return pathDef;
+}

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

@@ -0,0 +1,28 @@
+/**
+ * Pure eligibility predicate for booth number badges.
+ *
+ * Extracted from `configBoothsBadges` so the decision can be unit-tested in
+ * isolation (no canvas/mobx/renderer side effects). A booth gets a badge when
+ * badges aren't globally hidden, it has exhibitors, and it has no visible
+ * number — either because it's `noLabels` or because a logo-in-booth covers
+ * the label.
+ *
+ * This logic regressed once after the MapLibre refactor (logo-in-booth booths
+ * not authored as `noLabels` lost their badges), so it is covered by a table.
+ */
+export interface BoothBadgeEligibility {
+    /** Data flag: hide the number on booths that have an exhibitor. */
+    hideExhibitorBoothNumber?: boolean;
+    /** `flags.hideBoothBadges`: opt-out for all booth badges. */
+    hideBoothBadges?: boolean;
+    /** UI state: logos-in-booth are currently hidden. */
+    hideLogoInBooth: boolean;
+    /** Booth is authored without labels. */
+    noLabels: boolean;
+    /** Booth has at least one exhibitor. */
+    hasExhibitors: boolean;
+    /** Booth has at least one exhibitor with a visible logo-in-booth. */
+    hasLogoInBooth: boolean;
+}
+export declare function isBoothBadgeEligible(b: BoothBadgeEligibility): boolean;
+//# sourceMappingURL=config-booth-badge-eligibility.d.ts.map

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

@@ -0,0 +1,7 @@
+export function isBoothBadgeEligible(b) {
+    if (b.hideExhibitorBoothNumber || b.hideBoothBadges)
+        return false;
+    if (!b.hasExhibitors)
+        return false;
+    return b.noLabels || (!b.hideLogoInBooth && b.hasLogoInBooth);
+}

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

@@ -0,0 +1,20 @@
+/** What {@link getBadgeScale} reads. */
+export interface BadgeScaleInput {
+    /** Plan units per CSS pixel. */
+    pixelSize: number;
+    /** The font size, in css pixels, the badge is drawn at when the booth has room for it. */
+    fontSize: number;
+    /** The booth number's font size at scale 1, in the units of the plate's size at scale 1. */
+    plateFontSize: number;
+    /** The largest scale that still fits inside the booth's footprint. */
+    maxScale: number;
+}
+/**
+ * The badge plate's scale: `fontSize` css pixels on screen, or smaller when the booth has no room —
+ * then the badge fills what fits and shrinks with the booth.
+ * @param input - The pixel size, the target font size, the font size at scale 1 and the booth's
+ *   limit.
+ * @returns The plate's scale; the font is `plateFontSize` times it, in plan units.
+ */
+export declare function getBadgeScale({ pixelSize, fontSize, plateFontSize, maxScale, }: BadgeScaleInput): number;
+//# sourceMappingURL=config-booth-badge-scale.d.ts.map

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

@@ -0,0 +1,11 @@
+/**
+ * The badge plate's scale: `fontSize` css pixels on screen, or smaller when the booth has no room —
+ * then the badge fills what fits and shrinks with the booth.
+ * @param input - The pixel size, the target font size, the font size at scale 1 and the booth's
+ *   limit.
+ * @returns The plate's scale; the font is `plateFontSize` times it, in plan units.
+ */
+export function getBadgeScale({ pixelSize, fontSize, plateFontSize, maxScale, }) {
+    const scale = (pixelSize * fontSize) / plateFontSize;
+    return Math.min(scale, maxScale);
+}