feat(web): add an interactive Compositor node canvas
Author Compositor graphs in the web UI with React Flow and execute them locally. The native writer materializes RGB/Exposure/Invert/Blur/ Mix/Alpha Over/Transform/Viewer/Composite nodes into a real CompositorNodeTree, the reader returns node locations and more node types, and save/reopen keeps nodes, links, positions and properties. Co-Authored-By: Claude Code <noreply@anthropic.com>
This commit is contained in:
mes123456
109
web/tests/e2e/web-compositor-canvas.spec.ts
Normal file
109
web/tests/e2e/web-compositor-canvas.spec.ts
Normal file
@@ -0,0 +1,109 @@
|
||||
import { expect, test } from "@playwright/test";
|
||||
import path from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const HERE = path.dirname(fileURLToPath(import.meta.url));
|
||||
const STUDIO = path.resolve(HERE, "../../app/public/tutorial/pbr/studio.blend");
|
||||
|
||||
test.use({ viewport: { width: 1600, height: 900 } });
|
||||
|
||||
async function openStudio(page: import("@playwright/test").Page): Promise<void> {
|
||||
await page.goto("/?ui=web");
|
||||
await page.locator("main.blender-app").waitFor({ timeout: 120_000 });
|
||||
await page.locator('[data-testid="blend-file-input"]').setInputFiles(STUDIO);
|
||||
await page.getByText(/Engine: SceneIR/).first().waitFor({ timeout: 120_000 });
|
||||
await expect.poll(async () => page.getByTestId("scene-stats").innerText(), { timeout: 120_000 }).toMatch(/Objects 6/);
|
||||
}
|
||||
|
||||
async function openCompositor(page: import("@playwright/test").Page): Promise<import("@playwright/test").Locator> {
|
||||
await page.locator(".workspace-tabs button", { hasText: "Compositing" }).evaluate((element) => (element as HTMLElement).click());
|
||||
const canvas = page.getByTestId("compositor-canvas");
|
||||
await canvas.waitFor({ timeout: 60_000 });
|
||||
return canvas;
|
||||
}
|
||||
|
||||
async function addNode(page: import("@playwright/test").Page, canvas: import("@playwright/test").Locator, type: string): Promise<void> {
|
||||
const before = Number(await canvas.getAttribute("data-node-count") ?? "0");
|
||||
await canvas.getByLabel("添加节点类型").selectOption(type);
|
||||
await canvas.getByRole("button", { name: "添加节点", exact: true }).evaluate((element) => (element as HTMLElement).click());
|
||||
await expect.poll(async () => Number(await canvas.getAttribute("data-node-count")), { timeout: 30_000 }).toBe(before + 1);
|
||||
}
|
||||
|
||||
async function connect(page: import("@playwright/test").Page, from: string, to: string): Promise<void> {
|
||||
const source = page.locator(`.react-flow__node[data-id="${from}"] .react-flow__handle.source`).first();
|
||||
const target = page.locator(`.react-flow__node[data-id="${to}"] .react-flow__handle.target`).first();
|
||||
await expect(source).toHaveCount(1);
|
||||
await expect(target).toHaveCount(1);
|
||||
const fromBox = await source.boundingBox();
|
||||
const toBox = await target.boundingBox();
|
||||
if (!fromBox || !toBox) throw new Error("compositor node handles have no box");
|
||||
await page.mouse.move(fromBox.x + fromBox.width / 2, fromBox.y + fromBox.height / 2);
|
||||
await page.mouse.down();
|
||||
await page.mouse.move(toBox.x + toBox.width / 2, toBox.y + toBox.height / 2, { steps: 12 });
|
||||
await page.mouse.up();
|
||||
}
|
||||
|
||||
async function buildRgbExposureGraph(page: import("@playwright/test").Page, canvas: import("@playwright/test").Locator): Promise<void> {
|
||||
await addNode(page, canvas, "CONSTANT_COLOR");
|
||||
await addNode(page, canvas, "EXPOSURE");
|
||||
await connect(page, "node-constant-color-1", "node-exposure-1");
|
||||
await expect.poll(async () => canvas.getAttribute("data-link-count"), { timeout: 30_000 }).toBe("1");
|
||||
await connect(page, "node-exposure-1", "node-composite");
|
||||
await expect.poll(async () => canvas.getAttribute("data-link-count"), { timeout: 30_000 }).toBe("2");
|
||||
await page.locator('.react-flow__node[data-id="node-exposure-1"]').click();
|
||||
const exposure = canvas.locator('.compositor-canvas-inspector input[type="number"]').first();
|
||||
await exposure.fill("1.5");
|
||||
await exposure.blur();
|
||||
}
|
||||
|
||||
test("Compositor canvas builds, executes and commits a graph", async ({ page }) => {
|
||||
test.setTimeout(300_000);
|
||||
await openStudio(page);
|
||||
const canvas = await openCompositor(page);
|
||||
await expect.poll(async () => canvas.getAttribute("data-node-count"), { timeout: 30_000 }).toBe("1");
|
||||
await expect(canvas.getByText("Composite", { exact: true }).first()).toBeVisible();
|
||||
await buildRgbExposureGraph(page, canvas);
|
||||
|
||||
const before = Number(await page.locator("main.blender-app").getAttribute("data-project-snapshot-revision") ?? "0");
|
||||
await canvas.getByRole("button", { name: "执行合成", exact: true }).click();
|
||||
await expect.poll(async () => canvas.locator("header output").innerText(), { timeout: 30_000 }).toMatch(/合成完成/);
|
||||
const painted = await canvas.getByTestId("compositor-result").evaluate((element) => {
|
||||
const target = element as HTMLCanvasElement;
|
||||
const data = target.getContext("2d")?.getImageData(0, 0, target.width, target.height).data;
|
||||
return data ? { alpha: data[3], red: data[0], green: data[1], blue: data[2] } : null;
|
||||
});
|
||||
expect(painted).not.toBeNull();
|
||||
expect(painted!.alpha).toBeGreaterThan(0);
|
||||
expect(painted!.blue).toBeGreaterThan(painted!.red);
|
||||
|
||||
await canvas.getByRole("button", { name: "提交图", exact: true }).click();
|
||||
await expect.poll(async () => Number(await page.locator("main.blender-app").getAttribute("data-project-snapshot-revision") ?? "0"), { timeout: 60_000 }).toBeGreaterThan(before);
|
||||
await expect.poll(async () => canvas.getAttribute("data-node-count"), { timeout: 30_000 }).toBe("3");
|
||||
await expect.poll(async () => canvas.getAttribute("data-link-count"), { timeout: 30_000 }).toBe("2");
|
||||
});
|
||||
|
||||
test("Compositor canvas graph survives an OPFS save and reopen", async ({ page }) => {
|
||||
test.setTimeout(360_000);
|
||||
await openStudio(page);
|
||||
const canvas = await openCompositor(page);
|
||||
await buildRgbExposureGraph(page, canvas);
|
||||
const before = Number(await page.locator("main.blender-app").getAttribute("data-project-snapshot-revision") ?? "0");
|
||||
await canvas.getByRole("button", { name: "提交图", exact: true }).click();
|
||||
await expect.poll(async () => Number(await page.locator("main.blender-app").getAttribute("data-project-snapshot-revision") ?? "0"), { timeout: 60_000 }).toBeGreaterThan(before);
|
||||
await expect.poll(async () => canvas.getAttribute("data-node-count"), { timeout: 30_000 }).toBe("3");
|
||||
await page.locator('button[aria-label="保存项目"]').evaluate((element) => (element as HTMLElement).click());
|
||||
await expect(page.locator("main.blender-app")).toHaveAttribute("data-user-action-save-status", "SUCCEEDED", { timeout: 60_000 });
|
||||
await page.reload();
|
||||
await page.locator("main.blender-app").waitFor({ timeout: 120_000 });
|
||||
await expect.poll(async () => page.locator('[data-testid="recent-projects"] option').count(), { timeout: 60_000 }).toBeGreaterThan(1);
|
||||
await page.locator('[data-testid="recent-projects"]').selectOption({ index: 1 });
|
||||
const discard = page.getByRole("button", { name: "不保存，继续", exact: true });
|
||||
if (await discard.count()) await discard.click();
|
||||
await expect.poll(async () => page.getByTestId("scene-stats").innerText(), { timeout: 120_000 }).toMatch(/Objects 6/);
|
||||
const reopened = await openCompositor(page);
|
||||
await expect.poll(async () => reopened.getAttribute("data-node-count"), { timeout: 60_000 }).toBe("3");
|
||||
await expect.poll(async () => reopened.getAttribute("data-link-count"), { timeout: 60_000 }).toBe("2");
|
||||
await expect(reopened.locator(".react-flow__node", { hasText: "RGB 颜色" })).toHaveCount(1);
|
||||
await reopened.locator('.react-flow__node', { hasText: "曝光 Exposure" }).click();
|
||||
await expect(reopened.locator('.compositor-canvas-inspector input[type="number"]').first()).toHaveValue("1.5");
|
||||
});
|
||||
Reference in New Issue
Block a user