Fix aspect ratio calculation on fit()

samwho · Mar 19, 2024 · c1ac221 · c1ac221
1 parent 10a1edc
commit c1ac221
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 5 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/screenshots/tube-center-fit.png b/screenshots/tube-center-fit.png
diff --git a/screenshots/tube-center.png b/screenshots/tube-center.png
diff --git a/src/Leaf.ts b/src/Leaf.ts
@@ -1,4 +1,4 @@
-import { Rectangle, Container } from "pixi.js-legacy";
+import { Rectangle, Container } from "pixi.js";
 import Positioner from "./Positioner";
 import { getDimension } from "./utils";
 
@@ -174,7 +174,7 @@ export class LeafComponent extends Container implements Positioner {
           width = space.height * aspectRatio;
           height = space.height;
         } else {
-          height = space.width * aspectRatio;
+          height = space.width / aspectRatio;
           width = space.width;
         }
         break;

diff --git a/test-utils.ts b/test-utils.ts
@@ -50,6 +50,39 @@ export function rect({
   return rect;
 }
 
+export function tube({
+  x,
+  y,
+  width,
+  height,
+  center,
+}: {
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  center?: boolean;
+} = {}): PIXI.Graphics {
+  x = x ?? 0;
+  y = y ?? 0;
+  width = width ?? 100;
+  height = height ?? 50;
+  center = center ?? true;
+
+  let tube = new PIXI.Graphics();
+
+  if (center) {
+    tube.pivot.x = width / 2;
+    tube.pivot.y = height / 2;
+  }
+  tube.beginFill(0xff0000);
+  tube.drawRect(x, y, width, height);
+  tube.drawCircle(x, y + height / 2, height / 2);
+  tube.drawCircle(x + width, y + height / 2, height / 2);
+  tube.endFill();
+  return tube;
+}
+
 function innerTest(name: string, cb: (app: PIXI.Application) => void) {
   let canvas = document.createElement("canvas");
   canvas.width = 800;

diff --git a/tests.ts b/tests.ts
@@ -1,6 +1,6 @@
 import { Container } from "pixi.js-legacy";
 import { Grid, HStack, Stack, VStack } from "./src";
-import { componentTest, circle, appTest, rect } from "./test-utils";
+import { componentTest, circle, appTest, rect, tube } from "./test-utils";
 
 componentTest("1x2-hstack", () =>
   HStack(new Container(), new Container()).debug(),
@@ -326,3 +326,11 @@ componentTest("complex-debug", () =>
     .debug()
     .leaves((leaf) => leaf.fit().padding("10%")),
 );
+
+componentTest("tube-center", () =>
+  HStack(tube()).leaves((leaf) => leaf.center()),
+);
+
+componentTest("tube-center-fit", () =>
+  HStack(tube()).leaves((leaf) => leaf.center().fit()),
+);