Special Edge for React Flow that never intersects with other nodes.
npm install @tisoap/react-flow-smart-edge
import React from 'react';
import ReactFlow from 'react-flow-renderer';
import { SmartEdge } from '@tisoap/react-flow-smart-edge';
const elements = [
{
id: '1',
data: { label: 'Node 1' },
position: { x: 300, y: 100 },
},
{
id: '2',
data: { label: 'Node 2' },
position: { x: 300, y: 200 },
},
{
id: 'e21',
source: '2',
target: '1',
type: 'smart',
},
];
export const Graph = (props) => {
const { children, ...rest } = props;
return (
<ReactFlow
elements={elements}
edgeTypes={{
smart: SmartEdge,
}}
{...rest}
>
{children}
</ReactFlow>
);
};
The SmartEdge
takes the same options as a React Flow Edge.
You can configure additional advanced options by wrapping your graph with SmartEdgeProvider
and passing an options
object. If an option is not provided it'll assume it's default value. The available options are:
const options = {
// Configure by how many milliseconds the Edge render should be
//debounced. Default 200, 0 to disable.
debounceTime: 200,
// How many pixels of padding is added around nodes, or by how
// much should the edge avoid the walls of a node. Default 10,
// minimum 2.
nodePadding: 10,
// The size in pixels of each square grid cell used for path
// finding. Smaller values for a more accurate path, bigger
// for faster path finding. Default 10, minimum 2.
gridRatio: 10,
};
Usage:
import React from 'react';
import ReactFlow from 'react-flow-renderer';
import { SmartEdge, SmartEdgeProvider } from '@tisoap/react-flow-smart-edge';
import elements from './elements';
export const Graph = (props) => {
const { children, ...rest } = props;
return (
<SmartEdgeProvider options={{ debounceTime: 300 }}>
<ReactFlow
elements={elements}
edgeTypes={{
smart: SmartEdge,
}}
{...rest}
>
{children}
</ReactFlow>
</SmartEdgeProvider>
);
};
There is a minimum example in this repository example
folder. Clone this repository and run yarn; cd example; yarn; yarn start
.
you can also see the Storybook examples or interact with the stories yourself by cloning this repository and running yarn; yarn storybook
.
This project is MIT licensed.
Liked this project and want to show your support? Buy me a coffee: