SmartContainer

import { SmartContainer } from 'pixi-silk/ui/layout';

A responsive container for portrait and landscape screens. It places and scales itself in the window from layout records against a reference resolution. A record has a design box, a reference resolution it fits or covers, an alignment, and optional stretch and corrections. It picks portraitData when the window is taller than wide, landscapeData otherwise, or the first matching named breakpoint.

Inside the box its children stay where you put them, in design units. Give it a layout (on the options or a record) and the box becomes a flex container: children get styles, fit modes and text shrink-to-fit, as in a FlexContainer.

It follows a viewport source, not the global window, and keeps clear of safe-area insets. Without a viewport it does nothing: it stays where it is at scale 1.

Extends#

• FlexContainer

Constructors#

Constructor#

new SmartContainer(options?: SmartContainerOptions): SmartContainer;

Parameters#

Returns#

SmartContainer

Overrides#

FlexContainer.constructor

Properties#

Accessors#

area#

Get Signature#

get area(): Size;

The root’s layout area, from the last pass when it has no fixed size.

Returns

Size

Inherited from#

FlexContainer.area

box#

Get Signature#

get box(): {
  height: number;
  width: number;
};

The design box of the active record, in design units, after extendWidth and extendHeight.

Returns

{
  height: number;
  width: number;
}

breakpoint#

Get Signature#

get breakpoint(): string;

The active record’s name: a breakpoint name, portrait or landscape.

Returns

string

breakpoints#

Get Signature#

get breakpoints(): readonly Breakpoint[];

Named records, tested in order before portrait and landscape. Missing values default as landscape.

Returns

readonly Breakpoint[]

Set Signature#

set breakpoints(list: readonly Breakpoint[]): void;

Parameters

Returns

void

landscapeData#

Get Signature#

get landscapeData(): LayoutData;

The effective landscape record (defaults merged with yours). Setting it updates the container.

Returns

LayoutData

Set Signature#

set landscapeData(data: LayoutData | undefined): void;

Parameters

Returns

void

layoutStyle#

Get Signature#

get layoutStyle(): SmartLayout;

The container’s own flex style.

Returns

SmartLayout

Inherited from#

FlexContainer.layoutStyle

orientation#

Get Signature#

get orientation(): "portrait" | "landscape";

The orientation of the root’s layout area. A square counts as landscape.

Returns

"portrait" | "landscape"

Inherited from#

FlexContainer.orientation

portraitData#

Get Signature#

get portraitData(): LayoutData;

The effective portrait record (defaults merged with yours). Setting it updates the container.

Returns

LayoutData

Set Signature#

set portraitData(data: LayoutData | undefined): void;

Parameters

Returns

void

Methods#

add()#

add<T extends ContainerChild>(child: T, style?: SmartLayout): T;

Adds child with a layout style. Returns the child.

Type Parameters#

Parameters#

Returns#

T

Inherited from#

FlexContainer.add

destroy()#

destroy(options?: DestroyOptions): void;

Stops following the viewport.

Parameters#

Returns#

void

Overrides#

FlexContainer.destroy

getLayout()#

getLayout(child: Container): SmartLayout;

The layout style of child, or {} when it has none.

Parameters#

Returns#

SmartLayout

Inherited from#

FlexContainer.getLayout

invalidate()#

invalidate(child?: Container<ContainerChild>): this;

Lays out again on the next frame. Pass a child whose content changed (new text, a new texture) so it is measured again.

Parameters#

Returns#

this

Inherited from#

FlexContainer.invalidate

resize()#

resize(width: number, height: number): this;

Root only: lays out in an area of this size, in local units. Without it the root sizes to its content.

Parameters#

Returns#

this

Inherited from#

FlexContainer.resize

setLayout()#

setLayout(child: Container, style: SmartLayout): this;

Gives child a layout style, replacing the old one. It need not be a child yet.

Parameters#

Returns#

this

Inherited from#

FlexContainer.setLayout

setSafeArea()#

setSafeArea(insets: Insets): this;

Keeps boxes clear of these window insets, in screen pixels.

Parameters#

Returns#

this

setStyle()#

setStyle(style: SmartLayout): this;

Replaces the container’s own flex style and lays out on the next frame.

Parameters#

Returns#

this

Inherited from#

FlexContainer.setStyle

setViewport()#

setViewport(source: ViewportSource | null): this;

Follows a new window source and places the container at once. null stops following and leaves it where it is.

Parameters#

Returns#

this

slotOf()#

slotOf(child: Container): 
  | {
  height: number;
  width: number;
  x: number;
  y: number;
}
  | undefined;

A copy of the slot child got in the last pass, in this container’s space. Undefined for a child without a style.

Parameters#

Returns#

| { height: number; width: number; x: number; y: number; } | undefined

Inherited from#

FlexContainer.slotOf

tick()#

tick(dt: number): boolean;

Advances layout and transitions by dt seconds (only needed with ticker: null). Returns true while busy.

Parameters#

Returns#

boolean

Inherited from#

FlexContainer.tick

updateContainer()#

updateContainer(): void;

Places and scales the container for the current window. It runs on every viewport change. Call it yourself after changing a plain rectangle source.

Returns#

void

updateLayout()#

updateLayout(): this;

Lays out the whole tree now, from its root, instead of on the next frame.

Returns#

this

Inherited from#

FlexContainer.updateLayout