A widget which displays a line of text.

Can be updated, but this is done manually via the Label#text accessor.

Hierarchy (view full)

Constructors

Properties

Accessors

Methods

Constructors

Properties

_flex: number

Widget#flex but for internal use.

_flexBasis: null | number

Widget#flexBasis but for internal use.

_flexShrink: number

Widget#flexShrink but for internal use.

_layoutDirty: boolean = true

If this is true, widget needs their layout resolved. If implementing a container, propagate this up.

_maxHeight: number

Widget#maxHeight but for internal use.

_maxWidth: number

Widget#maxWidth but for internal use.

_minHeight: number

Widget#minHeight but for internal use.

_minWidth: number

Widget#minWidth but for internal use.

_parent: null | Widget = null

The parent Widget of this widget.

Widgets not Widget#attached to a UI tree will have this property set to null, but root widgets will also have a null parent.

_root: null | Root = null

The Root that this widget is currently inside.

Widgets not Widget#attached to a UI tree will have this property set to null.

_viewport: null | Viewport = null

The Viewport that this widget is currently painting to. A UI tree can have multiple Viewports due to ViewportWidget, so this is not equivalent to Root#viewport.

Widgets not Widget#attached to a UI tree will have this property set to null.

height: number = 0

Height of widget in pixels.

idealHeight: number = 0

The ideal height of the widget in pixels. See Widget#width.

idealWidth: number = 0

The ideal width of the widget in pixels; if non-integer widget dimensions were allowed, the widget would have this size. Use this for layout calculations, but never use this for painting so that subpixel issues are avoided.

idealX: number = 0

The ideal absolute horizontal offset of the widget in pixels; if non-integer positions were allowed, the widget would have this position. Use this for layout calculations, but never use this for painting so that subpixel issues are avoided.

idealY: number = 0

The ideal absolute vertical offset of the widget in pixels. See Widget#x.

tabFocusable: boolean = false

Can this widget be focused by pressing tab?

textHelper: TextHelper

The helper for measuring/painting text

width: number = 0

Width of widget in pixels.

wrapMode: WrapMode

Text wrapping mode. Used to control what happens when the text is too big to fit in the label. Uses shrink-wrapping by default.

x: number = 0

Absolute horizontal offset of widget in pixels.

y: number = 0

Absolute vertical offset of widget in pixels.

autoXML: WidgetAutoXML = ...

Input mapping for automatically generating a widget factory for a BaseXMLUIParser with BaseXMLUIParser#autoRegisterFactory. If null, then BaseXMLUIParser#registerFactory must be manually called by the user.

This static property must be overridden by a concrete child class if you want to provide auto-factory support.

