Package Exports

@tisoap/react-flow-smart-edge

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

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

Smart Edge

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 options wrapping your graph with SmartEdgeProvider and passing an options value. The available options are:

const options = {
  // Configure by how many milliseconds the Edge render should be debounced, default 200, pass 0 to disable.
  debounceTime: 100,
};

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 value={{ 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.