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
Parameters:[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
: thex
position you can use to render a label for this edge.labelY
: they
position you can use to render a label for this edge.offsetX
: the absolute difference between the sourcex
position and thex
position of the middle of this path.offsetY
: the absolute difference between the sourcey
position and they
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