1. 概述
接到一个任务,是要前端实现系统功能模块间拓扑关系图,需求设计需要节点能够自定义布局;新增节点是通过表单配置后生成(后面优化我补充了连接桩),所以需要节点的坐标(position:x,y)能够自适应;调研后可以通过使用X6+自定义Vue节点实现拓扑关系,于是开始学习X6技术,并最终能够按要求实现需求设计
2. 技术
- 使用的框架:Vue
- 使用的组件库:iView、Element
- X6 图编辑引擎 X6 是 AntV 旗下的图编辑引擎,提供了一系列开箱即用的交互组件和简单易用的节点定制能力,方便我们快速搭建 DAG 图、ER 图、流程图等应用。
- X6功能思维导图:
- X6优点:
- 极易定制:支持使用 SVG/HTML/React/Vue 定制节点样式和交互;
- 开箱即用:内置 10+ 图编辑配套扩展,如框选、对齐线、小地图等;
- 数据驱动:基于 MVC 架构,用户更加专注于数据逻辑和业务逻辑;
- 事件驱动:可以监听图表内发生的任何事件。
3. 实现
- 安装库
ruby
$ npm install @antv/x6 --save
$ yarn add @antv/x6
- 引入
javascript
import { Graph, Line, Path, Curve } from "@antv/x6"; // 引入X6
import customNode from "./components/customNode"; //引入自定义节点Vue组件
import { register } from "@antv/x6-vue-shape"; // 注册自定义节点
- 实现画布 在 X6 中,Graph 是图的载体,它包含了图上的所有元素(节点、边等),同时挂载了图的相关操作(如交互监听、元素操作、渲染等)。
javascript
const graph = new Graph({
container: document.getElementById("container"),
})
// 双击边
graph.on("edge:dblclick", ({ e, x, y, cell, view }) => {})
// 双击节点
graph.on("node:dblclick", ({ e, x, y, cell, view }) => {})
// 鼠标移入 展示连接桩、删除button
graph.on("cell:mouseenter", ({ cell }) => {})
// 鼠标移出 隐藏连接桩、删除button
graph.on("cell:mouseenter", ({ cell }) => {})
- 注册自定义节点
php
register({
shape: "custom-node",
width: 400,
height: 130,
ports: { ...ports },
component: {
render: (h) =>
h(customNode, {
on: {
// 监听 customNode组件触发的事件,获取传递出来的数据
myEvent: (data) => {
this.handleMyEvent(data);
},
},
props: {},
}),
},
});
- 注册自定义连线样式
ini
let options = { raw: true, index: 1, total: 6, gap: 12 };
Graph.registerConnector(
"multi-smooth",
(sourcePoint, targetPoint, routePoints) => {
const { index = 0, total = 1, gap = 12 } = options;
const line = new Line(sourcePoint, targetPoint);
const centerIndex = (total - 1) / 2;
const dist = index - centerIndex;
const diff = Math.abs(dist);
const factor = diff === 0 ? 1 : diff / dist;
const vertice = line
.pointAtLength(line.length() / 2 + gap * factor * Math.ceil(diff))
.rotate(90, line.getCenter());
const points = [sourcePoint, vertice, targetPoint];
const curves = Curve.throughPoints(points);
const path = new Path(curves);
return options.raw ? path : path.serialize();
},
true
);
- 实现效果
这里节点是引入自定义节点Vue组件实现,在该组件中可任意使用iView、Element组件库中各组件。
图1是通过新增按钮触发配置节点信息弹框,通过计算节点将新增在画布的大概中心位置。
图2是通过图片工具栏拖拽自动生成节点。
图1
图2
4. 总结与经验
- 为节点、连线添加快捷删除工具"button-remove"后如何实现删除拦截二次确认?
php
cell.addTools({
name: "button-remove",
args: {
distance: "50%",
onClick({ view }) {
this.$Modal.confirm({
title: "提示",
content: "是否确认删除该连线",
okText: "是",
cancelText: "否",
onOk: () => {},
onCancel: () => {},
});
},
},
});
- 监听手动连线使用connected较为正确,added仅能拿到连线的源端信息
javascript
graph.on("edge:connected", ({ isNew, edge }) => {
})
- 如何为节点动态添加连接桩?
javascript
// 展示
graph.on("cell:mouseenter", ({ cell }) => {
// 鼠标移入节点上时执行
if (cell.isNode()) {
// 展示节点四周的连接桩
const allPorts = cell.getPorts();
allPorts.forEach((port) => {
cell.setPortProp(port.id, "attrs/circle", {
stroke: "#ed4014",
});
});
}
})
// 隐藏
graph.on("cell:mouseleave", ({ cell }) => {
// 鼠标移除节点时执行
if (cell.isNode()) {
//隐藏连接点
const allPorts = cell.getPorts();
allPorts.forEach((port) => {
cell.setPortProp(port.id, "attrs/circle", {
stroke: "transparent",
});
});
})
5. 遗留问题
- 两个节点之间的双箭头连线当对角时排列变成两条单箭头连线?