Accessors

  • get active(): boolean
  • Is the Widget attached to a UI tree, enabled and in a UI sub-tree where all ascendants are enabled?

    Can only be updated by calling Widget#updateActiveState, although this should never be done manually; only done automatically by container Widgets and Roots.

    Returns boolean

  • get attached(): boolean
  • Check if this Widget is attached to a UI tree. If not, then this Widget must not be used. Must not be overridden.

    Returns boolean

  • get backgroundFill(): FillStyle
  • The background fill style. Used for widgets with a background (as in, a background above the canvas background).

    Returns FillStyle

  • set backgroundFill(value): void
  • The background fill style. Used for widgets with a background (as in, a background above the canvas background).

    Parameters

    Returns void

  • get blinkRate(): number
  • The blink rate of text cursors in text input widgets like TextInput. Value in "blinks" per second.

    Returns number

  • set blinkRate(value): void
  • The blink rate of text cursors in text input widgets like TextInput. Value in "blinks" per second.

    Parameters

    • value: undefined | number

    Returns void

  • get bodyTextAlign(): number
  • The default text alignment mode of body text (most regular text).

    Returns number

  • set bodyTextAlign(value): void
  • The default text alignment mode of body text (most regular text).

    Parameters

    • value: undefined | number

    Returns void

  • get bodyTextFont(): string
  • The font style used for body text (most regular text).

    Returns string

  • set bodyTextFont(value): void
  • The font style used for body text (most regular text).

    Parameters

    • value: undefined | string

    Returns void

  • get bodyTextHeight(): null | number
  • The height of each line of text in body text (most regular text). If null, it will be automatically detected.

    Returns null | number

  • set bodyTextHeight(value): void
  • The height of each line of text in body text (most regular text). If null, it will be automatically detected.

    Parameters

    • value: undefined | null | number

    Returns void

  • get bodyTextSpacing(): null | number
  • The spacing between each line of text in body text (most regular text). If null, it will be automatically detected.

    Returns null | number

  • set bodyTextSpacing(value): void
  • The spacing between each line of text in body text (most regular text). If null, it will be automatically detected.

    Parameters

    • value: undefined | null | number

    Returns void

  • get checkboxInnerPadding(): number
  • The Padding used for Checkbox between the accent box shown when ticked and the background box.

    Returns number

  • set checkboxInnerPadding(value): void
  • The Padding used for Checkbox between the accent box shown when ticked and the background box.

    Parameters

    • value: undefined | number

    Returns void

  • get checkboxLength(): number
  • The length in pixels used for Checkbox.

    Returns number

  • set checkboxLength(value): void
  • The length in pixels used for Checkbox.

    Parameters

    • value: undefined | number

    Returns void

  • get cursorIndicatorSize(): number
  • The side length of a text cursor's indicator in pixels. For now there is only a tab mode indicator.

    Returns number

  • set cursorIndicatorSize(value): void
  • The side length of a text cursor's indicator in pixels. For now there is only a tab mode indicator.

    Parameters

    • value: undefined | number

    Returns void

  • get cursorThickness(): number
  • The thickness of a text cursor in pixels.

    Returns number

  • set cursorThickness(value): void
  • The thickness of a text cursor in pixels.

    Parameters

    • value: undefined | number

    Returns void

  • get dimensionless(): boolean
  • Check if the widget has zero width or height. If true, then Widget#paint will do nothing, which usually happens when containers overflow.

    Returns boolean

  • get enabled(): boolean
  • Returns boolean

  • set enabled(enabled): void
  • Is this widget enabled? If it isn't, it will act as if it doesn't exist, but will still be present in the UI tree.

    Parameters

    • enabled: boolean

    Returns void

  • get fallbackTheme(): undefined | Theme
  • The fallback theme. If this theme has a missing property, the fallback theme's property will be used instead. This will automatically (un)subscribe to/from the fallback theme.

    Returns undefined | Theme

  • set fallbackTheme(newTheme): void
  • Parameters

    • newTheme: undefined | Theme

    Returns void

  • get flex(): number
  • How much this widget will expand relative to other widgets in a flexbox container. If changed, sets Widget#_layoutDirty to true.

    Returns number

  • set flex(flex): void
  • Parameters

    • flex: number

    Returns void

  • get flexBasis(): null | number
  • The starting length of this widget when inside a flexbox, which overrides the intrinsic length of this widget (the natural length of the content). If null (default), then the widget's intrinsic length will be used. If changed, sets Widget#_layoutDirty to true.

    Note that, if set, minimum and maximum self-constraints will still be respected.

    Returns null | number

  • set flexBasis(flexBasis): void
  • Parameters

    • flexBasis: null | number

    Returns void

  • get flexShrink(): number
  • How much this widget will shrink relative to other widgets in a flexbox container if the maximum size is exceeded. If changed, sets Widget#_layoutDirty to true.

    Returns number

  • set flexShrink(flexShrink): void
  • Parameters

    • flexShrink: number

    Returns void

  • get id(): null | string
  • The unique ID of this Widget. If the Widget has no ID, this value will be null. Uniqueness is tested per-UI tree; ID uniqueness is enforced when the ID is changed or when the Widget is attached to a Root.

    If the ID is already taken, setting the ID will have no effect and an error will be thrown.

    Returns null | string

  • set id(id): void
  • Parameters

    • id: null | string

    Returns void

  • get inputTextAlign(): number
  • The default text alignment mode of text input widgets like TextInput.

    Returns number

  • set inputTextAlign(value): void
  • The default text alignment mode of text input widgets like TextInput.

    Parameters

    • value: undefined | number

    Returns void

  • get inputTextHeight(): null | number
  • The height of each line of text in input widgets like TextInput. If null, it will be automatically detected.

    Returns null | number

  • set inputTextHeight(value): void
  • The height of each line of text in input widgets like TextInput. If null, it will be automatically detected.

    Parameters

    • value: undefined | null | number

    Returns void

  • get inputTextMinWidth(): number
  • The default minimum width of text input widgets like TextInput.

    Returns number

  • set inputTextMinWidth(value): void
  • The default minimum width of text input widgets like TextInput.

    Parameters

    • value: undefined | number

    Returns void

  • get inputTextSpacing(): null | number
  • The spacing between each line of text in input widgets like TextInput. If null, it will be automatically detected.

    Returns null | number

  • set inputTextSpacing(value): void
  • The spacing between each line of text in input widgets like TextInput. If null, it will be automatically detected.

    Parameters

    • value: undefined | null | number

    Returns void

  • get maxHeight(): number
  • Maximum height of widget. Defaults to Infinity. If changed, sets Widget#_maxHeight to true.

    Returns number

  • set maxHeight(maxHeight): void
  • Parameters

    • maxHeight: number

    Returns void

  • get maxWidth(): number
  • Maximum width of widget. Defaults to Infinity. If changed, sets Widget#_maxWidth to true.

    Returns number

  • set maxWidth(maxWidth): void
  • Parameters

    • maxWidth: number

    Returns void

  • get multiContainerSpacing(): number
  • The spacing length between widgets in MultiContainer.

    Returns number

  • set multiContainerSpacing(value): void
  • The spacing length between widgets in MultiContainer.

    Parameters

    • value: undefined | number

    Returns void

  • get scrollBarMinPercent(): number
  • The minimum length of the filled part of a ScrollableViewportWidget's scrollbar in percentage of total length.

    Returns number

  • set scrollBarMinPercent(value): void
  • The minimum length of the filled part of a ScrollableViewportWidget's scrollbar in percentage of total length.

    Parameters

    • value: undefined | number

    Returns void

  • get sliderMinLength(): number
  • The minimum length of a Slider

    Returns number

  • set sliderMinLength(value): void
  • The minimum length of a Slider

    Parameters

    • value: undefined | number

    Returns void

  • get sliderThickness(): number
  • The thickness of a Slider

    Returns number

  • set sliderThickness(value): void
  • The thickness of a Slider

    Parameters

    • value: undefined | number

    Returns void

