Vue使用AntV x6资料还是比较少的，Vue3还相对多一些。
主要的参考文档：（感谢）
https://blog.51cto.com/u_15697128/5786696
官方文档：
https://antv-x6.gitee.io/zh/docs/tutorial/about/
官方示例：
https://antv-x6.gitee.io/zh/examples/gallery
官方API文档：
https://antv-x6.gitee.io/zh/docs/api/graph/graph
记录一下开发的过程，主要想实现能够编辑工作流程的内容。过程中会遇到各种问题，在此做一个总结和记录。
如果是简单的流程图，完全可以按照参考文档的内容走，文档写的很好很详细。
实现过程
大致与参考文档一致，先安装依赖
安装
# npm
$ npm install @antv/x6 --save
$ npm install insert-css
# yarn
$ yarn add @antv/x6
$ yarn add insert-css
使用
直接在页面中import即可
按需要引入…
import { Graph, Node, Path, Edge, Platform, StringExt, Addon, FunctionExt, Shape } from '@antv/x6';
初始化画布
this.graph = new Graph({
container: document.getElementById('canvas'),
width: '100%',
height: '100%',
background: {
color: '#F2F7FA',
},
mousewheel: {
enabled: true,
modifiers: ['ctrl', 'meta'],
},
panning: {
enabled: true,
modifiers: ['alt'],
eventTypes: ['leftMouseDown'],
},
grid: {
visible: true,
type: 'doubleMesh',
args: [
{
color: '#eee', // 主网格线颜色
thickness: 1, // 主网格线宽度
},
{
color: '#ddd', // 次网格线颜色
thickness: 1, // 次网格线宽度
factor: 4, // 主次网格线间隔
},
],
},
connecting: {
router: {
name: 'manhattan',
args: {
padding: 1,
},
},
connector: {
name: 'rounded',
args: {
radius: 8,
},
},
anchor: 'center',
connectionPoint: 'anchor',
allowBlank: false,
snap: {
radius: 20,
},
createEdge() {
return new Shape.Edge({
attrs: {
line: {
stroke: '#A2B1C3',
strokeWidth: 2,
targetMarker: {
name: 'block',
width: 12,
height: 8,
},
},
},
zIndex: 0,
})
},
validateConnection({ targetMagnet }) {
return !!targetMagnet
},
},
highlighting: {
magnetAdsorbed: {
name: 'stroke',
args: {
attrs: {
fill: '#5F95FF',
stroke: '#5F95FF',
},
},
},
},
resizing: true,
rotating: true,
selecting: {
enabled: true,
rubberband: true,
showNodeSelectionBox: true,
},
snapline: true,
keyboard: {
enabled: true,
global: true,
},
clipboard: true,
})
画布对象可操作的参数有很多，具体可以看官方api文档：
https://antv-x6.gitee.io/zh/docs/api/graph/graph
这里列举几个用到的几个配置：
container
顾名思义，容器。需要指定一个HTMLElement。通过document.getElementById(‘’)，便于获取。
mousewheel和panning
mousewheel：鼠标滚轮，配置打开后，可以通过滚轮对画布进行缩放。
panning：拖拽开关。
缩放一般配合panning使用，操作起来会更顺一点。
mousewheel: {
enabled: true,
modifiers: ['ctrl', 'meta'],
},
panning: {
enabled: true,
modifiers: ['alt'],
eventTypes: ['leftMouseDown'],
},
btw，modifiers目前不支持空格（1.34.6）版本，不确定2.x版本能否支持，如果支持的话可以评论一下。
github：
https://github.com/antvis/X6/issues/2543
https://github.com/antvis/X6/issues/2140
这样可以达到按下alt之后，鼠标左键可以对画布进行拖拽。按住ctrl或meta（mac）时，鼠标滚轮滚动可以对画布进行缩放。
目前 MouseWheel ,Selection和 Scroller中的修饰键 modifiers 只能是’alt’、’ctrl’、’meta’、’shift’中其中一个或者多个
grid
网格，可以对画布的网格进行定制。
https://antv-x6.gitee.io/zh/docs/api/graph/grid
grid: {
visible: true,
type: 'doubleMesh',
args: [
{
color: '#eee', // 主网格线颜色
thickness: 1, // 主网格线宽度
},
{
color: '#ddd', // 次网格线颜色
thickness: 1, // 次网格线宽度
factor: 4, // 主次网格线间隔
},
],
},
这段代码是官方的例子，可以把网格改成点状。通过type调整
type: 'dot', // 'dot'（点状） | 'fixedDot' | 'mesh' （线）| 'doubleMesh' （主次网格线）
按需调整。
selecting
selecting和highlighting看起来有点像，本质上不太一样。
selecting官方意思为：点选/框选。可以多选。选择后会进入SelectedCells队列里，可以通过graph.getSelectedCells()取出来。关系到是否能通过键盘删除、复制节点。
所以需要用到相关功能就需要开启selecting
selecting: {
enabled: true,
rubberband: true,
showNodeSelectionBox: true,
},
heighting
可以高亮显示连接桩的信息。
highlighting: {
// 当链接桩可以被链接时，在链接桩外围渲染一个 2px 宽的红色矩形框
magnetAvailable: {
name: 'stroke',
args: {
padding: 4,
attrs: {
'stroke-width': 2,
stroke: 'red',
}
},
},
}
辅助配置
//缩放节点
resizing: true,
//旋转节点
rotating: true,
//对齐线
snapline: true,
//剪切板开关
clipboard: true,
主要问题
Cannot read properties of undefined (reading ‘fitToContent’)
错误信息：
TypeError: Cannot read properties of undefined (reading 'fitToContent')
at Stencil.loadGroup (index.js:290:19)
...
错误是在，loadGroup过程中。
这里是细节没注意，在声明stencil的时候，需要写明有哪些group：
const stencil = new Addon.Stencil({
title: 'Stencil',
target: this.graph,
search(cell, keyword) {
return cell.shape.indexOf(keyword) !== -1
},
placeholder: 'Search by shape name',
notFoundText: 'Not Found',
collapsable: true,
stencilGraphHeight: 0,
//groups 声明
groups: [
{
name: 'group1',
title: 'Group(Collapsable)',
},
{
name: 'group2',
title: 'Group',
collapsable: false,
},
],
})
如果此处没有声明，在模板节点注入的时候会出现这个问题。
stencil.load([n1, n2, g1], 'group1')
//这里会有问题，因为在stencil中没有声明有这个group
stencil.load([n1, n2, g1], 'groupTest')
bindKey is not a function
现象是，图表中声明的快捷键都不好用。而且初始化键盘事件时，控制台会有这个错误。
Error in mounted hook: "TypeError: this.graph.bindKey is not a function"
跟踪代码发现是依赖缺少东西了，解决方案是更改antv/x6版本。
后来使用的是这个版本：（原先是2.x）并且把antv/x6-plugin-dnd和antv/x6-plugin-stencil都分开取了一个版本，可能导致内容冲突。
其实不需要把另外两个单独声明一个版本的。
"@antv/x6": "1.34.6",
其他问题的解决可以参考：（我遇到的不是这个原因，此方法无效。）
https://www.zhihu.com/question/595174103/answer/3123947507?utm_id=0
#
版本问题
antv x6的1.34.6版本，配置与2.x版本相差许多，2.x版本我遇到了keyboard绑定失败的问题，尝试过多种办法暂时无效，如果有解决方案大家可以沟通一下。
x6-react-shape版本，1.34.6版本需要用下列命令安装
会安装到1.6.5版本，否则会报错，提示需要antv x6的2.x
npm install --save @antv/x6-react-shape@^1.x
更换到2.X版本的话，selecting配置暂缺（可能没找到正确的配置示例），核心问题还是keyboard无法绑定。无法selecting、无法使用Keyboard。
