Skip to content
Entangle UI v0.13.0

NodeGraphPortSlotProps

Defined in: src/components/editor/NodeGraph/NodeGraph.types.ts:254

Props for <NodeGraph.Port> — the compound child rendered inside renderNode to declare a connection endpoint.

The library tracks the slot’s DOM position and registers it as the anchor for any edge that references this port. Pointer events on the slot start a connection drag automatically — no manual wiring from the consumer.

<NodeGraph
renderNode={(node, ctx) => (
<MyNodeBody>
<Row>
<NodeGraph.Port id="exec-in" side="left" dataType="exec" />
Execute
</Row>
</MyNodeBody>
)}
/>

optional children?: ReactNode

Defined in: src/components/editor/NodeGraph/NodeGraph.types.ts:289

Replace the built-in port visual entirely. When provided, no built-in chrome is rendered — the children fill the slot wrapper. State for theming (source / candidate / hover / invalid / connected) is exposed via data-port-* attributes on the wrapper.


optional className?: string

Defined in: src/components/editor/NodeGraph/NodeGraph.types.ts:293

Extra class applied to the slot wrapper.


optional color?: string

Defined in: src/components/editor/NodeGraph/NodeGraph.types.ts:275

Handle colour for the built-in visual (any CSS colour). When omitted, the port inherits the theme focus colour; the connection-drag states (source / candidate / invalid) still override it so interaction stays visible. Ignored when children are supplied.


optional dataType?: string

Defined in: src/components/editor/NodeGraph/NodeGraph.types.ts:263

Opaque type token forwarded to isValidConnection and exposed on data-port-data-type for CSS theming. Not interpreted by the library.


optional filled?: boolean

Defined in: src/components/editor/NodeGraph/NodeGraph.types.ts:282

Force the built-in visual filled (true) or hollow (false). When omitted, the port fills automatically while it is connected to at least one edge and stays hollow otherwise — the standard “wired vs unwired pin” convention. Ignored when children are supplied.


id: string

Defined in: src/components/editor/NodeGraph/NodeGraph.types.ts:256

Stable identity within the owning node — referenced by NodeGraphEdge.


optional label?: string

Defined in: src/components/editor/NodeGraph/NodeGraph.types.ts:291

Accessible label. Falls back to ${side} port ${id}.


optional shape?: NodeGraphPortShape

Defined in: src/components/editor/NodeGraph/NodeGraph.types.ts:268

Built-in handle shape used when no children are supplied.

'circle'

side: NodeGraphPortSide

Defined in: src/components/editor/NodeGraph/NodeGraph.types.ts:258

Which side of the node the port anchors to. Determines Bézier tangent.


optional style?: CSSProperties

Defined in: src/components/editor/NodeGraph/NodeGraph.types.ts:295

Inline style override on the slot wrapper.