Handle 90 degree rotations.

package.json

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

src/Leaf.ts

@@ -15,6 +15,40 @@ enum Align {
   None,
 }
 
+function getRotatedDimensions(width: number, height: number, rotation: number) {
+  const sinAngle = Math.abs(Math.sin(rotation));
+  const cosAngle = Math.abs(Math.cos(rotation));
+  return {
+    width: width * cosAngle + height * sinAngle,
+    height: width * sinAngle + height * cosAngle,
+  };
+}
+
+function getOriginalDimensions(
+  rotatedWidth: number,
+  rotatedHeight: number,
+  rotation: number,
+) {
+  const sinAngle = Math.abs(Math.sin(rotation));
+  const cosAngle = Math.abs(Math.cos(rotation));
+
+  const originalWidth =
+    (rotatedWidth * cosAngle + rotatedHeight * sinAngle) /
+    (cosAngle + sinAngle);
+  const originalHeight =
+    (rotatedHeight * cosAngle + rotatedWidth * sinAngle) /
+    (cosAngle + sinAngle);
+
+  // const originalWidth =
+  //   (rotatedWidth * cosAngle + rotatedHeight * sinAngle) /
+  //   (cosAngle * cosAngle + sinAngle * sinAngle);
+  // const originalHeight =
+  //   (rotatedHeight * cosAngle + rotatedWidth * sinAngle) /
+  //   (cosAngle * cosAngle + sinAngle * sinAngle);
+
+  return { width: originalWidth, height: originalHeight };
+}
+
 export function Leaf(child: Container): LeafComponent {
   return new LeafComponent(child);
 }
@@ -161,8 +195,11 @@ 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, height } = getRotatedDimensions(
+      this._child.width,
+      this._child.height,
+      this._child.rotation,
+    );
     let containerAspectRatio = space.width / space.height;
     let aspectRatio = width / height;
 
@@ -229,8 +266,15 @@ export class LeafComponent extends Container implements Positioner {
 
     this._child.x = x;
     this._child.y = y;
-    this._child.width = width;
-    this._child.height = height;
+
+    const finalDimensions = getOriginalDimensions(
+      width,
+      height,
+      this._child.rotation,
+    );
+
+    this._child.width = finalDimensions.width;
+    this._child.height = finalDimensions.height;
 
     if ("arrange" in this._child) {
       let child = this._child as Positioner;

test-utils.ts

@@ -56,12 +56,14 @@ export function tube({
   width,
   height,
   center,
+  angle,
 }: {
   x?: number;
   y?: number;
   width?: number;
   height?: number;
   center?: boolean;
+  angle?: number;
 } = {}): PIXI.Graphics {
   x = x ?? 0;
   y = y ?? 0;
@@ -80,6 +82,8 @@ export function tube({
   tube.drawCircle(x, y + height / 2, height / 2);
   tube.drawCircle(x + width, y + height / 2, height / 2);
   tube.endFill();
+
+  tube.angle = angle ?? 0;
   return tube;
 }
 

tests.ts

@@ -356,3 +356,21 @@ componentTest("grid-of-tube-fit", () =>
     tube(),
   ).leaves((leaf) => leaf.center().fit().padding(5)),
 );
+
+componentTest("rotated-tube-center", () =>
+  HStack(tube({ angle: 90 })).leaves((leaf) => leaf.center()),
+);
+
+componentTest("rotated-tube-fit", () =>
+  HStack(tube({ angle: 90 })).leaves((leaf) => leaf.fit()),
+);
+
+// Can't yet handle non-90 degree rotations
+// componentTest("rotated-tube-fit-45", () =>
+//   HStack(tube({ angle: 45 })).leaves((leaf) => leaf.fit()),
+// );
+//
+// Can't yet handle non-90 degree rotations
+// componentTest("rotated-tube-fit-10", () =>
+//   HStack(tube({ angle: 10 })).leaves((leaf) => leaf.fit()),
+// );