Create an easy way to wrap a layout.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pixijs-layout",
-  "version": "0.1.25",
+  "version": "0.2.0",
   "description": "",
   "main": "./out/index.js",
   "types": "./out/index.d.ts",

src/LayoutContainer.ts

@@ -0,0 +1,19 @@
+import { DisplayObject, Rectangle } from "pixi.js-legacy";
+import { Partitioner } from "./Partitioner";
+
+export class LayoutContainer extends Partitioner {
+  constructor(child: Partitioner) {
+    super(child);
+  }
+
+  override *partition(
+    _objects: DisplayObject[],
+    space: Rectangle,
+  ): Generator<Rectangle> {
+    yield space;
+  }
+
+  override arrange(screen: Rectangle): void {
+    super.arrange(screen);
+  }
+}

src/Partitioner.ts

@@ -21,6 +21,15 @@ export abstract class Partitioner extends Container implements Positioner {
     this.zIndex = children
       .map((child) => child.zIndex)
       .reduce((a, b) => Math.min(a, b), Infinity);
+
+    let hasInteractiveChildren = false;
+    for (const child of children) {
+      if (child.interactiveChildren) {
+        hasInteractiveChildren = true;
+        break;
+      }
+    }
+    this.interactiveChildren = hasInteractiveChildren;
   }
 
   leaves(fn: (l: LeafComponent) => LeafComponent): this {

src/index.ts

@@ -4,6 +4,7 @@ import { Grid } from "./Grid";
 import { Positioner } from "./Positioner";
 import { Partitioner } from "./Partitioner";
 import { LayoutSize } from "./LayoutSize";
+import { LayoutContainer } from "./LayoutContainer";
 
 export {
   Stack,
@@ -14,4 +15,5 @@ export {
   Positioner,
   Partitioner,
   LayoutSize,
+  LayoutContainer,
 };

tests.ts

@@ -1,5 +1,5 @@
-import { Container } from "pixi.js-legacy";
-import { Grid, HStack, Stack, VStack } from "./src";
+import { Container, DisplayObject } from "pixi.js-legacy";
+import { Grid, HStack, LayoutContainer, Stack, VStack } from "./src";
 import { componentTest, circle, appTest, rect, tube } from "./test-utils";
 
 componentTest("1x2-hstack", () =>
@@ -405,3 +405,35 @@ componentTest("layout-size", () =>
     .leaves((leaf) => leaf.fit())
     .debug(),
 );
+
+class IndirectHStack extends LayoutContainer {
+  constructor(...children: DisplayObject[]) {
+    super(HStack(...children));
+  }
+}
+
+componentTest("indirect-hstack", () =>
+  VStack(
+    new IndirectHStack(circle(), circle(), circle()),
+    new IndirectHStack(circle(), circle(), circle()),
+    new IndirectHStack(circle(), circle(), circle()),
+  )
+    .debug()
+    .leaves((leaf) => leaf.fit().padding(5)),
+);
+
+class IndirectVStack extends LayoutContainer {
+  constructor(...children: DisplayObject[]) {
+    super(VStack(...children));
+  }
+}
+
+componentTest("indirect-vstack", () =>
+  HStack(
+    new IndirectVStack(circle(), circle(), circle()),
+    new IndirectVStack(circle(), circle(), circle()),
+    new IndirectVStack(circle(), circle(), circle()),
+  )
+    .debug()
+    .leaves((leaf) => leaf.fit().padding(5)),
+);