REACTFLOW-BETTER-BEZIER-EDGE

     

Are you suffering the default bezier curve goes into your marker?

If so, this is the solution for you.

!after-before

All credits go to reactflow for the bezier curve calculation. I just made modifications to the original code to make it better.

Give me a ⭐ if you like it.

📦 Requirements

- ReactFlow >= 11.0.0

🚀 Getting Started

$3

``bash
npm install reactflow-better-bezier-edge
`

$3

`tsx
import { Position } from "reactflow";
import { getBetterBezierPath } from "reactflow-better-bezier-edge";

const [path, labelX, labelY, offsetX, offsetY] = getBetterBezierPath({
sourceX: source.x,
sourceY: source.y,
sourcePosition: Position.Right,
targetX: target.x,
targetY: target.y,
targetPosition: Position.Left,
offset: 70,
});
`

📖 API Reference

$3

The parameters for the bezier curve.
| Prop | Optional | Type | Default | Description |
| --- | --- | --- | --- | --- |
|sourceX|No|number| |The x-coordinate of the source node.|
|sourceY|No|number| |The y-coordinate of the source node.|
|sourcePosition|Yes|Position|Position.Bottom|The position of the source node.|
|targetX|No|number| |The x-coordinate of the target node.|
|targetY|No|number| |The y-coordinate of the target node.|
|targetPosition|Yes|Position|Position.Top|The position of the target node.|
|offset|Yes|number|0|The offset of the bezier curve.|

> [NOTE]\
> Play around with the offset` to get the best result.

$3

| Array | Type | Description |
| --- | --- | --- |
|[0]|string|The path to use in an SVG 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.|

You can reference to BezierEdge for more information.

🤝 Contributing

Contributions are welcome! If you find a bug , please open an issue. If you want to contribute code, please fork the repository and submit a pull request.

📝 License

This project is licensed under the MIT License - see the LICENSE file for details

☕ Donation

Love it? Consider a donation to support my work.

 <- click me~