AntvX6 调研记录

【 AntvX6组件库地址 】 antv-x6.gitee.io/zh/docs/tut…

-----------------------------------------------------

目前需要实现的几个功能点：

1. 节点的拖拉拽布局
2. 右键点击的菜单
3. 镜头放大和缩小
4. 快捷键 Cv Cx Cz
5. 自定义背景样式
6. 自定义节点样式
7. 动态节点流动画效果
8. 节点的父子关系
9. 画布视角的拖动
10. 容器不用随着子元素放大缩小
11. 节点多了以后可以收缩纳管( 折叠 )
12. 同一个节点做到可以连接多个其他节点

基于以上功能的实现，达到【拓扑图】【编排图】的绘制和展示

------------------------------------------------------

实际使用：

1、安装X6引擎

@antv/x6

2、使用vue渲染节点

安装 @antv/x6-vue-shape，  vue2下还需要安装 @vue/composition-api

3、根据X6的官网文档，针对Vue组件进行二开

具体见x6的demo代码

4、常用Api

this.graph.on('node:mouseenter', ({ node }) => {})   // 节点-鼠标滑过

this.graph.on('node:mouseleave', ({node}) => {})   // 节点-鼠标离开

this.graph.on('edge:mouseenter', ({ edge }) => {})   // 边-鼠标滑过

this.graph.on('edge:mouseleave', ({ edge }) => {})   // 边-鼠标离开

this.graph.on('node:click', ({ node }) => {})   // 节点-点击

this.graph.on('node:added', ({ node }) => {})   // 节点-添加

this.graph.on('node:removed', ({ node })=> {})   // 节点-删除

this.graph.on('edge:added', ({ edge})=> {})   // 边-添加

this.graph.on('edge:removed', ({ edge})=> {})   // 边-删除

this.graph.on('edge:click', ({ edge }) => {})   // 边-点击

this.graph.getNodes()   // 获取所有节点

this.graph.getEdges()  // 获取所有边

this.graph.getCellById(id)   // 通过id获取边/节点

edge.setLabels(['通过'])   // 设置边的label属性

------------------------------------------------------

1、安装及引用

yarn add @antv/x6  

或

npm install @antv/x6 --save

// 代码内引入

import { Graph } from '@antv/x6';

2、创建画布容器 并渲染

// html
<div id="container"></div>

// js
import { Graph } from '@antv/x6';
const graph = new Graph({
  container: document.getElementById('container'),
  width: 800,
  height: 600,
  background: {
    color: '#fffbe6', // 设置画布背景颜色
  },
  grid: {
    size: 10,      // 网格大小 10px
    visible: true, // 渲染网格背景
  },
});

3、数据初始化为流程图、拓扑图

// 流程图数据
data = [
  {
    "id": "1",
    "shape": "dag-condition",
    "x": 290,
    "y": 110,
    "data": {
      "label": "读数据",
      "status": "success"
    },
    "ports": [
      {
        "id": "1-1",
        "group": "bottom"
      }
    ]
  }
];

data.forEach((item) => {
  if (item.shape === 'edge') {
      cells.push(this.graph.createEdge(item));
  } else {
      delete item.component;
      cells.push(this.graph.createNode(item));
  }
});
this.graph.resetCells(cells);

4、添加节点、右键点击、缩放等常用API

// 常用api
this.graph.addNode({}) 添加节点
this.graph.zoom(num) 缩放
this.graph.on('edge:contextmenu',（{}） =>{})};  右键点击连线
this.graph.on('node:contextmenu',（{}） =>{})};  右键点击节点
this.graph.removeEdge(edge.id);   移除连线
this.graph.removeNode(node.id);	  移除节点

5、涉及后的画布内容，导出为'数据'， 用于前后端通信保存

// 常用api
this.graph.addNode({}) 添加节点
this.graph.zoom(num) 缩放
this.graph.on('edge:contextmenu',（{}） =>{})};  右键点击连线
this.graph.on('node:contextmenu',（{}） =>{})};  右键点击节点
this.graph.removeEdge(edge.id);   移除连线
this.graph.removeNode(node.id);	  移除节点