Add the ability to set custom layout sizes.

package.json

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

src/Grid.ts

@@ -1,5 +1,5 @@
 import { Container, DisplayObject, Rectangle } from "pixi.js-legacy";
-import Partitioner from "./Partitioner";
+import { Partitioner } from "./Partitioner";
 
 export function Grid(...objects: DisplayObject[]): GridComponent {
   return new GridComponent(...objects);

src/LayoutSize.ts

@@ -0,0 +1,15 @@
+export interface LayoutSize {
+  getLayoutWidth(): number;
+  getLayoutHeight(): number;
+}
+
+export function isLayoutSize(object: unknown): object is LayoutSize {
+  return (
+    typeof object === "object" &&
+    object !== null &&
+    "getLayoutWidth" in object &&
+    "getLayoutHeight" in object &&
+    typeof object["getLayoutWidth"] === "function" &&
+    typeof object["getLayoutHeight"] === "function"
+  );
+}

src/Leaf.ts

@@ -1,6 +1,6 @@
 import { Rectangle, Container } from "pixi.js-legacy";
-import Positioner from "./Positioner";
-import { getDimension } from "./utils";
+import { Positioner } from "./Positioner";
+import { isLayoutSize } from "./LayoutSize";
 
 enum Resize {
   None,
@@ -19,6 +19,16 @@ export function Leaf(child: Container): LeafComponent {
   return new LeafComponent(child);
 }
 
+function getDimension(value: number | string, reference: number): number {
+  if (typeof value === "number") {
+    return value;
+  }
+  if (typeof value === "string" && value.endsWith("%")) {
+    return reference * (parseFloat(value) / 100);
+  }
+  throw new Error(`Invalid value: ${value}`);
+}
+
 export class LeafComponent extends Container implements Positioner {
   _child: Container;
   _space: Rectangle = new Rectangle();
@@ -161,8 +171,18 @@ export class LeafComponent extends Container implements Positioner {
 
     let x = this._child.x;
     let y = this._child.y;
-    let width = this._child.width;
-    let height = this._child.height;
+
+    let width: number, height: number;
+    if (isLayoutSize(this._child)) {
+      width = this._child.getLayoutWidth();
+      height = this._child.getLayoutHeight();
+    } else {
+      width = this._child.width;
+      height = this._child.height;
+    }
+    const originalWidth = width;
+    const originalHeight = height;
+
     let aspectRatio = width / height;
 
     switch (this._resize) {
@@ -230,8 +250,8 @@ export class LeafComponent extends Container implements Positioner {
     this._child.x = x;
     this._child.y = y;
 
-    this._child.width = width;
-    this._child.height = height;
+    this._child.scale.x = width / originalWidth;
+    this._child.scale.y = height / originalHeight;
 
     if ("arrange" in this._child) {
       let child = this._child as Positioner;

src/Partitioner.ts

@@ -1,11 +1,8 @@
 import { Container, DisplayObject, Graphics, Rectangle } from "pixi.js-legacy";
-import Positioner from "./Positioner";
+import { Positioner, isPositioner } from "./Positioner";
 import { Leaf, LeafComponent } from "./Leaf";
 
-export default abstract class Partitioner
-  extends Container
-  implements Positioner
-{
+export abstract class Partitioner extends Container implements Positioner {
   protected _debug: boolean = false;
   protected _group: DisplayObject[];
   protected _containers: Container[] = [];
@@ -171,7 +168,7 @@ export default abstract class Partitioner
         child._debug = this._debug;
       }
 
-      if ("arrange" in child && typeof child.arrange === "function") {
+      if (isPositioner(child)) {
         child.arrange(new Rectangle(0, 0, partition.width, partition.height));
       }
     }

src/Positioner.ts

@@ -1,5 +1,14 @@
 import { Rectangle } from "pixi.js-legacy";
 
-export default interface Positioner {
+export interface Positioner {
   arrange(screen: Rectangle): void;
 }
+
+export function isPositioner(object: unknown): object is Positioner {
+  return (
+    typeof object === "object" &&
+    object !== null &&
+    "arrange" in object &&
+    typeof object["arrange"] === "function"
+  );
+}

src/Stack.ts

@@ -1,5 +1,5 @@
 import { DisplayObject, Rectangle } from "pixi.js-legacy";
-import Partitioner from "./Partitioner";
+import { Partitioner } from "./Partitioner";
 
 enum Direction {
   Horizontal,

src/index.ts

@@ -1,7 +1,7 @@
 import { HStack, VStack, Stack } from "./Stack";
 import { Leaf } from "./Leaf";
 import { Grid } from "./Grid";
-import Positioner from "./Positioner";
-import Partitioner from "./Partitioner";
+import { Positioner } from "./Positioner";
+import { Partitioner } from "./Partitioner";
 
 export { Stack, HStack, VStack, Leaf, Grid, Positioner, Partitioner };

test-utils.ts

@@ -1,21 +1,36 @@
 import { expect } from "@jest/globals";
 import * as PIXI from "pixi.js-legacy";
 import fs from "fs";
-import Positioner from "./src/Positioner";
+import { Positioner } from "./src/Positioner";
 
 export function circle({
   x,
   y,
   radius,
+  layoutWidth,
+  layoutHeight,
 }: {
   x?: number;
   y?: number;
   radius?: number;
+  layoutWidth?: number;
+  layoutHeight?: number;
 } = {}): PIXI.Graphics {
   let circle = new PIXI.Graphics();
   circle.beginFill(0xff0000);
   circle.drawCircle(x ?? 0, y ?? 0, radius ?? 50);
   circle.endFill();
+
+  if (layoutWidth) {
+    // @ts-expect-error
+    circle.getLayoutWidth = () => layoutWidth;
+  }
+
+  if (layoutHeight) {
+    // @ts-expect-error
+    circle.getLayoutHeight = () => layoutHeight;
+  }
+
   return circle;
 }
 
@@ -25,12 +40,16 @@ export function rect({
   width,
   height,
   center,
+  layoutWidth,
+  layoutHeight,
 }: {
   x?: number;
   y?: number;
   width?: number;
   height?: number;
   center?: boolean;
+  layoutWidth?: number;
+  layoutHeight?: number;
 } = {}): PIXI.Graphics {
   x = x ?? 0;
   y = y ?? 0;
@@ -47,6 +66,17 @@ export function rect({
   rect.beginFill(0xff0000);
   rect.drawRect(x, y, width, height);
   rect.endFill();
+
+  if (layoutWidth) {
+    // @ts-expect-error
+    rect.getLayoutWidth = () => layoutWidth;
+  }
+
+  if (layoutHeight) {
+    // @ts-expect-error
+    rect.getLayoutHeight = () => layoutHeight;
+  }
+
   return rect;
 }
 
@@ -57,13 +87,17 @@ export function tube({
   height = 50,
   center = true,
   orientation = "horizontal",
+  layoutWidth,
+  layoutHeight,
 }: {
   x?: number;
   y?: number;
   width?: number;
   height?: number;
   center?: boolean;
   orientation?: "horizontal" | "vertical";
+  layoutWidth?: number;
+  layoutHeight?: number;
 } = {}): PIXI.Graphics {
   let tube = new PIXI.Graphics();
   if (center) {
@@ -84,6 +118,16 @@ export function tube({
     tube.endFill();
   }
 
+  if (layoutWidth) {
+    // @ts-expect-error
+    tube.getLayoutWidth = () => layoutWidth;
+  }
+
+  if (layoutHeight) {
+    // @ts-expect-error
+    tube.getLayoutHeight = () => layoutHeight;
+  }
+
   return tube;
 }
 

tests.ts

@@ -393,3 +393,15 @@ componentTest("wide-tube-segment", () =>
     .leaves((leaf) => leaf.fit())
     .debug(),
 );
+
+componentTest("layout-size", () =>
+  HStack(
+    circle({
+      radius: 50,
+      layoutWidth: 200,
+      layoutHeight: 200,
+    }),
+  )
+    .leaves((leaf) => leaf.fit())
+    .debug(),
+);