svgEditor

wente

2024-06-13 0f96b0f3f0b21c0ef6e4097dfceeb28f9215e327

svgEditor

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

@@ -100,7 +100,7 @@
              },
              "size": {
                "width": 60,
                "height": 60
                "height": 40
              },
              "attrs": {
                "text": {
@@ -223,7 +223,7 @@
              },
              "size": {
                "width": 60,
                "height": 60
                "height": 40
              },
              "attrs": {
                "text": {
@@ -345,7 +345,7 @@
              },
              "size": {
                "width": 60,
                "height": 60
                "height": 40
              },
              "attrs": {
                "text": {
@@ -830,9 +830,10 @@
              return new Shape.Edge({
                attrs: {
                  line: {
                    //  sourceMarker: 'block', // 实心箭头
                    stroke: '#A2B1C3',
                    strokeWidth: 2,
                    targetMarker: {fill: 'none'}
                    targetMarker: null
                  }
                },
                labels: [{
@@ -895,7 +896,7 @@
          getDropNode: (node) => {
            const {width, height} = node.size()
            if (node.getData().type && node.getData().nodeType === 'dashedBox') {
              return node.clone().size(60, 60)
              return node.clone().size(60, 40)
            }
            if (node.getData().type && node.getData().type === 'imageNodes2') {
              return node.clone({keepId: true})
@@ -1056,6 +1057,10 @@
        stencil.load(imageNodes, 'group1')
        stencil.load(imageNodes2, 'group2')

        this.graph.bindKey(['meta+c', 'ctrl+up'], () => {
          console.log('按了小键盘的UP键')
        })

        this.graph.bindKey(['meta+c', 'ctrl+c'], () => {
          const cells = this.graph.getSelectedCells()
          if (cells.length) {
@@ -1106,7 +1111,7 @@
        })

        this.graph.on('blank:click', ({cell}) => {
          this.reset()
          // this.reset()
          // this.type.value = "grid"
          this.type = 'grid'
          // this.id = cell.id
@@ -1158,16 +1163,16 @@
        })
        //单击边节点
        this.graph.on('edge:click', ({edge}) => {
          this.reset()
          edge.attr('line/stroke', 'orange')
          edge.prop('labels/0', {
            attrs: {
              body: {
                stroke: 'orange',
              },
            },

          })
          // this.reset()
          // edge.attr('line/stroke', 'orange')
          // edge.prop('labels/0', {
          //   attrs: {
          //     body: {
          //       stroke: 'orange',
          //     },
          //   },
          //
          // })
        })
        // 单击node节点
        this.graph.on('node:click', ({node}) => {
@@ -1678,7 +1683,7 @@
          height = 60
        } else if (dragNodeType === 'dashedBox') {
          width = 60
          height = 60
          height = 40
        } else if (dragNodeType === 'bridgeConnection') {
          width = 550
          height = 175
@@ -1835,11 +1840,11 @@
        const rightTopDashedBox = this.createDashedBox(x + 380, y)

        const leftConnectNode = this.createConnectNode(x, y + 87)
        const alignCenterDashedBox = this.createDashedBox(x + 210, y + 87)
        const alignCenterDashedBox = this.createDashedBox(x + 209, y + 87)
        const rightConnectNode = this.createBridgeNode(x + 530, y + 87)

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

        rightConnectNode.setData({startNodeId: leftConnectNode.id})
        leftConnectNode.setData({endNodeId: rightConnectNode.id})
@@ -1859,39 +1864,39 @@
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftTopDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })
        this.graph.addEdge({
          source: {cell: leftConnectNode, port: 'right1'},
          target: {cell: leftBottomDashedBox, port: 'left1'},
          router: {name: 'manhattan'},
          connector: {name: 'rounded'}
          connector: {name: 'rounded'},
        })

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

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

        this.graph.addEdge({
@@ -1915,7 +1920,7 @@
          shape: 'image',
          // imageUrl: require('/public/modelImg/' + item.imgPath + '.png'),
          width: 60,
          height: 60,
          height: 40,
          id: dashId,
          data: {
            isSelfCreated: true,