Skip to Content
ReferenceUtils

getStraightPath()

Source on GitHub

Calculates the straight line path between two points.

import { getStraightPath } from '@xyflow/react'; const source = { x: 0, y: 20 }; const target = { x: 150, y: 100 }; const [path, labelX, labelY, offsetX, offsetY] = getStraightPath({ sourceX: source.x, sourceY: source.y, targetX: target.x, targetY: target.y, }); console.log(path); //=> "M 0,20L 150,100" console.log(labelX, labelY); //=> 75, 60 console.log(offsetX, offsetY); //=> 75, 40

Signature

Parameters:
NameTypeDefault
[0].sourceXnumber

The x position of the source handle.

[0].sourceYnumber

The y position of the source handle.

[0].targetXnumber

The x position of the target handle.

[0].targetYnumber

The y position of the target handle.

Returns:
[path: string, labelX: number, labelY: number, offsetX: number, offsetY: number]

A path string you can use in an SVG, the labelX and labelY position (center of path) and offsetX, offsetY between source handle and label.

  • path: the path to use in an SVG <path> element.
  • labelX: the x position you can use to render a label for this edge.
  • labelY: the y position you can use to render a label for this edge.
  • offsetX: the absolute difference between the source x position and the x position of the middle of this path.
  • offsetY: the absolute difference between the source y position and the y position of the middle of this path.

Notes

  • This function returns a tuple (aka a fixed-size array) to make it easier to work with multiple edge paths at once.
Last updated on