Line API
Svelte Line renderer props, geometry writer contract, and phases.
Line is the default SVG renderer for a LineMirror. Node renders one per
outgoing line; pass a custom component via Node’s LineSvelteComponent to
replace it.
| Prop | Meaning |
|---|---|
line | The LineMirror to render (required) |
className | Class for the outer <svg> |
pathClassName | Class for the <path> (default sl-connector-line) |
pathStyle | Inline style for the <path> |
showArrow | Render the arrowhead marker (default true) |
data | Extra data-* attributes for the <svg> |
Custom renderers mount static structure and call line.bindGeometryWriter(callback) on mount; the callback receives a LineGeometrySnapshot (start, end, delta) and mutates retained SVG,
Canvas, or graphics refs directly — pointer movement never re-renders the
component. line.geometrySnapshot() provides initial geometry, and LineRecord.payload is available on the mirror for presentation decisions.
A line moves through the LineMirrorPhase lifecycle: "source-start", "preview-free", "preview-target", "drop", "staged" (gesture completed
locally, awaiting the canonical owner’s decision), and "connected".
The rendered element carries data-snapline-type="connector-line" and data-line-id (the stable lineId, never the engine-internal object id).