feat(canvas): add leafer GPU renderer and interactive color-boundary crop tool

Introduce a leafer-ui canvas layer that mirrors rendered nodes and drives viewport, node-drag, and alignment-guide updates imperatively, committing React state on idle via startTransition to keep pan/zoom/drag at 60fps. Wire the imperative viewport through wheel zoom, zoom-to, fit-view, and panning. Add a dedicated crop tool: click a node to auto-detect a color-boundary crop region or drag to preselect one, previewed with an on-canvas draft overlay before entering the crop editor. Route uploads through renderContent so the transparent WebP texture feeds the fast display path. Add node --test coverage for the leafer renderer and color-boundary detection. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
2026-07-16 20:46:31 +08:00
parent 8e1506e4c4
commit b363dcf888
12 changed files with 1426 additions and 49 deletions
@@ -0,0 +1,59 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+
+import { leaferViewSize, leaferVisualDescriptor, visualInput } from "../src/ui/pages/CanvasWorkspace/canvas/leaferRenderer.ts";
+
+const cadNode = {
+  id: "cad-1",
+  type: "image",
+  title: "drawing.dwg",
+  x: 10,
+  y: 20,
+  width: 640,
+  height: 480,
+  content: "https://assets.example/drawing.svg",
+  renderContent: "https://assets.example/drawing.render.webp",
+  tone: "transparent-image",
+  status: "success",
+  layerRole: "cad-vector",
+  semanticContext: "CAD semantic context: layer ROOMS"
+};
+
+test("renders CAD through its WebP texture without changing source or semantics", () => {
+  const descriptor = leaferVisualDescriptor(cadNode);
+  const input = visualInput(descriptor);
+
+  assert.equal(descriptor.kind, "image");
+  assert.match(descriptor.url, /drawing\.render\.webp/);
+  assert.equal(input.x, cadNode.x + cadNode.width / 2);
+  assert.equal(input.y, cadNode.y + cadNode.height / 2);
+  assert.equal(cadNode.content, "https://assets.example/drawing.svg");
+  assert.match(cadNode.semanticContext, /ROOMS/);
+});
+
+test("keeps vector nodes on the DOM fallback until a render texture exists", () => {
+  assert.equal(leaferVisualDescriptor({ ...cadNode, renderContent: undefined }), null);
+});
+
+test("maps manual frames to retained Leafer rectangles", () => {
+  const descriptor = leaferVisualDescriptor({
+    ...cadNode,
+    id: "frame-1",
+    type: "frame",
+    layerRole: "manual-frame",
+    fillColor: "#ffffff",
+    strokeColor: "#101010",
+    strokeWidth: 2,
+    strokeStyle: "dashed"
+  });
+
+  assert.equal(descriptor.kind, "frame");
+  assert.deepEqual(descriptor.dashPattern, [12, 8]);
+});
+
+test("sizes the Leafer surface from the mounted stage instead of stale defaults", () => {
+  assert.deepEqual(leaferViewSize({ clientWidth: 1685, clientHeight: 1670 }, { width: 1100, height: 760 }), {
+    width: 1685,
+    height: 1670
+  });
+});