UI

This module provides a set of functions for creating and managing UI components such as canvases, layouts, text, panels, and more.

It includes functions for setting properties such as spacing, padding, alignment, and color for various UI elements.

Functions

canvas(size: float2; screenMode: ScreenMode = public_components::ScreenMode.FitExtend): NodeId

Creates a canvas node with a specified size. Start from here to create your UI layout. See the UICanvas documentation for more information.

Usage example:

let canvasNode = canvas(float2(800, 600))
Arguments:

  • size : float2 - The size of the canvas.

  • screenMode : ScreenMode - The screen mode of the canvas.

Returns:

  • NodeId - The created canvas node.

children(node: NodeId; children: array<NodeId>): NodeId

Adds children nodes to a specified parent node.

Usage example:

let parentNode = create_node()
children(parentNode, [text("hello"), text("world")])
Arguments:

  • node : NodeId - The parent node.

  • children : array< NodeId > - The array of children nodes to add.

Returns:

  • NodeId - The parent node with added children.

hbox(children: array<NodeId> = array<NodeId>()): NodeId

Creates a horizontal box layout node with optional children.

Usage example:

let hboxNode = hbox([childNode1, childNode2])
Arguments:

  • children : array< NodeId > - The array of children nodes to add to the horizontal box layout.

Returns:

  • NodeId - The created horizontal box layout node.

vbox(children: array<NodeId> = array<NodeId>()): NodeId

Creates a vertical box layout node with optional children.

Usage example:

let vboxNode = vbox([childNode1, childNode2])
Arguments:

  • children : array< NodeId > - The array of children nodes to add to the vertical box layout.

Returns:

  • NodeId - The created vertical box layout node.

flow(children: array<NodeId> = array<NodeId>()): NodeId

Creates a flow layout node with optional children.

Usage example:

let layoutNode = flow([childNode1, childNode2])
Arguments:

  • children : array< NodeId > - The array of children nodes to add to the flow layout.

Returns:

  • NodeId - The created flow layout node.

set_alignment(node: NodeId; value: LayoutAlignment): NodeId

Sets the alignment of a layout.

Usage example:

set_alignment(layoutNode, LayoutAlignment.BottomCenter)
Arguments:
set_direction(node: NodeId; value: LayoutDirection): NodeId

Sets the direction of a flow layout.

Usage example:

set_direction(layoutNode, LayoutDirection.Horizontal)
Arguments:
Returns:

  • NodeId - The layout node with updated direction.

text(content: string): NodeId

Creates a text node with specified content.

Usage example:

let textNode = text("Hello, World!")
Arguments:

  • content : string - The text content.

Returns:

  • NodeId - The created text node.

set_text_color(node: NodeId; color: float4): NodeId

Sets the color of a text node.

Usage example:

set_text_color(textNode, float4(1.0, 0.0, 0.0, 1.0))
Arguments:

  • node : NodeId - The text node.

  • color : float4 - The color value.

Returns:

  • NodeId - The text node with updated color.

set_image_color(node: NodeId; color: float4): NodeId

Sets the color of an image node.

Usage example:

set_image_color(imageNode, float4(1.0, 0.0, 0.0, 1.0))
Arguments:

  • node : NodeId - The image node.

  • color : float4 - The color value.

Returns:

  • NodeId - The image node with updated color.

button(text: string; onClick: lambda<():void> = lambda<():void>()): NodeId

Creates a button node with a specified label and click handler.

Usage example:

def onButtonClick() {
    print("Button clicked!")
}

let buttonNode = button("Click Me", @@onButtonClick)
Arguments:

  • text : string - The label of the button.

  • onClick : lambda<void> - The function to call when the button is clicked.

Returns:

  • NodeId - The created button node.

tinted_button(text: string; onClick: lambda<():void> = lambda<():void>()): NodeId

Creates a tinted button node with a specified label and click handler.

Usage example:

def onButtonClick() {
    print("Button clicked!")
}

let buttonNode = tinted_button("Click Me", @@onButtonClick)
Arguments:

  • text : string - The label of the button.

  • onClick : lambda<void> - The function to call when the button is clicked.

Returns:

  • NodeId - The created tinted button node.

textured_button(text: string; onClick: lambda<():void> = lambda<():void>()): NodeId

