lazy-widgets
Version:
Typescript retained mode GUI for the HTML canvas API
168 lines (167 loc) • 6.96 kB
TypeScript
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;
}