Class UIComponent`Abstract`

Base abstract class for all UI components Provides box model, layout, and rendering functionality.

Implements IFlexLayoutParticipant for integration with the new flex layout system. Components can be added to a LayoutTree for automatic layout management.

IMPORTANT: UI components use a two-phase lifecycle:

Construction - creates the component structure
layout() - measures and positions internal elements

When using FlexContainer, layout() is called automatically on children. When adding directly to a PIXI.Container, you MUST call layout() manually:

const btn = new UIButton({ label: 'Click', width: 100, height: 32 });
btn.layout(100, 32);  // Required for label to render!
pixiContainer.addChild(btn.container);

Hierarchy (View Summary)

UIComponent

Implements

IFlexLayoutParticipant

Index

Constructors

constructor

new UIComponent(boxModel?: Partial<BoxModel>): UIComponent
Parameters
- OptionalboxModel: Partial<BoxModel>
Returns UIComponent
- Defined in base/ui-component.ts:175

Properties

`Protected`boxModel

boxModel: BoxModel

The box model defining this component's sizing and spacing

`Protected`computedLayout

computedLayout: ComputedLayout

The computed layout after measurement and positioning

container

container: Container

The PIXI container that holds this component's visual representation

enabled

enabled: boolean = true

Whether this component is enabled for interaction

`Protected`focused

focused: boolean = false

Internal focus state

`Protected` `Optional`focusRing

focusRing?: Graphics

Focus ring for visual focus indication

`Protected` `Optional`fontConfig

fontConfig?: UIFontConfig

Font configuration for this component. Children inherit these settings (like CSS font inheritance). Set via setFontConfig() and resolved via getInheritedFont* methods.

`Protected`hovered

hovered: boolean = false

Hover state (for components that track hover)

`Readonly`id

id: string

Unique identifier for this component in the layout tree

`Protected` `Optional`layoutConfig

layoutConfig?: UILayoutConfig

Layout configuration for this component. Children inherit these defaults unless overridden.

`Protected`layoutDirty

layoutDirty: boolean = true

Flag indicating if layout needs to be recalculated

`Protected`layoutEngine

layoutEngine: LayoutEngine

Layout engine service for calculating layouts Initialized in base class so all components have access to layout calculations

`Optional`parent

parent?: UIComponent

Reference to parent component (if any)

`Protected`pressed

pressed: boolean = false

Pressed state (for components that track press)

tabIndex

tabIndex: number = -1

Tab index for focus order (-1 means not focusable by tab)

`Protected` `Optional`themeResolver

themeResolver?: ThemeResolver

Optional theme resolver for color resolution Components can set this to enable automatic theming

visible

visible: boolean = true

Whether this component is currently visible

Accessors

layoutNode

get layoutNode(): LayoutNode
Get the layout node (IFlexLayoutParticipant)

Returns LayoutNode
Implementation of IFlexLayoutParticipant.layoutNode
- Defined in base/ui-component.ts:171

x

get x(): number
Gets the x position of this component

Returns number
- Defined in base/ui-component.ts:359
set x(value: number): void
Sets the x position of this component
Parameters
- value: number
Returns void
- Defined in base/ui-component.ts:366

y

get y(): number
Gets the y position of this component

Returns number
- Defined in base/ui-component.ts:374
set y(value: number): void
Sets the y position of this component
Parameters
- value: number
Returns void
- Defined in base/ui-component.ts:381

Methods

applyLayout

applyLayout(computed: FlexComputedLayout): void
Apply computed layout from the flex layout engine. Called after layout computation completes.

Updates both the internal computedLayout and PIXI container position.
Parameters
- computed: FlexComputedLayout
  The computed layout values
Returns void
Implementation of IFlexLayoutParticipant.applyLayout
- Defined in base/ui-component.ts:762

canFocus

canFocus(): boolean
Whether this component can receive focus

Returns boolean
- Defined in base/ui-component.ts:414

destroy

destroy(): void
Destroys this component and cleans up resources

