LayoutCustomConfig interface

Define the arrangement of components on the screen.

Signature:

export interface LayoutCustomConfig 

Remarks

One and only one of flexRatio or anchor must be set (except for in the root element).

If anchor is set then pivot, offset, and size must be set as well.

The value of aspectRatio is only used if flexRatio is set, if it is not set then the element will scale in both directions to fill the available space.

Example 1

One component occupying the full screen
{
    id: 'main'
}

Example 2

Using flexRatio to arranged 2 components side by side with the right one being twice as wide as the left one
{
    childrenFlexDirection: o3h.Layout.Direction.Horizontal,
    children: [
        {
            id: 'left',
            flexRatio: 1
        },
        {
            id: 'right',
            flexRatio: 2
        }
    ]
}

Example 3

Using anchor to float a pip component over a full screen component
{
    id: 'main',
    children: [
        {
            id: 'pip',
            anchor: o3h.Layout.Position.TopLeft,
            pivot: o3h.Layout.Position.TopLeft,
            offset: {
                x: 0.1,
                y: -0.1
            },
            size: {
                x: 0.25,
                y: 0.25
            }
        }
    ]
}

Properties

PropertyModifiersTypeDescription
anchor?readonlyEnum<typeof LayoutPosition>(Optional) The position of the parent layout element the offset is relative to.
aspectRatio?readonlynumber(Optional) Modify the size of the direction opposite to the one controlled by the flexRatio to maintain this aspect ratio.
children?readonlyreadonly LayoutCustomConfig[](Optional) The layout elements which nest inside this layout element
childrenFlexDirection?readonlyEnum<typeof LayoutDirection>(Optional) The direction children will be laid out side by in, required if any children have a flexRatio value
displayAboveModule?readonlyboolean(Optional) If this is true, this element will be displayed on top of the module's web view.
flexRatio?readonlynumber(Optional) Value used relative to sibling objects defining the same property to determine what fraction of the layout each takes up.
id?readonlystring(Optional) The unique identifier within the layout of this element, required to attach a component to the layout
offset?readonlyVector2(Optional) The distance as a fraction of the size of the parent between the anchor position of this layout element and its parent's.
pivot?readonlyEnum<typeof LayoutPosition>(Optional) The position of this layout element at the size expands from.
size?readonlyVector2(Optional) The size of the layout element as a fraction of the size of the parent.

LayoutCustomConfig.anchor property

The position of the parent layout element the offset is relative to.

Signature:

readonly anchor?: Enum<typeof LayoutPosition>;

LayoutCustomConfig.aspectRatio property

Modify the size of the direction opposite to the one controlled by the flexRatio to maintain this aspect ratio.

Signature:

readonly aspectRatio?: number;

LayoutCustomConfig.children property

The layout elements which nest inside this layout element

Signature:

readonly children?: readonly LayoutCustomConfig[];

LayoutCustomConfig.childrenFlexDirection property

The direction children will be laid out side by in, required if any children have a flexRatio value

Signature:

readonly childrenFlexDirection?: Enum<typeof LayoutDirection>;

LayoutCustomConfig.displayAboveModule property

If this is true, this element will be displayed on top of the module's web view.

Signature:

readonly displayAboveModule?: boolean;

Remarks

The default value of this property is false, i.e. elements are displayed below the web view by default.

If this is set to true the module will still receive touch events in the space occupied by the element.

The value of this property, if set, is inherited by child elements that have not specified their own value.

LayoutCustomConfig.flexRatio property

Value used relative to sibling objects defining the same property to determine what fraction of the layout each takes up.

Signature:

readonly flexRatio?: number;

LayoutCustomConfig.id property

The unique identifier within the layout of this element, required to attach a component to the layout

Signature:

readonly id?: string;

LayoutCustomConfig.offset property

The distance as a fraction of the size of the parent between the anchor position of this layout element and its parent's.

Signature:

readonly offset?: Vector2;

LayoutCustomConfig.pivot property

The position of this layout element at the size expands from.

Signature:

readonly pivot?: Enum<typeof LayoutPosition>;

LayoutCustomConfig.size property

The size of the layout element as a fraction of the size of the parent.

Signature:

readonly size?: Vector2;