Lines & connectors — overview

lib-next exposes three related surfaces:

Types CustomOptions, PathCommand, Path2DDrawOptions, HitRegion, HitDetectionOptions export from apexify.js.

#How they relate

1. path2d.custom rasterises polylines built per CustomOptions row (custom-lines.ts). It does not emit a reusable Path2D for hit-testing; for picks you typically model the same geometry with detect.region (rect, polygon, path) or rebuild PathCommand[].
2. path2d.draw composites Path2D onto an existing canvasBuffer (path is painted above existing pixels).
3. detect.path rebuilds Path2D from commands when needed and calls isPointInPath / isPointInStroke on an internal scratch canvas.

#Scenes

SceneCreator accepts type: 'path' (path, options?: Path2DDrawOptions) and type: 'customLines' (lines — CustomOptions | CustomOptions[]) — same behaviour as path2d.draw / path2d.custom on a shared context.

#Guide map

#Minimal examples

Custom segment

1const { buffer } = await painter.createCanvas({ width: 600, height: 400 });2 3await painter.path2d.custom(4  {5    startCoordinates: { x: 80, y: 200 },6    endCoordinates: { x: 520, y: 200 },7    lineStyle: { width: 4, color: '#64748b' },8    arrow: { end: true, size: 14, style: 'filled', color: '#0f172a' },9  },10  buffer11);

Path2D stroke + fill

1const path = painter.path2d.create([2  { type: 'moveTo', x: 100, y: 100 },3  { type: 'lineTo', x: 400, y: 160 },4  { type: 'quadraticCurveTo', cpx: 480, cpy: 80, x: 500, y: 200 },5]);6 7await painter.path2d.draw(buffer, path, {8  stroke: { color: '#94a3b8', width: 3 },9  fill: { color: '#1e293b', opacity: 0.35, rule: 'nonzero' },10});