Methods

  • Called after the Widget is attached to a UI tree, its parent is Widget#active (or Root is enabled if this is the top Widget), and the Widget itself is enabled; only called when all of the previous conditions are fulfilled, not when one of the conditions is fulfilled. Should be overridden for resource management, but super.activate must be called.

    Must not be propagated to children by container Widgets. This is already done automatically by Widget#updateActiveState.

    Marks Widget#layoutDirty as true, and marks the whole widget as dirty.

    Returns void

  • Called when an event is passed to the Widget. Must not be overridden. Dispatches to user event listeners first; if a user listener captures the event, then this is returned.

    For trickling events: Checks if the target matches the Widget, unless the Widget propagates events, or if the event is a PointerEvent and is in the bounds of the Widget. If neither of the conditions are true, the event is not captured (null is returned), else, the Widget#handleEvent method is called and its result is returned.

    For bubbling or sticky events: Passes the event to the handleEvent method and returns the result.

    Parameters

    Returns null | Widget

    Returns the widget that captured the event or null if none captured the event.

  • Called when the Widget is attached to a UI tree. Must be overridden by container widgets to attach children or for resource management, but child.attach must be called instead of child.handleAttachment.

    Note that, to call attach on a child widget, you need a root, viewport and parent. The parent would be this, but the root and viewport are not passed to this method, unlike in attach. This is because most of the time you won't be implementing a container widget, so these parameters are just an unnecessary hassle. Get them from this.root and this.viewport instead (or this._root and this._viewport), respectively.

    super.handleAttachment doesn't have to be called and does nothing by default, unless you are deriving a class that has overridden this method. If you're not sure, it's safe to call super anyway.

    Returns void

  • Called when the Widget is detached from a UI tree. Must be overridden by container widgets to detach children or for resource management, but child.detach must be called instead of child.handleDetachment.

    super.handleDetachment doesn't have to be called and does nothing by default, unless you are deriving a class that has overridden this method. If you're not sure, it's safe to call super anyway.

    Returns void

  • Widget event handling callback. If the event is to be captured, the capturer is returned, else, null.

    By default, this will do nothing and capture the event if it is targeted at itself. Bubbling events will be automatically dispatched to the parent or root. Sticky events will be ignored.

    If overriding, return the widget that has captured the event (could be this, for example, or a child widget if implementing a container), or null if no widget captured the event. Make sure to not capture any events that you do not need, or you may have unexpected results; for example, if you capture all dispatched events indiscriminately, a TabSelectEvent event may be captured and result in weird behaviour when the user attempts to use tab to select another widget.

    Parent widgets should dispatch TricklingEvents to children. All widgets should dispatch BubblingEvents to the Widget#parent or Widget#root, if available. StickyEvents should never be dispatched to children or parents.

    Note that bubbling events captured by a Root will return null, since there is no capturing Widget.

    Since the default handleEvent implementation already correctly handles bubbling and sticky events, it's a good idea to call super.handleEvent on these cases to avoid rewriting code, after transforming the event if necessary.

    Parameters

    Returns null | Widget

  • Widget painting callback. Should be overridden; does nothing by default. Do painting logic here when extending Widget.

    It's safe to repaint the whole widget even if only a part of the widget is damaged, since the painting is automatically clipped to the damage regions, however, it's preferred to only repaint the damaged parts for performance reasons.

    All passed dirty rectangles intersect the widget, have an area greater than 0, and are clamped to the widget bounds.

    The painting logic of this widget can modify the rendering context in a way that changes rendering for its children, however, the context must be kept clean for the parent of this widget; operations like clipping for children are OK, but make sure to restore the context to a state with no clipping when the painting logic is finished. This does not apply to some basic context properties such as fillStyle or strokeStyle; you are expected to set these on every handlePainting, do not assume the state of these properties.

    Parameters

    Returns void

  • Mark a part of this widget as dirty. The dirty rectangle will be propagated via ascendant widgets until it reaches a CanvasViewport.

    If the widget is not active, then this method call is ignored.

    Must not be overridden; you probably want to override Widget#propagateDirtyRect instead.

    Parameters

    Returns void

  • Listen to a specific event with a user listener. Only events that pass through this widget will be listened. Chainable.

    Parameters

    • eventType: string

      The WidgetEvent#"type" to listen to

    • listener: WidgetEventListener

      The user-provided callback that will be invoked when the event is listened

    • once: boolean = false

      Should the listener only be invoked once? False by default

    Returns this

  • Similar to Widget#on, but any event type invokes the user-provided callback, the listener can't be invoked only once, and the listener is called with a lower priority than specific event listeners. Chainable.

    Parameters

    • listener: WidgetEventListener

      The user-provided callback that will be invoked when a event is listened

    Returns this

  • Called when the fallback theme changes. Does nothing by default.

    Parameters

    • property: null | string = null

      The property name of the theme property that was updated. If a general theme update, then this will be null and all theme properties should be treated as changed.

    Returns void

  • Called when the Widget needs to be re-painted and the Root is being rendered. Does nothing if none of the dirty rectangles intersect the widget or the widget is Widget#dimensionless, else, calls the Widget#handlePainting method. Must not be overridden.

    Parameters

    • dirtyRects: Rect[]

      The damaged regions that need to be re-painted, as a list of dirty rectangles

    Returns void

  • Propagate a dirty rectangle from a child widget to the parent.

    Should be overridden by Widgets that transform their children, to correct the position and dimensions of the dirty rectangle.

    Parameters

    Returns void

  • Query the position of a point as if it were in the same coordinate origin as an ascendant widget (or the root). Call this from a child widget.

    Useful for reversing transformations made by ascendant widgets.

    Must be overridden by widgets that transform children or that have a different coordinate origin.

    Parameters

    • x: number
    • y: number
    • relativeTo: null | Widget = null

    Returns [x: number, y: number]

  • Query the position of a point as if it were in the same coordinate origin as an ascendant widget (or the root).

    Useful for reversing transformations made by ascendant widgets.

    Must not be overridden.

    Parameters

    • x: number
    • y: number
    • relativeTo: null | Widget = null

    Returns [x: number, y: number]

  • Query the position and dimensions of a rectangle as if it were in the same coordinate origin as an ascendant widget (or the root). Call this from a child widget.

    Useful for reversing transformations made by ascendant widgets.

    Must be overridden by widgets that transform children or that have a different coordinate origin.

    Parameters

    Returns Rect

  • Query the position and dimensions of a rectangle as if it were in the same coordinate origin as an ascendant widget (or the root).

    Useful for reversing transformations made by ascendant widgets.

    Must not be overridden.

    Parameters

    Returns Rect

  • Wrapper for Widget#handleResolveDimensions. Does nothing if Widget#enabled is false. If the resolved dimensions change, the widget is marked as dirty. Widget#_layoutDirty is set to false. If the widget is not loose and the layout has non-infinite max constraints, then the widget is stretched to fit max constraints. Must not be overridden.

    Parameters

    • minWidth: number
    • maxWidth: number
    • minHeight: number
    • maxHeight: number

    Returns void

  • Set the ideal position of this widget (Widget#idealX and Widget#idealY). Does not set any flags of the widget.

    Can be overridden, but super.resolvePosition must always be called, and the arguments must be preserved. Container widgets should override this method such that resolvePosition is called for each child of the container.

    Parameters

    • x: number
    • y: number

    Returns void

  • Update the Widget#active state of the Widget. If the active state changes from false to true, then Widget#activate is called. If the active state changes from true to false, then Widget#deactivate is called.

    Container Widgets must override this so that the active state of each child is updated, but super.updateActiveState must still be called. Each child's active state must only be updated if the container's active state changed; this is indicated by the return value of this method.

    Returns boolean

    Returns true if the active state changed.