Pixi Layout

https://layout.pixijs.io/docs
Admin
Pixi Layout is a Yoga-powered flexbox layout library for PixiJS, enabling powerful and predictable...
Tokens:13,349
Snippets:178
Trust Score:8.8
Update:4 months ago
Show doc for...
Tokens:
Raw
### React Example with PixiJS Layout

Source: https://layout.pixijs.io/docs/guides/guide/react

A minimal React setup demonstrating a responsive layout that adjusts to window size using @pixi/react and @pixi/layout.

```typescript
import '@pixi/layout/react';  
import '@pixi/layout';  
import { LayoutContainer } from '@pixi/layout/components';  
import React, { useRef } from 'react';  
import { Application, Container } from 'pixi.js';  
import { extend, useApplication } from '@pixi/react';  
  
extend({
    Container,
    LayoutContainer,
});

const LayoutResizer: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const layoutRef = useRef<Container>(null);
    const { app } = useApplication();

    app.renderer.on('resize', () => {
        layoutRef.current?.layout = {
            width: app.screen.width,
            height: app.screen.height,
        };
    });

    return (
        <pixiContainer ref={layoutRef} layout={{}}>
            {children}
        </pixiContainer>
    );
};

export const App: React.FC<ReactStoryProps> = () => {
    return (
        <Application resizeTo={window} background={'#1C1C1D'}>
            <LayoutResizer>
                <layoutContainer
                    layout={{ justifyContent: 'center', alignItems: 'center', backgroundColor: '#2C2C2E' }}
                >
                    <layoutContainer layout={{ width: '80%', height: '80%', backgroundColor: '#FF3B30' }} />
                </layoutContainer>
            </LayoutResizer>
        </Application>
    );
};

```

--------------------------------

### Install PixiJS Layout and React Dependencies

Source: https://layout.pixijs.io/docs/guides/guide/react

Install the necessary PixiJS, @pixi/react, and @pixi/layout packages using npm.

```bash
npm install pixi.js @pixi/react @pixi/layout  

```

--------------------------------

### Basic Justify Content Example

Source: https://layout.pixijs.io/docs/examples/justify-content

Demonstrates the basic usage of 'justify-content' to align items. This snippet requires a PixiJS application setup.

```javascript
import React from 'react';
import { Stage, Container, Text } from '@pixi/react';

export default function App() {
  return (
    <Stage>
      <Container
        width={500}
        height={300}
        style={{ backgroundColor: 'grey' }}
        // Example: Align items to the start of the container
        justifyContent="flex-start"
      >
        <Text text="Item 1" x={10} y={10} />
        <Text text="Item 2" x={10} y={40} />
        <Text text="Item 3" x={10} y={70} />
      </Container>
    </Stage>
  );
}
```

--------------------------------

### Install PixiJS Layout Plugin

Source: https://layout.pixijs.io/docs/guides/guide/quick-start

Add the PixiJS layout plugin to your project using your preferred package manager.

```bash
# with pnpm  
pnpm add @pixi/layout  
# with yarn  
yarn add @pixi/layout  
# with npm  
npm install @pixi/layout  

```

--------------------------------

### Create LayoutSprite and LayoutView Examples

Source: https://layout.pixijs.io/docs/guides/core/components

Shows how to create a layout-aware sprite using LayoutSprite and a generic layout-aware view using LayoutView, both with custom layout styles.

```typescript
import { LayoutSprite, LayoutView } from '@pixi/layout/components';
import { Assets, Sprite } from 'pixi.js';

const texture = await Assets.load('https://pixijs.com/assets/bunny.png');

const bunny = new LayoutSprite({
    texture,
    layout: {
        width: 100,
        height: 100,
        objectFit: 'contain',
        backgroundColor: 0x444444,
        borderColor: 0xffffff,
        borderRadius: 8,
    },
});

// Or use the LayoutView directly
const bunny2 = new LayoutView({
    slot: new Sprite(texture),
    layout: {
        width: 100,
        height: 100,
        objectFit: 'contain',
        backgroundColor: 0x444444,
        borderColor: 0xffffff,
        borderRadius: 8,
    },
});
```

--------------------------------

### Initialize PixiJS Application with Layout System

Source: https://layout.pixijs.io/docs/guides/core/layout-system

Installs the LayoutSystem into a PixiJS application during initialization. Pass LayoutSystemOptions to control behavior like auto-updates and debug rendering. The layout system can be accessed via `app.renderer.layout` after initialization.

```typescript
import '@pixi/layout'; // required to ensure all systems and mixins are registered  
import { Application } from 'pixi.js';  
import { LayoutSystem } from '@pixi/layout';  
  
const app = new Application();  
  
await app.init({
    background: '#1099bb',
    resizeTo: window,
    layout: {
        autoUpdate: true,
        enableDebug: false,
        throttle: 100,
    },
});  
  
// can later be accessed via app.renderer.layout  
const layoutSystem = app.renderer.layout;
```

--------------------------------

### Customize Yoga Configuration

Source: https://layout.pixijs.io/docs/guides/core/layout-system

Retrieves and modifies the global Yoga configuration used by the layout system. Examples include setting errata mode and point scaling factors.

