節點接線畫布

把多步驟流程畫成可以直接編輯的圖：每個節點是一張卡片，左側是輸入埠、右側是輸出埠，埠與埠之間以三次貝茲曲線相連。節點可以拖到任何位置，放開時以彈簧補間對齊格線；從輸出埠拖出新線，靠近合法的輸入埠會自動吸附；流程執行時，每條線上有光點沿路徑流動。畫布支援滾輪平移、Ctrl／⌘＋滾輪縮放與拖曳背景，節點與連線都是可受控的資料。

Playground

即時調整 props、程式碼片段同步更新——直接試出你要的樣子再複製。

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<NodeWireCanvas/>

    </div>
  );
}

安裝

使用

import * as React from "react";
import {
  NodeWireCanvas,
  type NodeWireEdge,
  type NodeWireNode,
} from "@/components/ui/node-wire-canvas";

const initialNodes: NodeWireNode[] = [
  { id: "prompt", x: 0, y: 0, title: "文字提示", outputs: [{ id: "prompt" }] },
  {
    id: "gen",
    x: 280,
    y: 40,
    title: "影像生成",
    inputs: [{ id: "prompt" }],
    outputs: [{ id: "image" }],
  },
];

const initialEdges: NodeWireEdge[] = [
  { id: "e1", from: { node: "prompt", port: "prompt" }, to: { node: "gen", port: "prompt" } },
];

export function Workflow() {
  const [nodes, setNodes] = React.useState(initialNodes);
  const [edges, setEdges] = React.useState(initialEdges);
  const [running, setRunning] = React.useState(false);

  return (
    <NodeWireCanvas
      nodes={nodes}
      onNodesChange={setNodes}
      edges={edges}
      onEdgesChange={setEdges}
      onConnect={(edge) => console.log("新連線", edge.id)}
      showFlow={running}
    />
  );
}

Props

NodeWireNode

NodeWirePort

NodeWireEdge

NodeWireViewport

CSS 變數

細節

• 座標系：內容層以 translate(panX, panY) scale(zoom) 表示整個畫布，背景點格的間距是 gridSize × zoom，跟著平移縮放同步。一般滾輪平移、Ctrl／⌘＋滾輪（含觸控板雙指縮放）以游標為中心縮放，拖曳空白處也能平移，行為與常見設計工具一致
• 埠位置由資料計算：埠的座標直接從節點 x／y 與埠序號算出，不量測 DOM，拖曳節點時相連的線每一幀重算也不會造成 layout thrash。拖曳本身用指標事件自行計算（位移除以 zoom）並寫回資料，而不是只改 transform
• 對齊格線：snap 開啟時，放開節點會先把對齊後的座標寫回資料，再以 useSpring（stiffness 可調）把顯示位置補間到格點，連線同步跟著走
• 連線：每條連線是三次貝茲 M p1 C p1+dx p2−dx p2，dx = max(60, |Δx| / 2)。從輸出埠拖出時以虛線預覽，游標距離合法輸入埠 16px 內會吸附高亮；自己連自己與重複的連線會被拒絕。點選連線後按 Delete 刪除
• 流光：showFlow 為 true，或某條線的起點節點為 running 時，每條線上有三個光點以 CSS offset-path 沿同一條路徑移動並錯開三分之一週期；畫布捲出畫面時暫停
• 與 patchbay-integrations 的差異：patchbay 是固定兩欄的整合接線板；本元件的節點可以自由布局，連線是可新增、刪除、受控的資料，適合工作流程編輯器

可及性

• 畫布為 role="application"，附 aria-label（預設「工作流程畫布」）與 sr-only 操作說明；建立、刪除、取消連線時以 aria-live 播報結果
• 節點可用 Tab 聚焦（role="group"，名稱含標題與狀態），方向鍵移動一格、Shift 加方向鍵移動五格，Delete 刪除節點與相連的線；readOnly 時停用
• 埠是 button：在輸出埠按 Enter 進入連線模式，Tab 到目標輸入埠再按 Enter 完成，Esc 取消；滑鼠也可點一下輸出埠、再點輸入埠完成連線。每條連線也可 Tab 聚焦，按 Delete 刪除
• 鍵盤 + 與 - 縮放、0 重設視角；角落工具列提供縮小、放大與置中全部按鈕
• 使用者系統開啟「減少動態效果」時，不顯示流動光點（改以實色高亮正在流動的連線），對齊格線不補間直接到位，執行中的狀態點不脈動、外框虛線不跑動