Node / Lines Connectors · guide
lineStyle & path
Current Apexify.js 6.0.0 documentation for lineStyle & path.
Optional lineStyle on each CustomOptions controls stroke appearance (custom-lines.ts). path selects how the canvas builds geometry between start and end.
lineStyle (implemented)
| Field | Role |
|---|---|
width | ctx.lineWidth (default 1). |
color | strokeStyle when gradient omitted (default 'black'). |
gradient | createGradientFill with bbox { x: start.x, y: start.y, w: end.x-start.x, h: end.y-start.y } — same gradient union as backgrounds. |
lineJoin | round | bevel | miter (default miter). |
lineCap | butt | round | square (default butt). Numeric lineRadius forces round caps before the tube fill pass. |
singleLine | Chain consecutive CustomOptions into one open path — see Custom API. |
lineDash | dashArray, offset — ctx.setLineDash. Ignored when pattern is set (pattern wins). |
pattern | applyLinePattern presets dots, dashes, custom segments — see Markers chapter. |
texture | applyLineTexture — loads image (URL, Buffer, or filesystem path via process.cwd()) and sets strokeStyle to createPattern(..., 'repeat'). |
lineRadius | number — rounded “tube”: stroke segment then arc fills at both endpoints · 'circular' — arcTo capsule outline (different geometry, separate stroke only). |
stroke | Second-pass halo outline sharing the same segment (applyStroke helper): optional color/gradient/width/lineCap/lineRadius. |
Declared but not wired
lineStyle.shadow exists on CustomOptions but custom-lines.ts never reads it. Bake shadows via path2d.draw (Path2DDrawOptions.shadow) or external blur until wired.
path — curvature between start and end
Each CustomOptions row contributes allPoints = [startCoordinates, endCoordinates] (two anchors).
type | Behaviour with two points |
|---|---|
smooth | createSmoothPath → lineTo shortcut (needs ≥ 3 points for curvature). |
catmull-rom | createCatmullRomPath → straight lineTo for two knots. |
bezier | Requires ≥ 4 points for the bezierCurveTo branch — never satisfied by the current CustomOptions shape, so execution falls through to lineTo(end). |
For real Bézier chains, arcs, or stars use path2d.create + PathCommand[] — see Path2D.
Execution order (per segment)
Rough order: dash/pattern → texture strokeStyle → stroke (possibly twice when numeric lineRadius adds tube fill) → lineStyle.stroke halo → arrows → markers.
Consult custom-lines.ts when stacking texture + gradient — texture replaces strokeStyle after gradients are assigned.