Edgely

Create a Graph of React Elements using Edgely.

See a demo

Installing

Npm Install

Before installing this library you need to install the npm package manager or yarn

npm install edgely

yarn add edgely

Using Edgely

Edgely allows you to create a graph of React elements where we do the task of laying out for you.

We use dagre to do the layout, so it's a good idea to check out their API.

Example

First we need to add the edgely library.

var edgely = require("edgely");

For every graph in edgely you need to define nodes and edges.

A node is a JSX element with the following properties:

• name - the unique name for your node.
• width - how wide the node should be in pixels.
• height - how tall the node should be in pixels.

These width and height properties would typically come from a measuring tool, or even just inspecting the elements.

Each node can have a react element within it of any size as long as that is provided.

An edge is a JSX Element with the following properties:

• from - the node the edge starts from
• to - the node the edge goes to

Here's a quick example of how to set up a graph:

<Graph>
  <Node name='node-1' dimensions={{width: 100, height: 100}}>
    <h1>Node 1</h1>
  </Node>
  <Node name='node-2' dimensions={{width: 100, height: 100}}>
    <h1>Node 2</h1>
  </Node>
  <Edge from='node-1' to='node-2'/>
</Graph>

Configuration Options

For the graph, there are

Object | Option | Default | Description | ------ | ------ | ------- | ----------- | graph | opts | Options | The layout options from dagre, to make the graph fully customisable. | graph | markers | Marker| An array of markers that the edges can reference| node | position | undefined | Provided a [x,y] coordinate, the position can be overrided. edge | lineStyle | Line | The styles for the edge line | edge | markerEnd | 'arrow' | The marker id for the edge | edge | bidirectional | false | Make the edge bidirectional |

Examples

Mapping Nodes

In this example we'll see how to map an array of strings to a graph.

const information = ["I am node 1", "I am node 2", "I am node 3", "I am node 4"]

<Graph>
  {
    information.map((value:string,id:number) => (
      <>
      <Node name={value} dimensions={{width: 100, height: 200}}>
        <h1>{value}</h1>
      </Node>
      {information[id+1] !== undefined ?
        <Edge from={value} to={information[id+1]} />
        : <></>
      }
      </>
    ))
  }
</Graph>

Custom Markers

In this example we'll see how to make custom markers for your graph.

To do this, you need to supply an array of custom marker objects. These have an id, style, and pathDescription.

You then need to reference these markers in your edges using the markerEnd property.

<Graph
  markers = {[
    {
      id: 'new-marker',
      style: {
        markerWidth: 15,
        markerHeight: 15,
        orient: '90',
        fill: 'red'
      },
      pathDescription: 'M0,0 V4 L3,3 Z'
    },
    {
      id: 'newest-marker',
      style: {
        markerWidth: 10,
        markerHeight: 5,
        orient: '270',
        fill: 'green'
      },
      pathDescription: 'M2,1 V3 L2,2 Z'
    }
  ]}
>
  <Node name='node-1' dimensions={{width: 100, height: 100}}>
    <h1>Node 1</h1>
  </Node>
  <Node name='node-2' dimensions={{width: 100, height: 100}}>
    <h1>Node 2</h1>
  </Node>
  <Edge from='node-1' to='node-2' markerEnd='new-marker'/>
  <Edge from='node-2' to='node-1' markerEnd='newest-marker'/>
</Graph>

Custom Edge Styling

In this example we'll see how to make custom line styling for your edges.

This is done by supplying a React CSS Properties object

<Graph>
  <Node name='node-1' dimensions={{width: 100, height: 100}}>
    <h1>Node 1</h1>
  </Node>
  <Node name='node-2' dimensions={{width: 100, height: 100}}>
    <h1>Node 2</h1>
  </Node>
  <Edge from='node-1' to='node-2' lineStyle={
    stroke: 'red',
    strokeWidth: 2,
    strokeLineCap: 'butt',
    strokeLinejoin: 'bevel',
    fill: 'none',
  }>
  <Edge from='node-2' to='node-1'>
</Graph>

Default Styles

Graph

{
  rankdir: 'LR',
  ranksep: 100
}

Marker

id: 'arrow',
style: {
  markerWidth: 10,
  markerHeight: 10,
  orient: 'auto',
  refX: 0.1,
  refY: 2,
  fill: 'black'
}
pathDescription: 'M0,0 V4 L2,2 Z'

Line

{
  stroke: 'black',
  strokeWidth: 4,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
  fill: 'none'
}

License

Edgely is licensed under the terms of the MIT License. See LICENSE for details.