useLinkLayout()

function useLinkLayout(): LinkLayout | undefined;

Experimental

This API is experimental — it may change or be removed in a future release.

Returns the current link's rendered geometry, its source and target endpoint coordinates plus the SVG path string ({ sourceX, sourceY, targetX, targetY, d }, where d is the path computed by JointJS). Use it to draw custom link decorations, labels, or overlays that need to follow the link's actual route.

Geometry is per-paper: the same link can render with different routing on different papers (e.g. the main canvas and a minimap), so the hook reports the geometry on the paper it is mounted under. The value stays in sync, it re-reads after every render pass, covering drags, programmatic position changes, source/target reconnections, and resizes.

Call it inside renderLink (or a component mounted from one) so the target link id resolves from context. Returns undefined only until the link view exists — no paper has mounted yet, or the view is still being created. Once the view appears the value is always defined; it may briefly report zeroed coordinates and an empty path string until JointJS computes the first route.

Returns

LinkLayout | undefined

The current link's layout, or undefined while no link view exists yet. Depends on renderLink, which is itself experimental.

d

readonly d: string;

SVG path data (the d attribute) for the link's rendered route.

---

sourceX

readonly sourceX: number;

X coordinate of the link's source endpoint, in paper coordinates.

---

sourceY

readonly sourceY: number;

Y coordinate of the link's source endpoint, in paper coordinates.

---

targetX

readonly targetX: number;

X coordinate of the link's target endpoint, in paper coordinates.

---

targetY

readonly targetY: number;

Y coordinate of the link's target endpoint, in paper coordinates.

Example

import { GraphProvider, Paper, useLinkLayout } from '@joint/react';

// A badge that tracks the midpoint of the link as it is routed.
function LinkMidpointBadge() {
  const layout = useLinkLayout();
  if (!layout) return null;
  const midX = (layout.sourceX + layout.targetX) / 2;
  const midY = (layout.sourceY + layout.targetY) / 2;
  return <circle cx={midX} cy={midY} r={4} fill="tomato" />;
}

<GraphProvider>
  <Paper renderLink={() => <LinkMidpointBadge />} />
</GraphProvider>