```typescript
import { getYogaConfig, Errata } from '@pixi/layout';  
  
await app.init(...);  
  
// Get the global Yoga configuration  
const config = getYogaConfig();  
  
// Example: Use Classic errata mode  
config.setErrata(Errata.Classic);  
// Example: Set point scaling  
config.setPointScaleFactor(1);
```

--------------------------------

### Setting Align Items to Flex Start

Source: https://layout.pixijs.io/docs/examples/align-items

This snippet demonstrates how to set the 'alignItems' property to 'flex-start' within a layout container. This aligns items to the start of the cross-axis.

```jsx
import '@pixi/layout';
import Application from './boilerplate';

const defaults = {
  backgroundColor: `#1e293b`,
  borderWidth: 1,
  borderColor: `#fff`,
};

export default function App() {
  return (
    <Application>
      <layoutContainer
        layout={{
          ...defaults,
          width: 200,
          height: 250,
          padding: 10,
          alignItems: 'flex-start',
          flexDirection: 'column',
          backgroundColor:
        }}
      />
    </Application>
  );
}
```

--------------------------------

### Access Real Position and Scale

Source: https://layout.pixijs.io/docs/guides/core/layout

Use these properties to get the actual position and scale of a PixiJS object after layout calculations. These differ from normalized properties by reflecting the final rendered values.

```javascript
sprite.layout.realX;
sprite.layout.realY;

sprite.layout.realScaleX;
sprite.layout.realScaleY;
```

--------------------------------

### Setting Transform Origin for Rotation

Source: https://layout.pixijs.io/docs/guides/core/concepts/transform-origin

Define the pivot point for rotation using the 'transformOrigin' property. This example sets the origin to 'center' for a sprite.

```javascript
sprite.layout = {
    width: 300,
    height: 300,
    transformOrigin: 'center',
};

sprite.rotation = 0.2; // rotates around center of the layout box

```

--------------------------------

### Get Computed Layout Box

Source: https://layout.pixijs.io/docs/guides/core/layout

Retrieves the raw layout engine result for a sprite, including its position and dimensions. This provides logical layout information computed by the Yoga engine.

```javascript
const layoutBox = sprite.layout.computedLayout;
console.log(layoutBox.left, layoutBox.top, layoutBox.width, layoutBox.height);
```

--------------------------------

### Get Computed PixiJS Layout Adjustments

Source: https://layout.pixijs.io/docs/guides/core/layout

Retrieves PixiJS-specific adjustments required for rendering a sprite based on its computed layout. This includes offsets and scale factors for positioning and object fitting.

```javascript
const pixiLayout = sprite.layout.computedPixiLayout;
console.log(pixiLayout.offsetX, pixiLayout.offsetY, pixiLayout.scaleX, pixiLayout.scaleY);
```

--------------------------------

### Import and Initialize PixiJS Application with Layout

Source: https://layout.pixijs.io/docs/guides/guide/quick-start

Import the layout plugin and then create a PixiJS application, setting up the layout property on containers.

```javascript
import './App.css';
import * as PIXI from 'pixi.js';
import '@pixi/layout';

function App() {
  // ... PixiJS application setup ...
  return (
    <div className="App">
      {/* PixiJS canvas will be rendered here */}
    </div>
  );
}

export default App;
```

--------------------------------

### Basic Inset Layout with PixiJS

Source: https://layout.pixijs.io/docs/examples/insets

Demonstrates a nested layout structure using PixiJS layout containers with default and custom inset properties.

```jsx
import '@pixi/layout';
import Application from './boilerplate';

const defaults = {
  backgroundColor: `#1e293b`,
  borderWidth: 1,
  borderColor: `#fff`,
};

export default function App() {
  return (
    <Application>
      <layoutContainer layout={{ ...defaults, width: 200, height: 
200, backgroundColor: `#0f172a` }}>
        <layoutContainer layout={{ ...defaults, height: 50, width: 
50, top: 50, left: 50 }} />
      </layoutContainer>
    </Application>
  );
}
```

--------------------------------

### Create and Configure a LayoutContainer

Source: https://layout.pixijs.io/docs/guides/core/components

Demonstrates how to create a LayoutContainer with specific layout styles, including dimensions, overflow, padding, gap, background, and border.

```typescript
import { LayoutContainer } from '@pixi/layout/components';

const container = new LayoutContainer({
    layout: {
        width: 300,
        height: 300,
        overflow: 'scroll',
        padding: 10,
        gap: 10,
        backgroundColor: 0x202020,
        borderColor: 0xffffff,
        borderRadius: 12,
    },
});

// Add multiple children freely
container.addChild(child1, child2, child3);
```

--------------------------------

### Basic Container and Sprite Layout

Source: https://layout.pixijs.io/docs/guides/core/overview

Demonstrates creating a container with layout properties and adding a sprite with its own layout configuration, including object fitting and positioning.

```javascript
const container = new Container({
    layout: {
        width: 500,
        height: 300,
        flexWrap: 'wrap',
        justifyContent: 'center',
        alignContent: 'center',
    },
});

const sprite = new Sprite({ texture });
sprite.layout = {
    width: 100,
    height: 100,
    objectFit: 'contain',
    objectPosition: 'center',
};

container.addChild(sprite);

