react-digraph

Overview

A React component which makes it easy to create a directed graph editor without implementing any of the SVG drawing or event handling logic.

Installation

npm install --save react-digraph

Usage

The default export is a component called 'GraphView'; it provides a multitude of hooks for various graph editing operations and a set of controls for zooming. Typically, it should be wrapped in a higher order component that supplies various callbacks (onCreateNode, onCreateEdge etc...).

All nodes and edges can have a type attribute set - nodes also support a subtype attribute. These can be passed to GraphView via the nodeTypes, nodeSubtypes, and edgeTypes props. GraphView will look up the corresponding SVG elements for the node's type/subtype and the edge's type and draw it accordingly.

It is often convenient to combine these types into a configuration object that can be referred to elsewhere in the application and used to associate events fired from nodes/edges in the graphView with other actions in the application. Here is an abbreviated example:

import GraphView from 'react-digraph'



const GraphConfig =  {
  NodeTypes: {
    empty: {
      typeText: "None",
      shapeId: "#empty",
      shape: (
        <symbol viewBox="0 0 100 100" id="empty" key="0">
          <circle cx="50" cy="50" r="45"></circle>
        </symbol>
      )
    }
  },
  NodeSubtypes: {},
  EdgeTypes: {
    emptyEdge: {
      shapeId: "#emptyEdge",
      shape: (
        <symbol viewBox="0 0 50 50" id="emptyEdge" key="0">
          <circle cx="25" cy="25" r="8" fill="currentColor"> </circle>
        </symbol>
      )
    }
  }
}

const EMPTY_TYPE = "empty"  // Text on empty nodes is positioned differently
const NODE_KEY = "id"       // Allows D3 to correctly update DOM

class Graph extends Component {

  constructor(props) {
    super(props);

    this.state = {
      graph: sample,
      selected: {}
    }
  }

  /* Define custom graph editing methods here */

  render() {
    const nodes = this.state.graph.nodes;
    const edges = this.state.graph.edges;
    const selected = this.state.selected;

    const NodeTypes = GraphConfig.NodeTypes;
    const NodeSubtypes = GraphConfig.NodeSubtypes;
    const EdgeTypes = GraphConfig.EdgeTypes;

    return (
      <div id='graph' style={styles.graph}>

        <GraphView  ref='GraphView'
                    nodeKey={NODE_KEY}
                    emptyType={EMPTY_TYPE}
                    nodes={nodes}
                    edges={edges}
                    selected={selected}
                    nodeTypes={NodeTypes}
                    nodeSubtypes={NodeSubtypes}
                    edgeTypes={EdgeTypes}
                    getViewNode={this.getViewNode}
                    onSelectNode={this.onSelectNode}
                    onCreateNode={this.onCreateNode}
                    onUpdateNode={this.onUpdateNode}
                    onDeleteNode={this.onDeleteNode}
                    onSelectEdge={this.onSelectEdge}
                    onCreateEdge={this.onCreateEdge}
                    onSwapEdge={this.onSwapEdge}
                    onDeleteEdge={this.onDeleteEdge}/>
      </div>
    );
  }

}

A typical graph that would be stored in the Graph component's state looks something like this:

{
  "nodes": [
    {
      "id": 1,
      "title": "Node A",
      "x": 258.3976135253906,
      "y": 331.9783248901367,
      "type": "empty"
    },
    {
      "id": 2,
      "title": "Node B",
      "x": 593.9393920898438,
      "y": 260.6060791015625,
      "type": "empty"
    },
    {
      "id": 3,
      "title": "Node C",
      "x": 237.5757598876953,
      "y": 61.81818389892578,
      "type": "empty"
    },
    {
      "id": 4,
      "title": "Node C",
      "x": 600.5757598876953,
      "y": 600.81818389892578,
      "type": "empty"
    }
  ],
  "edges": [
    {
      "source": 1,
      "target": 2,
      "type": "emptyEdge"
    },
    {
      "source": 2,
      "target": 4,
      "type": "emptyEdge"
    }
  ]
}

For a detailed example, check out src/examples/graph.js. To run the example:

npm install
npm run example

go to localhost:8000.

• To add nodes, hold shift and click on the grid.
• To add edges, hold shift and click/drag to between nodes.
• To delete a node or edge, click on it and press delete.
• Click and drag nodes to change their position.

All props are detailed below.

Props

| Prop | Type | Required | Notes | | --------------------|:-------:| :--------:| :----------------------------------------:| | nodeKey | string | true | Key for D3 to update nodes(typ. UUID). | | emptyType | string | true | 'Default' node type. | | nodes | array | true | Array of graph nodes. | | edges | array | true | Array of graph edges. | | selected | object | true | The currently selected graph entity. | | nodeTypes | object | true | Config object of available node types. | | nodeSubtypes | object | true | Config object of available node subtypes. | | edgeTypes | object | true | Config object of available edge types. | | getViewNode | func | true | Node getter. | | onSelectNode | func | true | Called when a node is selected. | | onCreateNode | func | true | Called when a node is created. | | onUpdateNode | func | true | Called when a node is moved. | | onDeleteNode | func | true | Called when a node is deleted. | | onSelectEdge | func | true | Called when an edge is selected. | | onCreateEdge | func | true | Called when an edge is created. | | onSwapEdge | func | true | Called when an edge 'target' is swapped. | | onDeleteEdge | func | true | Called when an edge is deleted. | | canDeleteNode | func | false | Called before a node is deleted. | | canCreateEdge | func | false | Called before an edge is created. | | canDeleteEdge | func | false | Called before an edge is deleted. | | renderEdge | func | false | Called to render edge geometry. | | renderNode | func | false | Called to render node geometry. | | renderDefs | func | false | Called to render svg definitions. | | renderBackground | func | false | Called to render svg background. | | readOnly | bool | false | Disables all graph editing interactions. | | enableFocus | bool | false | Adds a 'focus' toggle state to GraphView. | | maxTitleChars | number | false | Truncates node title characters. | | transitionTime | number | false | Fade-in/Fade-out time. | | primary | string | false | Primary color. | | light | string | false | Light color. | | dark | string | false | Dark color. | | style | object | false | Style prop for wrapper. | | gridSize | number | false | Overall grid size. | | gridSpacing | number | false | Grid spacing. | | gridDot | number | false | Grid dot size. | | minZoom | number | false | Minimum zoom percentage. | | maxZoom | number | false | Maximum zoom percentage. | | nodeSize | number | false | Node bbox size. | | edgeHandleSize | number | false | Edge handle size. | | edgeArrowSize | number | false | Edge arrow size. | | zoomDelay | number | false | Delay before zoom occurs. | | zoomDur | number | false | Duration of zoom transition. | | graphControls | boolean | true | Whether to show zoom controls. |

Notes

• To run the tests, you'll need to be using at least node v4.0 (for jsDom).