Creates a textured button node with a specified label and click handler.

Usage example:

def onButtonClick() {
    print("Button clicked!")
}

let buttonNode = textured_button("Click Me", @@onButtonClick)
Arguments:

  • text : string - The label of the button.

  • onClick : lambda<void> - The function to call when the button is clicked.

Returns:

  • NodeId - The created textured button node.

checkbox(text: string; onChange: lambda<(value:bool):void> = lambda<(value:bool):void>()): NodeId

Creates a checkbox node with a specified label and change handler.

Usage example:

def onCheckboxChange(value : bool) {
    print("Checkbox value: {value}")
}

let checkboxNode = checkbox("Accept Terms", @@onCheckboxChange)
Arguments:

  • text : string - The label of the checkbox.

  • onChange : lambda<(value:bool):void> - The function to call when the checkbox value changes.

Returns:

  • NodeId - The created checkbox node.

Creates a dropdown node with a specified change handler.

Usage example:

def onDropdownChange(index : int) {
    print("Selected dropdown index: {index}")
}

let dropdownNode = dropdown(@@onDropdownChange)
Arguments:

  • onChange : lambda<(index:int):void> - The function to call when the selected dropdown item changes.

Returns:

  • NodeId - The created dropdown node.

vertical_slider(onChange: lambda<(value:float):void> = lambda<(value:float):void>()): NodeId

Creates a vertical slider node with a specified change handler.

Usage example:

def onSliderChange(value : float) {
    print("Slider value: {value}")
}

let sliderNode = vertical_slider(@@onSliderChange)
Arguments:

  • onChange : lambda<(value:float):void> - The function to call when the slider value changes.

Returns:

  • NodeId - The created vertical slider node.

horizontal_slider(onChange: lambda<(value:float):void> = lambda<(value:float):void>()): NodeId

Creates a horizontal slider node with a specified change handler.

Usage example:

def onSliderChange(value : float) {
    print("Slider value: {value}")
}

let sliderNode = horizontal_slider(@@onSliderChange)
Arguments:

  • onChange : lambda<(value:float):void> - The function to call when the slider value changes.

Returns:

  • NodeId - The created horizontal slider node.

update_debug_text(debugTextNode: NodeId; text: string; maxSize: float2 = float2(-1f, -1f))

Updates the text of the specified debug text node.

Use create_debug_text to create a debug text node.

Arguments:

  • debugTextNode : NodeId - debug text node to update.

  • text : string - new text for the debug text node.

  • maxSize : float2 - default is float2(-1). Maximum size of the debug text node. If set to (-1, -1), the text will not wrap.

update_debug_text(debugTextNode: NodeId; text: string; topLeftMargin: float2; anchor: float2)

Updates the text, top-left margin, and anchor of the specified debug text node.

Use create_debug_text to create a debug text node.

Arguments:

  • debugTextNode : NodeId - debug text node to update.

  • text : string - new text for the debug text node.

  • topLeftMargin : float2 - new top-left margin of the debug text node.

  • anchor : float2 - new anchor point of the debug text node.

create_debug_text(topLeftMargin: float2 = float2(0f, 0f); anchor: float2 = TOP_LEFT_ANCHOR): NodeId

Initializes a debug text node with the specified top-left margin and anchor.

Creates canvas if it doesn’t exist.

Arguments:

  • topLeftMargin : float2 - default is float2(). Top-left margin of the debug text node.

  • anchor : float2 - default is TOP_LEFT_ANCHOR. Anchor point of the debug text node.

Returns:

  • NodeId - initialized debug text node.

create_debug_text(text: string; topLeftMargin: float2 = float2(0f, 0f); anchor: float2 = TOP_LEFT_ANCHOR): NodeId

Initializes a debug text node with the specified text, top-left margin, and anchor.

Creates canvas if it doesn’t exist.

Arguments:

  • text : string - text of the debug text node.

  • topLeftMargin : float2 - default is float2(). Top-left margin of the debug text node.

  • anchor : float2 - default is TOP_LEFT_ANCHOR. Anchor point of the debug text node.

Returns:

  • NodeId - initialized debug text node.