```

--------------------------------

### Import and Use Tailwind Helper in PixiJS

Source: https://layout.pixijs.io/docs/guides/guide/tailwind

Shows how to import the `tw` helper and use it when creating a PixiJS Container with layout properties.

```javascript
import { Container } from 'pixi.js';
import { tw } from '@pixi/layout/tailwind';

const container = new Container({
    layout: tw`flex flex-col items-center justify-center w-full h-full`;
});
```

--------------------------------

### Dynamic Layout with Template Literals

Source: https://layout.pixijs.io/docs/guides/guide/tailwind

Illustrates using template literals with the `tw` helper to create dynamic layouts based on variables.

```javascript
const layout = tw`flex ${isVertical ? 'flex-col' : 'flex-row'} gap-4`;
```

--------------------------------

### Enable Layout with Styles in Constructor

Source: https://layout.pixijs.io/docs/guides/core/layout

Enables layout on a PixiJS container and its children, defining specific styles for each.

```javascript
import { Sprite, Container } from 'pixi.js';  
  
const container = new Container({
    layout: {
        width: 500,
        height: 300,
        flexWrap: 'wrap',
        justifyContent: 'center',
        alignContent: 'center',
    },
});  
  
const sprite = new Sprite({ texture });  
sprite.layout = {
    width: 100,
    height: 100,
    objectFit: 'cover',
};
  
container.addChild(sprite);
```

--------------------------------

### Applying Scale and Rotation with Layout

Source: https://layout.pixijs.io/docs/guides/core/concepts/transform-origin

Demonstrates how 'scale' and 'rotation' properties interact with the layout box, using 'transformOrigin' for rotation. The 'objectFit' property is also shown.

```javascript
const sprite = new Sprite({ texture });
sprite.layout = {
    width: 300,
    height: 300,
    objectFit: 'cover',
    transformOrigin: 'center',
};

sprite.scale = 2; // scales as if the box was 600x600
sprite.rotation = 0.2; // rotates around center of the layout box

```

--------------------------------

### Enable PixiJS DevTools Integration

Source: https://layout.pixijs.io/docs/guides/guide/devtool

Import this module at the beginning of your application to enable the PixiJS DevTools extension to communicate with your PixiJS application.

```javascript
import '@pixi/layout/devtools';  
  
// ... rest of your code  

```

--------------------------------

### Basic Tailwind Layout Conversion

Source: https://layout.pixijs.io/docs/guides/guide/tailwind

Demonstrates how a string of Tailwind-style classes is converted into a PixiJS layout object.

```javascript
const layout = tw`flex flex-col items-center justify-center w-full h-full`;
```

```json
{
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    justifyContent: 'center',
    width: '100%',
    height: '100%',
}
```

--------------------------------

### Layout Components with Advanced Styling

Source: https://layout.pixijs.io/docs/guides/core/overview

Illustrates using specialized layout components like LayoutContainer to apply styles such as backgroundColor and borderRadius, which are not available on standard PixiJS containers.

```javascript
import { LayoutContainer } from '@pixi/layout/components';
import { Sprite, Graphics, Text } from '@pixi/layout/components';

const container = new LayoutContainer({
    layout: {
        width: 500,
        height: 300,
        flexWrap: 'wrap',
        justifyContent: 'center',
        alignContent: 'center',
        backgroundColor: 0x000000,
        borderRadius: 10,
    },
});

const sprite = new Sprite({ texture, layout: true });
const graphics = new Graphics({ layout: true });
const text = new Text({ text: 'Hello World', layout: true });

container.addChild(sprite, graphics, text);

```

--------------------------------

### Enable Global Layout Typings for TypeScript

Source: https://layout.pixijs.io/docs/guides/guide/react

For TypeScript users, import '@pixi/layout/react' to enable global layout typings within your JSX namespace.

```typescript
import '@pixi/layout/react';  

```

--------------------------------

### Container and Sprite Layout Configuration

Source: https://layout.pixijs.io/docs/guides/core/concepts/flexbox

This snippet demonstrates how to configure layout properties for a container and a sprite using the PixiJS Layout system. It shows setting dimensions, flexbox properties for alignment and wrapping on the container, and object fitting properties on the sprite.

```javascript
const container = new Container({
    layout: {
        width: 500,
        height: 300,
        flexWrap: 'wrap',
        justifyContent: 'center',
        alignContent: 'center',
    },
});

const sprite = new Sprite({ texture });
sprite.layout = {
    width: 100,
    height: 100,
    objectFit: 'contain',
    objectPosition: 'center',
};

container.addChild(sprite);
```

--------------------------------

### Enable/Disable Layout on Existing Objects

Source: https://layout.pixijs.io/docs/guides/core/layout

Demonstrates how to dynamically enable or disable the layout system on an existing PixiJS sprite.

```javascript
sprite.layout = true; // enable layout  
sprite.layout = false; // disable layout  
sprite.layout = null; // disable layout
```

--------------------------------

### Apply Minimum and Maximum Width Constraints

Source: https://layout.pixijs.io/docs/guides/styles/sizing-and-dimensions

Use minWidth and maxWidth properties to enforce strict boundaries on a node's width, ensuring it respects these constraints regardless of other sizing rules.

```javascript
sprite.layout = {
    width: '100%',
    minWidth: 200,
    maxWidth: 500,
};

