Interface UiObjectConfig<T, TType, TTarget>

Type Parameters

Hierarchy

  • UiObjectConfig

Indexable

[id: string]: any

Properties

binding?: ValOrFunc<[TTarget, Extract<keyof TTarget, string>], any[]>

Alias for property

bounds?: ValOrFunc<number[], any[]>

bounds for the value of the object. This is used for numeric inputs like number and sliders. This can be an array of [min, max] or a function that returns an array of [min, max].

children?: (UiObjectConfig<any, string, any> | Fof<ValOrArrOp<UiObjectConfig<any, string, any>>, []>)[]

Children of this object. This is used for folders and dropdowns. This can be an array of UiObjectConfig objects, or an array of functions that returns an array of UiObjectConfig objects. Note: it could be a function that returns an array as well, but its not added to the type yet.

disabled?: ValOrFunc<boolean, any[]>

The Ui input will be disabled if this is true, i.e. the user will not be able to change the value. This can be a boolean or a function that returns a boolean.

dispatchMode?: TUiRefreshModes | "immediate"

This is used to specify when to change the values and/or call the function(like onClick) or change events. Default is 'postFrame'

domChildren?: HTMLElement[] | (() => HTMLElement[])

Extra HTMLElements to be added to the UI element. This is used for customizing the UI. This can be an array of HTMLElement or a function that returns an array of HTMLElement.

expanded?: ValOrFunc<boolean, any[]>

Only for folders. The Ui element will be expanded if this is true. This can be a boolean or a function that returns a boolean. If this is not set to a function, config.expanded can be read to get the current state.

getValue?: (() => T)

Type declaration

    • (): T
    • getValue function. This is used for inputs, if property, value is not specified. This is called to get the value of the input on each render/update. It is ignored if property or value is specified.

      Returns T

hidden?: ValOrFunc<boolean, any[]>

The Ui element will be hidden if this is true. This can be a boolean or a function that returns a boolean.

inlinePicker?: ValOrFunc<boolean, any[]>

Only for elements with inline picker support This can be a boolean or a function that returns a boolean.

label?: ValOrFunc<string, any[]>

The label to use for the object. This is used as the title for folders, and as the label for inputs. This can be a string or a function that returns a string. If not provided, the label will be determined automatically, by the key of the property or sets to defaults

onChange?: ValOrArrOp<((...args: ChangeArgs) => void)>

onChange callbacks can be added to the config object to be called when the value of the object changes. This can be a function or an array of functions. When it's specified with a container(with children) object, it will be called when any of the children change, and the config of the child that's changed will be available in the arguments

onClick?: ((...args: any[]) => void)

Type declaration

    • (...args: any[]): void
    • A function to be called when the Ui element is clicked. Only for buttons. This is an alias of config.value or config.property for buttons.

      Parameters

      • Rest ...args: any[]

      Returns void

onExpand?: ((c: UiObjectConfig<any, string, any>) => void)

Type declaration

    • (c: UiObjectConfig<any, string, any>): void
    • Only for folders. The callback called when a folder is expanded or collapsed.

      Parameters

      Returns void

parentOnChange?: ((...args: ChangeArgs) => void)

Type declaration

    • (...args: ChangeArgs): void
    • Internal

      Can be set by the parent, if this is a child object.

      Parameters

      Returns void

path?: ValOrFunc<string, any[]>

Path of the binding inside the value. (dot separated json path) In case of property it is appended to the property path.

property?: ValOrFunc<[TTarget, number | Extract<keyof TTarget, string>], any[]>

The property to bind to. This is used for inputs. This can be an array of [target, key] or a function that returns an array of [target, key]. key can be a number for arrays, or a dot separated path for json objects.

readOnly?: ValOrFunc<boolean, any[]>

The Ui input will be read-only if this is true, i.e. the user will not be able to change the value. This can be a boolean or a function that returns a boolean. This can also be achieved by setting specifying a getValue function, but not a setValue function. Or by setting disabled to true.

setValue?: ((value: T, ...args: ChangeArgs) => void)

Type declaration

    • (value: T, ...args: ChangeArgs): void
    • setValue function. This is used for inputs, if property, value is not specified. This is called when the value of the input changes. It is ignored if property or value is specified.

      Parameters

      • value: T

        The value to set

      • Rest ...args: ChangeArgs

        other arguments like the config, renderer, etc. See source code for details.

      Returns void

stepSize?: ValOrFunc<number, any[]>

stepSize for specifying the min change in the value. This is used for numeric inputs like number and slider. The value will be rounded to the nearest multiple of stepSize. This can be a number or a function that returns a number.

tags?: ValOrArr<string>

tags can be added to the config object to be used for filtering, like rendering only objects with a certain tag. This can be a string or an array of strings.

type?: TType

The type of the object. This is used to determine the component to use. Examples: 'button', 'slider', 'dropdown', 'folder', 'input' etc

uiRef?: any

After initial rendering, config.uiRef will be set to the instance of the UI component that's created. The type of this will depend on the type of the component and the base UI library used. This can be used to access the UI component directly, for example to add event listeners. Note that the uiRef might change on render.

uiRefType?: string

The type of the UI component that's referenced by config.uiRef. This is set during rendering and used to re-render the UI if config.type changes.

uiRefresh?: ((deep?: boolean, mode?: TUiRefreshModes | "immediate", delay?: number) => void)

Type declaration

    • (deep?: boolean, mode?: TUiRefreshModes | "immediate", delay?: number): void
    • After initial rendering, config.uiRefresh will be set to a function that can be used to re-render the UI.

      Parameters

      • Optional deep: boolean

        If true, the UI will be re-rendered recursively, otherwise only the current object will be re-rendered.

      • Optional mode: TUiRefreshModes | "immediate"

        The mode to re-render in. See TUiRefreshModes for details. Use when syncing with custom render loop

      • Optional delay: number

        The delay in ms to wait before re-rendering. This is useful if multiple changes are made in quick succession. If another refresh event is in the queue for the same object, it will be postponed by this amount. This is not exact for small values.

      Returns void

uuid?: string

An optional uuid to identify this object. If not provided, one will be generated during first render. This must be provided if a new UiObjectConfig object is generated each time the config is rendered.

value?: T

The value of the object. This is used for inputs, if property is not provided.

Generated using TypeDoc