Returns void
- Defined in base/ui-component.ts:794

getBoxModel

getBoxModel(): BoxModel
Gets the box model of this component

Returns BoxModel
- Defined in base/ui-component.ts:339

getFontConfig

getFontConfig(): UIFontConfig
Gets the font configuration for this component. Returns local config if set, otherwise undefined.

Returns UIFontConfig
- Defined in base/ui-component.ts:604

getGlobalBounds

getGlobalBounds(): { height: number; width: number; x: number; y: number }
Gets the global bounds of this component (position relative to stage)

Returns { height: number; width: number; x: number; y: number }
- Defined in base/ui-component.ts:346

`Protected`getInheritedFontFamily

getInheritedFontFamily(localOverride?: string): string
Gets the inherited font family (convenience method).
Parameters
- OptionallocalOverride: string
  Optional local override
Returns string
- Defined in base/ui-component.ts:671

`Protected`getInheritedFontSize

getInheritedFontSize(localOverride?: number): number
Gets the inherited font size (convenience method).
Parameters
- OptionallocalOverride: number
  Optional local override
Returns number
- Defined in base/ui-component.ts:688

`Protected`getInheritedFontType

getInheritedFontType(localOverride?: FontType): FontType
Gets the inherited font type (convenience method).
Parameters
- OptionallocalOverride: FontType
  Optional local override
Returns FontType
The resolved font type, defaults to 'canvas'
- Defined in base/ui-component.ts:680

`Protected`getInheritedTextColor

getInheritedTextColor(localOverride?: number): number
Gets the inherited text color (convenience method).
Parameters
- OptionallocalOverride: number
  Optional local override
Returns number
- Defined in base/ui-component.ts:696

getLayout

getLayout(): ComputedLayout
Gets the computed layout of this component

Returns ComputedLayout
- Defined in base/ui-component.ts:332

getLayoutConfig

getLayoutConfig(): UILayoutConfig
Gets the layout configuration for this component.

Returns UILayoutConfig
- Defined in base/ui-component.ts:711

`Protected`getThemeResolver

getThemeResolver(): ThemeResolver
Get theme resolver (creates default if none provided)

Returns ThemeResolver
- Defined in base/ui-component.ts:482

hide

hide(): void
Hides this component

Returns void
- Defined in base/ui-component.ts:406

`Protected`hideFocusRing

hideFocusRing(): void
Hides the focus ring

Returns void
- Defined in base/ui-component.ts:473

isFocused

isFocused(): boolean
Whether this component is currently focused

Returns boolean
- Defined in base/ui-component.ts:421

layout

layout(availableWidth: number, availableHeight: number): void
Performs layout for this component within the given available space Default implementation uses LayoutEngine. Override if custom layout logic is needed.
Parameters
- availableWidth: number
  Available width in pixels
- availableHeight: number
  Available height in pixels
Returns void
- Defined in base/ui-component.ts:295

`Protected`makeInteractive

makeInteractive(cursor?: string): void
Helper to make container interactive with common settings Components can call this in setupInteractivity() or override for custom behavior
Parameters
- cursor: string = 'pointer'
  Cursor type ('pointer', 'text', 'default', etc.)
Returns void
- Defined in base/ui-component.ts:534

markLayoutDirty

markLayoutDirty(): void
Marks this component's layout as dirty, requiring recalculation

Returns void
- Defined in base/ui-component.ts:318

`Abstract`measure

measure(): MeasuredSize
Measures the size this component needs Must be implemented by subclasses

Returns MeasuredSize
The measured width and height
- Defined in base/ui-component.ts:286

measureContent

measureContent(): { height: number; width: number }
Measure the intrinsic content size of this component. Called by the flex layout engine during Pass 2 (measure).

Override in subclasses that have intrinsic content size. For containers that size based on children, return { width: 0, height: 0 }.

Returns { height: number; width: number }
The content size in pixels
Implementation of IFlexLayoutParticipant.measureContent
- Defined in base/ui-component.ts:748

onBlur