```

--------------------------------

### Applying Size Directly with PixiJS UI Components

Source: https://layout.pixijs.io/docs/guides/core/concepts/transform-origin

Use 'applySizeDirectly: true' when integrating PixiJS UI components that override width/height setters to ensure layout size is applied correctly. This is crucial for components like ProgressBar.

```javascript
import { ProgressBar } from '@pixi/ui';

const progressBar = new ProgressBar({...});
progressBar.layout = {
    width: 300,
    height: 300,
    applySizeDirectly: true,
};

```

--------------------------------

### Setting Individual Padding

Source: https://layout.pixijs.io/docs/guides/styles/spacing-margins-padding

Use `paddingTop`, `paddingBottom`, `paddingLeft`, and `paddingRight` to define specific padding for each side.

```javascript
// Different padding for each side
container.layout = {
    paddingTop: 8,
    paddingBottom: 16,
    paddingLeft: 4,
    paddingRight: 4,
};
```

--------------------------------

### Enabling Opt-in Layout for Container and Sprite

Source: https://layout.pixijs.io/docs/guides/core/concepts/opt-in-layout

This snippet demonstrates how to create a container with layout properties and add both a layout-enabled sprite and a standard sprite. The layout-enabled sprite will be managed by the container's layout, while the unmanaged sprite will not be affected by layout.

```javascript
const container = new Container({
    layout: {
        width: 500,
        height: 500,
        justifyContent: 'center',
    },
});

const managed = new Sprite({ texture, layout: true });
const unmanaged = new Sprite(texture); // not in layout

container.addChild(managed, unmanaged);
```

--------------------------------

### Enable Debug Renderer at Runtime

Source: https://layout.pixijs.io/docs/guides/core/layout-system

Activates the debug renderer to visualize layout regions. This method is asynchronous and returns a promise, though awaiting is often unnecessary as the renderer enables on the next frame.

```typescript
app.renderer.layout.enableDebug(true);
```

--------------------------------

### Set Width and Height in Pixels and Percentage

Source: https://layout.pixijs.io/docs/guides/styles/sizing-and-dimensions

Define the width and height of a node's border box using pixel values or percentages of the parent container's dimensions.

```javascript
container.layout = {
    width: 300, // 300 pixels wide
    height: '50%', // 50% of parent container's height
};

```

--------------------------------

### Customizing Scrolling Behavior with Trackpad Options

Source: https://layout.pixijs.io/docs/guides/styles/overflow-and-scrolling

Shows how to customize scrolling behavior for a LayoutContainer using trackpad options like maxSpeed, constrain, disableEasing, and custom easing functions.

```javascript
const container = new LayoutContainer({
    layout: {
        overflow: 'scroll',
    },
    trackpad: {
        // Maximum scrolling speed (pixels per frame)
        maxSpeed: 400,

        // Constrain scrolling within bounds
        constrain: true,

        // Disable momentum/easing when releasing
        disableEasing: false,

        // Custom easing for x/y axes
        xEase: new ScrollSpring({
            max: 200, // Maximum velocity
            damp: 0.7, // Higher damping = less bounce
            springiness: 0.15, // Higher springiness = faster movement
        }),
        yEase: new ScrollSpring({
            // Custom y-axis spring settings
        }),
    },
});

```

--------------------------------

### Apply Custom Logic on Layout Update

Source: https://layout.pixijs.io/docs/guides/core/layout

Use the 'layout' event to access the computed layout and apply custom logic, such as updating the size and position of a background element based on the new layout dimensions.

```javascript
sprite.on('layout', (event) => {
    const layoutBox = event.computedLayout;
    background.width = layoutBox.width;
    background.height = layoutBox.height;
    background.x = layoutBox.left;
    background.y = layoutBox.top;
});
```

--------------------------------

### LayoutView API

Source: https://layout.pixijs.io/docs/guides/core/components

LayoutView is a lightweight wrapper for single child display objects, applying layout rules to its 'slot'. Several PixiJS display objects are re-exported as LayoutView-based components for layout-aware usage.

```APIDOC
## LayoutView API

### Description
A lightweight single-child layout wrapper that manages a `slot` object and applies layout rules to it. Several PixiJS display objects are re-exported as layout-aware components, automatically creating and managing their internal slot.

### Components
- **`LayoutSprite`**: A layout-aware `Sprite`.
- **`LayoutNineSliceSprite`**: A layout-aware `NineSliceSprite`.
- **`LayoutTilingSprite`**: A layout-aware `TilingSprite`.
- **`LayoutAnimatedSprite`**: A layout-aware `AnimatedSprite`.
- **`LayoutGifSprite`**: A layout-aware `GifSprite`.
- **`LayoutGraphics`**: A layout-aware `Graphics`.
- **`LayoutText`**: A layout-aware `Text`.
- **`LayoutBitmapText`**: A layout-aware `BitmapText`.
- **`LayoutHTMLText`**: A layout-aware `HTMLText`.
- **`LayoutMesh`**: Mesh-based variations.

### Constructor
`new LayoutView<T extends Container = Container>(options: LayoutViewOptions<T>)`

### Options (`LayoutViewOptions`)
```typescript
interface LayoutViewOptions<T extends Container = Container> extends LayoutContainerOptions {
    slot?: T;
}
```