create_debug_text(canvas: NodeId; text: string; topLeftMargin: float2 = float2(0f, 0f); anchor: float2 = TOP_LEFT_ANCHOR): NodeId

Initializes a debug text node with the specified text, top-left margin, and anchor on the specified canvas.

Arguments:

  • canvas : NodeId - canvas node to create the debug text node on.

  • text : string - text of the debug text node.

  • topLeftMargin : float2 - default is float2(). Top-left margin of the debug text node.

  • anchor : float2 - default is TOP_LEFT_ANCHOR. Anchor point of the debug text node.

Returns:

  • NodeId - initialized debug text node.

set_spacing(node: NodeId; value: int|float): NodeId

Sets the spacing between children nodes in a layout.

Usage example:

set_spacing(layoutNode, 10)
Arguments:

  • node : NodeId - The layout node.

  • value : option<int|float> - The spacing value.

Returns:

  • NodeId - The layout node with updated spacing.

set_spacing(node: NodeId; value: int2|float2): NodeId

Sets the spacing between children nodes in a layout.

Usage example:

set_spacing(layoutNode, float2(10, 20))
Arguments:

  • node : NodeId - The layout node.

  • value : option<int2|float2> - The spacing value.

Returns:

  • NodeId - The layout node with updated spacing.

set_padding(node: NodeId; value: int4|float4): NodeId

Sets the padding of a layout.

Usage example:

set_padding(layoutNode, float4(10, 20, 10, 20))
Arguments:

  • node : NodeId - The layout node.

  • value : option<int4|float4> - The padding value (xyzw are top, right, bottom, left).

Returns:

  • NodeId - The layout node with updated padding.

set_text_font_size(node: NodeId; size: int|float): NodeId

Sets the font size of a text node.

Usage example:

set_text_font_size(textNode, 24)
Arguments:

  • node : NodeId - The text node.

  • size : option<int|float> - The font size value.

Returns:

  • NodeId - The text node with updated font size.

panel(size: int2|float2; children: array<NodeId> = array<NodeId>()): NodeId

Creates a panel node with a specified size and optional children.

Usage example:

let panelNode = panel(float2(800, 600), [childNode1, childNode2])
Arguments:

  • size : option<int2|float2> - The size of the panel.

  • children : array< NodeId > - The array of children nodes to add to the panel.

Returns:

  • NodeId - The created panel node.

set_frame_size(node: NodeId; size: int2|float2): NodeId

Sets the size of a frame node.

Usage example:

set_frame_size(frameNode, float2(800, 600))
Arguments:

  • node : NodeId - The frame node.

  • size : option<int2|float2> - The size value.

Returns:

  • NodeId - The frame node with updated size.

set_frame_pivot(node: NodeId; pivot: int2|float2): NodeId

Sets the pivot of a node.

Usage example:

set_frame_pivot(node, float2(0.5, 0.5))
Arguments:

  • node : NodeId - The node.

  • pivot : option<int2|float2> - The pivot value.

Returns:

  • NodeId - The node with updated pivot.

set_frame_pos(node: NodeId; pos: int2|float2): NodeId

Sets the position of a frame node in 2D space.

Usage example:

set_frame_pos(frameNode, float2(800, 600))
Arguments:

  • node : NodeId - The frame node.

  • pos : option<int2|float2> - The position value.

Returns:

  • NodeId - The frame node with updated position.

add_anchor(node: NodeId; anchor: int2|float2): NodeId

Adds an anchor component to a node. Local position of a node is used as left and top insets.

Usage example:

add_anchor(node, MIDDLE_CENTER_ANCHOR)
Arguments:

  • node : NodeId - The node.

  • anchor : option<int2|float2> - The minimum & maximum anchor value.

Returns:

  • NodeId - The node with added anchor component.

add_anchor(node: NodeId; anchorMin: int2|float2; anchorMax: int2|float2): NodeId

Adds an anchor component to a node. Local position of a node is used as left and top insets.

Usage example:

add_anchor(node, TOP_LEFT_ANCHOR, BOTTOM_RIGHT_ANCHOR)
Arguments:

  • node : NodeId - The node.

  • anchorMin : option<int2|float2> - The minimum anchor value.

  • anchorMax : option<int2|float2> - The maximum anchor value.

Returns:

  • NodeId - The node with added anchor component.