onBlur(): void
Called when component loses focus Override in subclasses to customize blur behavior

Returns void
- Defined in base/ui-component.ts:465

onFocus

onFocus(): void
Called when component receives focus Override in subclasses to customize focus behavior

Returns void
- Defined in base/ui-component.ts:429

`Protected` `Abstract`render

render(): void
Renders the component's visuals Called after layout is complete

Returns void
- Defined in base/ui-component.ts:313

`Protected`resolveCheckmarkColor

resolveCheckmarkColor(override?: number): number
Resolve checkmark color with optional override
Parameters
- Optionaloverride: number
Returns number
- Defined in base/ui-component.ts:524

`Protected`resolveColor

resolveColor(
    type:
        | "background"
        | "border"
        | "text"
        | "focus"
        | "disabled"
        | "selected"
        | "hover",
    override?: number,
): number
Resolve a color from theme with optional override Simplifies color resolution across all components
Parameters
- type: "background" | "border" | "text" | "focus" | "disabled" | "selected" | "hover"
- Optionaloverride: number
Returns number
- Defined in base/ui-component.ts:496

`Protected`resolveControlColor

resolveControlColor(
    controlType:
        | "button"
        | "select"
        | "checkbox"
        | "textInput"
        | "textArea"
        | "radio",
    type: "background" | "border" | "text",
    override?: number,
): number
Resolve a control-specific color with optional override
Parameters
- controlType: "button" | "select" | "checkbox" | "textInput" | "textArea" | "radio"
- type: "background" | "border" | "text"
- Optionaloverride: number
Returns number
- Defined in base/ui-component.ts:503

`Protected`resolveInheritedFont

resolveInheritedFont<K extends keyof UIFontConfig>(
key: K,
localOverride?: UIFontConfig[K],
): UIFontConfig[K]
Resolves a font setting by walking up the parent chain. Like CSS inheritance - returns local value if set, otherwise inherits from parent.
Type Parameters
- K extends keyof UIFontConfig
Parameters
- key: K
  The font config key to resolve
- OptionallocalOverride: UIFontConfig[K]
  Optional local override value
Returns UIFontConfig[K]
The resolved value or undefined
- Defined in base/ui-component.ts:655

`Protected`resolveInheritedLayoutParam