- **`layout`** (LayoutStyles): Layout styles to apply.
- **`trackpad`** (TrackpadOptions): Scroll settings (relevant if `overflow: 'scroll'` is used).
- **`background`** (ContainerChild): A custom background object.
- **`slot`** (T): The internal display object that will be managed by the view.

### Example
```javascript
import { LayoutSprite, LayoutView } from '@pixi/layout/components';
import { Assets, Sprite } from 'pixi.js';

const texture = await Assets.load('https://pixijs.com/assets/bunny.png');

// Using a specific Layout component
const bunny = new LayoutSprite({
    texture,
    layout: {
        width: 100,
        height: 100,
        objectFit: 'contain',
        backgroundColor: 0x444444,
        borderColor: 0xffffff,
        borderRadius: 8,
    },
});

// Using LayoutView directly with a Sprite
const bunny2 = new LayoutView({
    slot: new Sprite(texture),
    layout: {
        width: 100,
        height: 100,
        objectFit: 'contain',
        backgroundColor: 0x444444,
        borderColor: 0xffffff,
        borderRadius: 8,
    },
});
```
```

--------------------------------

### Opt-in Layout with Managed and Unmanaged Sprites

Source: https://layout.pixijs.io/docs/guides/core/overview

Shows how PixiJS Layout is opt-in. A managed sprite with layout enabled is positioned by the layout engine, while an unmanaged sprite behaves as a standard PixiJS object.

```javascript
const container = new Container({
    layout: {
        width: 500,
        height: 500,
        justifyContent: 'center',
    },
});

const managed = new Sprite({ texture, layout: true });
const unmanaged = new Sprite(texture); // not in layout

container.addChild(managed, unmanaged);

```

--------------------------------

### LayoutText with Word Wrap Enabled

Source: https://layout.pixijs.io/docs/guides/styles/text-layout

Demonstrates creating a LayoutText node with automatic word wrapping enabled. The text will wrap based on the specified layout box width.

```javascript
const label = new LayoutText({
    text: 'This is a very long line that should wrap inside the box.',
    style: {
        fill: 0xffffff,
        wordWrap: true,
    },
    layout: {
        width: 250,
        height: 250,
    },
});

```

--------------------------------

### Setting Border on All Sides

Source: https://layout.pixijs.io/docs/guides/styles/spacing-margins-padding

Use `borderWidth` and `borderColor` to set a uniform border around a layout container. `borderColor` is required for the border to be drawn.

```javascript
// 2px border on all sides
container.layout = {
    borderWidth: 2,
    borderColor: 0x000000,
};
```

--------------------------------

### Setting Overflow to Scroll

Source: https://layout.pixijs.io/docs/guides/styles/overflow-and-scrolling

Demonstrates how to set the overflow behavior to 'scroll' for a LayoutContainer. This is the default behavior.

```javascript
const container = new LayoutContainer({
    layout: {
        overflow: 'scroll', // default
    },
});

```

--------------------------------

### Set Individual Row and Column Gaps

Source: https://layout.pixijs.io/docs/guides/styles/flexbox-layout

Allows for finer control over spacing by setting 'rowGap' and 'columnGap' independently. Useful when 'gap' is insufficient.

```javascript
container.layout = {
    rowGap: 10,
    columnGap: 30,
};
```

--------------------------------

### Configure Default Layout Styles

Source: https://layout.pixijs.io/docs/guides/core/layout

Sets default layout styles for leaf nodes, containers, and shared properties using the Layout.defaultStyle object. This allows for consistent styling across different object types.

```javascript
import { Layout } from '@pixi/layout';  
  
Layout.defaultStyle = {  
    leaf: {
        width: 'intrinsic',
        height: 'intrinsic',
    },
    container: {
        width: 'auto',
        height: 'auto',
    },
    shared: {
        transformOrigin: '50%',
        objectPosition: 'center',
        flexShrink: 1,
        flexDirection: 'row',
        alignContent: 'stretch',
        flexWrap: 'nowrap',
        overflow: 'visible',
    },
};
```

--------------------------------

### Set Width with Aspect Ratio

Source: https://layout.pixijs.io/docs/guides/styles/sizing-and-dimensions

Define a node's width and maintain a specific aspect ratio by setting the aspectRatio property. The height will adjust to match the ratio, respecting min/max constraints.

```javascript
sprite.layout = {
    width: 200,
    aspectRatio: 1.5,
};

```

--------------------------------

### Setting Individual Margins

Source: https://layout.pixijs.io/docs/guides/styles/spacing-margins-padding

Use `marginTop`, `marginBottom`, `marginLeft`, and `marginRight` to define specific margins for each side of a node.

```javascript
// Different margins for each side
sprite.layout = {
    marginTop: 10,
    marginBottom: 20,
    marginLeft: 5,
    marginRight: 15,
};
```

--------------------------------

### Configure Container as Leaf Node

Source: https://layout.pixijs.io/docs/guides/core/concepts/containers-leaf-nodes

Set `isLeaf` to true on a container to make it behave like a leaf node, ignoring its children for layout. This is useful when a container acts as a wrapper. The `objectFit` and `objectPosition` properties can then be applied.

```javascript
const container = new Container();

container.layout = {
    isLeaf: true,
    objectFit: 'contain',
    objectPosition: 'center',
};

