Interface: ConnectorOptions
Configuration options for creating a reactive Connector between two elements or points.
Extends
Properties
| Property | Type | Description |
|---|---|---|
align? | Align | - |
blur? | number | Blur in virtual pixels (default: 0). |
brightness? | number | Brightness multiplier (default: 1). |
className? | string | - |
color? | string | Stroke color of the connector line (default: var(--sr-primary)). |
curvature? | number | Curvature bow factor for "arc" routing (defaults to 0.2). Positive bows outward, negative bows inward. |
customPositioned? | boolean | Whether this element manages its own CSS transform / positioning (disables stage translate3d). |
end? | number | Trim-path end offset from 0.0 to 1.0 for draw-in transitions. When animated (e.g. to(1)), the arrowhead automatically rides the leading edge of the stroke. |
endHead? | ConnectorHeadType | Head marker at the end/destination endpoint (defaults to "arrow"). |
endHeadSize? | number | Size of the end head marker in virtual canvas pixels (defaults to 16). |
enterDelay? | number | Delay in seconds before entering scene transition begins. |
enterDuration? | number | Duration in seconds for entering scene transition. |
exitDelay? | number | Delay in seconds before exiting scene transition begins. |
exitDuration? | number | Duration in seconds for exiting scene transition. |
flow? | FlowEffect | Continuous ambient stroke animation ("none" |
fromAnchor? | ElementAnchor | AnchorMode | Attachment point on the origin target: an anchor mode, a named face, or an [x, y] percentage point (defaults to "auto"). |
fromPadding? | number | Custom perimeter clearance at the origin card. |
height? | Size | Height in stage units or CSS length (default: content size). |
id? | string | - |
label? | string | Optional text label rendered at the connector's midpoint or specified placement. |
labelOffset? | LabelOffset | Offset to nudge the label ([x, y] in stage units, or a CSS length). Reactive. |
labelOffsetX? | string | number | Horizontal offset for the label in stage units, or a CSS length. Reactive. |
labelOffsetY? | string | number | Vertical offset for the label in stage units, or a CSS length. Reactive. |
labelPlacement? | LabelPlacement | Position of the label along the path ("start" |
labelScale? | number | Scale factor for the label badge and text (default: 1). Reactive. |
onActivate? | () => void | - |
onDeactivate? | () => void | - |
onMount? | () => void | - |
onUnmount? | () => void | - |
opacity? | number | Whole-element opacity from 0 to 1 (default: 1). |
origin? | ElementAnchor | Which point of the element sits on its coordinate (default: "top-left"). |
padding? | number | Outer clearance padding around card perimeters in virtual pixels (defaults to 6). |
position? | Position | - |
pulseInterval? | number | PeriodicPulseOptions | Continuous periodic pulse configuration or interval in seconds (e.g. 1.5 or { interval: 2.0, color: '#38bdf8' }). |
radius? | number | Corner radius for rounded box intersections (defaults to 12). |
rotation? | number | Rotation in degrees (default: 0). |
routing? | "straight" | "corner" | "bezier" | "arc" | Routing style: straight line, 90° orthogonal corners, smooth cubic Bézier, or single-curvature circular arc. |
rowY? | number | Fixed message row in stage units (default: undefined, automatic routing). |
scale? | number | Scale multiplier (default: 1). |
size? | Size | Both dimensions in stage units or CSS length (default: unset). |
start? | number | Trim-path start offset from 0.0 to 1.0. |
startHead? | ConnectorHeadType | Head marker at the start/origin endpoint (defaults to "none"). |
startHeadSize? | number | Size of the start head marker in virtual canvas pixels (defaults to 16). |
strokePattern? | "solid" | "dashed" | "dotted" | Stroke pattern (default: "solid"). |
strokeWidth? | number | Stroke width in virtual pixels (defaults to 3). |
style? | Properties<0 | string & object, string & object> | - |
theme? | Partial<ThemeConfig> | - |
toAnchor? | ElementAnchor | AnchorMode | Attachment point on the destination target: an anchor mode, a named face, or an [x, y] percentage point (defaults to "auto"). |
toPadding? | number | Custom perimeter clearance at the destination card. |
width? | Size | Width in stage units or CSS length (default: content size). |
x? | PositionCoord | Horizontal position in stage units (default: 0). |
y? | PositionCoord | Vertical position in stage units (default: 0). |