# vue-safe-force-graph

vue-safe-force-graph is a force graph library designed for security applications using Vue.js. 

It is compatible with Vue 3 and includes features such as drag-and-drop, lasso selection, and automatic layout.

## Installation

You can install vue-safe-force-graph via npm:

`npm install vue-safe-force-graph`

## Usage

Simply import vue-safe-force-graph in your Vue.js components:

```js
// main.js
import ForceGraph, { Graph, Render } from 'vue-safe-force-graph'
import 'vue-safe-force-graph/lib/style.css'
const app = createApp(App)
app.use(ForceGraph, {
  disableQapm: true, // ture或者false。 true则禁用 Qapm
})
```



```vue
<template>
  <ForceGraphByCanvas
      :graph-api="graphApi"
      module="md5graph"
      :start-node="startNode"
      :enter-start-node="true"
      :has-level="true"
      :snapshot_id="snapshotId"
      :vcode="vcode"
      :handle-select-node-event="handleSelectNode"
      :custom-context-menu-event="handleEvent"
      @handle-data-loaded="handleDataLoaded"
    />
</template>

<script>

export default {
  data() {
    return {
      snapshotId: null,
      vcode: null,
      startNode: [{ type: 'domain', id: 'jd.com' }],
      graphApi: {}
    }
  },
  methods: {
    handleEvent(data) {
      console.log('监听菜单事件', data)
    },
    handleDataLoaded(data) {
      console.log('handleDataLoaded', data)
    },
    handleSelectNode(data, dataNow) {
      console.log('dataNow', dataNow)
      console.log('handleSelectNode', data)
    },
    handleHighLight(type, prop, value) {
      // this.$refs.forceGraph.handleCustomSelect(type, prop, value)
    },
  }
}
</script>
```

## Development

### To run the development server

`npm run dev`

### To build the library

`npm run build`

### To publish a new version

`npm run patch`
`npm run lib`
`npm publish`

### 开发人员手册

[开发请看这里](./开发请看这里.md)