```

--------------------------------

### Set Height with Aspect Ratio

Source: https://layout.pixijs.io/docs/guides/styles/sizing-and-dimensions

Define a node's height and maintain a specific aspect ratio by setting the aspectRatio property. The width will adjust to match the ratio, respecting min/max constraints.

```javascript
sprite.layout = {
    height: 200,
    aspectRatio: 2,
};

```

--------------------------------

### Justify Content

Source: https://layout.pixijs.io/docs/guides/styles/flexbox-layout

Controls alignment along the main axis. Use 'center' to pack items at the center.

```javascript
container.layout = {
    justifyContent: 'center',
};

```

--------------------------------

### Setting Padding on All Sides

Source: https://layout.pixijs.io/docs/guides/styles/spacing-margins-padding

Use the `padding` property to apply uniform padding inside the border box of a node.

```javascript
// 12px padding on all sides
container.layout = {
    padding: 12,
};
```

--------------------------------

### Setting Border Radius

Source: https://layout.pixijs.io/docs/guides/styles/spacing-margins-padding

Use `borderRadius` to create rounded corners for a container. Requires `borderWidth` and `borderColor` to be set.

```javascript
// 10px border radius
container.layout = {
    borderRadius: 10,
    borderColor: 0x000000,
    borderWidth: 2,
};
```

--------------------------------

### Sprite Object Fit Contain

Source: https://layout.pixijs.io/docs/guides/styles/object-fitting-alignment

Sets the sprite to scale while maintaining aspect ratio to fit entirely within its 200x200 layout box.

```javascript
sprite.layout = {
    width: 200,
    height: 200,
    objectFit: 'contain',
};
```

--------------------------------

### Configuring Trackpad Scrolling for LayoutContainer

Source: https://layout.pixijs.io/docs/guides/core/components

Customizes trackpad scrolling behavior for a LayoutContainer with 'overflow: scroll'. Allows fine-grained control over speed, constraints, and easing.

```typescript
const container = new LayoutContainer({
    layout: {
        overflow: 'scroll',
    },
    trackpad: {
        // Maximum scrolling speed (pixels per frame)
        maxSpeed: 400,

        // Constrain scrolling within bounds
        constrain: true,

        // No x-axis scrolling allowed when dragging beyond bounds
        xConstrainPercent: -1,
        // No y-axis overflow allowed when dragging beyond bounds
        yConstrainPercent: 0,

        // Disable momentum/easing when releasing
        disableEasing: false,

        // Custom easing for x/y axes
        xEase: new ScrollSpring({
            max: 200, // Maximum velocity
            damp: 0.7, // Higher damping = less bounce
            springiness: 0.15, // Higher springiness = faster movement
        }),
        yEase: new ScrollSpring({
            // Custom y-axis spring settings
        }),
    },
});
```

--------------------------------

### Listen for Layout Update Events

Source: https://layout.pixijs.io/docs/guides/core/layout

Attach a listener to the 'layout' event to be notified when the layout of a PixiJS object is updated. The event object contains the new layout state.

```javascript
sprite.on('layout', (event) => {
    console.log('Layout updated:', event);
});

// or using the callback
sprite.onLayout = (event) => {
    console.log('Layout updated:', event);
};
```

--------------------------------

### Set Flex Grow

Source: https://layout.pixijs.io/docs/guides/styles/flexbox-layout

Controls how much a child expands to fill remaining positive space. Values are distributed proportionally.

```javascript
child1.layout = { flexGrow: 1 };
child2.layout = { flexGrow: 2 }; // Here, `child2` will grow twice as much as `child1`.
```

--------------------------------

### Setting Margins on All Sides

Source: https://layout.pixijs.io/docs/guides/styles/spacing-margins-padding

Use the `margin` property to apply a uniform margin to all sides of a node.

```javascript
// 10px margin on all sides
sprite.layout = {
    margin: 10,
};
```

--------------------------------

### Set Flex Direction

Source: https://layout.pixijs.io/docs/guides/styles/flexbox-layout

Defines the main axis for laying out children. Use 'row' for horizontal or 'column' for vertical layout.

```javascript
container.layout = {
    flexDirection: 'row',
};
```

--------------------------------

### Update Layout Styles Dynamically

Source: https://layout.pixijs.io/docs/guides/core/layout

Updates the layout styles of a sprite and demonstrates how to apply further changes after a delay. The layout system merges new styles with existing ones.

```javascript
sprite.layout = {
    width: 200,
    height: 200,
    objectFit: 'contain',
};
  
setTimeout(() => {
    sprite.layout = {
        width: 300,
        objectFit: 'cover',
    };
}, 1000);
```

--------------------------------

### Enable Intrinsic Sizing for Leaf Nodes

Source: https://layout.pixijs.io/docs/guides/styles/sizing-and-dimensions

Set a node's layout to true to enable intrinsic sizing, allowing it to automatically adjust its size based on its content. This is the default behavior for leaf nodes.

```javascript
sprite.layout = true;
// This is equivalent to:  
sprite.layout = {  
    width: 'intrinsic',  
    height: 'intrinsic',  
};

```

--------------------------------

### Align Content

Source: https://layout.pixijs.io/docs/guides/styles/flexbox-layout

Controls alignment of lines when flexWrap is used. Use 'space-around' for even spacing around lines.

```javascript
container.layout = {
    alignContent: 'space-around',
};

