Interface UiObjectConfig<T, TType, TTarget>

interface UiObjectConfig<T, TType, TTarget> {
    app?: App;
    binding?: ValOrFunc<[TTarget, Extract<keyof TTarget, string>]>;
    bounds?: ValOrFunc<number[]>;
    children?: (UiObjectConfig<any, string, any> | Fof<ValOrArrOp<UiObjectConfig<any, string, any>>>)[];
    disabled?: ValOrFunc<boolean>;
    dispatchMode?: "immediate" | TUiRefreshModes;
    domChildren?: HTMLElement[] | (() => HTMLElement[]);
    expanded?: ValOrFunc<boolean>;
    getValue?: (() => T);
    hidden?: ValOrFunc<boolean>;
    inlinePicker?: ValOrFunc<boolean>;
    label?: ValOrFunc<string>;
    onChange?: ValOrArrOp<((...args) => void)>;
    onClick?: ((...args) => void);
    onExpand?: ((c) => void);
    parentOnChange?: ((...args) => void);
    property?: ValOrFunc<[TTarget, number | Extract<keyof TTarget, string>]>;
    readOnly?: ValOrFunc<boolean>;
    setValue?: ((value, ...args) => void);
    stepSize?: ValOrFunc<number>;
    tags?: ValOrArr<string>;
    type?: TType;
    uiRef?: any;
    uiRefType?: string;
    uiRefresh?: ((deep?, mode?, delay?) => void);
    uuid?: string;
    value?: T;
    [id: string]: any;
}

Type Parameters

Indexable

[id: string]: any

Individual components can support custom options. These can be added to the config object.

Properties

app? binding? bounds? children? disabled? dispatchMode? domChildren? expanded? getValue? hidden? inlinePicker? label? onChange? onClick? onExpand? parentOnChange? property? readOnly? setValue? stepSize? tags? type? uiRef? uiRefType? uiRefresh? uuid? value?

Properties

Optional app

app?: App

Optional binding

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

Alias for property

Optional bounds

bounds?: ValOrFunc<number[]>

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].

Optional children

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.

Optional disabled

disabled?: ValOrFunc<boolean>

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.

Optional dispatchMode

dispatchMode?: "immediate" | TUiRefreshModes

Optional domChildren

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.

Type declaration

    • (): HTMLElement[]

    • Returns HTMLElement[]

Optional expanded

expanded?: ValOrFunc<boolean>

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.

Optional getValue

getValue?: (() => 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.

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.

      Returns T

Optional hidden

hidden?: ValOrFunc<boolean>

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

Optional inlinePicker

inlinePicker?: ValOrFunc<boolean>

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

Optional label

label?: ValOrFunc<string>

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

Optional onChange

onChange?: ValOrArrOp<((...args) => 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.

Type declaration

    • (...args): void

    • Parameters

      Returns void

Optional onClick

onClick?: ((...args) => 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.

Type declaration

    • (...args): 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

Param: args

Optional onExpand

onExpand?: ((c) => void)

Only for folders. The callback called when a folder is expanded or collapsed.

Type declaration

    • (c): void

    • Only for folders. The callback called when a folder is expanded or collapsed.

      Parameters

      Returns void

Param: c

Optional Internal parentOnChange

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

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

Type declaration

    • (...args): void
    • Internal

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

      Parameters

      Returns void

Optional property

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

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.

Optional readOnly

readOnly?: ValOrFunc<boolean>

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.

Optional setValue

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

setValue function. This is used for inputs, if property, value is not specified. This is called when the value of the input changes.

Type declaration

    • (value, ...args): void

    • setValue function. This is used for inputs, if property, value is not specified. This is called when the value of the input changes.

      Parameters

      • value: T

        The value to set

      • Rest ...args: ChangeArgs

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

      Returns void

Param: value

The value to set

Param: args

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

Optional stepSize

stepSize?: ValOrFunc<number>

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.

Optional tags

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.

Optional type

type?: TType

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

Optional uiRef

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.

Optional uiRefType

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.

Optional uiRefresh

uiRefresh?: ((deep?, mode?, delay?) => void)

After initial rendering, config.uiRefresh will be set to a function that can be used to re-render the UI.

Type declaration

    • (deep?, mode?, delay?): 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: "immediate" | TUiRefreshModes

        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

Param: deep

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

Param: mode

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

Param: delay

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.

Optional uuid

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.

Optional value

value?: T

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

Settings

Member Visibility

Theme

On This Page