Context handed to a ConnectionStrategy customize callback after a
link end is dropped. Describes where the end landed (cell, magnet, drop point)
so the callback can return the final end definition.
Context handed to a ConnectionStrategy customize callback after a
link end is dropped. Describes where the end landed (cell, magnet, drop point)
so the callback can return the final end definition.
ReadonlydropPoint: PlainPointPaper-space point where the end was dropped.
Readonlyend: EndJSONThe end definition to return, pre-filled by the selected pin mode (or the dropped end when pinning is off).
ReadonlyendType: LinkEndWhich end was dropped: 'source' or 'target'.
Readonlygraph: GraphThe graph the link belongs to.
Readonlylink: LinkThe link being reconnected.
Readonlymagnet: ElementThe magnet element the end was dropped on.
Readonlymodel: CellThe cell the end was dropped on.
Readonlypaper: PaperThe paper the link is drawn on.
import { GraphProvider, Paper } from '@joint/react';
import type { ConnectionStrategy } from '@joint/react';
// Snap the dropped end exactly to the pointer position.
const strategy: ConnectionStrategy = ({ end, dropPoint }) => ({ ...end, x: dropPoint.x, y: dropPoint.y });
<GraphProvider>
<Paper connectionStrategy={strategy} renderElement={() => <rect width={80} height={40} />} />
</GraphProvider>;
Computes the final end definition stored on a link after one of its ends is dropped. Pass it (or a ConnectionStrategyOptions object) to the
connectionStrategyprop of<Paper>; the callback receives a structured ConnectionStrategyParams context and returns the end JSON to save.