feat: add render graph driven renderer architecture

Amp-Thread-ID: https://ampcode.com/threads/T-019f9d91-77c1-7206-a60f-ed6554ce92ab Co-authored-by: Heaust Azure <heaust.azure@gmail.com>
2026-07-27 02:53:44 +00:00
parent 8a8369706b
commit d4e8634f67
290 changed files with 48804 additions and 1995 deletions
@@ -0,0 +1,57 @@
+import type { FxNodeDefinition, FxNodeSocketTypeDefinition, FxNodeStyleDefinition } from "@lib/index.js";
+export const liveSocket = [
+  "number",
+  { title: "Number", color: "#74c0fc", acceptsFrom: ["number"] },
+] as const satisfies readonly [string, FxNodeSocketTypeDefinition];
+export const liveStyles = { live: { header: "#0b7285" } } as const satisfies Readonly<
+  Record<string, FxNodeStyleDefinition>
+>;
+const base = {
+  title: "Live Parameter",
+  behavior: "standard",
+  style: "live",
+  sockets: {
+    result: {
+      title: "Result",
+      direction: "output",
+      type: "number",
+      maxIncomingLinks: 0,
+      visible: true,
+      value: null,
+      showValue: false,
+    },
+  },
+  muteBypass: [],
+} as const;
+export const liveNodeV1 = [
+  "example.live.parameter",
+  {
+    ...base,
+    version: 1,
+    parameters: { value: { type: "number", default: { kind: "number", value: 1 } } },
+    ui: [
+      { kind: "parameter", parameter: "value" },
+      { kind: "socket", socket: "result" },
+    ],
+    migrations: [],
+  },
+] as const satisfies readonly [string, FxNodeDefinition];
+export const liveNodeV2 = [
+  "example.live.parameter",
+  {
+    ...base,
+    version: 2,
+    parameters: {
+      value: { type: "number", default: { kind: "number", value: 1 } },
+      detail: { type: "number", default: { kind: "number", value: 0.5 }, minimum: 0, maximum: 1, step: 0.1 },
+    },
+    ui: [
+      { kind: "parameter", parameter: "value" },
+      { kind: "parameter", parameter: "detail" },
+      { kind: "socket", socket: "result" },
+    ],
+    migrations: [
+      { fromVersion: 1, toVersion: 2, steps: [{ kind: "materialize-missing", target: "parameter", key: "detail" }] },
+    ],
+  },
+] as const satisfies readonly [string, FxNodeDefinition];
@@ -0,0 +1,22 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width" />
+    <title>fxnode live composition</title>
+    <link rel="stylesheet" href="../shared/example.css" />
+  </head>
+  <body>
+    <main>
+      <h1>Live composition migration</h1>
+      <p>
+        Updates a version 1 schema to version 2 and materializes a missing detail parameter. This demonstrates
+        composition, not graph execution or evaluation.
+      </p>
+      <button id="compose" type="button">Compose version 2</button>
+      <span id="status" role="status">Version 1 ready</span
+      ><canvas id="graph" width="1000" height="560" aria-label="Live composition node graph"></canvas>
+    </main>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>
@@ -0,0 +1,82 @@
+import { createFxNode } from "@lib/index.js";
+import { prepareFxNodeBrowserHost } from "../shared/browser-host.js";
+import { exampleTheme } from "../shared/theme.js";
+import { liveNodeV1, liveNodeV2, liveSocket, liveStyles } from "./definitions.js";
+const canvas = document.querySelector<HTMLCanvasElement>("#graph")!,
+  button = document.querySelector<HTMLButtonElement>("#compose")!,
+  status = document.querySelector<HTMLElement>("#status")!,
+  host = prepareFxNodeBrowserHost({ canvas });
+let cleanedUp = false;
+function cleanup() {
+  window.removeEventListener("pagehide", cleanup);
+  cleanedUp = true;
+  button.removeEventListener("click", compose);
+  const root = handle.root,
+    view = handle.view;
+  handle.root = null;
+  handle.view = null;
+  host.destroy();
+  const destroyRoot = () => root?.destroy();
+  if (view) void view.detach().then(destroyRoot, destroyRoot);
+  else destroyRoot();
+}
+const handle: StandaloneExampleHandle = {
+  root: null,
+  view: null,
+  host,
+  ready: Promise.resolve(),
+  cleanup,
+};
+window.fxnodeStandalone = handle;
+window.addEventListener("pagehide", cleanup);
+let revision = 0;
+async function compose() {
+  if (!handle.root || !handle.view) return;
+  button.disabled = true;
+  status.textContent = "Composing version 2…";
+  try {
+    const receipt = await handle.root.composeNode(...liveNodeV2, { expectedRevision: revision });
+    revision = receipt.revision;
+    handle.lastCompositionReceipt = receipt;
+    status.textContent = `Version 2 ${receipt.status}; revision ${receipt.revision}; graph ${receipt.graphChanged ? "migrated" : "unchanged"}`;
+    await handle.view.whenRendered();
+  } catch (error) {
+    status.textContent = error instanceof Error ? error.message : String(error);
+    button.disabled = false;
+    throw error;
+  }
+}
+button.addEventListener("click", compose);
+handle.ready = (async () => {
+  try {
+    const root = await createFxNode({
+      applicationId: "fxnode.example.live-composition",
+      applicationVersion: 1,
+      resources: {},
+    });
+    if (cleanedUp) {
+      root.destroy();
+      return;
+    }
+    handle.root = root;
+    await root.setTheme(exampleTheme);
+    await root.setHeaderStyles(liveStyles);
+    await root.composeSocket(...liveSocket);
+    const receipt = await root.composeNode(...liveNodeV1);
+    revision = receipt.revision;
+    await root.setState({ graphId: "live", catalogVersion: 1, nodes: [], links: [], metadata: {} });
+    const view = await root.attachView({ canvas, viewport: host.initialViewport });
+    handle.view = view;
+    host.attach(root, view);
+    const added = await view.addNode({
+      nodeId: "live-node",
+      typeId: liveNodeV1[0],
+      viewPosition: { x: 340, y: 160 },
+    });
+    handle.graphVersion = added.version;
+    await view.whenRendered();
+  } catch (error) {
+    handle.cleanup();
+    throw error;
+  }
+})();