Skip to main content

Connector

The Connector component renders dynamic connecting lines between elements or coordinates.

import { Card, Connector, layout } from "stageroutine";

const a = Card("A", { width: 12, height: 7.5 });
const b = Card("B", { width: 12, height: 7.5 });

layout.hstack([a, b], {
  x: "center",
  y: "center",
  gap: 38,
});

const link = Connector(a, b);

Routing Styles​

Connectors support four path routing styles via routing:

  • "straight" (default): Direct line between attachment points.
  • "corner": Orthogonal 90° turns.
  • "bezier": Smooth cubic Bézier curve.
  • "arc": Curved circular arc with adjustable curvature.
const curved = Connector(a, b, {
  routing: "bezier",
  endHead: "arrow",
});

Attachment Anchors​

A connector attaches to the outline of each target. The fromAnchor and toAnchor options decide where.

"auto" (default) attaches to the middle of the target side that faces the other endpoint, and follows the outline where there is no straight side to pin to. "ray" always attaches where the direction towards the other endpoint crosses the outline, so it slides along flat sides while the other element moves. "closest" attaches to the nearest point on the outline, which suits silhouettes with concave parts such as clipped frames or stars:

const link = Connector(a, frame, {
  routing: "bezier",
  toAnchor: "closest",
});

Pass a named face ("top", "right", "bottom", "left", "top-left", and so on) or an [x, y] percentage pair to pin an endpoint to a fixed spot:

const pinned = Connector(a, b, { fromAnchor: "bottom", toAnchor: [50, 0] });

Attachment points sit padding pixels outside the outline (default: 6).

Head Markers​

Choose from several endpoint marker styles via startHead and endHead:

"arrow", "open", "dot", "circle", "diamond", "diamond-open", "bar", "crow", and "none".

API Reference​

Use routing for path geometry and strokePattern ("solid", "dashed", or "dotted") for the stroke. style contains CSS only. Head types and sizes are fixed at creation.

labelOffset writes X/Y offsets. Explicit initial axes override the aggregate. Numeric offsets use stage units; CSS lengths resolve against the stage viewport. Label placement maps "start" to 0.25, "center" to 0.5, and "end" to 0.75.

Line, heads, and default pulses share color. Explicit pulse colors override it. Endpoint clearance uses fromPadding ?? padding and toPadding ?? padding; zero is valid.