C&C Docs
Log in

cnc-arrow

Draws a curved connector between two elements named by id. It is an overlay, not a box: it covers its positioned parent, paints an SVG on top, and re-measures whenever either end moves — on resize, on scroll, and when an ancestor's class or style changes.

Quick start

Give the two ends an id, put the arrow inside a position: relative container that holds both, and name them. Resize this window and the arrow follows.

Start
End 
<div class="relative" style="height: 220px">
  <div id="arrow-box-a" class="absolute top-8 left-8 …">Start</div>
  <div id="arrow-box-b" class="absolute top-8 right-8 …">End</div>
  <cnc-arrow from="arrow-box-a" to="arrow-box-b"></cnc-arrow>
</div>

Things to know

  • Client only, and it fetches its geometry library. The curve comes from perfect-arrows, imported from esm.sh when the widget mounts. Nothing is server-rendered but an empty <svg>, and with no network the arrow silently never appears.
  • Both ends must exist when the arrow mounts. If either id is missing at that moment the widget returns before it registers any observer, and no later appearance brings it back. Arrows into content that renders conditionally need the arrow itself under the same condition.
  • A binding that changes later waits for a redraw. The draw pass reads from, to and two-way afresh every time it runs, but nothing re-runs it when a prop alone changes — the next resize, scroll or ancestor change picks the new value up. The observers are hung off whichever two elements were named at mount, so a :to that moves to a different element keeps watching the old one.
  • It re-measures on every scroll. A capturing scroll listener on the window runs the full measure-and-redraw pass unthrottled, so a page with many arrows over a long scroll is worth profiling.

Usage guidance

Use an arrow for annotation — pointing an explanation at the thing it explains, sketching a handful of relationships in an onboarding tour or a diagram whose boxes are real, interactive content. It is one element per edge with a full re-measure behind it, so it is the wrong tool for a graph of any size: reach for cnc-litegraph when the nodes and edges are data, and for a static picture, an SVG you author yourself will always be cheaper.

← Back to Widgets