Package Exports

@tisoap/react-flow-smart-edge
@tisoap/react-flow-smart-edge/dist/index.js
@tisoap/react-flow-smart-edge/dist/react-flow-smart-edge.esm.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@tisoap/react-flow-smart-edge) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Flow Smart Edge

Custom Edges for React Flow that never intersect with other nodes.

Smart Edge

Install

With npm:

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

With yarn:

yarn add @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 nodes = [
    {
        id: '1',
        data: { label: 'Node 1' },
        position: { x: 300, y: 100 }
    },
    {
        id: '2',
        data: { label: 'Node 2' },
        position: { x: 300, y: 200 }
    }
]

const edges = [
    {
        id: 'e21',
        source: '2',
        target: '1',
        type: 'smart'
    }
]

const edgeTypes = {
    smart: SmartEdge
}

export const Graph = (props) => {
    const { children, ...rest } = props

    return (
        <ReactFlow
            defaultNodes={nodes}
            defaultEdges={edges}
            edgeTypes={edgeTypes}
            {...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 { nodes, edges } from './data'

const edgeTypes = {
    smart: SmartEdge
}

const smartOptions = {
    debounceTime: 300
}

export const Graph = (props) => {
    const { children, ...rest } = props

    return (
        <SmartEdgeProvider options={smartOptions}>
            <ReactFlow
                defaultNodes={nodes}
                defaultEdges={edges}
                edgeTypes={edgeTypes}
                {...rest}
            >
                {children}
            </ReactFlow>
        </SmartEdgeProvider>
    )
}

Storybook

You can see Storybook examples by visiting this page: https://tisoap.github.io/react-flow-smart-edge/

License

This project is MIT licensed.

Support

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