@joint/react
    Preparing search index...

    Function linkRoutingOrthogonal

    • Orthogonal routing: links travel in horizontal and vertical segments only and steer around elements, the right-angle look common in flowcharts and ER diagrams.

      Returns a LinkRouting bundle for the Paper linkRouting prop.

      Parameters

      • options: LinkRoutingOrthogonalOptions = {}

        overrides for corner style/radius, routing margins, and anchors

        Options for linkRoutingOrthogonal.

        • Optional ReadonlycornerRadius?: number

          Corner radius of the rounded bends, in px.

          8
        • Optional ReadonlycornerType?: "line" | "point" | "cubic" | "gap"

          Corner style at each bend.

          'cubic'
        • Optional Readonlymargin?: number

          Distance, in px, the route keeps clear of elements as it steers around them.

          20
        • Optional ReadonlymarkerSelector?: string

          The attrs selector that holds the marker definitions.

          'line'
        • Optional ReadonlyminPathMargin?: number

          Smallest distance, in px, the router travels before it can turn.

          margin / 4
        • Optional Readonlymode?: LinkMode

          Which side of an element or port each link end attaches to; see LinkMode for how each value behaves.

          'auto'
        • Optional ReadonlysourceOffset?: number

          Offset (in px) applied to the connection point at the source end.

          0
        • Optional ReadonlystraightWhenDisconnected?: boolean

          Fall back to a straight line while either end is still unconnected (e.g. mid-drag).

          true
        • Optional ReadonlytargetOffset?: number

          Offset (in px) applied to the connection point at the target end.

          0

      Returns LinkRouting

      Paper link defaults for orthogonal routing

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

      // round the bends and keep links 24px clear of elements
      <Paper linkRouting={linkRoutingOrthogonal({ cornerRadius: 12, margin: 24 })} />

    Settings

    Member Visibility