```

--------------------------------

### Setting Individual Border Widths

Source: https://layout.pixijs.io/docs/guides/styles/spacing-margins-padding

While individual border widths can be set, only `borderWidth` is visually represented. These properties affect layout but do not draw borders.

```javascript
// Different border for each side
container.layout = {
    borderTopWidth: 2,
    borderBottomWidth: 4,
    borderLeftWidth: 1,
    borderRightWidth: 1,
};
```

--------------------------------

### Combine Intrinsic Sizing with Other Layout Styles

Source: https://layout.pixijs.io/docs/guides/core/overview

Combines intrinsic height sizing with a fixed width and object fitting for a text element. Useful for elements with variable content height but constrained width.

```javascript
text.layout = {
    width: 200,
    height: 'intrinsic',
    objectFit: 'scale-down',
};

```

--------------------------------

### Overriding Shorthand Margin with Longhand

Source: https://layout.pixijs.io/docs/guides/styles/spacing-margins-padding

Demonstrates how a longhand margin property (`marginTop`) overrides a previously set shorthand margin (`margin`).

```javascript
sprite.layout = {
    margin: 10, // Apply 10px to all sides first
    marginTop: 20, // Then override just the top side with 20px
};
```

--------------------------------

### Custom Sprite Background for LayoutContainer

Source: https://layout.pixijs.io/docs/guides/core/components

Provides a custom Sprite as a background for a LayoutContainer. Automatic background styling is disabled when a custom background is provided.

```typescript
import { LayoutContainer } from '@pixi/layout/components';
import { Sprite, Assets } from 'pixi.js';

const texture = await Assets.load('https://pixijs.com/assets/bunny.png');

const container = new LayoutContainer({
    layout: { width: 300, height: 300 },
    background: new Sprite({ texture }),
});
```

--------------------------------

### Enable Intrinsic Sizing for Sprite

Source: https://layout.pixijs.io/docs/guides/core/overview

Enables intrinsic sizing for a sprite, making its width and height adapt to its PixiJS bounds. This is the default behavior.

```javascript
sprite.layout = true;
// This is equivalent to:
sprite.layout = {
    width: 'intrinsic',
    height: 'intrinsic',
};

```

--------------------------------

### Set Fixed Dimensions Using Texture Size

Source: https://layout.pixijs.io/docs/guides/styles/sizing-and-dimensions

When intrinsic sizing is not desired or causes performance issues, you can set fixed width and height properties using the texture's dimensions.

```javascript
sprite.layout = {
    width: texture.width,
    height: texture.height,
};

```

--------------------------------

### Sprite Transform Origin Advanced Syntax

Source: https://layout.pixijs.io/docs/guides/styles/object-fitting-alignment

Sets the pivot point for transformations to be 0px from the top and 50px from the left of the layout box.

```javascript
sprite.layout = {
    transformOrigin: 'top 0px left 50px',
};
```

--------------------------------

### Layout Inclusion via Visibility

Source: https://layout.pixijs.io/docs/guides/core/layout

Makes a sprite visible, ensuring it is included in layout calculations. Use this to re-integrate an object into the layout flow.

```javascript
sprite.visible = true; // sprite will be included in layout
```

--------------------------------

### Manually Trigger Layout Recalculations

Source: https://layout.pixijs.io/docs/guides/core/layout-system

Forces a layout recalculation for a given container and its children. Use this when `autoUpdate` is disabled or for explicit control over updates.

```typescript
app.renderer.layout.update(app.stage); // or any other container if you want to update a specific part of the scene graph  
```

--------------------------------

### Set Node to Absolute Positioning with Zero Insets

Source: https://layout.pixijs.io/docs/guides/styles/positioning

Position a node absolutely at the top-left corner of its container by setting 'left' and 'top' insets to 0.

```javascript
sprite.layout = {
    position: 'absolute',
    left: 0,
    top: 0
};
```

--------------------------------

### Set Flex Basis

Source: https://layout.pixijs.io/docs/guides/styles/flexbox-layout

Sets the default size of a child along the main axis before growing or shrinking. Defaults to 'auto' if omitted.

```javascript
child.layout = {
    flexBasis: 100, // 100px starting size
};
```

--------------------------------

### Set Transform Origin for Layout Box

Source: https://layout.pixijs.io/docs/guides/core/overview

Configures a sprite's layout with a fixed size, object fit, and 'center' transform origin. Rotation is then applied around the center of the layout box, ensuring visual and layout transforms are synchronized.

```javascript
sprite.layout = {
    width: 300,
    height: 300,
    objectFit: 'cover',
    transformOrigin: 'center',
};

sprite.rotation = 0.2; // rotates around center of the layout box

```

--------------------------------

### Align Items

Source: https://layout.pixijs.io/docs/guides/styles/flexbox-layout

Controls cross-axis alignment for all children. Use 'stretch' to make items fill the cross axis.

```javascript
container.layout = {
    alignItems: 'stretch',
};

```

--------------------------------

### Use Fixed Sizes Instead of Intrinsic

Source: https://layout.pixijs.io/docs/guides/core/overview

Sets fixed width and height for a sprite's layout, which can improve performance compared to intrinsic sizing, especially with many nodes.

```javascript
sprite.layout = {
    width: sprite.width,
    height: sprite.height,
};

