组合新增和新增删除设备节点1.0

wente

2024-05-08 90d84d6e1bb895c144b6865d7df40e4739c1b535

 web/src/views/modules/taskReliability/RBD-edit-img.vue

@@ -60,6 +60,7 @@
  import {removeCurrentTabHandle} from '@/commonJS/common'
  import {setHartBeat} from '@/commonJS/common';
  import Cookies from 'js-cookie'
  import {getUUID} from '../../../../packages/utils'

  export default {
    name: 'RBD-edit-img',
@@ -87,6 +88,7 @@
    },
    data() {
      return {
        isFirstLoad: true,
        hasMoveNode: false,
        hasMoveSingleNode: null,
        nodeAdded: false,
@@ -105,6 +107,15 @@
            imgWidth: 30,
            imgHeight: 30,
            imgId: '3',
            data: {}
          },
          {
            imgPath: 'connect',
            imgName: 'bridge',
            nodeType: 'bridge',
            imgWidth: 50,
            imgHeight: 50,
            imgId: '12',
            data: {}
          },
          {
@@ -132,7 +143,7 @@
            nodeType: 'dashedBox',
            imgWidth: 60,
            imgHeight: 60,
            imgId: '9',
            imgId: '10000',
            data: {}
          },
          {
@@ -141,7 +152,7 @@
            nodeType: 'bridgeConnection',
            imgWidth: 60,
            imgHeight: 60,
            imgId: '9',
            imgId: '10',
            data: {}
          },
        ],
