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

因此我们可以在自己的项目的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;// 出口 入口idconst { dst_node_id } = item; // eslint-disable-lineconst 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('禁止成环');}});

我是写在了保存按钮中，我试了dag插件带的那几个方法，并未生效，所以就只能在保存时校验
如果有更好的方法，希望大家不吝指教~~