```

--------------------------------

### Set Gap Between Children

Source: https://layout.pixijs.io/docs/guides/styles/flexbox-layout

Defines spacing between adjacent children. 'gap' sets both row and column spacing. Defaults to 0.

```javascript
container.layout = {
    flexDirection: 'row',
    flexWrap: 'wrap',
    gap: 20,
};
```

--------------------------------

### Set Flex Wrap

Source: https://layout.pixijs.io/docs/guides/styles/flexbox-layout

Controls whether children wrap onto multiple lines when they exceed the container's main axis. Defaults to 'nowrap'.

```javascript
container.layout = {
    flexWrap: 'wrap',
};
```

--------------------------------

### Sprite Object Position Advanced Syntax

Source: https://layout.pixijs.io/docs/guides/styles/object-fitting-alignment

Positions the sprite within its layout box, offset 10px from the bottom and 20px from the right.

```javascript
sprite.layout = {
    objectPosition: 'bottom 10px right 20px',
};
```

--------------------------------

### Force Layout Update

Source: https://layout.pixijs.io/docs/guides/core/layout

Manually triggers an immediate layout recalculation for a sprite. Use this when external modifications might affect the object's bounds and the layout system may not detect the changes automatically.

```javascript
sprite.layout.forceUpdate();
```

--------------------------------

### LayoutContainer API

Source: https://layout.pixijs.io/docs/guides/core/components

LayoutContainer is a flexible container that manages multiple children using flexbox rules. It supports overflow control (hidden, scroll, visible) with smooth scrolling, background and border rendering with rounded corners, and custom background options.

```APIDOC
## LayoutContainer API

### Description
A full flex container that manages multiple children according to flexbox rules like `justifyContent`, `alignItems`, and `gap`. It also supports overflow control (`hidden`, `scroll`, `visible`) with integrated physics-based scrolling, and rendering of backgrounds, borders, and rounded corners.

### Constructor
`new LayoutContainer(options: LayoutContainerOptions)`

### Options (`LayoutContainerOptions`)
```typescript
interface LayoutContainerOptions extends ContainerOptions {
    layout?: LayoutStyles;
    trackpad?: TrackpadOptions;
    background?: ContainerChild;
}
```

- **`layout`** (LayoutStyles): Layout styles to apply on creation, including width, flex settings, padding, overflow, gap, background color, border color, and border radius.
- **`trackpad`** (TrackpadOptions): Settings for scroll behavior, relevant only when `overflow: 'scroll'`.
- **`background`** (ContainerChild): A custom PixiJS object to use as the background instead of the default `Graphics` object.

### Example
```javascript
import { LayoutContainer } from '@pixi/layout/components';

const container = new LayoutContainer({
    layout: {
        width: 300,
        height: 300,
        overflow: 'scroll',
        padding: 10,
        gap: 10,
        backgroundColor: 0x202020,
        borderColor: 0xffffff,
        borderRadius: 12,
    },
});

// Add multiple children freely
container.addChild(child1, child2, child3);
```
```

--------------------------------

### Set Flex Shrink

Source: https://layout.pixijs.io/docs/guides/styles/flexbox-layout

Controls how much a child shrinks when the total child size exceeds the container size. A value of 0 disables shrinking.

```javascript
child.layout = {
    flexShrink: 1,
};
```

--------------------------------

### Set Node to Relative Positioning with Insets

Source: https://layout.pixijs.io/docs/guides/styles/positioning

Use 'relative' positioning to keep a node in the flex flow and adjust its position relative to its computed flexbox location using insets.

```javascript
sprite.layout = {
    position: 'relative',
    left: 20,
    top: 10
};
```

--------------------------------

### Set Node to Absolute Positioning

Source: https://layout.pixijs.io/docs/guides/styles/positioning

Use 'absolute' positioning to remove a node from the flex flow and position it relative to its containing block. Insets will then control its placement.

```javascript
sprite.layout = {
    position: 'absolute'
};
```

--------------------------------

### Layout Exclusion via Visibility

Source: https://layout.pixijs.io/docs/guides/core/layout

Hides a sprite, preventing it from being included in layout calculations. Use this to temporarily remove an object from layout flow.

```javascript
sprite.visible = false; // sprite will not be included in layout
```

--------------------------------

### Set Background Color for Container

Source: https://layout.pixijs.io/docs/guides/styles/background

Use the `backgroundColor` property within the `layout` object to set a fill color for the background of a PixiJS Layout component. This property accepts a hexadecimal color value. The background will adopt rounded corners if a `borderRadius` is also specified.

```javascript
container.layout = {
    backgroundColor: 0x333333,
};
```

--------------------------------

### Disable Debug Renderer at Runtime

Source: https://layout.pixijs.io/docs/guides/core/layout-system

Deactivates the debug renderer, stopping the visualization of layout regions.

```typescript
app.renderer.layout.enableDebug(false);
```

--------------------------------

### Align Self

Source: https://layout.pixijs.io/docs/guides/styles/flexbox-layout

Overrides 'alignItems' per individual child to change its alignment within its parent. Use 'flex-end' to align the child to the end of the cross axis.

```javascript
child.layout = {
    alignSelf: 'flex-end',
};

```
Tokens:
Raw