ConnectionStrategy

type ConnectionStrategy = (context) => dia.Link.EndJSON;

Computes the final end definition stored on a link after one of its ends is dropped. Pass it (or a ConnectionStrategyOptions object) to the connectionStrategy prop of <Paper>; the callback receives a structured ConnectionStrategyParams context and returns the end JSON to save.

Parameters

Parameter	Type
context	ConnectionStrategyParams

Returns

dia.Link.EndJSON

Example

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>;