@joint/react
    Preparing search index...

    Function linkRoutingStraight

    • Straight-line routing: links are drawn as a direct line from source to target, with no obstacle avoidance. The simplest, lowest-overhead routing.

      Returns a LinkRouting bundle for the Paper linkRouting prop that sets the paper's router, connector, anchor, and connection point in one step. For other looks, reach for linkRoutingOrthogonal (right-angle segments that steer around elements) or linkRoutingSmooth (curved links).

      Parameters

      • options: LinkRoutingStraightOptions = {}

        overrides for corner style, anchor, and connection-point offsets

        Options for linkRoutingStraight.

        • Optional ReadonlycornerRadius?: number

          Corner radius at vertices, in px.

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

          Corner style applied at manual vertices.

          'point'
        • Optional ReadonlymarkerSelector?: string

          The attrs selector that holds the marker definitions.

          'line'
        • Optional Readonlymode?: LinkMode

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

          'auto'
        • Optional Readonlyperpendicular?: boolean

          Anchor links perpendicular to the element edge instead of at its center.

          false
        • 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 straight routing

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

      <Paper linkRouting={linkRoutingStraight()} />

    Settings

    Member Visibility