svgEditor

wente

2024-05-22 686e9cb12978d559130f816e5c2d2854a13c2f48

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

@@ -348,11 +348,7 @@
        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) {
            this.graph.fromJSON(this.diagramJson)
          } else {
            this.graph.fromJSON(RBDDefault)
          }
          this.isFirstLoad = false;
          console.log(this.diagramJson.cells.length, 'this.diagramJson.cells.length')

@@ -360,13 +356,16 @@
          // this.graph.centerContent()
          // this.graph.zoomToFit()
        } else {
          await this.clearDiagram()
          this.graph.fromJSON(RBDDefault)
          this.isFirstLoad = false
        }
      },
      async clearDiagram() {
        this.dataForm.id = null
        // this.graph.fromJSON(this.emptyJson)
        this.graph.fromJSON('')
        this.graph.fromJSON(RBDDefault)
        this.graph.positionContent('left')
        this.isFirstLoad = false;
        // this.graph.centerContent()
        // this.graph.zoomToFit()
        // this.graph.freeze()
@@ -586,10 +585,12 @@
        let res = await this.$http.get(`/basicInfo/XhProductModel/getProduct`, {params: params})
        this.imagesList2 = res.data
        console.log(this.imagesList2, 'getProduct(productId)234567890')
        let urlObject = window.URL || window.webkitURL || window;

        const imageNodes2 = this.imagesList2.map((item) =>
          this.graph.createNode({
            shape: 'image',
            imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
            //imageUrl: `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getProductImg?token=${Cookies.get('token')}&id=${item.imgPath}`,
            width: 60,
            height: 60,
            id: item.dataId, // 手动设置节点的 ID
@@ -612,6 +613,10 @@
              voteNum: '',
            },
            attrs: {
              image: {
                'xlink:href': `${window.SITE_CONFIG['apiURL']}/sysPictureBase/getSvgImage?token=${Cookies.get('token')}&id=${item.imgPath}`,
                //'xlink:href': urlObject.createObjectURL(new Blob([item.svgContent])),
              },
              text: {
                text: item.imgName,
                fontSize: 14,
@@ -689,7 +694,22 @@
          if (cells.length === 1) {
            let node = cells[0]
            if (!node.isNode()) {
              this.$message({message: '请选中节点', type: 'warning'})
              this.$confirm('是否删除该连接线点?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              }).then(() => {
                this.$message({
                  type: 'success',
                  message: '删除成功!'
                })
              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '已取消删除'
                })
              })
              // this.$message({message: '请选中节点', type: 'warning'})
              return false; // 取消操作
            }
            let nodeType = node.getData().nodeType
@@ -720,17 +740,17 @@
                let outNode = isSeriesNode.outNode
                console.log(inLine, outLine, 'inLine,outLine')
                console.log(inNode, outNode, 'inNode,outNode')
                if (inLineIsToLine) {
                  inLine[0].target = {cell: outNode.id, port: 'left1'}
                } else {
                  outLine[0].source = {cell: inNode.id, port: 'right1'}
                }
                //提示是否要删除
                this.$confirm('是否删除该节点?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  if (inLineIsToLine) {
                    inLine[0].target = {cell: outNode.id, port: 'left1'}
                  } else {
                    outLine[0].source = {cell: inNode.id, port: 'right1'}
                  }
                  if (deleteType === 1){
                    node.remove()
                  }
@@ -746,15 +766,37 @@
                    type: 'info',
                    message: '已取消删除'
                  })
                  return false
                })
              }
              if (this.isMultipleBrach(node)) {
                //提示是否要删除
                if (deleteType === 1)
                  node.remove()
                else
                  this.deleteCombination(node)
                return
                this.$confirm('是否删除该节点?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(() => {
                  if (inLineIsToLine) {
                    inLine[0].target = {cell: outNode.id, port: 'left1'}
                  } else {
                    outLine[0].source = {cell: inNode.id, port: 'right1'}
                  }
                  if (deleteType === 1)
                    node.remove()
                  else
                    this.deleteCombination(node)
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  })

                }).catch(() => {
                  this.$message({
                    type: 'info',
                    message: '已取消删除'
                  })
                  return false
                })
              }
            }
            //提示不能删除
