Graph editor

An ui library for creating flow based editors with react and typescript/javascript.

Try the demo in your browser.

If you are interested in redux dive into the example or try the more advanced demo.

Getting started

import * as ReactDOM from 'react-dom';
import { Editor, Node, Config} from 'react-flow-editor';

// Create the initial graph
const nodes: Node[] = [
    {
        id: 'Node 1',
        name: 'First Node',
        payload: { h1: 'hello' },
        inputs: [{
            connection: [], name: 'input 1'
        }],
        outputs: []
}];

// Renders the body of each node
function resolver(data: any): JSX.Element {
    if (data.type === '') return <h2 />;
    return (
        <p>{data.payload.h1}</p>
    );
}

const config: Config = {
    resolver,
    connectionType: 'bezier',
    grid: true,
    demoMode: true,
};

ReactDOM.render(
    <div>
        <Editor config={config} nodes={nodes} />
    </div>,
    document.getElementById('root')
);

See example for usage.

Side effects

Before creating new nodes, the node under the cursor is a direct child of document.body.
In order to decouple editor and menu components they use window.onStartCreatingNewNode to communicate.

API

Configuration

The config interface looks as follow

export interface Config {
    resolver: (payload: any) => JSX.Element;
    connectionValidator?: (output: { nodeId: string, port: number }, input: { nodeId: string, port: number }) => boolean;
    onChanged?: (node: ChangeAction) => void;
    connectionType?: 'bezier' | 'linear';
    grid?: boolean | { size: number };
    connectionAnchorsLength?: number;
    direction?: 'ew' | 'we';
    demoMode?: boolean;
}

Property	Description
`resolver`	A function returning a React component which gets placed into the node
`connectionValidator`	A function which evaluates if a possible connection might be valid or not
`onChanged`	A callback which gets called when the flow graph changed
`connectionType`	The geometry type of the connection lines between the nodes
`grid`	Specifies if the grid should be rendered or not (Default is `true`). Optional specifies distances between the lines (`size`). Default is 18.
`connectionAnchorsLength`	Specifies the langth of the anker when using `bezier` as `connectionType`.
`direction`	Specifies the orientation of the input and output ports. Default is `we`.
`demoMode`	If this set to true, the Editor takes care of updating the nodes in the props. Be carful using this in production.

Nodes

A node is specified by the following interface

export interface Node {
  name: string;
  type: string;
  id: string;
  inputs: InputPort[];
  outputs: OutputPort[];
  payload?: any;
  position?: Vector2d;
  properties?: {display: 'stacked' | 'only-dots'};
  classNames?: string[];
  style: Style;
}

For now InputPort and OutputPort are identically to the Port interface:

export interface Port {
  name: string;
  connection?: Connection|Connection[];
  payload?: any;
  renderer?: (connection: Port) => JSX.Element;
}

export interface Connection {
  nodeId: string;
  port: number;
  classNames?: string[];
  notes?: string;
}

Themes

By default we recommend to import the default theme with

@import "react-flow-editor/dist/default-theme.scss";

But you can change the style of all components by coping that file and adjust its values.

Postcss support

When using postcss generated class names just forward them with

import * as style from './style.scss';

// ...

const config: Config = {
    resolver,
    connectionType: 'bezier',
    grid: true,
    demoMode: true,
    direction: 'we',
    style
};
// ...

See Example.

Roadmap

Editing the title of the node
Grouping nodes (similar to Blender)
Optimize hooking
Fix zooming and scrolling

Contributing

This library is very young. So please consider that it might have some bugs, but I will try to fix them, when they get reported.

If you have any problems or miss an important feature:

Feel free to create a PR or report an issue!

lochbrunner/react-flow-editor

lochbrunner

Reviews

Repository Details