Node / Lines Connectors · guide

Arrows, markers, dash presets & textures

Current Apexify.js 6.0.0 documentation for Arrows, markers, dash presets & textures.

apexify.jsRuntime: nodeCURRENTSince 6.0.0

Helpers live in lib-next/path/advanced-lines.ts and are invoked from custom-lines.ts after the main stroke for each CustomOptions row.

Arrows (arrow)

1arrow?: {2  start?: boolean;3  end?: boolean;4  size?: number;              // default 105  style?: 'filled' | 'outline';6  color?: string;             // fallback: line colour → black7};

drawArrow translates to (x,y), rotates by segment angle, draws a triangular head:

filled — fillStyle = color
outline — strokeStyle, lineWidth = 2

Angles derive from atan2(end.y - start.y, end.x - start.x) where start respects singleLine chaining (previous row end).

Markers (markers)

1markers?: Array<{2  position: number;        // 0 … 1 along polyline length [start → end]3  shape: 'circle' | 'square' | 'diamond' | 'arrow';4  size: number;5  color: string;6}>;

getPointOnLinePath walks straight segments (currently only [start, end] pair per row) and interpolates position clamped [0,1].

drawMarker shapes:

Shape	Drawing
`circle`	Filled `arc` (`radius = size/2`)
`square`	`fillRect` centred
`diamond`	Four `lineTo` polygon
`arrow`	Up-pointing triangle

Markers paint above the connector stroke.

Dash presets (pattern)

1pattern?: {2  type: 'dots' | 'dashes' | 'custom';3  segments?: number[];   // custom dash array4  offset?: number;       // lineDashOffset5};

`type`	`setLineDash`
`dots`	`[2, 4]`
`dashes`	`[10, 5]`
`custom`	`segments` array (must be non-empty)

When pattern is present lineDash from lineStyle is skipped.

Image texture (texture)

texture?: string | Buffer

applyLineTexture resolves sources:

Input	Resolution
`Buffer`	`loadImage(buffer)`
`http…` URL	`loadImage(url)`
Else filesystem path	`path.join(process.cwd(), texture)` + `fs.readFileSync`

On success strokeStyle = ctx.createPattern(image, 'repeat'). Errors console.error and leave prior strokeStyle.

Example — dashed lane + markers

1await painter.path2d.custom(2  {3    startCoordinates: { x: 40, y: 120 },4    endCoordinates: { x: 560, y: 120 },5    lineStyle: {6      width: 3,7      color: '#475569',8      pattern: { type: 'dashes', offset: 4 },9    },10    markers: [11      { position: 0.25, shape: 'circle', size: 12, color: '#22c55e' },12      { position: 0.75, shape: 'diamond', size: 14, color: '#eab308' },13    ],14    arrow: { end: true, style: 'outline', color: '#0f172a', size: 16 },15  },16  buffer17);

#Arrows (arrow)

#Markers (markers)

#Dash presets (pattern)

#Image texture (texture)

#Example — dashed lane + markers

Related guides and reference

Next steps

Arrows (arrow)

Markers (markers)

Dash presets (pattern)

Image texture (texture)

Example — dashed lane + markers