# @amilajack/react-digraph

> directed graph react component

Latest version **4.1.0** (published 2018-09-06) · MIT license · 0 weekly downloads

## Install

```sh
npm install @amilajack/react-digraph
pnpm add @amilajack/react-digraph
yarn add @amilajack/react-digraph
bun add @amilajack/react-digraph
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 4.1.0 |
| Published | 2018-09-06 |
| First published | 2018-09-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 0.10.0 |
| Dependencies | 0 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2642 |
| Maintainers | amilajack |
| Keywords | uber-library, babel, es6, d3, react, graph, digraph |

## Links

- npm: https://www.npmjs.com/package/@amilajack/react-digraph
- Repository: https://github.com/uber/react-digraph
- Homepage: https://github.com/uber/react-digraph#readme
- Issues: https://github.com/uber/react-digraph/issues/new
- npm.io page: https://npm.io/package/@amilajack/react-digraph

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 4.1.0 (latest) — 2018-09-06

## README

# react-digraph
![Demo](example.gif?raw=true)
## 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:

```jsx
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:

```json
{
  "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).

---
_Source: https://npm.io/package/@amilajack/react-digraph · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._