vue项目中如何使用有向无环图（dag-diagram）
1、自定义右击事件偶现问题
2、节点删除再添加反复操作几次会出现，删除一个节点多个节点一起消失
3、检测是否成环
关于有向无环图在vue项目中的使用和安装，已经有很多的文章有过介绍了，我在这就不再重复这些东西，本文主要介绍的是在使用dag-diagram（一下简称dag）这个插件时的小技巧或者说是一些经验吧
1、自定义右击事件偶现问题
<DAGBoard
:data-all="DataAll"
@updateDAG="updateDAG"
@editNodeDetails="editNodeDetails"
@doSthPersonal="doSthPersonal"
/>
插件中有一个doSthPersonal事件，就是用来自定义右击事件的，可以在这个事件中写你所要自定义的右击事件的代码，
但是有一个前提是你需要在每个节点的rightClickEvent中添加这个自定义事件的eventName和label
下面的代码是dag插件中的源码：
const rightClickEvent = this.DataAll.nodes[i].rightClickEvent || null
1
因此我们可以在自己的项目的updateDAG事件中这样写
this.DataAll.nodes[i].rightClickEvent = [
{
label: 'CREATE NODE',
eventName: 'creatednode',
},
{
label: 'DELETE NODE INFO',
eventName: 'deletenode',
},
];
如果只是简单的这样写上的话你会发现，自定义事件在你第一次去右击的时候是不会出来的，但是第二次就会有了，这是因为updateDAG方法只有节点在幕布内发生变化时（移动或删除）才会执行，在将节点拖入到幕布中的这一事件中是不会触发的
所以我使用了watch来监听this.DataAll.nodes的长度，来添加自定义事件，因为nodes的长度在节点被拖入幕布的时候就会发生变化
'DataAll.nodes.length': {
handler() {
for (let i = 0; i < this.DataAll.nodes.length; i += 1) {
this.DataAll.nodes[i].rightClickEvent = [
{
label: 'CREATE NODE',
eventName: 'creatednode',
},
{
label: 'DELETE NODE INFO',
eventName: 'deletenode',
},
];
}
},
deep: true,
},
这样就可以解决第一次点击节点时，自定义事件不出现的问题
2、节点删除再添加反复操作几次会出现，删除一个节点多个节点一起消失
问题原因：
在dag插件中，每个节点的id都是由this.DataAll.nodes.length + 100组成的，如果你是删除节点的时候是先删除的最后添加的节点，那没问题，但是如果删除的是非最后一个节点，那就会出现新添加的节点id和已存在的节点id重复的问题，所以当你移动新添加的节点或者删除新添加的节点时，会有另一个节点随之消失
解决方法：
所以在给节点id赋值时我们应该添加一种情况
就是当用户执行删除操作后，应该将id的值设置为最后添加的id值+1+100，这样就不会出现有重复id的情况
if (this.DataAll.nodes.length) {
id1 = this.DataAll.nodes[len - 1].id + 1 - 100 + 100;
} else {
id1 = this.DataAll.nodes.length + 100;
}
this.DataAll.nodes.push({
...params.desp,
id: id1,
in_ports: [0, 1, 2, 3, 4],
out_ports: [0, 1, 2, 3, 4],
});
3、检测是否成环
这个功能我在看插件源码的时候它是有写这部分校验的，但是不知道为什么我在dag这个项目中数据成环后并没有提示，在我自己的项目中也并未实现改功能
于是我就把插件中的关于检测是否成环这部分代码拿出来，直接写在了我自己的 项目中
其实用的还是插件中的源码
// 检测是否成环
this.DataAll.edges.forEach((item) => {
let isCircle = false;
// 出口 入口id
const { dst_node_id } = item; // eslint-disable-line
const checkCircle = (dstNodeId, nth) => {
if (nth > this.DataAll.nodes.length) {
isCircle = true;
return false;
}
this.DataAll.edges.forEach((item) => {
if (item.src_node_id === dstNodeId) {
console.log(
'目标节点是',
item.src_node_id,
'次数为',
nth,
);
checkCircle(item.dst_node_id, ++nth); // eslint-disable-line
}
});
return false;
};
checkCircle(dst_node_id, 1);
if (isCircle) {
this.DataAll.edges.pop();
// alert('禁止成环');
this.$Message.error('禁止成环');
}
});