Node Wire Canvas

Turn a multi-step pipeline into a graph you can edit in place. Each node is a card with input ports on the left and output ports on the right, and ports are joined by cubic bezier wires. Drag a node anywhere and it springs onto the grid when released; drag a new wire out of an output port and it snaps to a valid input port as you get close; while the flow runs, pulses travel along every wire. The canvas pans with the wheel or by dragging empty space and zooms with Ctrl / ⌘ + wheel, and both nodes and edges are controllable data.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

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>
  );
}

Installation

Usage

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 variables

How it works

• Coordinate system: the content layer expresses the whole canvas as translate(panX, panY) scale(zoom), and the background dot grid spacing is gridSize × zoom so it tracks pan and zoom. The plain wheel pans, Ctrl / ⌘ + wheel (including trackpad pinch) zooms around the cursor, and dragging empty space pans too, matching common design tools
• Port positions come from data: port coordinates are computed straight from the node x / y and port index rather than measured from the DOM, so connected wires can be recomputed every frame during a drag without layout thrash. The drag itself is computed from pointer events (delta divided by zoom) and written back to data, not just applied as a transform
• Snap to grid: with snap on, releasing a node writes the snapped position to data first, then useSpring (tunable via stiffness) tweens the displayed position onto the grid, with wires following along
• Wires: each edge is a cubic bezier M p1 C p1+dx p2−dx p2 with dx = max(60, |Δx| / 2). Dragging out of an output port shows a dashed preview that snaps and highlights within 16px of a valid input port; self-connections and duplicates are rejected. Select a wire and press Delete to remove it
• Flow: when showFlow is true, or an edge's source node is running, three pulses travel along that edge via CSS offset-path on the same path, staggered by a third of a cycle; they pause while the canvas is scrolled out of view
• How it differs from patchbay-integrations: the patchbay is a fixed two-column integration board; here nodes can be laid out freely and edges are data you can add, delete and control — a fit for workflow editors

Accessibility

• The canvas is role="application" with an aria-label (default "工作流程畫布", Workflow canvas) and sr-only instructions; creating, deleting or cancelling a connection is announced through aria-live
• Nodes are Tab-focusable (role="group", named with title and status); arrow keys move one grid step, Shift plus arrow keys moves five, and Delete removes the node with its wires; all disabled when readOnly
• Ports are buttons: press Enter on an output port to enter connect mode, Tab to a target input port and press Enter to finish, Esc cancels; with a mouse you can also click an output port, then an input port. Each wire is Tab-focusable too and Delete removes it
• The + and - keys zoom and 0 resets the view; the corner toolbar has Zoom out, Zoom in and Fit all buttons
• When the user's system has reduce motion turned on, flow pulses are not shown (flowing edges get a solid highlight instead), snapping jumps straight into place without a tween, and the running status dot and dashed outline stay still