ExperimentalReturns 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.
The current link's layout, or undefined while no link view exists yet.
Depends on renderLink, which is itself experimental.
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>
useLinkLayout()