@@ -346,6 +357,7 @@
        console.log(this.dataForm, 'init(row){')
      },
      async getDiagram(modelId) {
        this.isFirstLoad = true;
        let params = {
          modelId: modelId,
          urlPref: window.SITE_CONFIG['apiURL'],
@@ -355,11 +367,12 @@
        if (res.data !== null && (res.data.content != null)) {
          this.dataForm = res.data
          this.diagramJson = JSON.parse(this.dataForm.content)
          if(this.diagramJson.cells.length!==0){
          if (this.diagramJson.cells.length !== 0) {
            this.graph.fromJSON(this.diagramJson)
          }else {
          } else {
            this.initCells()
          }
          this.isFirstLoad = false;
          console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')

          this.graph.positionContent('left')
@@ -444,7 +457,7 @@
                  line: {
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: 'classic'
                    targetMarker: {fill: 'none'}
                  }
                },
                labels: [{
@@ -471,7 +484,7 @@
                    attrs: {fill: '#666'},
                  },
                },
                zIndex: 0,
                zIndex: -100,
              })
            },
            validateConnection({targetMagnet}) {
@@ -505,9 +518,9 @@
        const stencil = new Addon.Stencil({
          getDragNode: (node) => node.clone({keepId: true}),
          getDropNode: (node) => {
            const { width, height } = node.size()
            if(node.getData().type && node.getData().nodeType === 'dashedBox'){
              return node.clone().size(170, 90)
            const {width, height} = node.size()
            if (node.getData().type && node.getData().nodeType === 'dashedBox') {
              return node.clone().size(100, 80)
            }
            if (node.getData().type && node.getData().type === 'imageNodes2') {
              return node.clone({keepId: true})
@@ -556,9 +569,12 @@
            // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
            width: item.imgWidth,
            height: item.imgHeight,
            id: item.imgId,
            data: {
              type: 'imageNodes',
              dataId: '',
              startNodeId: '',
              endNodeId: '20000',
              nodeType: item.nodeType,
              nodeTypeExt: '',
              voteNum: ''
@@ -703,23 +719,68 @@
//delete
        this.graph.bindKey('delete', () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
          console.log(cells,'cells')
          if (cells.length === 1) {
            this.$confirm('是否删除该节点?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let node = cells[0]
              if (!node.isNode()){
                this.$message({message: '请选中节点', type: 'warning'})
                return false; // 取消操作
              }
              let nodeType = node.getData().nodeType
              let canDelete = false
              if (nodeType==='start' || nodeType==='end'){
                this.$message({message: '无法删除起始和结束节点', type: 'warning'})
                return false; // 取消操作
              }
              if(nodeType === 'node' || nodeType ==='dashedBox'){
                let isSeriesNode = this.isSeriesNode(node)
                if (isSeriesNode){
                  //删掉，前后线连起来
                  this.graph.addEdge({
                    source: {cell: isSeriesNode.inNode, port: 'right1'},
                    target: {cell: isSeriesNode.outNode, port: 'left1'},
                    router: {name: 'manhattan'},
                    connector: {name: 'rounded'}
                  })
                  node.remove()
                  return
                }
                if (this.isMultipleBrach(node)){
                  //直接删掉，不用管线
                  return
                }else{
                  //提示这个组合只有一条之路，在组合点删除
                  return
                }
              }
              if (nodeType==='connect'){
                try{
                   let endNodeId = node.getData().endNodeId
                    // 提示不能直接删除左连接点
                    return
                }catch(e){}
              }
              //做个迭代删除整个组合
              //this.deleteCombination();

              // this.graph.removeCells(cells)
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.graph.removeCells(cells)
            }).catch(() => {
              this.$message({
                type: 'info',
                message: '已取消删除'
              })
            })
          }else{

          }
        })
// zoom
@@ -745,78 +806,45 @@
        })
        // 监听节点添加事件
        this.graph.on('node:added', ({node}) => {
          const nodeId = node.id; // 获取节点的唯一 ID
          if (this.isFirstLoad) {
            return
          }
          if (node.getData().isSelfCreated) {
            return
          }
          const nodeType = node.getData().nodeType; // 获取节点的类型
          const nodeObj = node
          const intersectNodes = [];
          // 检查除当前节点之外的所有节点的包围框是否相交
          for (const otherNode of this.graph.getNodes()) {
            if (otherNode === node) continue;
            const bbox1 = node.getBBox();
            const bbox2 = otherNode.getBBox();
            if (this.isIntersect(bbox1, bbox2)) {
              intersectNodes.push(otherNode);
          console.log(123)
          let intersectNode = this.findIntersectsNode(node)
          if (intersectNode) { // 当有节点相交 ==>并行
            this.addBranch(intersectNode, nodeObj)
          } else {
            let isSelfCreated = null
            try {
              isSelfCreated = node.getData().isSelfCreated
            } catch (e) {
            }
            if (!isSelfCreated) {
              let intersectEdge = this.findIntersectsEdge(this.graph, node)
              if (intersectEdge) { // 当有边相交 ==>串联
                this.addNodeAndInsertEdge(intersectEdge, nodeObj)
              } else {
                //提示
              }
            }
          }
          if (intersectNodes.length > 0) {
            // console.log('Nodes intersect with node:', node.id);
            console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 相交节点的对象
            intersectNodes.map(node => {
              this.addNodeAndConnect(node, nodeObj);
            })
          }


          /*//如果节点与节点相交
          console.log(node.position().x, node.position().x, 'node.position().x')
          if (nodeType === 'bridgeConnection') {
            this.getBridgeConnection()
          }*/
        });
        // 监听节点位置改变事件
        this.graph.on('node:change:position', ({node}) => {
          this.hasMoveNode = true
          this.hasMoveSingleNode = node
        });
        // 抬起
        this.graph.on('node:mouseup', ({e,x,y,node}) => {

          if (this.hasMoveNode) {
            const selectionNodes = this.graph.getSelectedCells().filter(node => node.isNode() )
            if (selectionNodes.length == 0){
              selectionNodes.push(this.hasMoveSingleNode)
            }
            //let selectionNodes = []
            console.log('横坐标：',x,'纵坐标：'+y)
            // let allNodes = this.graph.getNodes()
            //
            // for(let node of allNodes){
            //    if (this.graph.isSelected(node)){
            //      selectionNodes.push(node)
            //    }
            //
            // }
            // 获取包含指定坐标点的节点
            const nodes = this.graph.getNodes();
            let hasNodes = []
            for (let i = 0; i < nodes.length; i++) {
              const node = nodes[i];
              const bbox = node.getBBox();
              if (x>=bbox.x && x <= bbox.x + bbox.width && y>=bbox.y && y <= bbox.y + bbox.height) {
                if ( selectionNodes.indexOf(node)===-1) {
                  hasNodes.push(node);
                }
              }
            }
            if(hasNodes){}
            console.log('获取包含指定坐标点的节点集合',hasNodes)
            console.log('选中的节点集合：',selectionNodes)

            // if (selectionNodes.length>2)
            //   this.graph.addEdge({
            //     source: {cell: selectionNodes[0], port: 'left1'},
            //     target: {cell: selectionNodes[selectionNodes.length-1], port: 'right1'},
            //     router: {name: 'manhattan'},
            //     connector: {name: 'rounded'}
            //   })
            this.hasMoveNode = false
            this.hasMoveSingleNode = null


            // console.log('移动过节点（多个）再抬起鼠标后得到的节点',selectedNodes);
          }
        });
        this.graph.on('cell:click', ({cell}) => {
          // this.type.value = cell.isNode() ? "node" : "edge"
@@ -1080,154 +1108,133 @@
        }
      },
      // 定义函数来检查两个包围框是否相交
      isIntersect(bbox1, bbox2) {
        return (
          bbox1.x < bbox2.x + bbox2.width &&
          bbox1.x + bbox1.width > bbox2.x &&
          bbox1.y < bbox2.y + bbox2.height &&
          bbox1.y + bbox1.height > bbox2.y
        )
      },
      addNodeAndConnect(node, nodeObj) { // node是画布原有的节点。nodeObj是当前拖拽的节点
        const nodeType = node.getData().nodeType  // 获取画布原有的节点类型
        const nodeObjType = nodeObj.getData().nodeType  // 获取当前拖拽的节点类型
        const edges = this.graph.getConnectedEdges(node); // 获取与原节点相关联的所有连接线
        let TopSum = 0 // 在原节点上方
        let BottomSum = 0 // 在原节点下方
        const edgesSum = edges.length
        if ((nodeType === 'end'|| nodeType === 'vote' || nodeType === 'switch' || nodeType === 'parallel') && nodeObjType === 'node') {
          if (edges.length === 0) {
            if (!this.nodeAdded) {
              // 添加节点的操作
              this.connectNode = this.graph.addNode({
                shape: 'image',
                // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
                width: 30,
                height: 30,
                data: {
                  type: 'imageNodes',
                  dataId: '',
                  signId:node.id,
                  nodeType: 'connect',
                  nodeTypeExt: '',
                  voteNum: ''
                },
                attrs: {
                  image: {
                    'xlink:href': '/modelImg/connect.svg',
                  },
                  text: {
                    text: 'connect',
                    fontSize: 14,
                    refX: 0.5,
                    refY: '100%',
                    refY2: 4,
                    textAnchor: 'middle',
                    textVerticalAnchor: 'top',
                  },
                },
                ports: {...this.ports},
              })
              // 设置标记为 true，表示已经添加过节点
              this.nodeAdded = true;
            }
            nodeObj.position(node.position().x - 120, node.position().y - (120 * edgesSum));
            this.connectNode.position(node.position().x - 240, node.position().y + (node.size().height - this.connectNode.size().height) / 2);
          } else if (edges.length === 1) {
            // 将节点移动到指定的位置
            nodeObj.position(node.position().x - 120, node.position().y - (120 * edgesSum));
          } else {
            for (const edge of edges) {
              const sourcePointY = edge.getSourcePoint().y; // 获取连接线的起始点y坐标
              const targetPointY = edge.getTargetPoint().y; // 获取连接线的结束点y坐标
              console.log('原节点Y坐标' + node.position().y, '连接线起始Y坐标' + sourcePointY)
              if (targetPointY > sourcePointY) {
                TopSum++
              } else if (targetPointY < sourcePointY) {
                BottomSum++
              }
            }
            console.log('在原节点上方的连接线数量:' + TopSum, '在原节点下方的连接线数量:' + BottomSum)
            if (TopSum > BottomSum) {
              nodeObj.position(node.position().x - 120, node.position().y + (120 + (120 * BottomSum)))
            } else {
              nodeObj.position(node.position().x - 120, node.position().y - (120 + (120 * TopSum)));
      findIntersectsNode(node) {
        const nodes = this.graph.getNodes()
        let intersectNodes = []
        const bbox1 = node.getBBox();
        // 检查除当前节点之外的所有节点的包围框是否相交
        for (const otherNode of nodes) {
          if (otherNode === node) continue;
          let nodeType = otherNode.getData().nodeType
          if (nodeType === "parallel" || nodeType === "switch" || nodeType === "vote" || nodeType === "end" || nodeType === "dashedBox") {
            const bbox2 = otherNode.getBBox();
            if (bbox1.x < bbox2.x + bbox2.width &&
              bbox1.x + bbox1.width > bbox2.x &&
              bbox1.y < bbox2.y + bbox2.height &&
              bbox1.y + bbox1.height > bbox2.y) {
              intersectNodes.push(otherNode);
            }
          }
        }
        if (intersectNodes.length === 1) {
          //console.log('Intersecting nodes:', intersectNodes.map(n => n)); // 相交节点的对象
          return intersectNodes[0]
        } else {
          //提示用户只能拖到一个有效的节点上
          return null
        }
      },
      // 相交的节点
      addBranch(graphNode, dragNode) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
        let graphNodeType = graphNode.getData().nodeType

        let dragNodeType = dragNode.getData().nodeType
        let offHeight = 60
        if (dragNodeType === 'node') {
          offHeight = 60
        } else if (dragNodeType === 'bridgeConnection') {
          offHeight = 230
        } else {
          offHeight = 70
        }
        if (graphNodeType === 'dashedBox') {
          const edges = this.graph.getConnectedEdges(graphNode); // 获取画布上原有的节点所有进来的线
          let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
          let startNode = null
          let endNode = null
          if (inEdges.length === 1) {
            let startNodeId = inEdges[0].source.cell
            startNode = this.graph.getCellById(startNodeId)
          }
          let outEdges = edges.filter(edge => edge.source.cell === graphNode.id)
          if (outEdges.length === 1) {
            let endNodeId = outEdges[0].target.cell
            endNode = this.graph.getCellById(endNodeId)
          }
          if (startNode && endNode) {
            graphNode.remove()
            let centerY = graphNode.position().y
            this.addNodeAndConnect(startNode, endNode, dragNode, centerY)
          }
        } else {
          const graphNodeStartNodeId = graphNode.getData().startNodeId  // 获取画布上原有节点的开始ID
          const graphNodeStartNode = this.graph.getCellById(graphNodeStartNodeId) // 通过开始ID得到初始节点对象
          let graphNodeY = graphNode.position().y - graphNode.getBBox().height / 2 // 获取画布原有节点的y坐标
          let minY = graphNode.position().y
          let maxY = graphNode.position().y + graphNode.getBBox().height

          const edges = this.graph.getConnectedEdges(graphNode); // 获取画布上原有的节点所有进来的线
          let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
          //遍历这个组合里面所有节点， 修改minY，maxY

          let pointXY = {minY: minY, maxY: maxY}
          console.log(pointXY, 'old')
          this.getYRange(inEdges, graphNodeStartNode, pointXY)
          console.log(pointXY, 'new')

          let centerY = graphNodeY - pointXY.minY > pointXY.maxY - graphNodeY ? pointXY.maxY + 30 : pointXY.minY - offHeight - 30

          this.addNodeAndConnect(graphNodeStartNode, graphNode, dragNode, centerY)
        }
      },
      addNodeAndConnect(startNode, endNode, dragNode, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
        let minX = startNode.position().x + startNode.getBBox().width
        let maxX = endNode.position().x

        let centerX = minX + (maxX - minX) / 2
        let dragNodeType = dragNode.getData().nodeType
        if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
          dragNode.position(minX + 50, centerY);
          this.graph.addEdge({
            source: {cell: nodeObj, port: 'right1'},
            target: {cell: node, port: 'left1'},
            source: {cell: startNode, port: 'right1'},
            target: {cell: dragNode, port: 'left1'},
            router: {name: 'manhattan'},
            connector: {name: 'rounded'}
          })
          if (this.nodeAdded) {
            console.log(this.connectNode, 'connectNode')
            this.graph.addEdge({
              source: {cell: this.connectNode, port: 'right1'},
              target: {cell: nodeObj, port: 'left1'},
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })
          }
        }
        if (nodeType === 'node' || (nodeType === 'dashedBox' && nodeObjType === 'dashedBox')) {
          // 遍历所有连接线并删除与给定节点对象相关的连接线
          console.log(edges, '所有有关联的连接线 edge')
          if (edges.length === 0) {
            this.graph.addEdge({
              source: {cell: node, port: 'right1'},
              target: {cell: nodeObj, port: 'left1'},
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })
            return nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y);
          } else {
            for (const edge of edges) {
              console.log(edge, '所有有关联的连接线 edge')
              if (edge.source.cell === node.id) { // 如果连接线的起始节点等于当前画布目标节点的ID
                const sourceNode = this.graph.getCellById(edge.source.cell); // 获取连接线的源节点对象
                const targetNode = this.graph.getCellById(edge.target.cell) // 获取连接线的目标节点对象
                console.log(sourceNode, targetNode, 'targetNode 目标节点对象')
                // edge.remove(); // 从图中删除该连接线
                nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y + (node.size().height - nodeObj.size().height) / 2);
                // edge.source = {cell: node, port: 'right1'}
                edge.target = {cell: nodeObj, port: 'left1'}
                // targetNode.position(nodeObj.position().x +nodeObj.getBBox().width+50, node.position().y);
                // this.graph.addEdge({
                //   source: {cell: node, port: 'right1'},
                //   target: {cell: nodeObj, port: 'left1'},
                //   router: {name: 'manhattan'},
                //   connector: {name: 'rounded'}
                // })
                this.graph.addEdge({
                  source: {cell: nodeObj, port: 'right1'},
                  target: {cell: targetNode, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })
              } else {
                this.graph.addEdge({
                  source: {cell: node, port: 'right1'},
                  target: {cell: nodeObj, port: 'left1'},
                  router: {name: 'manhattan'},
                  connector: {name: 'rounded'}
                })
                nodeObj.position(node.position().x + node.getBBox().width + 50, node.position().y);
              }
            }
          }


          this.graph.addEdge({
            source: {cell: dragNode, port: 'right1'},
            target: {cell: endNode, port: 'left1'},
            router: {name: 'manhattan'},
            connector: {name: 'rounded'}
          })
        } else if (dragNodeType === 'bridgeConnection') {
          this.createBridgeConnection(minX, centerY, startNode, endNode, dragNode)
        } else {
          this.createParallelBrach(minX, centerY, startNode, endNode, dragNode)
        }
      },
      initCells(){
      // 相交的边
      addNodeAndInsertEdge(graphEdge, dragNode) {
        let startNodeId = graphEdge.source.cell
        let startNode = this.graph.getCellById(startNodeId)
        let endNodeId = graphEdge.target.cell
        let endNode = this.graph.getCellById(endNodeId)
        if (startNode && endNode) {
          graphEdge.remove()
          let centerY = startNode.position().y
          this.addNodeAndConnect(startNode, endNode, dragNode, centerY)
        }
      },
      initCells() {
        const startNode = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 60,
          height: 60,
          id: '10000',
          data: {
            type: 'imageNodes',
            endNodeId: '20000',
            dataId: '',
            nodeType: 'start',
            nodeTypeExt: '',
@@ -1252,8 +1259,9 @@
        const dashedBox = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 170,
          height: 90,
          width: 100,
          height: 80,
          id: 15000,
          data: {
            type: 'imageNodes',
            dataId: '',
@@ -1281,8 +1289,10 @@
          shape: 'image',
          width: 60,
          height: 60,
          id: '20000',
          data: {
            type: 'imageNodes',
            startNodeId: '10000',
            dataId: '',
            nodeType: 'end',
            nodeTypeExt: '',
@@ -1320,8 +1330,316 @@
          connector: {name: 'rounded'}
        })
      },
    },
      findIntersectsEdge(graph, node) {
        const edges = graph.getEdges()
        const bbox = node.getBBox();
        const lines = [bbox.leftLine, bbox.rightLine, bbox.topLine, bbox.bottomLine];
        let res = [];
        edges.forEach((edge) => {
          const view = graph.findViewByCell(edge);
          lines.forEach((line) => {
            if (view) {
              if (view.path.intersectsWithLine(line)) {
                res.push(edge);
              }
            }
          })
        })
        const uniqueArr = res.filter((insEdge, index) =>
          res.findIndex(i => i.id === insEdge.id) === index);
        console.log(uniqueArr, 'uniqueArr')
        if (uniqueArr.length === 1) {
          return uniqueArr[0]
        } else {
          return false
        }
      },
      createParallelBrach(x, y, startNode, endNode, dragNode) {
        dragNode.position(x + 320, y - dragNode.size().height / 2)
        const connectNode = this.createConnectNode(x + 50, y)
        const dashedBox = this.createDashedBox(x + 150, y)
        dragNode.setData({startNodeId: connectNode.id})

        this.graph.addEdge({
          source: {cell: connectNode, port: 'right1'},
          target: {cell: dashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        this.graph.addEdge({
          source: {cell: dashedBox, port: 'right1'},
          target: {cell: dragNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })

        this.graph.addEdge({
          source: {cell: startNode, port: 'right1'},
          target: {cell: connectNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        this.graph.addEdge({
          source: {cell: dragNode, port: 'right1'},
          target: {cell: endNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
      },
      createBridgeConnection(x, y, startNode, endNode, dragNode) {
        const leftTopDashedBox = this.createDashedBox(x + 120, y)
        const rightTopDashedBox = this.createDashedBox(x + 400, y)

        const leftConnectNode = this.createConnectNode(x + 50, y + 80)
        const alignCenterDashedBox = this.createDashedBox(x + 260, y + 80)
        const rightConnectNode = this.createBridgeNode(x + 550, y + 80)

        const leftBottomDashedBox = this.createDashedBox(x + 120, y + 160)
        const rightBottomDashedBox = this.createDashedBox(x + 400, y + 160)

        rightConnectNode.setData({startNodeId: leftConnectNode.id})
        leftConnectNode.setData({endNodeId: rightConnectNode.id})
        this.graph.addEdge({
          source: {cell: startNode, port: 'right1'},
          target: {cell: leftConnectNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'},
        })
        this.graph.addEdge({
          source: {cell: rightConnectNode, port: 'right1'},
          target: {cell: endNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        this.graph.addEdge({
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftTopDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        this.graph.addEdge({
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftBottomDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })

        let edgeTop = this.graph.addEdge({
          source: {cell: leftTopDashedBox, port: 'right1'},
          target: {cell: rightTopDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        let edgeBottom = this.graph.addEdge({
          source: {cell: leftBottomDashedBox, port: 'right1'},
          target: {cell: rightBottomDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })

        this.graph.addEdge({
          source: {cell: rightTopDashedBox, port: 'right1'},
          target: {cell: rightConnectNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })
        this.graph.addEdge({
          source: {cell: rightBottomDashedBox, port: 'right1'},
          target: {cell: rightConnectNode, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
        })

        this.graph.addEdge({
          source: {cell: edgeTop},
          target: {cell: alignCenterDashedBox},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'},
        })
        this.graph.addEdge({
          source: {cell: alignCenterDashedBox},
          target: {cell: edgeBottom},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'},
        })
        dragNode.remove()
      },
      createDashedBox(x, y) {
        const dashId = getUUID().toString()
        let dashedBox = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 100,
          height: 60,
          id: dashId,
          data: {
            isSelfCreated: true,
            type: 'imageNodes',
            dataId: '',
            nodeType: 'dashedBox',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/dashedBox.svg',
            },
            text: {
              text: 'dashedBox',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        dashedBox.position(x, y - dashedBox.size().height / 2)
        return dashedBox
      },
      createConnectNode(x, y) {
        const connectId = getUUID().toString()
        const dragNodeId = getUUID().toString()
        let connectNode = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 30,
          height: 30,
          id: connectId,
          data: {
            isSelfCreated: true,
            type: 'imageNodes',
            endNodeId: dragNodeId,
            dataId: '',
            nodeType: 'connect',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/connect.svg',
            },
            text: {
              text: 'connect',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        connectNode.position(x, y - connectNode.size().height / 2)
        return connectNode
      },
      createBridgeNode(x, y) {
        const connectId = getUUID().toString()
        const dragNodeId = getUUID().toString()
        let connectNode = this.graph.addNode({
          shape: 'image',
          width: 50,
          height: 50,
          id: connectId,
          data: {
            isSelfCreated: true,
            type: 'imageNodes',
            endNodeId: dragNodeId,
            dataId: '',
            nodeType: 'bridge',
            nodeTypeExt: '',
            voteNum: ''
          },
          attrs: {
            image: {
              'xlink:href': '/modelImg/connect.svg',
            },
            text: {
              text: 'bridge',
              fontSize: 14,
              refX: 0.5,
              refY: '100%',
              refY2: 4,
              textAnchor: 'middle',
              textVerticalAnchor: 'top',
            },
          },
          ports: {...this.ports},
        })
        connectNode.position(x, y - connectNode.size().height / 2)
        return connectNode
      },
      getYRange(inEdges, startNode, pointXY) {
        for (let inEdge of inEdges) {
          let nodeId = inEdge.source.cell
          let node = this.graph.getCellById(nodeId)
          if (node.position().y < pointXY.minY) {
            pointXY.minY = node.position().y
          }
          if (node.position().y + node.getBBox().height > pointXY.maxY) {
            pointXY.maxY = node.position().y + node.getBBox().height
          }
          if (node.id === startNode.id) {
            continue
          }
          const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
          let inEdgesPrev = edges.filter(edge => edge.target.cell === node.id)
          this.getYRange(inEdgesPrev, startNode, pointXY)
        }
      },
      isSeriesNode(node){
        let result = false
        let inNode = null
        let outNode = null
        let inEdges = this.getInLinesOfNode(node)
        if (inEdges.length === 1){
          let inEdgeId = inEdges[0].id
          let isLineToLine = this.isLineToLine(inEdgeId)
          let inNodeId = inEdges[0].source.cell
          inNode = this.graph.getCellById(inNodeId)
          let inNodeType = inNode.getData().nodeType
          if (!isLineToLine && 'node,parallel,switch,vote'.indexOf(inNodeType)>-1){
            result = true
          }
        }
        let outEdges = this.getOutLinesOfNode(node)
        if (outEdges.length === 1){
          let outEdgeId = inEdges[0].id
          let isLineToLine = this.isLineToLine(outEdgeId)
          let outNodeId = inEdges[0].target.cell
          outNode = this.graph.getCellById(outNodeId)
          let outNodeType = outNode.getData().nodeType
          if (!isLineToLine && 'node,connect'.indexOf(outNodeType)>-1){
            result =  true
          }
        }
        if (result && inNode && outNode){
          return {inNode,outNode}
        }else {
          return false
        }
      },
      isLineToLine(edgeId){
        for(let edge of this.graph.getEdges()){
          if (edge.source.cell === edgeId || edge.target.cell === edgeId)
            return true
        }
        return false
      },
      isMultipleBrach(){},
      deleteCombination(){},
      getInLinesOfNode(node) {
        const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
        return edges.filter(edge => edge.target.cell === node.id)
      },
      getOutLinesOfNode(node) {
        const edges = this.graph.getConnectedEdges(node); // 获取画布上原有的节点所有进来的线
        return edges.filter(edge => edge.source.cell === node.id)
      },
    },
  }
</script>