2.4.0 âĸ Published 2 years ago
fully-linked v2.4.0
FullyLinked
A simple library for visualising graphs using DOM elements
đ Features
- â Written with TypeScript so it is type-safe
- â Draggable nodes
- â Add edges dynamically with drag & drop
- â Zoomable & draggable canvas
- â
Nodes can be any HTML elements (e.g.
<div>
or<img>
) or even a React component - â Add nodes dynamically with drag & drop
- â
Events:
- đ
nodeClick
: when a node is clicked - đ
nodeDrag
: when a node is dragged - đ
nodeDragEnd
: when a node is dropped - đ
edgeClick
: when an edge is clicked - đ
canvasClick
: when the canvas is clicked - đ
canvasDrag
: when the canvas is dragged - đ
canvasDragEnd
: when the canvas is dropped - đ
canvasZoom
: when the canvas is zoomed - đ
canvasZoomEnd
: when the canvas is zoomed - and many more see FullyLinkedEventEnum
- đ
- â Extend with graph layouts, including DAG, force-directed, or a custom layout (coming soon)
- â Customizable edge styles (coming soon)
đ Example FullyLinked Graph
âšī¸ Get started
- First, install the library
npm install fully-linked
- Then import it
import { FullyLinked } from 'fully-linked'
- Use it
// Create an interface for our node data
interface MyNodeDataType {
id: string;
label: string;
}
// Create an interface for our edge data
interface MyEdgeDataType {
id: string;
label: string;
}
// Get the container element. This can be any HTML div element.
// It must have a width and height so that the graph can be visible.
const container = document.getElementById("container");
if (!container) {
// ... handle container not found
}
// Create a new FullLinked instance
const fl = new FullyLinked<MyNodeDataType, MyEdgeDataType>({
// Each graph must have a unique ID
id: "my-fl-graph",
// The container element must be passed in
container,
});
// A function to create your node template.
// Returns an HTML element.
const getNodeElement = (node: ProcessedNode<MyNodeDataType>) => {
// Create a blank div element as our node container
const nodeElement = document.createElement("div");
// Set the node container's styles
nodeElement.style.width = `${node.width}px`;
nodeElement.style.height = `${node.height}px`;
nodeElement.style.backgroundColor = "#eeee";
nodeElement.style.borderRadius = "10px";
// Add node content
const content = document.createElement('div');
content.style.padding = "15px";
content.innerText = node.data.label;
// Append the node content to the node container
nodeElement.appendChild(content);
// Return the node container
return nodeElement;
};
// Set graph data
fl.setData({
nodes: [
{
// Each node must have a unique id
id: "1",
// Each node must have a width and a height
width: 300,
height: 80,
// Initial positions of the node
x: 50,
y: 50,
// Pass any data you want to store in the node
data: { id: "1", label: "Node 1" },
// The node template is a function that returns an HTML element (created above)
customNodeElement: getNodeElement
},
{
id: "2",
width: 300,
height: 80,
x: 500,
y: 250,
data: { id: "2", label: "Node 2" },
customNodeElement: getNodeElement
},
{
id: "3",
width: 300,
height: 80,
x: 50,
y: 450,
data: { id: "3", label: "Node 3" },
customNodeElement: getNodeElement
},
{
id: "4",
width: 300,
height: 80,
x: 50,
y: 650,
data: { id: "4", label: "Node 4" },
customNodeElement: getNodeElement
},
{
id: "5",
width: 300,
height: 80,
x: 50,
y: 850,
data: { id: "5", label: "Node 5" },
customNodeElement: getNodeElement
},
{
id: "6",
width: 300,
height: 80,
x: 50,
y: 1000,
data: { id: "6", label: "Node 6" },
customNodeElement: getNodeElement
}
],
edges: [
{
// An edge must have a unique ID
id: "1",
// The source and target nodes of the edge
source: "1",
target: "2",
// Pass any data you want to store in the edge
data: {
id: "1",
label: "Edge 1"
}
},
{ id: "2", source: "2", target: "3", data: { id: "2", label: "Edge 2" } },
{ id: "3", source: "2", target: "4", data: { id: "3", label: "Edge 3" } },
{ id: "4", source: "4", target: "5", data: { id: "4", label: "Edge 4" } },
],
// Each data object must have a unique id
id: "test",
});
// Render the graph into the container element
fl.render();
2.4.0
2 years ago
2.3.0
2 years ago
2.2.1
2 years ago
2.2.0
2 years ago
2.1.1
2 years ago
2.1.0
2 years ago
2.0.1
2 years ago
2.0.0
2 years ago
1.0.61
2 years ago
1.0.60
2 years ago
1.0.59
2 years ago
1.0.58
2 years ago
1.0.57
2 years ago
1.0.56
2 years ago
1.0.54
2 years ago
1.0.53
2 years ago
1.0.52
2 years ago
1.0.51
2 years ago
1.0.50
2 years ago
1.0.49
2 years ago
1.0.48
2 years ago
1.0.47
2 years ago
1.0.46
2 years ago
1.0.45
2 years ago
1.0.44
2 years ago
1.0.43
2 years ago
1.0.42
2 years ago
1.0.41
2 years ago
1.0.40
2 years ago
1.0.39
2 years ago
1.0.38
2 years ago
1.0.37
2 years ago
1.0.35
2 years ago
1.0.34
2 years ago
1.0.33
2 years ago
1.0.32
2 years ago
1.0.31
2 years ago
1.0.30
2 years ago
1.0.29
2 years ago
1.0.28
2 years ago
1.0.27
2 years ago
1.0.24
2 years ago
1.0.23
2 years ago
1.0.22
2 years ago
1.0.21
2 years ago
1.0.20
2 years ago
1.0.19
2 years ago
1.0.18
2 years ago
1.0.17
2 years ago
1.0.16
2 years ago
1.0.14
2 years ago
1.0.13
2 years ago
1.0.12
2 years ago
1.0.11
2 years ago
1.0.10
2 years ago
1.0.9
2 years ago
1.0.8
2 years ago
1.0.7
2 years ago
1.0.6
2 years ago
1.0.5
2 years ago
1.0.4
2 years ago
1.0.3
2 years ago
1.0.2
2 years ago
1.0.1
2 years ago
1.0.0
2 years ago