@joint/react
    Preparing search index...

    Type Alias ValidateConnection

    ValidateConnection: (context: ValidateConnectionParams) => boolean

    Decides whether a link may connect its source end to its target end. Return true to allow the connection, false to reject it. Pass it (or a CanConnectOptions object) to the validateConnection prop of <Paper>; the callback receives a structured ValidateConnectionParams context.

    Type Declaration

      • (context: ValidateConnectionParams): boolean

      • Parameters

        • context: ValidateConnectionParams

          Context handed to a ValidateConnection callback (and to the validate option of CanConnectOptions) while the user drags a link end. Describes both ends of the pending connection along with the paper and graph it lives in.

          Context handed to a ValidateConnection callback (and to the validate option of CanConnectOptions) while the user drags a link end. Describes both ends of the pending connection along with the paper and graph it lives in.

          • ReadonlyendType: LinkEnd

            Which end the user is dragging: 'source' or 'target'.

          • Readonlygraph: Graph

            The graph the link belongs to.

          • Readonlypaper: Paper

            The paper the link is being drawn on.

          • Readonlysource: ConnectionEnd

            The source end of the pending connection.

          • Readonlytarget: ConnectionEnd

            The target end of the pending connection.

        Returns boolean

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

    // Only accept links that end on a port named "in".
    const validate: ValidateConnection = ({ target }) => target.port === 'in';

    <GraphProvider>
      <Paper validateConnection={validate} renderElement={() => <rect width={80} height={40} />} />
    </GraphProvider>;

    Settings

    Member Visibility