@moxa/graph 1.0.0-beta.1 → 1.0.0-beta.2
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 +152 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,152 @@
|
|
|
1
|
+
# Moxa Graph Library
|
|
2
|
+
|
|
3
|
+
### [👉 Documentation](https://moxa.gitlab.io/sw/f2e/one/chart-ui-library/?path=/docs/introduction--docs)
|
|
4
|
+
|
|
5
|
+
- [Install](#install)
|
|
6
|
+
- [Basic Usage](#basic-usage)
|
|
7
|
+
- [Graph Control](#graph-control)
|
|
8
|
+
- [Event Handling](#event-handling)
|
|
9
|
+
|
|
10
|
+
## Install
|
|
11
|
+
|
|
12
|
+
### Use `npm`
|
|
13
|
+
|
|
14
|
+
```bash
|
|
15
|
+
npm i @moxa/graph
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
### Use `pnpm`
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
pnpm add @moxa/graph
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Basic Usage
|
|
25
|
+
|
|
26
|
+
> Graph will be generated on the dom element with the specified `id`
|
|
27
|
+
|
|
28
|
+
### Create a DOM
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<div id="container"></div>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### Initialize Graph
|
|
35
|
+
|
|
36
|
+
> You need to provide a json config object to initialize graph instance <br />
|
|
37
|
+
> The config include all graph settings, please refer to `MxGraphConfig`
|
|
38
|
+
|
|
39
|
+
```typescript
|
|
40
|
+
import { MxGraph } from '@moxa/graph';
|
|
41
|
+
|
|
42
|
+
const graph = new MxGraph({
|
|
43
|
+
renderer: 'svg',
|
|
44
|
+
container: 'container',
|
|
45
|
+
width: 500,
|
|
46
|
+
height: 500,
|
|
47
|
+
data: {
|
|
48
|
+
nodes: [
|
|
49
|
+
{
|
|
50
|
+
id: 'node1',
|
|
51
|
+
config: {
|
|
52
|
+
type: 'circle',
|
|
53
|
+
point: { x: 100, y: 50 },
|
|
54
|
+
},
|
|
55
|
+
},
|
|
56
|
+
{
|
|
57
|
+
id: 'node2',
|
|
58
|
+
config: {
|
|
59
|
+
type: 'circle',
|
|
60
|
+
point: { x: 100, y: 250 },
|
|
61
|
+
},
|
|
62
|
+
},
|
|
63
|
+
{
|
|
64
|
+
id: 'node3',
|
|
65
|
+
config: {
|
|
66
|
+
type: 'circle',
|
|
67
|
+
point: { x: 300, y: 50 },
|
|
68
|
+
},
|
|
69
|
+
},
|
|
70
|
+
{
|
|
71
|
+
id: 'node4',
|
|
72
|
+
config: {
|
|
73
|
+
type: 'circle',
|
|
74
|
+
point: { x: 300, y: 250 },
|
|
75
|
+
},
|
|
76
|
+
},
|
|
77
|
+
{
|
|
78
|
+
id: 'node5',
|
|
79
|
+
config: {
|
|
80
|
+
type: 'circle',
|
|
81
|
+
point: { x: 200, y: 150 },
|
|
82
|
+
},
|
|
83
|
+
},
|
|
84
|
+
],
|
|
85
|
+
edges: [
|
|
86
|
+
{
|
|
87
|
+
id: 'edge1',
|
|
88
|
+
source: 'node1',
|
|
89
|
+
target: 'node2',
|
|
90
|
+
config: {},
|
|
91
|
+
},
|
|
92
|
+
{
|
|
93
|
+
id: 'edge2',
|
|
94
|
+
source: 'node1',
|
|
95
|
+
target: 'node5',
|
|
96
|
+
config: {},
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
id: 'edge3',
|
|
100
|
+
source: 'node5',
|
|
101
|
+
target: 'node3',
|
|
102
|
+
config: {},
|
|
103
|
+
},
|
|
104
|
+
{
|
|
105
|
+
id: 'edge4',
|
|
106
|
+
source: 'node3',
|
|
107
|
+
target: 'node4',
|
|
108
|
+
config: {},
|
|
109
|
+
},
|
|
110
|
+
],
|
|
111
|
+
},
|
|
112
|
+
});
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
## Graph Control
|
|
116
|
+
|
|
117
|
+
> You can control the presentation and behavior of the graph by calling the `MxGraph` methods
|
|
118
|
+
|
|
119
|
+
```typescript
|
|
120
|
+
// Update Graph Data
|
|
121
|
+
graph.updateNode({ ... });
|
|
122
|
+
graph.updateEdge({ ... });
|
|
123
|
+
graph.updateGroup({ ... });
|
|
124
|
+
|
|
125
|
+
// View Control
|
|
126
|
+
graph.zoom();
|
|
127
|
+
graph.fitView();
|
|
128
|
+
graph.focusItem();
|
|
129
|
+
|
|
130
|
+
// Change Behaviors
|
|
131
|
+
graph.changeBehavior([ ... ], true);
|
|
132
|
+
|
|
133
|
+
// Change layouts
|
|
134
|
+
graph.changeLayout();
|
|
135
|
+
|
|
136
|
+
// Change Theme
|
|
137
|
+
graph.changeTheme();
|
|
138
|
+
|
|
139
|
+
// Plugin Management
|
|
140
|
+
graph.addPlugin({ ... });
|
|
141
|
+
graph.updatePlugin({ ... });
|
|
142
|
+
graph.removePlugin({ ... });
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
## Event Handling
|
|
146
|
+
|
|
147
|
+
```typescript
|
|
148
|
+
// Listen Events
|
|
149
|
+
graph.events.nodeClick.once((e) => { ... });
|
|
150
|
+
graph.events.beginCreateEdge.on((e) => { ... });
|
|
151
|
+
graph.events.groupExpanded.off((e) => { ... });
|
|
152
|
+
```
|