Vue2.0+Antv x6实现流程图问题总结

1.自定义svg节点

graph.addNode({
  shape: 'path',
  x: 200,
  y: 40,
  width: 100,
  height: 80,
  label: 'path',
  attrs: {
    body: {
      fill: '#efdbff',
      stroke: '#9254de',   
      refD: 'M 0 5 10 0 C 20 0 20 20 10 20 L 0 15 Z',
    },
  },
})

refD的值是svg图代码的path标签的d的值
使用之后图形出现双边是svg图形自身的问题

2.右键节点出现下拉

//html
  <div class="toolBar" :style="nodeStyle" v-show="nodeIsShow">
      <div class="delete" @click="nodeClick('edit')">进行中</div>
      <div class="delete del" @click="nodeClick('delete')">延期</div>
    </div>
    
//js   
ps:在其他的graph.on事件中设置nodeIsShow:false关闭弹框
 graph.on("cell:contextmenu", ({ e, cell }) => { 
        // 判断选中节点右击出现弹窗
        if (this.selectIsShow) {
          this.nodeStyle.left = e.clientX + "px";
          this.nodeStyle.top = e.clientY + "px";

          this.nodeIsShow = true;
          this.nodeCell = cell;
        }
      });
      
//css  
.toolBar {
  position: fixed;
  width: 100px;
  height: 60px;
  background-color: #fff;
  border-radius: 10px;

  .delete {
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-size: 15px;
    color: #333;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
  }
  .delete:hover {
    color: #5f95ff;
  }
  .del:hover {
    color: red;
  }
}

3.群组节点 拖拽子节点到父节点内部形成父子节点，根据当前拖拽的元素的坐标和画布上元素坐标对比