@html-graph/html-graph 0.0.47 → 0.0.49
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 +7 -8
- package/dist/main.d.ts +204 -266
- package/dist/main.js +650 -646
- package/dist/main.umd.cjs +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -2,12 +2,10 @@
|
|
|
2
2
|
<img src="/media/favicon.png" alt="HTMLGraph" width="25" height="25"/> HTMLGraph
|
|
3
3
|
</h1>
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
### Graph visualization library that enables nodes customization using HTML
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
Visit <a target="_blank" href="https://html-graph.github.io">live demo</a>
|
|
10
|
-
|
|
11
9
|
<a target="_blank" href="https://html-graph.github.io/">
|
|
12
10
|
<img width="100%" src="https://raw.githubusercontent.com/html-graph/html-graph/master/media/full-demo.gif"/>
|
|
13
11
|
</a>
|
|
@@ -17,6 +15,8 @@ Port is an entity of the node to which connection can be attached to.
|
|
|
17
15
|
|
|
18
16
|
This library fits for tasks where easy nodes customization and interactiveness are required.
|
|
19
17
|
|
|
18
|
+
Visit <a target="_blank" href="https://html-graph.github.io">live demo</a>
|
|
19
|
+
|
|
20
20
|
## Features:
|
|
21
21
|
|
|
22
22
|
- easy nodes customization using HTML
|
|
@@ -40,15 +40,15 @@ const canvas = new HtmlGraphBuilder()
|
|
|
40
40
|
background: { type: "dots" },
|
|
41
41
|
connections: { hasTargetArrow: true },
|
|
42
42
|
})
|
|
43
|
-
.
|
|
44
|
-
.
|
|
43
|
+
.setUserDraggableNodes()
|
|
44
|
+
.setUserTransformableCanvas()
|
|
45
45
|
.build();
|
|
46
46
|
|
|
47
47
|
function createNode(
|
|
48
48
|
name: string,
|
|
49
49
|
frontPortId: string,
|
|
50
50
|
backPortId: string,
|
|
51
|
-
): [HTMLElement, Record<string,
|
|
51
|
+
): [HTMLElement, Record<string, MarkNodePortRequest>] {
|
|
52
52
|
const node = document.createElement("div");
|
|
53
53
|
node.classList.add("node");
|
|
54
54
|
|
|
@@ -76,7 +76,7 @@ canvas
|
|
|
76
76
|
.attach(canvasElement)
|
|
77
77
|
.addNode({ element: node1, x: 200, y: 400, ports: ports1 })
|
|
78
78
|
.addNode({ element: node2, x: 600, y: 500, ports: ports2 })
|
|
79
|
-
.
|
|
79
|
+
.addEdge({ from: "port-1-2", to: "port-2-1" });
|
|
80
80
|
```
|
|
81
81
|
|
|
82
82
|
Refer to [Examples](examples) for more.
|
|
@@ -87,7 +87,6 @@ Use node version >= 20
|
|
|
87
87
|
|
|
88
88
|
```
|
|
89
89
|
npm install
|
|
90
|
-
|
|
91
90
|
npm run start
|
|
92
91
|
```
|
|
93
92
|
|