@tisoap/react-flow-smart-edge

React Flow Smart Edge

Special Edge for React Flow that never intersects with other nodes.

Install

npm install @tisoap/react-flow-smart-edge

Usage

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>
  );
};

Options

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,

  // The type of line that is draw. Available options are:
  // 'curve' - Curved lines with BezierEdge fallback (default)
  // 'straight' - Straight lines with StraightEdge fallback
  lineType: 'curve',

  // Boolean value to control if the path finding algorithm should
  // use less diagonal movement, default to false.
  lessCorners: false,
};

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>
  );
};

Example

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.

License

This project is MIT licensed.

Support

Liked this project and want to show your support? Buy me a coffee: