antv-x6图形化建模（三）连接桩对应多个输入或输出时区别连线

获取数据时判断是否为多输入或输出，创建连线时添加字符串标识

let fromPort = el.connectionfrom_original_name;
fromPort = fromPort.includes('[')?(el.connectionfrom+'[]'):el.connectionfrom;
let toPort = el.connectionto_original_name;
toPort = toPort.includes('[')?(el.connectionto+'[]'):el.connectionto;
this.graphAntv.addEdge({
     source:{cell: fromcell, port:fromPort},
     target:{cell: tocell, port:toPort},
    attrs:{
        trueNameFrom:el.connectionfrom_original_name,
        trueNameTo:el.connectionto_original_name,
　　}
}）    

连接时判断

if(e.edge.source.port.includes('[]')){
        this.midCellLine = e.edge.id;
        if(e.edge.target.port.includes('[]')){
          // 输入和输出都是多端口
          this.settingList.push({
            type:'输出口',
            head:`${e.edge.source.port.split('[')[0]}[`,
            value:'',
            foot:']',
            unsetted:true
          })
          this.settingList.push({
            type:'输入口',
            head:`${e.edge.target.port.split('[')[0]}[`,
            value:'',
            foot:']',
            unsetted:true
          })
        }else{
          // 输入为多端口
          this.settingList.push({
            type:'输出口',
            head:`${e.edge.source.port.split('[')[0]}[`,
            value:'',
            foot:']',
            unsetted:true
          })
          this.settingList.push({
            type:'输入口',
            head:`${e.edge.target.port}`,
            value:'',
            foot:''
          })
        }
        this.setConnectPointModal = true;
      }...省略输出为多端口和无多端口的判断

用户输入端口名称

<Modal
        v-model="setConnectPointModal"
        title="设置连接点"
        style="width: 200px"
        @on-ok="settedPoint"
        @on-cancel="cancelSetting"
      >
        <div v-for="(item, index) in settingList" :key="index">
          <div v-if="item.unsetted" style="display: flex; align-items: center">
            {{item.type}}：{{ item.head }}&nbsp;&nbsp;&nbsp;&nbsp;
            <Input v-model="item.value" style="width: 60px"></Input>
            &nbsp;&nbsp;&nbsp;&nbsp;{{ item.foot }}
          </div>
          <div v-else>{{item.type}}：{{ item.head }}{{ item.foot }}</div>
        </div>
      </Modal>

用户确定输入后确定连线

let edge = this.graphAntv.getCellById(this.midCellLine);
        if (连接成功) {
          this.$Message.success("连接成功");
         // 设置私有属性
          edge.attr("trueNameFrom" , 处理后的输入);
          edge.attr("trueNameTo" , 处理后的输出);
        } else {
          this.graphAntv.removeCell(edge);
          this.$Message.error("连接失败");
        }

 

用户删除连线

connect_start:edge.attrs.trueNameFrom, connect_end:edge.attrs.trueNameTo,