fix(canvas): 多角度编辑器 - 改为可关闭的居中弹窗

Refs #432

web/src/pages/canvas/project.tsx

@@ -2463,15 +2463,15 @@ function InfiniteCanvasPage() {
                         ) : null}
                     </div>
 
-                    {angleNode?.metadata?.content && !isCanvasNodeMoving ? (
-                        <CanvasNodePanelOverlay
-                            node={angleNode}
-                            viewport={viewport}
-                            containerRef={containerRef}
-                            panelWidth={580}
-                            panelHeight={350}
-                            dragOffset={dragPreview?.nodeIds.has(angleNode.id) ? { x: dragPreview.x, y: dragPreview.y } : null}
-                            isDragging={isNodeDragging && Boolean(dragPreview?.nodeIds.has(angleNode.id))}
+                    {angleNode?.metadata?.content ? (
+                        <Modal
+                            open
+                            centered
+                            title="多角度编辑器"
+                            footer={null}
+                            width={620}
+                            destroyOnHidden
+                            onCancel={() => setAngleNodeId(null)}
                         >
                             <CanvasNodeAnglePanel
                                 dataUrl={angleNode.metadata.content}
@@ -2480,7 +2480,7 @@ function InfiniteCanvasPage() {
                                     void generateAngleNode(angleNode, params);
                                 }}
                             />
-                        </CanvasNodePanelOverlay>
+                        </Modal>
                     ) : null}
 
                     {emotionNode?.metadata?.content && !isCanvasNodeMoving ? (

web/test/canvas-angle-dialog.test.ts

@@ -0,0 +1,18 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, test } from "bun:test";
+
+const source = readFileSync(new URL("../src/pages/canvas/project.tsx", import.meta.url), "utf8");
+
+describe("image angle editor (#432)", () => {
+    test("uses a centered dismissible modal instead of a node-anchored overlay", () => {
+        const dialog = source.slice(source.indexOf("{angleNode?.metadata?.content"), source.indexOf("{emotionNode?.metadata?.content"));
+        expect(dialog).toContain("<Modal");
+        expect(dialog).toContain("centered");
+        expect(dialog).toContain("onCancel={() => setAngleNodeId(null)}");
+        expect(dialog).toContain("onClose={() => setAngleNodeId(null)}");
+        expect(dialog).toContain("destroyOnHidden");
+        expect(dialog).not.toContain("CanvasNodePanelOverlay");
+        expect(dialog).not.toContain("isCanvasNodeMoving");
+        expect(dialog).toContain("generateAngleNode(angleNode, params)");
+    });
+});