Graph

A node/edge editor: pan, zoom, drag, connect ports, minimap, custom node components and five edge routers.

@ruckc/truss-graph Graph

Import

import { Graph } from '@ruckc/truss-graph';

Playground

API

Prop	Type	Default	Description
`nodes` bindable	`GraphNode[]`	`[]`	The graph nodes. Bind it to keep positions in sync after dragging.
`edges` bindable	`GraphEdge[]`	`[]`	The graph edges.
`selected` bindable	`string[]`	`[]`	Selected node ids.
`selectedEdge` bindable	`string`	—	Id of the selected edge. Bind it with `bind:selectedEdge`.
`collapsed` bindable	`string[]`	`[]`	Ids of collapsed nodes: everything downstream of them is hidden. Use `collapse(id)` / `expand(id)` or bind this.
`hiddenEdgeKinds` bindable	`string[]`	`[]`	Edge kinds currently filtered out (the legend toggles these). Edges without a kind count as `neutral`.
`height`	`number \| string`	`480`	Height in pixels (or any CSS length).
`edgeType`	`EdgeType`	`'bezier'`	Default routing for every edge (an edge's own `type` wins): bezier, straight, step, smoothstep, or avoid (steers around nodes; falls back to smoothstep on large graphs).
`direction`	`'LR' \| 'TB'`	`'LR'`	Which sides the default ports use, and the direction of the layered layout.
`layout`	`GraphLayout`	`'layered'`	Algorithm used by `layout()` and the auto-layout button. `force` and `radial` also run once on mount. Default `layered` keeps your positions on mount.
`legend`	`boolean \| GraphLegend`	—	Key for node and edge kinds. `true` derives it from the kinds in use; or pass labels per kind. Edge entries toggle `hiddenEdgeKinds`.
`categories`	`string[]`	—	Names for `node.category` (index = category), used by the legend. Missing names read "Category N".
`connectable`	`boolean`	`true`	Drag from an output port to an input port to create edges.
`editable`	`boolean`	`true`	Allow moving and deleting.
`fitOnMount`	`boolean`	`true`	Fit the whole graph into view when it first appears.
`minimap`	`boolean`	`false`	Overview panel showing every node and the current viewport; click or drag it to pan.
`minimapPosition`	`'bottom-right' \| 'bottom-left'`	`'bottom-right'`	Corner for the minimap.
`nodeTypes`	`Record<string, NodeRenderer>`	—	Custom node components by `node.type`. Each is a snippet receiving `{ node, selected, dragging, update }` and draws the whole node.
`node`	`NodeRenderer`	—	Custom component for every node that has no matching `nodeTypes` entry.
`body` snippet	`Snippet<[node: GraphNode]>`	—	Content inside the default card, under the title.
`edgeLabel` snippet	`Snippet<[edge: GraphEdge]>`	—	Custom component rendered at the middle of each edge (replaces `edge.label`).
`isValidConnection`	`(from: { node: string; port: string }, to: { node: string; port: string }) => boolean`	—	Return false to reject a connection.
`onconnect` event	`(edge: GraphEdge) => void`	—	Called with the new edge after the user connects two ports.
`onchange` event	`() => void`	—	Called when the value changes.
`onnodeclick` event	`(node: GraphNode, event: MouseEvent \| KeyboardEvent) => void`	—	A node was clicked (also Enter on a focused node). Selection has already updated; call `event.preventDefault()` on an Enter press to skip the collapse toggle. Clicks that end a drag, and clicks on ports, expander badges or controls inside custom nodes, do not count.
`onnodedblclick` event	`(node: GraphNode, event: MouseEvent) => void`	—	A node was double-clicked. A double-click also fires `onnodeclick` twice first, as the browser does; the graph itself has no double-click action.
`onnodehover` event	`(node: GraphNode \| null) => void`	—	The pointer entered a node, or `null` when it left.
`onnodecontextmenu` event	`(node: GraphNode, event: MouseEvent \| KeyboardEvent) => void`	—	Right-click, or ContextMenu / Shift+F10 on a focused node. The native menu is suppressed when this is set (except over inputs and links inside custom nodes).