+
+ nodes={nodes} edges={edges} nodeTypes={nodeTypes}
+ onNodesChange={(changes) => dispatch({ type: "nodes", changes })}
+ onEdgesChange={(changes) => dispatch({ type: "edges", changes })}
+ onNodeDragStart={beginEdit} onConnect={connect}
+ onMoveEnd={(_, viewport) => dispatch({ type: "viewport", viewport })}
+ defaultViewport={initial.document.viewport} minZoom={0.1} maxZoom={4}
+ panOnDrag panOnScroll zoomOnScroll={false} zoomOnPinch zoomActivationKeyCode={["Meta", "Control"]}
+ nodesDraggable={tool === "select"} nodesConnectable={tool === "select"}
+ elementsSelectable={tool === "select"} selectionMode={SelectionMode.Partial}
+ panActivationKeyCode="Space" selectionKeyCode="Shift"
+ deleteKeyCode={["Backspace", "Delete"]} preventScrolling
+ defaultEdgeOptions={{ style: { stroke: "#aa968b", strokeWidth: 1.5 } }}>
+
+
+ );
+}
+
+export default function GraphCanvas({ board }: { board: Board }) {
+ return
+
+
+ dispatch({ type: "undo" })} />
+ dispatch({ type: "redo" })} />
+
+ void flow.zoomOut({ duration })} />
+
+ void flow.zoomIn({ duration })} />
+ nodes.length ? void flow.fitView({ padding: 0.2, duration }) : void flow.setViewport({ x: 0, y: 0, zoom: 1 }, { duration })} />
+
+
+ {saved ? "保存在此浏览器" : "正在保存到此浏览器…"}
+
+ setTool("select")} />
+ setTool("hand")} />
+
+ addNode("text")} />
+ imageInput.current?.click()} />
+ addNode("script")} />
+ projectInput.current?.click()} />
+
+
+
+ 自由创作，从移动画布开始
+
+ {error && }
+
+
+ 拖动空白处平移，拖动节点移动位置。
+触控板滚动平移；按 Ctrl / ⌘ 滚动或双指捏合缩放。
+V 选择 · H 抓手 · 按住空格临时平移 · Shift 框选
+拖动节点两侧圆点创建连线；Delete 删除所选内容。
+⌘ / Ctrl + Z 撤销，Shift + ⌘ / Ctrl + Z 重做。
+当前编辑保存在此浏览器，可导出 JSON 备份。
+