getStraightPath()

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

Name	Type
#Params
#`sourceX`	`number`
#`sourceY`	`number`
#`targetX`	`number`
#`targetY`	`number`
#Returns
#`[0]`	`string` The path to use in an SVG <path> element.
#`[1]`	`number` The x position you can use to render a label for this edge.
#`[2]`	`number` The y position you can use to render a label for this edge.
#`[3]`	`number` The absolute difference between the source x position and the x position of the middle of this path.
#`[4]`	`number` 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.