@yurialvesbordin/graphium 2.0.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +99 -24
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,38 +1,113 @@
|
|
|
1
1
|
# Graphium
|
|
2
2
|
|
|
3
|
+
[](https://www.npmjs.com/package/@yurialvesbordin/graphium)
|
|
3
4
|
[](https://opensource.org/licenses/MIT)
|
|
4
5
|
[](http://www.typescriptlang.org/)
|
|
5
6
|
[](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API)
|
|
6
|
-
[](https://www.npmjs.com/package/@yurialvesbordin/graphium)
|
|
7
7
|
|
|
8
|
-
High-performance WebGL2 graph visualization with silk-smooth force physics, curved edges and
|
|
8
|
+
High-performance WebGL2 graph visualization with silk-smooth force physics, curved edges, node images, and a fluent API.
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
## Installation
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm install @yurialvesbordin/graphium
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Usage
|
|
19
|
+
|
|
20
|
+
```ts
|
|
21
|
+
import { Graphium } from '@yurialvesbordin/graphium';
|
|
22
|
+
|
|
23
|
+
const graph = Graphium.create({
|
|
24
|
+
container: document.getElementById('graph-container'),
|
|
25
|
+
autoStart: true,
|
|
26
|
+
autoFit: true,
|
|
27
|
+
physics: { preset: 'silk' },
|
|
28
|
+
theme: { name: 'midnight' },
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
graph
|
|
32
|
+
.addNode('alice', { label: 'Alice' })
|
|
33
|
+
.addNode('bob', { label: 'Bob' })
|
|
34
|
+
.addNode('carol', { label: 'Carol' });
|
|
35
|
+
|
|
36
|
+
graph.link('alice', 'bob').link('bob', 'carol').link('carol', 'alice');
|
|
37
|
+
|
|
38
|
+
graph.fit(80);
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Showcase
|
|
42
|
+
|
|
43
|
+
### Force-directed physics
|
|
44
|
+
|
|
45
|
+
A 120 node clustered graph reorganizing itself after a disturbance. The solver
|
|
46
|
+
combines repulsion, link springs, gravity, damping, and collision handling while
|
|
47
|
+
spatial hashing keeps neighbor lookups near O(n). The graph sleeps automatically
|
|
48
|
+
when it settles, dropping CPU usage to near zero.
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
### Curved edges
|
|
53
|
+
|
|
54
|
+
Edge curvature adjusted at runtime from straight to strongly curved in both
|
|
55
|
+
directions. Curves are computed on the GPU, so styling thousands of edges costs
|
|
56
|
+
no extra CPU. Positive values curve one way, negative values the other.
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
### Built-in themes
|
|
61
|
+
|
|
62
|
+
The four bundled themes (midnight, light, slate, sunset) switching at runtime.
|
|
63
|
+
Each theme controls background, node palette, edge styling, labels, and the
|
|
64
|
+
hover and selection rings. Custom themes merge over the current one, so you can
|
|
65
|
+
override only what you need.
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
### Node images
|
|
70
|
+
|
|
71
|
+
Toggling node images on and off. Any node can take an image (URL or canvas
|
|
72
|
+
data URL) rendered inside the circle with cover fit. Images upload to the GPU
|
|
73
|
+
through a texture atlas, keeping draw calls minimal.
|
|
74
|
+
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
### Arrow heads
|
|
78
|
+
|
|
79
|
+
Turning directed arrow heads on. Arrows follow the edge path, respect
|
|
80
|
+
curvature, and scale with zoom.
|
|
81
|
+
|
|
82
|
+
|
|
83
|
+
|
|
84
|
+
### Tree layout
|
|
85
|
+
|
|
86
|
+
A binary tree dataset settling under the same force solver. When hierarchical
|
|
87
|
+
data needs cleaner separation, edge separation tuning untangles crossings, and
|
|
88
|
+
any dataset type can be swapped at runtime.
|
|
89
|
+
|
|
90
|
+
|
|
9
91
|
|
|
10
|
-
|
|
92
|
+
### Click to focus and inspect
|
|
11
93
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
<td width="50%"><img src="docs/assets/light-theme.png" alt="Light theme"></td>
|
|
16
|
-
</tr>
|
|
17
|
-
<tr>
|
|
18
|
-
<td align="center">Curved edges rendered on the GPU</td>
|
|
19
|
-
<td align="center">Built-in light theme</td>
|
|
20
|
-
</tr>
|
|
21
|
-
</table>
|
|
94
|
+
Clicking a node focuses the camera on it and opens the inspector with live
|
|
95
|
+
degree, position, and velocity. Dragging works with momentum, the wheel zooms,
|
|
96
|
+
and every interaction emits events you can subscribe to.
|
|
22
97
|
|
|
23
|
-
|
|
24
99
|
|
|
25
|
-
|
|
100
|
+
## Documentation
|
|
26
101
|
|
|
27
|
-
|
|
102
|
+
Complete guides live in the docs directory:
|
|
28
103
|
|
|
29
|
-
-
|
|
30
|
-
-
|
|
31
|
-
-
|
|
32
|
-
-
|
|
33
|
-
-
|
|
34
|
-
-
|
|
104
|
+
- Getting Started - installation, first graph, handles, cleanup
|
|
105
|
+
- Physics Configuration - presets and fine-tuning the simulation
|
|
106
|
+
- Theming Guide - built-in and custom themes
|
|
107
|
+
- Events & Interaction - events, interaction, accessibility
|
|
108
|
+
- Node Images - custom images as node backgrounds
|
|
109
|
+
- Performance Tuning - optimization of rendering and physics
|
|
35
110
|
|
|
36
|
-
|
|
111
|
+
## License
|
|
37
112
|
|
|
38
|
-
|
|
113
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@yurialvesbordin/graphium",
|
|
3
|
-
"version": "2.0.
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "Remastered high-performance WebGL2 graph visualization library with silk-smooth force physics, curved edges, node images and a fluent API",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|