electrobun 1.18.4-beta.18 → 1.18.4-beta.21

package/dist/api/sdks/main/ui/__tests__/layout.test.ts

@@ -0,0 +1,159 @@
+import { describe, expect, test } from "bun:test";
+import { NodeKind, Prop, UiTree } from "../tree";
+import { Align, Justify, computeLayout } from "../layout";
+import { measureText } from "../font";
+
+function boxNode(
+	tree: UiTree,
+	parent: number,
+	props: Partial<Record<Prop, number>> = {},
+): number {
+	const id = tree.createNode(NodeKind.Box);
+	for (const [prop, value] of Object.entries(props)) {
+		tree.setProp(id, Number(prop) as Prop, value as number);
+	}
+	tree.append(parent, id);
+	return id;
+}
+
+describe("layout", () => {
+	test("column stacks children with gap and padding", () => {
+		const tree = new UiTree();
+		tree.setProp(tree.root, Prop.Dir, 1);
+		tree.setProp(tree.root, Prop.Pad, 10);
+		tree.setProp(tree.root, Prop.Gap, 5);
+		const a = boxNode(tree, tree.root, {
+			[Prop.Width]: 50,
+			[Prop.Height]: 20,
+		});
+		const b = boxNode(tree, tree.root, {
+			[Prop.Width]: 50,
+			[Prop.Height]: 30,
+		});
+		computeLayout(tree, 200, 200);
+		expect([tree.get(a).x, tree.get(a).y]).toEqual([10, 10]);
+		expect([tree.get(b).x, tree.get(b).y]).toEqual([10, 35]);
+	});
+
+	test("row grow distributes leftover space by weight", () => {
+		const tree = new UiTree();
+		const fixed = boxNode(tree, tree.root, {
+			[Prop.Width]: 100,
+			[Prop.Height]: 10,
+		});
+		const growA = boxNode(tree, tree.root, {
+			[Prop.Grow]: 1,
+			[Prop.Height]: 10,
+		});
+		const growB = boxNode(tree, tree.root, {
+			[Prop.Grow]: 3,
+			[Prop.Height]: 10,
+		});
+		computeLayout(tree, 500, 100);
+		expect(tree.get(fixed).w).toBe(100);
+		expect(tree.get(growA).w).toBe(100);
+		expect(tree.get(growB).w).toBe(300);
+		expect(tree.get(growB).x).toBe(200);
+	});
+
+	test("justify center offsets children along the main axis", () => {
+		const tree = new UiTree();
+		tree.setProp(tree.root, Prop.Justify, Justify.Center);
+		const child = boxNode(tree, tree.root, {
+			[Prop.Width]: 100,
+			[Prop.Height]: 50,
+		});
+		computeLayout(tree, 300, 100);
+		expect(tree.get(child).x).toBe(100);
+	});
+
+	test("justify space-between spreads children", () => {
+		const tree = new UiTree();
+		tree.setProp(tree.root, Prop.Justify, Justify.SpaceBetween);
+		const a = boxNode(tree, tree.root, {
+			[Prop.Width]: 50,
+			[Prop.Height]: 10,
+		});
+		const b = boxNode(tree, tree.root, {
+			[Prop.Width]: 50,
+			[Prop.Height]: 10,
+		});
+		computeLayout(tree, 300, 100);
+		expect(tree.get(a).x).toBe(0);
+		expect(tree.get(b).x).toBe(250);
+	});
+
+	test("align stretch fills the cross axis inside padding", () => {
+		const tree = new UiTree();
+		tree.setProp(tree.root, Prop.Align, Align.Stretch);
+		tree.setProp(tree.root, Prop.Pad, 8);
+		const child = boxNode(tree, tree.root, {
+			[Prop.Width]: 40,
+		});
+		computeLayout(tree, 200, 100);
+		expect(tree.get(child).h).toBe(84);
+		expect(tree.get(child).y).toBe(8);
+	});
+
+	test("align center positions on the cross axis", () => {
+		const tree = new UiTree();
+		tree.setProp(tree.root, Prop.Align, Align.Center);
+		const child = boxNode(tree, tree.root, {
+			[Prop.Width]: 40,
+			[Prop.Height]: 40,
+		});
+		computeLayout(tree, 200, 100);
+		expect(tree.get(child).y).toBe(30);
+	});
+
+	test("auto box wraps its content plus padding (align start)", () => {
+		const tree = new UiTree();
+		tree.setProp(tree.root, Prop.Align, Align.Start);
+		const wrapper = boxNode(tree, tree.root, { [Prop.Pad]: 6 });
+		boxNode(tree, wrapper, { [Prop.Width]: 30, [Prop.Height]: 20 });
+		computeLayout(tree, 400, 400);
+		expect(tree.get(wrapper).w).toBe(42);
+		expect(tree.get(wrapper).h).toBe(32);
+	});
+
+	test("children stretch on the cross axis by default (flexbox rule)", () => {
+		const tree = new UiTree();
+		// Row: auto-height box stretches to the container's height...
+		const auto = boxNode(tree, tree.root, { [Prop.Width]: 40 });
+		// ...a fixed cross size wins over stretch...
+		const fixed = boxNode(tree, tree.root, {
+			[Prop.Width]: 40,
+			[Prop.Height]: 25,
+		});
+		// ...and text keeps its intrinsic size.
+		const label = tree.createTextNode("hi");
+		tree.append(tree.root, label);
+		computeLayout(tree, 400, 300);
+		expect(tree.get(auto).h).toBe(300);
+		expect(tree.get(fixed).h).toBe(25);
+		expect(tree.get(label).h).toBe(14);
+	});
+
+	test("text nodes measure from the bitmap font", () => {
+		const tree = new UiTree();
+		const label = tree.createTextNode("hello");
+		tree.setProp(label, Prop.FontSize, 14);
+		tree.append(tree.root, label);
+		computeLayout(tree, 400, 400);
+		const expected = measureText("hello", 14);
+		expect(tree.get(label).w).toBeCloseTo(expected.w);
+		expect(tree.get(label).h).toBe(14);
+	});
+
+	test("anchor nodes occupy layout space", () => {
+		const tree = new UiTree();
+		tree.setProp(tree.root, Prop.Dir, 1);
+		boxNode(tree, tree.root, { [Prop.Height]: 40, [Prop.Width]: 40 });
+		const anchor = tree.createNode(NodeKind.Anchor);
+		tree.setProp(anchor, Prop.Grow, 1);
+		tree.append(tree.root, anchor);
+		computeLayout(tree, 300, 200);
+		expect(tree.get(anchor).y).toBe(40);
+		expect(tree.get(anchor).h).toBe(160);
+	});
+});

