Import it from @grafloria/renderer.
A port on a node. Omit id to get the deterministic <nodeId>__<side> name.
PortSpec used to be { id, side, type, index } and buildNode() passed
exactly those four fields to new PortModel(...).
Grafloria.render(), <grafloria-flow> and <GrafloriaFlow> (React) ALL build their
ports here. So an entire wave of feature work — square/diamond/triangle/path
glyphs, sideLinear/line/ellipse layouts, typed data-flow ports, "this
port accepts at most one link" — could not be expressed by any embedder, from
any framework, through any public entry point. It had passing unit tests the
whole time, because the unit tests construct PortModel directly.
This is the demo gallery's canonical finding shape, and it is why the gallery exists: a unit test proves a unit works; it never proves anything CALLS it.
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?