Import it from @grafloria/renderer.
A port on a node. Omit id to get the deterministic <nodeId>__<side> name.
Carries the whole port vocabulary through to the PortModel: glyph shapes,
port labels, the pluggable layout strategies, port groups, data types,
directional gating, link spots and link spreading. Grafloria.render(),
<grafloria-flow> and every framework component build their ports from this.
tsinterface PortSpec
Properties
| Name | Type | Default | Description |
|---|---|---|---|
id? | string | ||
side? | 'top' | 'right' | 'bottom' | 'left' | Which edge of the node the port sits on. Optional when the port names a group that declares one — PortModel.explicitSide exists precisely so an inherited side is not clobbered by a default. | |
type? | 'input' | 'output' | 'bi' | ||
index? | number | ||
group? | string | Named port group. Config is inherited from it; these fields override. | |
shape? | PortShapeSpec | Glyph: square / diamond / triangle / a custom SVG path. Default: circle. | |
label? | PortLabelSpec | Port label + its placement (inside / outside / orthogonal / radial). | |
layout? | PortLayoutSpec | Layout strategy (line / sideLinear / ellipse / …). Default: the shape anchor. | |
gating? | PortGatingSpec | Directional connectability + link caps + allowed types. | |
dataType? | string | Data-flow type. Drives glyph colour AND connection validity. | |
fromSpot? | PortSpot | Where links leave / land on the glyph box. | |
toSpot? | PortSpot | ||
spread? | PortSpreadSpec | Fan several links out along the port's edge instead of piling them. | |
style? | Record<string, unknown> | Raw SVG presentation attributes merged onto the glyph. | |
maxConnections? | number | The legacy single cap. gating is the richer form. | |
visible? | boolean |
Was this page helpful?