Class CanvasViewport

A 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 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.

Hierarchy (view full)

Constructors

  • Creates a new canvas with a starting width and height, setting CanvasViewport#canvas and 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 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.

    Parameters

    • child: Widget
    • resolution: number = 1
    • preventBleeding: boolean = false
    • preventAtlasBleeding: boolean = false
    • startingWidth: number = 64
    • startingHeight: number = 64

    Returns CanvasViewport

Properties

_forceResize: boolean = true

Does the canvas size need to be updated? For internal use only.

_maxCanvasHeight: number

Current maximum canvas height. For internal use only.

_maxCanvasWidth: number

Current maximum canvas width. For internal use only.

_prevESX: number = 1

Previous horizontal effective scale. For internal use only.

_prevESY: number = 1

Previous vertical effective scale. For internal use only.

canvas: HTMLCanvasElement

The internal canvas. Widgets are painted to this

child: Widget

The Viewport's child. Painting and layout will be relative to this.

constraints: LayoutConstraints

Layout constraints of viewport when resolving widget's layout. A 4-tuple containing, respectively, minimum width, maximum width, minimum height and maximum height.

By default, has no minimum width nor height and unconstrained maximum width and height.

context: CanvasRenderingContext2D

The render target's (canvas) 2D context. Alpha is enabled.

Note that readonly in this context means that this property is a getter, not that it is immutable. Ideally, this is a getter that gets the current rendering context. Some Viewport implementations (such as CanvasViewport) will always use the same context, while others (such as ClippedViewport) will occasionally change the context.

dirtyRects: Rect[] = []

The list of dirty rectangles, relative to the internal canvas.

forceRelayout: boolean = true

Should the layout be resolved, even if the child widget doesn't have a dirty layout?

offset: [x: number, y: number]

The offset of the child inside the Viewport. Depending on the Viewport implementation, this may update the actual position of the child Widget, or it may just affect how the paint method behaves.

parent: null | Viewport = null

The parent Viewport of this Viewport. Since positions are relative to this, absolute positions can be calculated by following all the parents.

If null, this is the topmost Viewport and owned by the UI Root.

Should be set by the owner when the owner is attached or detached.

preventAtlasBleeding: 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.

preventBleeding: boolean

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 Viewport#child Widget is re-painted.

rect: Rect

The actual dimensions and position of the viewport, relative to the parent Viewport (or the UI Root if there is no parent Viewport, meaning that positions are absolute in that case); for example, this would be the equivalent to an iframe's dimensions and position (the HTML body in the iframe can have different dimensions than the iframe itself and be scrolled by some amount).

Do not use this value for resolving the layout. Only use this for event handling or other logic that doesn't affect layout.

Should be set by the owner of the Viewport (a Root or a ViewportWidget) when finalizing layout.

relativeCoordinates: boolean

The coordinate system used for this Viewport. If true, then coordinates are relative to the Viewport itself (Viewport#child always has a position of 0,0). If false, then coordinates are absolute (relative to the nearest relative parent Viewport, or topmost Viewport, or 0,0 if this is the topmost Viewport).

resolution: number

The resolution of the canvas. If possible, the canvas will be scaled by this amount.

shrunk: boolean = false

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 CanvasViewport#preventBleeding is false.

dimensionlessWarned: boolean = false

Has the warning for dimensionless canvases been issued?

maxRelayout: number = 4

The maximum retries allowed for resolving the layout. The first attempt is not counted. Only retries that exceed this limit are discarded; if maxRelayout is 4, then the 5th retry will be discarded.

powerOf2Warned: boolean = false

Has the warning for non-power of 2 dimensions been issued?

Accessors

  • get effectiveScale(): [scaleX: number, scaleY: number]
  • Get the canvas scale that will be applied to the Viewport's child. Used for checking whether a child's dimensions exceeds a canvas' maximum dimensions.

    Note that readonly in this context means that this property is a getter, not that it is immutable. Ideally, this is a getter that calculates the effective scale of the viewport via the canvas dimensions and max dimensions, which may returns different values, not the same value every time.

    Returns [scaleX: number, scaleY: number]

  • get realDimensions(): [width: number, height: 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.

    Returns [width: number, height: number]

Methods

  • Merge all overlapping dirty rectangles and clear the dirty rectangle list.

    Returns Rect[]

    Returns the list of merged rectangles.

  • Paint the Viewport#child to the Viewport#context and, if it makes sense to do so, paint to the Viewport#parent Viewport's context.

    Nothing is done if the child was not re-painted.

    Note that, unlike other Viewport implementations, this implementation doesn't actually need to have extraDirtyRects passed; an empty array will suffice, assuming you're marking dirty regions with CanvasViewport#pushDirtyRects.

    Parameters

    • _extraDirtyRects: readonly Rect[]

      Ignored in this Viewport implementation, but would otherwise have the damage regions that need to be repainted.

    Returns boolean

    Returns true if the child was re-painted, else, false.

  • Resolves the Viewport child's layout (including position) in one call, using the previous position.

    May resize or rescale the canvas.

    Expands 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 boolean

    Returns true if the widget or canvas were resized, or the canvas rescaled, else, false.