package/dist/api/sdks/main/ui/__tests__/paint.test.ts

@@ -0,0 +1,115 @@
+import { describe, expect, test } from "bun:test";
+import { NodeKind, Prop, UiTree } from "../tree";
+import { computeLayout } from "../layout";
+import { FLOATS_PER_INSTANCE, paint, parseColor } from "../paint";
+import { glyphRuns } from "../font";
+
+function instance(data: Float32Array, i: number): number[] {
+	return Array.from(data.subarray(i * FLOATS_PER_INSTANCE, (i + 1) * FLOATS_PER_INSTANCE));
+}
+
+describe("parseColor", () => {
+	test("parses #rrggbb with implicit opaque alpha", () => {
+		expect(parseColor("#ff8000")).toBe(0xff8000ff);
+	});
+	test("parses #rgb shorthand", () => {
+		expect(parseColor("#fff")).toBe(0xffffffff);
+	});
+	test("parses #rrggbbaa", () => {
+		expect(parseColor("#11223344")).toBe(0x11223344);
+	});
+	test("passes numbers through", () => {
+		expect(parseColor(0x12345678)).toBe(0x12345678);
+	});
+	test("rejects malformed colors", () => {
+		expect(() => parseColor("#12345")).toThrow();
+	});
+});
+
+describe("paint", () => {
+	test("boxes with background emit one rounded rect", () => {
+		const tree = new UiTree();
+		const box = tree.createNode(NodeKind.Box);
+		tree.setProp(box, Prop.Width, 100);
+		tree.setProp(box, Prop.Height, 40);
+		tree.setProp(box, Prop.Bg, parseColor("#ff0000"));
+		tree.setProp(box, Prop.Radius, 6);
+		tree.append(tree.root, box);
+		computeLayout(tree, 200, 200);
+		const buffer = paint(tree);
+		expect(buffer.count).toBe(1);
+		const [x, y, w, h, r, g, b, a, radius] = instance(buffer.data, 0);
+		expect([x, y, w, h]).toEqual([0, 0, 100, 40]);
+		expect([r, g, b, a]).toEqual([1, 0, 0, 1]);
+		expect(radius).toBe(6);
+	});
+
+	test("transparent boxes emit nothing", () => {
+		const tree = new UiTree();
+		const box = tree.createNode(NodeKind.Box);
+		tree.setProp(box, Prop.Width, 10);
+		tree.setProp(box, Prop.Height, 10);
+		tree.append(tree.root, box);
+		computeLayout(tree, 100, 100);
+		expect(paint(tree).count).toBe(0);
+	});
+
+	test("border emits outer border rect then inset background", () => {
+		const tree = new UiTree();
+		const box = tree.createNode(NodeKind.Box);
+		tree.setProp(box, Prop.Width, 50);
+		tree.setProp(box, Prop.Height, 30);
+		tree.setProp(box, Prop.Bg, parseColor("#000000"));
+		tree.setProp(box, Prop.BorderWidth, 2);
+		tree.setProp(box, Prop.BorderColor, parseColor("#00ff00"));
+		tree.setProp(box, Prop.Radius, 5);
+		tree.append(tree.root, box);
+		computeLayout(tree, 100, 100);
+		const buffer = paint(tree);
+		expect(buffer.count).toBe(2);
+		const border = instance(buffer.data, 0);
+		const bg = instance(buffer.data, 1);
+		expect(border.slice(0, 4)).toEqual([0, 0, 50, 30]);
+		expect(bg.slice(0, 4)).toEqual([2, 2, 46, 26]);
+		expect(bg[8]).toBe(3); // radius shrinks by border width
+	});
+
+	test("parents paint before children (painter's order)", () => {
+		const tree = new UiTree();
+		const parent = tree.createNode(NodeKind.Box);
+		tree.setProp(parent, Prop.Width, 100);
+		tree.setProp(parent, Prop.Height, 100);
+		tree.setProp(parent, Prop.Bg, parseColor("#111111"));
+		tree.append(tree.root, parent);
+		const child = tree.createNode(NodeKind.Box);
+		tree.setProp(child, Prop.Width, 10);
+		tree.setProp(child, Prop.Height, 10);
+		tree.setProp(child, Prop.Bg, parseColor("#eeeeee"));
+		tree.append(parent, child);
+		computeLayout(tree, 100, 100);
+		const buffer = paint(tree);
+		expect(buffer.count).toBe(2);
+		expect(instance(buffer.data, 0)[2]).toBe(100); // parent first
+		expect(instance(buffer.data, 1)[2]).toBe(10);
+	});
+
+	test("text emits one instance per glyph run", () => {
+		const tree = new UiTree();
+		const label = tree.createTextNode("II");
+		tree.setProp(label, Prop.FontSize, 14);
+		tree.append(tree.root, label);
+		computeLayout(tree, 100, 100);
+		const runsPerGlyph = glyphRuns("I").length;
+		expect(paint(tree).count).toBe(runsPerGlyph * 2);
+	});
+
+	test("anchor nodes paint nothing", () => {
+		const tree = new UiTree();
+		const anchor = tree.createNode(NodeKind.Anchor);
+		tree.setProp(anchor, Prop.Width, 50);
+		tree.setProp(anchor, Prop.Height, 50);
+		tree.append(tree.root, anchor);
+		computeLayout(tree, 100, 100);
+		expect(paint(tree).count).toBe(0);
+	});
+});