PixiJS Layout

Class: LayoutSystem

LayoutSystem

Layout controller class for any PixiJS Container based instance.

To be be used for automatic align and resize children tree, where every child behavior can be configured using css like configurations.

Also it adds a list of css-like properties for styling like background style or text style, check SizeController class.

Any PixiJS Container based instance can be turned into a layout by calling Layout#initLayout method.

new LayoutSystem (options, container)

Creates layout system instance.

Name Type Attributes Description
options LayoutOptions <optional>

Layout options
options.id

ID of the layout.
options.styles

Styles of the layout. List of available styles can be found in StyleController.
options.content

Content of the layout.
options.globalStyles

Global styles for layout and it's children.
container Container <optional>

Container for all layout children, will be created if not provided.

Example

 const container = new Container().initLayout();

 container.layout?.setStyles({
      background: 'black',
      width: '100%',
      height: '100%',
      padding: 10,
      overflow: 'hidden',
      color: 'white',
 }); // set styles

 container.layout?.setContent({
      text: 'Hello World',
 }); // set content

 Or alternatively:

 const layoutSystem = new LayoutSystem({
      id: 'root',
      content: 'Hello World',
      styles: {
          background: 'black',
      }
 }); // create layout system

 app.stage.addChild(layoutSystem.container); // add layout system generated container to the stage

Members

align AlignController

AlignController is a class for controlling layout and all it's children alignment.

container Container

Container for all layout children.

content ContentController

ContentController controller is a class for controlling layouts children.

contentHeight number | undefined

Returns height of the container

contentWidth number | undefined

Returns with of the container

height

Sets the height of layout.

height

Gets the height of layout.

id string

ID of layout, can be used to set styles in the globalStyles object somewhere higher in hierarchal tree.

isPortrait boolean

Stores isPortrait state

isRootLayoutPortrait boolean

Returns true if root layout is in landscape mode.

size SizeController

SizeController is a class for controlling layout and all it's children sizes.

style Styles

Layout styles.

textStyle Partial<PixiTextStyle>

Layout text styles.

width

Sets the width of layout.

width

Gets the width of layout.

_style StyleController protected

StyleController is a class for controlling styles.

Methods

addContent (content)

Adds content to the layout and reposition/resize other elements and the layout basing on styles.

Name Type Description
content Content

Content to be added. Can be string, Container, Layout, LayoutOptions or array of those. Also content can be an object with inner layout ids as a keys, and Content as values.

getChildByID (id) Layout | Container | undefined

Get element from the layout child tree by it's ID

Name Type Description
id string

id of the content to be foundS.
Returns:
Type Description
Layout | Container | undefined

getRootLayout () LayoutSystem

Returns root layout of the layout tree.

Returns:
Type Description
LayoutSystem

refresh ()

Recalculate positions and sizes of layouts three.

removeChildByID (id)

Removes content of the layout by its id and reposition/resize other elements and the layout basing on styles.

Name Type Description
id string

id of the content to be removed.

resize (parentWidth, parentHeight)

Resize method should be called on every parent size change.

Name Type Attributes Description
parentWidth number <optional>
parentHeight number <optional>

setStyles (styles)

Updates the layout styles and resize/reposition it and its children basing on new styles.

Name Type Description
styles Styles

updateParents ()

This is used in case if layout or some of it's children was changed and we need to update sizes and positions for all the parents tree.