UNPKG

lazy-widgets

Version:

Typescript retained mode GUI for the HTML canvas API

168 lines (167 loc) 6.96 kB
import { BaseViewport } from './BaseViewport.js'; import type { Widget } from '../widgets/Widget.js'; import type { Rect } from '../helpers/Rect.js'; /** * A {@link Viewport} with an internal canvas, where the rendering context used * for the Viewport is the internal canvas' context instead of an inherited * context from a parent Viewport. * * Mostly used as the top-most Viewport, such as the Viewport in a {@link Root}. * * Coordinates are relative to the internal canvas, instead of absolute. Because * of this, viewport contents may be blurred if the position of the viewport is * fractional. * * @category Core */ export declare class CanvasViewport extends BaseViewport { readonly context: CanvasRenderingContext2D; /** The internal canvas. Widgets are painted to this */ readonly canvas: HTMLCanvasElement; /** Current maximum canvas width. For internal use only. */ private _maxCanvasWidth; /** Current maximum canvas height. For internal use only. */ private _maxCanvasHeight; /** * The resolution of the canvas. If possible, the canvas will be scaled by * this amount. */ resolution: number; /** Does the canvas size need to be updated? For internal use only. */ protected _forceResize: boolean; /** Previous horizontal effective scale. For internal use only. */ private _prevESX; /** Previous vertical effective scale. For internal use only. */ private _prevESY; /** * Is texture bleeding prevention enabled? If true, then out-of-bounds old * painted Widgets that were kept because of the canvas shrinking will be * cleared after the paint method is called. * * Can be changed at any time, but will only take effect once the * {@link Viewport#child} Widget is re-painted. */ preventBleeding: boolean; /** * Is texture atlas bleeding prevention enabled? If true, then a 1 pixel * fully transparent black border will be added around the canvas, * effectively reducing the usable canvas by 2 pixels horizontally and * vertically. * * Can only be set on CanvasViewport creation. */ readonly preventAtlasBleeding: boolean; /** * Has the "real" size of the child Widget in the canvas shrunk? Used for * texture bleeding prevention. For internal use only. * * Will be ignored if {@link CanvasViewport#preventBleeding} is false. */ private shrunk; /** The list of dirty rectangles, relative to the internal canvas. */ private readonly dirtyRects; /** * Creates a new canvas with a starting width and height, setting * {@link CanvasViewport#canvas} and {@link Viewport#context}. Failure to * get a canvas context results in an exception. * * Texture bleeding prevention should be enabled for CanvasViewports that * are used as the output (top-most) Viewport, but only if the Viewport will * be used in a 3D engine. If used in, for example, a {@link DOMRoot}, then * there should be no texture bleeding issues, so texture bleeding * prevention is disabled for DOMRoots. For engines like Wonderland Engine, * texture bleeding prevention is enabled. * * Should not be used in nested Viewports as there are no texture bleeding * issues in nested Viewports; it technically can be enabled, but it would * be a waste of resources. */ constructor(child: Widget, resolution?: number, preventBleeding?: boolean, preventAtlasBleeding?: boolean, startingWidth?: number, startingHeight?: number); /** * The maximum width the {@link CanvasViewport#canvas} can have. If the * layout exceeds this width, then the content will be scaled to fit the * canvas. * * Non-integer numbers will be rounded. */ get maxCanvasWidth(): number; set maxCanvasWidth(maxCanvasWidth: number); /** * The maximum height the {@link CanvasViewport#canvas} can have. If the * layout exceeds this height, then the content will be scaled to fit the * canvas. * * Non-integer numbers will be rounded. */ get maxCanvasHeight(): number; set maxCanvasHeight(maxCanvasHeight: number); /** * The current dimensions of the * {@link CanvasViewport#canvas | internal canvas} */ get canvasDimensions(): [number, number]; /** * The current usable dimensions of the * {@link CanvasViewport#canvas | internal canvas}. If * {@link CanvasViewport#preventAtlasBleeding} is false, then this will be * equivalent to {@link CanvasViewport#canvasDimensions}. */ get usableCanvasDimensions(): [number, number]; /** * The usable maximum width of the * {@link CanvasViewport#canvas | internal canvas}. If * {@link CanvasViewport#preventAtlasBleeding} is false, then this will be * equivalent to {@link CanvasViewport#maxCanvasWidth}. */ get usableMaxCanvasWidth(): number; /** * The usable maximum height of the * {@link CanvasViewport#canvas | internal canvas}. If * {@link CanvasViewport#preventAtlasBleeding} is false, then this will be * equivalent to {@link CanvasViewport#maxCanvasHeight}. */ get usableMaxCanvasHeight(): number; /** * Resolves the Viewport child's layout (including position) in one call, * using the previous position. * * May resize or rescale the canvas. * * Expands {@link CanvasViewport#canvas} if the new layout is too big for * the current canvas. Expansion is done in powers of 2 to avoid issues with * external 3D libraries. * * @returns Returns true if the widget or canvas were resized, or the canvas rescaled, else, false. */ resolveLayout(): boolean; get effectiveScale(): [scaleX: number, scaleY: number]; /** * The "real" dimensions of the child Widget; the dimensions that the child * Widget occupies in the canvas, taking resolution and maximum canvas * dimensions into account. */ private get realDimensions(); /** * Add a clipping rectangle to the internal canvas context. */ private clipToRect; /** * Merge all overlapping dirty rectangles and clear the dirty rectangle * list. * * @returns Returns the list of merged rectangles. */ protected mergedDirtyRects(): Array<Rect>; /** * Implements {@link Viewport#paint}, but only paints to the * {@link CanvasViewport#canvas | internal canvas}. Call this instead of * {@link Viewport#paint} if you are using this Viewport's canvas as the * output canvas (such as in the {@link Root}). */ paintToInternal(): null | Array<Rect>; paint(extraDirtyRects: Array<Rect>): boolean; protected pushDirtyRects(rects: Array<Rect>): void; protected pushDirtyRect(rect: Rect): void; markDirtyRect(rect: Rect): void; markWholeAsDirty(): void; }