vue-safe-force-graph 2.0.2 → 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.
Files changed (5) hide show
  1. package/README.md +91 -91
  2. package/lib/style.css +1 -4210
  3. package/lib/vue-safe-force-graph.js +39300 -61606
  4. package/lib/vue-safe-force-graph.umd.cjs +160 -78734
  5. 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
- <ForceGraph
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)