vue-safe-force-graph 2.0.2-beta.3 → 2.0.3
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 +91 -91
- package/lib/style.css +1 -4210
- package/lib/vue-safe-force-graph.js +39327 -61600
- package/lib/vue-safe-force-graph.umd.cjs +160 -78701
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,91 +1,91 @@
|
|
|
1
|
-
# vue-safe-force-graph
|
|
2
|
-
|
|
3
|
-
vue-safe-force-graph is a force graph library designed for security applications using Vue.js.
|
|
4
|
-
|
|
5
|
-
It is compatible with Vue 3 and includes features such as drag-and-drop, lasso selection, and automatic layout.
|
|
6
|
-
|
|
7
|
-
## Installation
|
|
8
|
-
|
|
9
|
-
You can install vue-safe-force-graph via npm:
|
|
10
|
-
|
|
11
|
-
`npm install vue-safe-force-graph`
|
|
12
|
-
|
|
13
|
-
## Usage
|
|
14
|
-
|
|
15
|
-
Simply import vue-safe-force-graph in your Vue.js components:
|
|
16
|
-
|
|
17
|
-
```js
|
|
18
|
-
// main.js
|
|
19
|
-
import ForceGraph, { Graph, Render } from 'vue-safe-force-graph'
|
|
20
|
-
import 'vue-safe-force-graph/lib/style.css'
|
|
21
|
-
const app = createApp(App)
|
|
22
|
-
app.use(ForceGraph)
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
```vue
|
|
28
|
-
<template>
|
|
29
|
-
<
|
|
30
|
-
:graph-api="graphApi"
|
|
31
|
-
module="md5graph"
|
|
32
|
-
:start-node="startNode"
|
|
33
|
-
:enter-start-node="true"
|
|
34
|
-
:has-level="true"
|
|
35
|
-
:snapshot_id="snapshotId"
|
|
36
|
-
:vcode="vcode"
|
|
37
|
-
:handle-select-node-event="handleSelectNode"
|
|
38
|
-
:custom-context-menu-event="handleEvent"
|
|
39
|
-
@handle-data-loaded="handleDataLoaded"
|
|
40
|
-
/>
|
|
41
|
-
</template>
|
|
42
|
-
|
|
43
|
-
<script>
|
|
44
|
-
|
|
45
|
-
export default {
|
|
46
|
-
data() {
|
|
47
|
-
return {
|
|
48
|
-
snapshotId: null,
|
|
49
|
-
vcode: null,
|
|
50
|
-
startNode: [{ type: 'domain', id: 'jd.com' }],
|
|
51
|
-
graphApi: {}
|
|
52
|
-
}
|
|
53
|
-
},
|
|
54
|
-
methods: {
|
|
55
|
-
handleEvent(data) {
|
|
56
|
-
console.log('监听菜单事件', data)
|
|
57
|
-
},
|
|
58
|
-
handleDataLoaded(data) {
|
|
59
|
-
console.log('handleDataLoaded', data)
|
|
60
|
-
},
|
|
61
|
-
handleSelectNode(data, dataNow) {
|
|
62
|
-
console.log('dataNow', dataNow)
|
|
63
|
-
console.log('handleSelectNode', data)
|
|
64
|
-
},
|
|
65
|
-
handleHighLight(type, prop, value) {
|
|
66
|
-
// this.$refs.forceGraph.handleCustomSelect(type, prop, value)
|
|
67
|
-
},
|
|
68
|
-
}
|
|
69
|
-
}
|
|
70
|
-
</script>
|
|
71
|
-
```
|
|
72
|
-
|
|
73
|
-
## Development
|
|
74
|
-
|
|
75
|
-
### To run the development server
|
|
76
|
-
|
|
77
|
-
`npm run dev`
|
|
78
|
-
|
|
79
|
-
### To build the library
|
|
80
|
-
|
|
81
|
-
`npm run build`
|
|
82
|
-
|
|
83
|
-
### To publish a new version
|
|
84
|
-
|
|
85
|
-
`npm run patch`
|
|
86
|
-
`npm run lib`
|
|
87
|
-
`npm publish`
|
|
88
|
-
|
|
89
|
-
### 开发人员手册
|
|
90
|
-
|
|
91
|
-
[开发请看这里](./开发请看这里.md)
|
|
1
|
+
# vue-safe-force-graph
|
|
2
|
+
|
|
3
|
+
vue-safe-force-graph is a force graph library designed for security applications using Vue.js.
|
|
4
|
+
|
|
5
|
+
It is compatible with Vue 3 and includes features such as drag-and-drop, lasso selection, and automatic layout.
|
|
6
|
+
|
|
7
|
+
## Installation
|
|
8
|
+
|
|
9
|
+
You can install vue-safe-force-graph via npm:
|
|
10
|
+
|
|
11
|
+
`npm install vue-safe-force-graph`
|
|
12
|
+
|
|
13
|
+
## Usage
|
|
14
|
+
|
|
15
|
+
Simply import vue-safe-force-graph in your Vue.js components:
|
|
16
|
+
|
|
17
|
+
```js
|
|
18
|
+
// main.js
|
|
19
|
+
import ForceGraph, { Graph, Render } from 'vue-safe-force-graph'
|
|
20
|
+
import 'vue-safe-force-graph/lib/style.css'
|
|
21
|
+
const app = createApp(App)
|
|
22
|
+
app.use(ForceGraph)
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
```vue
|
|
28
|
+
<template>
|
|
29
|
+
<ForceGraphByCanvas
|
|
30
|
+
:graph-api="graphApi"
|
|
31
|
+
module="md5graph"
|
|
32
|
+
:start-node="startNode"
|
|
33
|
+
:enter-start-node="true"
|
|
34
|
+
:has-level="true"
|
|
35
|
+
:snapshot_id="snapshotId"
|
|
36
|
+
:vcode="vcode"
|
|
37
|
+
:handle-select-node-event="handleSelectNode"
|
|
38
|
+
:custom-context-menu-event="handleEvent"
|
|
39
|
+
@handle-data-loaded="handleDataLoaded"
|
|
40
|
+
/>
|
|
41
|
+
</template>
|
|
42
|
+
|
|
43
|
+
<script>
|
|
44
|
+
|
|
45
|
+
export default {
|
|
46
|
+
data() {
|
|
47
|
+
return {
|
|
48
|
+
snapshotId: null,
|
|
49
|
+
vcode: null,
|
|
50
|
+
startNode: [{ type: 'domain', id: 'jd.com' }],
|
|
51
|
+
graphApi: {}
|
|
52
|
+
}
|
|
53
|
+
},
|
|
54
|
+
methods: {
|
|
55
|
+
handleEvent(data) {
|
|
56
|
+
console.log('监听菜单事件', data)
|
|
57
|
+
},
|
|
58
|
+
handleDataLoaded(data) {
|
|
59
|
+
console.log('handleDataLoaded', data)
|
|
60
|
+
},
|
|
61
|
+
handleSelectNode(data, dataNow) {
|
|
62
|
+
console.log('dataNow', dataNow)
|
|
63
|
+
console.log('handleSelectNode', data)
|
|
64
|
+
},
|
|
65
|
+
handleHighLight(type, prop, value) {
|
|
66
|
+
// this.$refs.forceGraph.handleCustomSelect(type, prop, value)
|
|
67
|
+
},
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
</script>
|
|
71
|
+
```
|
|
72
|
+
|
|
73
|
+
## Development
|
|
74
|
+
|
|
75
|
+
### To run the development server
|
|
76
|
+
|
|
77
|
+
`npm run dev`
|
|
78
|
+
|
|
79
|
+
### To build the library
|
|
80
|
+
|
|
81
|
+
`npm run build`
|
|
82
|
+
|
|
83
|
+
### To publish a new version
|
|
84
|
+
|
|
85
|
+
`npm run patch`
|
|
86
|
+
`npm run lib`
|
|
87
|
+
`npm publish`
|
|
88
|
+
|
|
89
|
+
### 开发人员手册
|
|
90
|
+
|
|
91
|
+
[开发请看这里](./开发请看这里.md)
|