Merge branch 'master' into positec

king

2023-06-14 7cfd25aebe5869244e40dbbcd6384f115f35e66e

 src/menu/components/chart/antv-X6/index.jsx

@@ -336,21 +336,24 @@
    // #region 初始化画布
    const graph = new Graph({
      container: document.getElementById(card.uuid + 'container'),
      // grid: true,
      grid: {
        visible: true,
        type: 'doubleMesh',
        args: [
          {
            color: '#eee', // 主网格线颜色
            thickness: 1   // 主网格线宽度
          },
          {
            color: '#ddd', // 次网格线颜色
            thickness: 1,  // 次网格线宽度
            factor: 4      // 主次网格线间隔
          }
        ]
      // grid: {
      //   visible: true,
      //   type: 'doubleMesh',
      //   args: [
      //     {
      //       color: '#eee', // 主网格线颜色
      //       thickness: 1   // 主网格线宽度
      //     },
      //     {
      //       color: '#ddd', // 次网格线颜色
      //       thickness: 1,  // 次网格线宽度
      //       factor: 4      // 主次网格线间隔
      //     }
      //   ]
      // },
      scaling: {
        min: 0.5,
        max: 2
      },
      autoResize: true,
      panning: true,
@@ -360,9 +363,7 @@
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: 'ctrl',
        minScale: 0.5,
        maxScale: 2
        modifiers: 'ctrl'
      },
      connecting: {
        router: 'manhattan',
@@ -469,9 +470,7 @@
    })
    graph.bindKey(['meta+v', 'ctrl+v'], () => {
      if (!graph.isClipboardEmpty()) {
        const cells = graph.paste({ offset: 32 })
        graph.cleanSelection()
        graph.select(cells)
        graph.paste({ offset: 32 })
      }
      return false
    })
@@ -490,35 +489,15 @@
      return false
    })

    // select all
    graph.bindKey(['meta+a', 'ctrl+a'], () => {
      const nodes = graph.getNodes()
      if (nodes) {
        graph.select(nodes)
      }
    })

    // delete
    graph.bindKey('backspace', () => {
    // 删除元素
    graph.bindKey(['backspace', 'delete'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.removeCells(cells)
        this.selectNode = null
        this.setState({node: null})
      }
    })

    // zoom
    // graph.bindKey(['ctrl+1', 'meta+1'], () => {
    //   const zoom = graph.zoom()
    //   if (zoom < 1.5) {
    //     graph.zoom(0.1)
    //   }
    // })
    // graph.bindKey(['ctrl+2', 'meta+2'], () => {
    //   const zoom = graph.zoom()
    //   if (zoom > 0.5) {
    //     graph.zoom(-0.1)
    //   }
    // })

    // 控制连接桩显示/隐藏
    const showPorts = (ports, show) => {
@@ -537,23 +516,17 @@
      showPorts(ports, false)
    })

    // graph.on('cell:click', ({ e, x, y, cell, view }) => {
    //   cell.attr('body/stroke', "red")
    // })
    graph.on('node:click', ({ e, x, y, node, view }) => {
      this.selectNode = node
      
      this.setState({node: this.selectNode.store.data})
      this.setState({node: node.store.data})
    })
    graph.on('edge:click', ({ e, x, y, edge, view }) => {
      this.selectNode = edge
      
      this.setState({node: this.selectNode.store.data})
      
      let trans = document.querySelectorAll('.x6-widget-transform')
      if (trans && trans[0]) {
        trans[0].style.display = 'none'
      }
      this.setState({node: edge.store.data})

      graph.clearTransformWidgets()
    })
    graph.on('blank:click', ({ e, x, y }) => {
      this.selectNode = null
@@ -641,20 +614,13 @@
    this.selectNode.toBack()
  }

  // zoom() 可获取或者设置缩放比例
  setZoomIn = () => {
    const zoom = this.mkGraph.zoom()

    if (zoom < 2) {
      this.mkGraph.zoom(0.1)
    }
    this.mkGraph.zoom(0.1)
  }

  setZoomOut = () => {
    const zoom = this.mkGraph.zoom()

    if (zoom > 0.5) {
      this.mkGraph.zoom(-0.1)
    }
    this.mkGraph.zoom(-0.1)
  }

  setZoomInt = () => {
@@ -669,7 +635,23 @@
    const { node } = this.state

    if (node.shape === 'edge') {

      if (key === 'title') {
        this.selectNode.setLabels(value)
      } else if (key === 'stroke') {
        this.selectNode.attr('line/stroke', value)
      } else if (key === 'strokeWidth') {
        this.selectNode.attr('line/strokeWidth', value)
      } else if (key === 'lineType') {
        if (value === 'dash') {
          this.selectNode.attr('line/strokeDasharray', 5)
        } else {
          this.selectNode.attr('line/strokeDasharray', 0)
        }
      } else if (key === 'fontSize') {
        this.selectNode.attr('text/fontSize', value)
      } else if (key === 'fontFill') {
        this.selectNode.attr('text/fill', value)
      }
    } else {
      if (key === 'title') {
        this.selectNode.attr('text/text', value)