Skip to main content

Interface: ConnectorOptions

Configuration options for creating a reactive Connector between two elements or points.

Extends​

Properties​

PropertyTypeDescription
align?Align-
blur?numberBlur in virtual pixels (default: 0).
brightness?numberBrightness multiplier (default: 1).
className?string-
color?stringStroke color of the connector line (default: var(--sr-primary)).
curvature?numberCurvature bow factor for "arc" routing (defaults to 0.2). Positive bows outward, negative bows inward.
customPositioned?booleanWhether this element manages its own CSS transform / positioning (disables stage translate3d).
end?numberTrim-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?ConnectorHeadTypeHead marker at the end/destination endpoint (defaults to "arrow").
endHeadSize?numberSize of the end head marker in virtual canvas pixels (defaults to 16).
enterDelay?numberDelay in seconds before entering scene transition begins.
enterDuration?numberDuration in seconds for entering scene transition.
exitDelay?numberDelay in seconds before exiting scene transition begins.
exitDuration?numberDuration in seconds for exiting scene transition.
flow?FlowEffectContinuous ambient stroke animation ("none"
fromAnchor?ElementAnchor | AnchorModeAttachment point on the origin target: an anchor mode, a named face, or an [x, y] percentage point (defaults to "auto").
fromPadding?numberCustom perimeter clearance at the origin card.
height?SizeHeight in stage units or CSS length (default: content size).
id?string-
label?stringOptional text label rendered at the connector's midpoint or specified placement.
labelOffset?LabelOffsetOffset to nudge the label ([x, y] in stage units, or a CSS length). Reactive.
labelOffsetX?string | numberHorizontal offset for the label in stage units, or a CSS length. Reactive.
labelOffsetY?string | numberVertical offset for the label in stage units, or a CSS length. Reactive.
labelPlacement?LabelPlacementPosition of the label along the path ("start"
labelScale?numberScale factor for the label badge and text (default: 1). Reactive.
onActivate?() => void-
onDeactivate?() => void-
onMount?() => void-
onUnmount?() => void-
opacity?numberWhole-element opacity from 0 to 1 (default: 1).
origin?ElementAnchorWhich point of the element sits on its coordinate (default: "top-left").
padding?numberOuter clearance padding around card perimeters in virtual pixels (defaults to 6).
position?Position-
pulseInterval?number | PeriodicPulseOptionsContinuous periodic pulse configuration or interval in seconds (e.g. 1.5 or { interval: 2.0, color: '#38bdf8' }).
radius?numberCorner radius for rounded box intersections (defaults to 12).
rotation?numberRotation 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?numberFixed message row in stage units (default: undefined, automatic routing).
scale?numberScale multiplier (default: 1).
size?SizeBoth dimensions in stage units or CSS length (default: unset).
start?numberTrim-path start offset from 0.0 to 1.0.
startHead?ConnectorHeadTypeHead marker at the start/origin endpoint (defaults to "none").
startHeadSize?numberSize of the start head marker in virtual canvas pixels (defaults to 16).
strokePattern?"solid" | "dashed" | "dotted"Stroke pattern (default: "solid").
strokeWidth?numberStroke width in virtual pixels (defaults to 3).
style?Properties<0 | string & object, string & object>-
theme?Partial<ThemeConfig>-
toAnchor?ElementAnchor | AnchorModeAttachment point on the destination target: an anchor mode, a named face, or an [x, y] percentage point (defaults to "auto").
toPadding?numberCustom perimeter clearance at the destination card.
width?SizeWidth in stage units or CSS length (default: content size).
x?PositionCoordHorizontal position in stage units (default: 0).
y?PositionCoordVertical position in stage units (default: 0).