@@ -1119,12 +1161,14 @@
        let dragNodeType = dragNode.getData().nodeType
        let offHeight = 50
        if (dragNodeType === 'node') {
          offHeight = 50
          offHeight = 60
        } else if (dragNodeType === 'bridgeConnection') {
          offHeight = 230
          offHeight = 175
        } else {
          offHeight = 70
        }
        let centerX = 0,  centerY = 0;

        if (graphNodeType === 'dashedBox') { //虚框
          const edges = this.graph.getConnectedEdges(graphNode); // 获取画布上原有的节点所有进来的线
          let inEdges = edges.filter(edge => edge.target.cell === graphNode.id)
@@ -1140,10 +1184,12 @@
            endNode = this.graph.getCellById(endNodeId)
          }
          if (startNode && endNode) {
            let centerY = graphNode.position().y
            let result = this.addNodeAndConnect(graphNode, dragNode, dragNode.position().x, centerY)
            centerX = graphNode.position().x+graphNode.getBBox().width/2
            centerY = graphNode.position().y+graphNode.getBBox().height/2
            let result = this.addNodeAndConnect(graphNode, dragNode, centerX, centerY)
            if (!result){
              dragNode.remove()
              this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
              return
            }
            inEdges[0].target = {cell: result.newStartNode.id, port: 'left1'}
@@ -1158,22 +1204,24 @@
          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 minX = graphNodeStartNode.position().x + graphNodeStartNode.getBBox().width
          let minX = graphNodeStartNode.position().x + graphNode.getBBox().width+15
          let maxX = graphNode.position().x
          let centerX = minX + (maxX - minX) / 2
          let centerY = graphNodeY - pointXY.minY > pointXY.maxY - graphNodeY ? pointXY.maxY + 30 : pointXY.minY - offHeight - 30
          let centerY = graphNodeY+ graphNode.getBBox().height/2 - pointXY.minY > pointXY.maxY - (graphNodeY+ graphNode.getBBox().height/2) ?
            pointXY.maxY + offHeight/2 + 30 : pointXY.minY - offHeight/2 - 30

          let result = this.addNodeAndConnect(null, dragNode, minX, centerY)
          if (!result){
            dragNode.remove()
            this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
            return
          }
          this.graph.addEdge({
@@ -1190,8 +1238,11 @@
          })
        }
      },
      addNodeAndConnect(targetNode, dragNode, leftX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
        let width =100, height = 80, leftTopX = leftX , leftTopY = centerY
      addNodeAndConnect(targetNode, dragNode, centerX, centerY) { // graphCell是画布上原有的节点。dragNode是当前拖拽的节点
        let width =100,
          height = 80,
          leftTopX = centerX ,
          leftTopY = centerY
        let dragNodeType = dragNode.getData().nodeType
        if (dragNodeType === 'node') {
          width =60
@@ -1200,35 +1251,46 @@
          width =100
          height = 60
        } else if (dragNodeType === 'bridgeConnection') {
          width =450
          height = 160
          // leftTopY = 240/2
          width =550
          height = 175
        } else {
          width =270
          height = 60
        }

        leftTopX = centerX - width/2
        leftTopY = centerY - height/2
        if (!this.canPlace(targetNode,dragNode,{leftTopX, leftTopY, width, height})){
          return false
        }

        if (dragNodeType === 'node' || dragNodeType === 'dashedBox') {
          dragNode.position(leftX, centerY)
          dragNode.position(leftTopX, leftTopY)
          return {newStartNode: dragNode, newEndNode: dragNode}
        } else if (dragNodeType === 'bridgeConnection') {
          return this.createBridgeConnection(leftX, centerY, dragNode)
          return this.createBridgeConnection(leftTopX, leftTopY, dragNode)
        } else {
          return this.createParallelBrach(leftX, centerY, dragNode)
          return this.createParallelBrach(leftTopX, centerY, dragNode)
        }
      },
      // 相交的边
      addNodeAndInsertEdge(graphEdge, dragNode) {
        const Source = graphEdge.getSourceCell()
        const Target = graphEdge.getTargetCell()

        let centerY = Source.position().y + Source.getBBox().height/2
        if (Target.getData().nodeType === 'node'){
          centerY = Target.position().y  + Target.getBBox().height/2
        }

        console.log(Source,'Source 起始点信息')
        console.log(Target,'Target 终止点信息')
        console.log(Source.position().y,'起始点的Y坐标')
        console.log(Target.position().y,'终止点的Y坐标')
        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) {
          let centerY = dragNode.position().y
          let isRight = true;
          let startPort = 'right1'
          let endPort = 'left1'
@@ -1247,6 +1309,7 @@
          let result = this.addNodeAndConnect(null, dragNode, dragNode.position().x, centerY)
          if (!result){
            dragNode.remove()
            this.$message({message: '没有足够的空间放置该节点，请扩大剩余空间', type: 'warning'})
            return
          }
          if (isRight) {
@@ -1257,7 +1320,6 @@
              router: {name: 'manhattan'},
              connector: {name: 'rounded'}
            })

          } else {
            this.graph.addEdge({
              source: {cell: startNode, port: startPort},
@@ -1327,15 +1389,16 @@
                })*/
      },
      createBridgeConnection(x, y, dragNode) {
        const leftTopDashedBox = this.createDashedBox(x + 120, y)
        const rightTopDashedBox = this.createDashedBox(x + 400, y)
        console.log(x,y,'leftX centerY')
        const leftTopDashedBox = this.createDashedBox(x + 40, y)
        const rightTopDashedBox = this.createDashedBox(x + 380, 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 leftConnectNode = this.createConnectNode(x, y + 87)
        const alignCenterDashedBox = this.createDashedBox(x+ 210, y + 87)
        const rightConnectNode = this.createBridgeNode(x + 530, y + 87)

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

        rightConnectNode.setData({startNodeId: leftConnectNode.id})
        leftConnectNode.setData({endNodeId: rightConnectNode.id})
@@ -1445,7 +1508,6 @@
        const dragNodeId = getUUID().toString()
        let connectNode = this.graph.addNode({
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 10,
          height: 10,
          id: connectId,