A widget which displays a line of text.

Hierarchy

Constructors

Properties

_dirty: boolean = true

Widget will only be painted if dirty is true.

_flex: number

flex but for internal use.

_layoutDirty: boolean = true

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

_parent: null | Widget = null

The parent Widget of this widget.

Widgets not 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 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 viewport.

Widgets not 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 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 x.

needsClear: boolean

Widget will have its background automatically cleared when painting if needsClear is true. The background fill style used is canvasFill.

propagatesEvents: boolean

Widget will get targetted events even if the target is not itself if it this is true. Useful for implementing container widgets.

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.

wrapText: boolean

Is text wrapping enabled? If not, text will clipped on overflow

Decorator

@layoutField

x: number = 0

Absolute horizontal offset of widget in pixels.

y: number = 0

Absolute vertical offset of widget in pixels.

Accessors

  • get active(): boolean
  • Public getter for _active. Can only be updated by calling 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 blinkRate(): number
  • The blink rate of text cursors in text input widgets like TextInput. Value in "blinks" per second.

    Returns number

  • set blinkRate(value: undefined | number): 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: undefined | number): 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: undefined | string): 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: undefined | null | number): 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: undefined | null | number): 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: undefined | number): 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: undefined | number): void
  • The length in pixels used for Checkbox.

    Parameters

    • value: undefined | number

    Returns void

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

    Returns number

  • set cursorThickness(value: undefined | number): 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, paint will do nothing and dirty will be false even if _dirty is true.

    Usually becomes true when containers overflow.

    Returns boolean

  • get enabled(): boolean
  • Returns boolean

  • set enabled(enabled: boolean): void
  • Is this widget enabled? If it isn't, it will act as if it doesn't exist.

    If getting, _enabled is returned.

    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: undefined | Theme): 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 _layoutDirty to true.

    Returns number

  • set flex(flex: number): void
  • Parameters

    • flex: number

    Returns void

  • get idealDimensions(): [number, number]
  • Get the resolved ideal dimensions. Returns a 2-tuple containing idealWidth and idealHeight.

    Use this for layout calculations, and dimensions for painting.

    Returns [number, number]

  • get idealPosition(): [number, number]
  • Get the resolved ideal position. Returns a 2-tuple containing idealX and idealY.

    Use this for layout calculations, and position for painting.

    Returns [number, number]

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

    Returns number

  • set inputTextAlign(value: undefined | number): 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: undefined | null | number): 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 inputTextInnerPadding(): number
  • The Padding between text and border used for text input widgets like TextInput.

    Returns number

  • set inputTextInnerPadding(value: undefined | number): void
  • The Padding between text and border used for text input widgets like TextInput.

    Parameters

    • value: undefined | number

    Returns void

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

    Returns number

  • set inputTextMinWidth(value: undefined | number): 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: undefined | null | number): 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 multiContainerSpacing(): number
  • The spacing length between widgets in MultiContainer.

    Returns number

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

    Parameters

    • value: undefined | number

    Returns void

  • get position(): [number, number]
  • Get the resolved position. Returns a 2-tuple containing x and y.

    Use idealPosition for layout calculations.

    Returns [number, number]

  • 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: undefined | number): 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: undefined | number): 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: undefined | number): 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 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 updateActiveState.

    Marks dirty and layoutDirty as true.

    Returns void

  • Called when the Widget is attached to a UI tree. Should only be overridden by container widgets to attach children or for resource management, but super.attach must still be called.

    If the widget is already in a UI tree (already has a parent or is the root Widget, both checked via attached), then this method will throw an exception; a Widget cannot be in multiple UI trees.

    Parameters

    • root: Root

      The Root of the UI tree

    • viewport: Viewport

      The Viewport in this part of the UI tree. A UI tree can have multiple nested Viewports due to ViewportWidget

    • parent: null | Widget

      The new parent of this Widget. If null, then this Widget has no parent and is the root Widget

    Returns void

  • Paiting utility: clears background of widget. Should not be overridden.

    Rounds to nearest pixels; no subpixel clearing.

    The background fill style used is canvasFill.

    Parameters

    • x: number
    • y: number
    • width: number
    • height: number
    • fillStyle: null | string | CanvasGradient | CanvasPattern = null

      The fill style to use for clearing. If null (default), then the value of canvasFill is used

    Returns void

  • Paiting utility: start a clear operation with no clipping path, the user has to add their own paths to the context. Should not be overridden.

    Parameters

    • fillStyle: null | string | CanvasGradient | CanvasPattern = null

      The fill style to use for clearing. If null (default), then the value of canvasFill is used

    Returns void

  • Called when the Widget is no longer active. Should be overridden for resource management, but super.deactivate must be called.

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

    Marks dirty and layoutDirty as true, and drops all foci set to this Widget if the Widget is attached.

    Returns void

  • Called when the Widget is detached from a UI tree. Should only be overridden by container widgets to detach children or for resource management, but super.detach must still be called.

    Sets _root, _viewport and _parent to null.

    Drops all foci set to this Widget.

    If the widget was not in a UI tree, then an exception is thrown.

    Returns void

  • Called when an event is passed to the Widget. 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 handleEvent method is called and its result is returned. Must not be overridden.

    Returns

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

    Parameters

    Returns null | Widget

  • Unset this widget's dirty flag. Call this when painting a child that you know will not be visible, such as if clipping and the child is out of bounds. If implementing a container widget, override this so that each child widget's dryPaint method is called.

    Returns void

  • Sets x, y, width and y from idealX, idealY, idealWidth and idealHeight by rounding them. If the final values have changed, _dirty is set to true.

    Can be overridden, but super.finalizeBounds must still be called; if you have parts of the widget that can be pre-calculated when the layout is known, such as the length and offset of a Checkbox, or non-default dirty flags, such as backgroundDirty, then this is the perfect method to override, since it's only called after the layout is resolved to final (non-ideal) values, is only called if needed (unlike postLayoutUpdate, which is always called after the layout phase) and can be used to compare old and new positions and dimensions.

    Abstract container widgets such as Parent must always override this and call finalizeBounds on each child widget.

    Returns void

  • Force the widget to be fully re-painted and (by default) have layout resolved. For internal use only or for use by Parent widgets so that children get properly marked as dirty when added to a new container after reuse.

    Should be overridden if the derived Widget has more dirty flags other than the default ones (such as backgroundDirty), but super.forceDirty must be called.

    Parameters

    • markLayout: boolean = true

    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 targetted at itself.

    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 TabSelect event may be captured and result in weird behaviour when the user attempts to use tab to select another widget.

    Parameters

    Returns null | Widget

  • Widget painting callback. By default does nothing. Do painting logic here when extending Widget. Even if _dirty is false, if this method is called, then the widget must still be painted. Should be overridden.

    Parameters

    • _forced: boolean

      Was this widget force-painted? If calling a child's paint method, propagate this value

    Returns void

  • Resolve dimensions of this widget. Must be implemented; set width and height.

    Parameters

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

    Returns void

  • 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 is dirty and the Root is being rendered. Does nothing if dirty flag is not set, else, clears the background if needsClear is true, calls the handlePainting method and unsets the dirty flag. Automatically calls dryPaint if dimensionless is true. Must not be overridden.

    Parameters

    • force: boolean = false

      Force re-paint even if _dirty is false

    Returns void

  • Painting utility: paints a circle. Should not be overridden. Coordinates are relative to the center of the circle. Uses ctx's current fillStyle. Does not restore the context state after finishing.

    Parameters

    • x: number
    • y: number
    • radius: number

    Returns void

  • Wrapper for handleResolveDimensions. Does nothing if _enabled is false. If the resolved dimensions change, _dirty is set to true. _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

  • Like resolveDimensions but for widgets at the top of the widget tree (the child of the Root). This retries dimension resolving if there is at least one unconstrained axis so that flex layout works even in infinite layout.

    Parameters

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

    Returns void

  • Set the ideal position of this widget (idealX and 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 active state of the Widget. If the active state changes from false to true, then activate is called. If the active state changes from true to false, then 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

    Returns true if the active state changed.

    Returns boolean

Generated using TypeDoc