resolveInheritedLayoutParam<K extends keyof UILayoutConfig>(
key: K,
localOverride?: UILayoutConfig[K],
): UILayoutConfig[K]
Resolves a layout setting by walking up the parent chain. Allows components to adapt to their context (e.g. using parent's default padding).
Type Parameters
- K extends keyof UILayoutConfig
Parameters
- key: K
  The layout config key to resolve
- OptionallocalOverride: UILayoutConfig[K]
  Optional local override value
Returns UILayoutConfig[K]
The resolved value or undefined
- Defined in base/ui-component.ts:723

`Protected`resolvePlaceholderColor

resolvePlaceholderColor(override?: number): number
Resolve placeholder color with optional override
Parameters
- Optionaloverride: number
Returns number
- Defined in base/ui-component.ts:517

`Protected`resolveTextColor

resolveTextColor(override?: number): number
Resolve text color with optional override
Parameters
- Optionaloverride: number
Returns number
- Defined in base/ui-component.ts:510

setAlignSelf

setAlignSelf(align: "auto" | "center" | "end" | "start" | "stretch"): void
Sets align-self property
Parameters
- align: "auto" | "center" | "end" | "start" | "stretch"
Returns void
- Defined in base/ui-component.ts:577

setFlex

setFlex(props: FlexProps): void
Sets flex properties for this component
Parameters
- props: FlexProps
Returns void
- Defined in base/ui-component.ts:542

setFlexBasis

setFlexBasis(basis: number | "auto"): void
Sets flex basis
Parameters
- basis: number | "auto"
Returns void
- Defined in base/ui-component.ts:568

setFlexGrow

setFlexGrow(grow: number): void
Sets flex grow factor
Parameters
- grow: number
Returns void
- Defined in base/ui-component.ts:550

setFlexShrink

setFlexShrink(shrink: number): void
Sets flex shrink factor
Parameters
- shrink: number
Returns void
- Defined in base/ui-component.ts:559

setFontConfig

setFontConfig(config: UIFontConfig): void
Sets font configuration for this component. Children will inherit these settings (like CSS).
Parameters
- config: UIFontConfig
Returns void
- Defined in base/ui-component.ts:596

setLayoutConfig

setLayoutConfig(config: UILayoutConfig): void
Sets layout configuration for this component. Children will inherit these settings.
Parameters
- config: UILayoutConfig
Returns void
- Defined in base/ui-component.ts:704

setPosition

setPosition(x: number, y: number): void
Sets the position of this component
Parameters
- x: number
- y: number
Returns void
- Defined in base/ui-component.ts:389

show

show(): void
Shows this component

Returns void
- Defined in base/ui-component.ts:398

`Protected`showFocusRing

showFocusRing(): void
Shows the focus ring

Returns void
- Defined in base/ui-component.ts:438

syncLayoutStyle

syncLayoutStyle(): void
Sync BoxModel properties to the layout node's style. Called when BoxModel changes to keep the layout system in sync.

Returns void
Implementation of IFlexLayoutParticipant.syncLayoutStyle
- Defined in base/ui-component.ts:787

`Protected`updateFocusRing

updateFocusRing(): void
Updates the focus ring appearance based on component size. Uses theme colors for consistent styling.

Returns void
- Defined in base/ui-component.ts:220

Class UIComponentAbstract

Hierarchy (View Summary)

Implements

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

Returns UIComponent

Properties

ProtectedboxModel

ProtectedcomputedLayout

container

enabled

Protectedfocused

Protected OptionalfocusRing

Protected OptionalfontConfig

Protectedhovered

Readonlyid

Protected OptionallayoutConfig

ProtectedlayoutDirty

ProtectedlayoutEngine

Optionalparent

Protectedpressed

tabIndex

Protected OptionalthemeResolver

visible

Accessors

layoutNode

Returns LayoutNode

x

Returns number

Parameters

Returns void

y

Returns number

Parameters

Returns void

Methods

applyLayout

Parameters

Returns void

canFocus

Returns boolean

destroy

Returns void

getBoxModel

Returns BoxModel

getFontConfig

Returns UIFontConfig

getGlobalBounds

Returns { height: number; width: number; x: number; y: number }

ProtectedgetInheritedFontFamily

Parameters

Returns string

ProtectedgetInheritedFontSize

Parameters

Returns number

ProtectedgetInheritedFontType

Parameters

Returns FontType

ProtectedgetInheritedTextColor

Parameters

Returns number

getLayout

Returns ComputedLayout

getLayoutConfig

Returns UILayoutConfig

ProtectedgetThemeResolver

Returns ThemeResolver

hide

Returns void

ProtectedhideFocusRing

Returns void

isFocused

Returns boolean

layout

Class UIComponent`Abstract`

`Protected`boxModel

`Protected`computedLayout

`Protected`focused

`Protected` `Optional`focusRing

`Protected` `Optional`fontConfig

`Protected`hovered

`Readonly`id

`Protected` `Optional`layoutConfig

`Protected`layoutDirty

`Protected`layoutEngine

`Optional`parent

`Protected`pressed

`Protected` `Optional`themeResolver

`Protected`getInheritedFontFamily

`Protected`getInheritedFontSize

`Protected`getInheritedFontType

`Protected`getInheritedTextColor

`Protected`getThemeResolver

`Protected`hideFocusRing

`Protected`makeInteractive

`Abstract`measure

`Protected` `Abstract`render

`Protected`resolveCheckmarkColor

`Protected`resolveColor

`Protected`resolveControlColor

`Protected`resolveInheritedFont

`Protected`resolveInheritedLayoutParam

`Protected`resolvePlaceholderColor

`Protected`resolveTextColor

`Protected`showFocusRing