Rappid - graphUtils

Installation

Include joint.graphUtils.js file to your HTML:

<script src="joint.graphUtils.js"></script>

If you plan to use shortestPath() method, you're going to also need to include joint.alg.priorityQueue.js and joint.alg.dijkstra.js plugins:

<script src="joint.alg.priorityQueue.js"></script>
<script src="joint.alg.dijkstra.js"></script>

constructTree(parent, opt)

Construct a tree from a JSON object (parent, i.e. the top level node). This method returns an array of cells (elements and links) that constitute the tree. The parent parameter must be a JSON of the form:

{
    name: 'my label',
    children: [ { name: 'my label 2', children: [...] }, ...]
}

opt.children is the property specifying the children array (default is 'children'). If opt.children is a function, it will be called with the current node as an argument and must return an array of its child nodes. opt.makeElement() is a function that is passed the current tree node and returns a JointJS element for it. opt.makeLink() is a function that is passed a parent and child nodes and returns a JointJS link for the edge. Example:

const cells = joint.graphUtils.constructTree(
    {
        name: 'my top',
        children: [{
            name: 'my child 1'
        }, {
            name: 'my child 2'
        }]
    },
    {
        makeElement: function(node) {
            return new joint.shapes.standard.Rectangle({
                size: { width: 80, height: 30 },
                attrs: { label: { text: node.name }}
            });
        },
        makeLink: function(parentElement, childElement) {
            return new joint.shapes.standard.Link({
                source: { id: parentElement.id },
                target: { id: childElement.id }
            });
        }
    }
);
graph.addCells(cells);

Example of an adjacency list:

const adjacencyList = {
  'a': ['b', 'c'],
  'b': ['d', 'e'],
  'c': [],
  'd': ['f'],
  'e': [],
  'f': []
};

const cells = joint.graphUtils.constructTree(
  'a', // root
  {
      makeElement: function(name) {
          return new joint.shapes.standard.Rectangle({
              size: { width: 80, height: 30 },
              attrs: { label: { text: name }}
          });
      },
      makeLink: function(parentElement, childElement) {
          return new joint.shapes.standard.Link({
              source: { id: parentElement.id },
              target: { id: childElement.id }
          });
      },
      children: (name) => adjacencyList[name]
  }
);
graph.addCells(cells);

shortestPath(graph, source, target [, opt])

Return an array of IDs of nodes on the shortest path between source and target. source and target can either be elements or IDs of elements. opt.weight is an optional function returning a distance between two nodes. It defaults to function(u, v) { return 1 }. If opt.directed is true, the algorithm will take link direction into account. The implementation uses the joint.alg.Dijkstra plugin internally. Please refer to the plugin documentation for more information.