Skip to content
D
Documentation

RenderedLinkPath

reference
1 min readUpdated

Import it from @grafloria/angular.

Card B — the RENDERED route of a link.

THE GOTCHA THIS TYPE EXISTS FOR

LinkModel.getPointAtPosition() walks link.segments whenever they are non-empty. But the SVG renderer NEVER writes segments: every frame it assigns the freshly-routed polyline straight onto link.points (syncLinkPoints, deliberately bypassing setPoints() to avoid a re-render loop). segments therefore keeps whatever generatePath() last left there — geometry from before the node moved, before the detour, before the reroute. Anchoring a toolbar to it makes the toolbar drift OFF the line.

So this class reads, in order of truth:

  1. THE RENDERED ELEMENT. The renderer tags each link group with data-link-id, so the browser's own path measurement (getTotalLength / getPointAtLength) can be used. This is the literal drawn curve: bezier bulge, rounded corners and jump arcs included.
  2. link.points — the polyline the renderer synced THIS frame. Exact for orthogonal/direct links, a chord approximation for a curve. Used in jsdom (no SVG geometry API) and before the first paint.

link.segments is never consulted.

ts
class RenderedLinkPath

Methods

  • static forLink(link: LinkModel, root?: Element | null): RenderedLinkPath (static) — Resolve a link's rendered route.
  • get isDomMeasured(): boolean — True when measuring the real drawn path rather than the point polyline.
  • get isValid(): boolean — False when the link has no usable geometry at all (nothing to anchor to).
  • get length(): number
  • pointAt(t: number): Point | null — Point at fraction t (0-1) along the rendered path.
  • normalAt(t: number): Point | null — Unit normal at t — the tangent rotated 90° CCW, matching LinkModel.getNormalAt. Used to lift the toolbar OFF the line.
  • tangentAt(t: number): Point | null — Unit tangent at t (direction of travel).
  • closestTo(point: Point, samples = 100): ClosestHit | null — Closest point on the rendered path to an arbitrary world point — the "where did the user click on this edge" query behind insert-node-on-edge.
  • toPolyline(): Point[] — The polyline this path was resolved from (never link.segments).

Was this page helpful?

RenderedLinkPath — Grafloria