1.1.0 • Published 12 months ago
unle v1.1.0
UNLE.js
An unconstrained node layout engine for those who really care about performance.
UNLE stands for Unconstrained Node Layout Engine.
Click here for a demo.
Documentation
Installation
Installing UNLE from npm:
npm install unle
Usage
Importing UNLE into your project:
import UNLE from 'unle';
Creating a new UNLE instance:
// Options are:
// "canvas" << required,
// "show_id" -> either true or false,
// "node_radius" -> any positive integer,
// "node_color" -> any HEX colour expressed such as 0x000000 for example,
// "edge_length" -> any positive integer
let graph = new UNLE({
"canvas": document.getElementById("<div where you want UNLE to place the canvas>"),
"node_color": 0xA0A0A0,
});
Adding nodes to the graph:
// ID can be anything from an integer to a string
graph.add_node(<id>);
Adding edges to the graph:
// INFO: length has been depreciated and will be removed in an upcoming version
graph.add_edge(<id of first node>, <id of second node>, <length of edge>);
Removing nodes from the graph:
// This will also remove any connected edges
graph.remove_node(<id>);
Removing edges from the graph:
graph.remove_edge(<id of first node>, <id of second node>);
Using the node language:
// The node language is a way of describing a graph in a string
input = `
nodes: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10
1 -> 2
2 -> 3
3 -> 4
4 -> 5
5 -> 6
6 -> 7
7 -> 8
8 -> 9
9 -> 10
10 -> 1
5 -> 1
5 -> 2
5 -> 3
5 -> 4
5 -> 6
`
// Note this is a simple wrapper and has its limitations. Beware of bugs.
from_node_language(input);
The above code will produce the following graph: