Reference
Utils
getSimpleBezierPath()

getSimpleBezierPath()

Source on Github (opens in a new tab)

The getSimpleBezierPath util returns everything you need to render a simple bezier edge between two nodes.

import { Position, getSimpleBezierPath } from '@xyflow/react';
 
const source = { x: 0, y: 20 };
const target = { x: 150, y: 100 };
 
const [path, labelX, labelY, offsetX, offsetY] = getSimpleBezierPath({
  sourceX: source.x,
  sourceY: source.y,
  sourcePosition: Position.Right,
  targetX: target.x,
  targetY: target.y,
  targetPosition: Position.Left,
});
 
console.log(path); //=> "M0,20 C75,20 75,100 150,100"
console.log(labelX, labelY); //=> 75, 60
console.log(offsetX, offsetY); //=> 75, 40

Signature

#Params
#params
object
#params.sourceX
number
#params.sourceY
number
#params.sourcePosition?
Position.Bottom
#params.targetX
number
#params.targetY
number
#params.targetPosition?
Position.Top
#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.
getOutgoers()getSmoothStepPath()