@expofp/floorplan/dist/esm/components/Map/drawing/config/canvases.d.ts

Interactive floor plan library for expos and events

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