Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/g0ngjie/antv-x6-vue2
@antv/x6 基于 vue2 + composition-api 的图形化编辑器
https://github.com/g0ngjie/antv-x6-vue2
antv antv-x6 flow graph x6
Last synced: 4 months ago
JSON representation
@antv/x6 基于 vue2 + composition-api 的图形化编辑器
- Host: GitHub
- URL: https://github.com/g0ngjie/antv-x6-vue2
- Owner: g0ngjie
- License: mit
- Created: 2021-08-06T10:40:07.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-04-16T08:46:22.000Z (10 months ago)
- Last Synced: 2024-07-31T07:15:46.035Z (7 months ago)
- Topics: antv, antv-x6, flow, graph, x6
- Language: JavaScript
- Homepage:
- Size: 3.85 MB
- Stars: 43
- Watchers: 1
- Forks: 15
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-x6 - antv-x6-vue2 - @antv/x6 基于 vue2 + composition-api 的图形化编辑器 (Frameworks / Vue Component)
README
# antv-x6-vue2
@antv/x6 基于 vue2 + composition-api 的图形化编辑器
#### 支持触控屏版: [在线访问](https://g0ngjie.github.io/antv-x6-vue3-demo/)
[在线访问](https://g0ngjie.github.io/alrale-laboratory/materials/x6/#/)
- [x] 画布自适应
- [x] 快捷键
- [x] 工具栏 组合按键功能
- [x] 事件监听
- [x] vue 自定义组件
### 使用
> main.js
```js
import Vue from "vue";
import antv from "antv-x6-vue2";
import "antv-x6-vue2/lib/antv.css";
Vue.use(antv);
```
> vue2 文件中使用
```vue
```
#### Api
| 说明 | 函数 |
| :----------------------------------- | -------------------------------------------------------------------------------------- |
| 初始化画布默认数据 | initDefaultData(nodes: any[], edges: any[]): void |
| 获取数据 | exportData(): { nodes: string[], edges: string[], nodesJSON: any[], edgesJSON: any[] } |
| 画布只读 | onlyLook(bool: boolean): void |
| 画布清空 | clean(): void |
| 修改 Node 节点文案 | updateLabel(label: string): void |
| 监听单元事件双击回调 | GraphListener.doubleNodeClick(cb: ICallbackFunc): void |
| 监听单元事件单击回调 | GraphListener.nodeClick(cb: ICallbackFunc): void |
| 运行时异常监听 | GraphListener.runtimeError(cb: IErrorCallbackFunc): void |
| 图形校验函数 | graphValidate(): { ok: boolean, errs: string[] } |
| 获取所有已存在的 node 节点和 edge 边 | getAtoms(options?: 'nodes' \| 'edges'): { nodes: ...[], edges: ...[] } \| undefined |
#### Events
> 组件事件
| 事件名 | 说明 | 参数 |
| ------------- | ----------------------------- | ----------------------------------- |
| node-click | Node 节点被点击时会触发该事件 | { nodeId, actionType, label, node } |
| node-dblclick | Node 节点被双击时会触发该事件 | { nodeId, actionType, label, node } |
```js
import { graphFunc } from "antv-x6-vue2";
graphFunc.GraphListener.doubleNodeClick((detail) => {
const { nodeId, label, actionType } = detail;
});
```
#### 异常类
| 错误码(errorCode) | 说明(errorMsg) |
| ----------------- | -------------- |
| 2000 | 非法参数 |
| 2001 | 验证失败 |
| 2002 | 数据格式不正确 |
```js
import { graphFunc } from "bt-antv-x6";
graphFunc.GraphListener.runtimeError((err) => {
const { errorCode, errorMsg } = err;
});
```