This is a simplified version of the Floating Edges example. It’s not as flexible as the floating edges example, but the edges stick to the top, right, bottom or left side of the nodes. You can find the implementation details in the utils.js file.
import { Position } from '@xyflow/react';// returns the position (top,right,bottom or right) passed node compared tofunction getParams(nodeA, nodeB) { const centerA = getNodeCenter(nodeA); const centerB = getNodeCenter(nodeB); const horizontalDiff = Math.abs(centerA.x - centerB.x); const verticalDiff = Math.abs(centerA.y - centerB.y); let position; // when the horizontal difference between the nodes is bigger, we use Position.Left or Position.Right for the handle
if (horizontalDiff > verticalDiff) {
position = centerA.x > centerB.x ? Position.Left : Position.Right;
} else {
// here the vertical difference between the nodes is bigger, so we use Position.Top or Position.Bottom for the handle
position = centerA.y > centerB.y ? Position.Top : Position.Bottom;