Merge branch 'develop'

king

2023-07-02 16f80ddfc338bc65a893c1b7eb93d1d9861158b2

 src/tabviews/custom/components/chart/antv-X6/index.jsx

@@ -330,23 +330,49 @@
      }
    }
  },
  // {
  //   inherit: 'rect',
  //   width: 66,
  //   height: 36,
  //   attrs: {
  //     body: {
  //       strokeWidth: 0,
  //       fill: 'transparent'
  //     },
  //     text: {
  //       fontSize: 12,
  //       fill: '#262626'
  //     }
  //   }
  // },
  true
)

const styles = {
  blue: '#1890ff',
  red: '#f5222d',
  orange_red: '#fa541c',
  orange: '#fa8c16',
  orange_yellow: '#faad14',
  yellow: '#fadb14',
  yellow_green: '#a0d911',
  green: '#52c41a',
  cyan: '#13c2c2',
  blue_purple: '#2f54eb',
  purple: '#722ed1',
  magenta: '#eb2f96',
  grass_green: '#aeb303',
  deep_red: '#c32539',
  deep_blue: '#1d3661',
  blue1: '#e6f7ff',
  red1: '#fff1f0',
  orange_red1: '#fff2e8',
  orange1: '#fff7e6',
  orange_yellow1: '#fffbe6',
  yellow1: '#feffe6',
  yellow_green1: '#fcffe6',
  green1: '#f6ffed',
  cyan1: '#e6fffb',
  blue_purple1: '#f0f5ff',
  purple1: '#f9f0ff',
  magenta1: '#fff0f6',
  grass_green1: '#f2efda',
  deep_red1: '#fff0f0',
  deep_blue1: '#eff1f4'
}

let sysColor = '#1890ff'
let lightColor = '#e6f7ff'
if (window.GLOB.style) {
  let type = window.GLOB.style.replace(/bg_black_style_|bg_white_style_/, '')
  sysColor = styles[type] || '#1890ff'
  lightColor = styles[type + '1'] || '#e6f7ff'
}

class antvX6Chart extends Component {
  static propTpyes = {
@@ -578,6 +604,7 @@
        max: 2
      },
      autoResize: true,
      interacting: false,
      panning: true,
      background: {
        color: config.plot.backgroundColor || 'transparent'
@@ -600,36 +627,6 @@
        allowBlank: false,
        snap: {
          radius: 20
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: '#000000',
                strokeWidth: 1,
                targetMarker: {
                  name: 'block',
                  width: 12,
                  height: 8
                }
              }
            },
            zIndex: 0
          })
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet
        }
      },
      highlighting: {
        magnetAdsorbed: {
          name: 'stroke',
          args: {
            attrs: {
              fill: '#5F95FF',
              stroke: '#5F95FF'
            }
          }
        }
      }
    })
@@ -646,6 +643,16 @@
      graph.resetCells(cells)
      graph.positionContent('center')
    }

    if (config.plot.click) {
      graph.on('cell:click', ({ node }) => {
        this.checkNode(graph, node)
      })
  
      graph.on('blank:click', () => {
        this.checkNode(graph)
      })
    }
  }

  laneSrender = () => {
@@ -657,6 +664,7 @@
        min: 0.5,
        max: 2
      },
      interacting: false,
      autoResize: true,
      panning: true,
      background: { color: '#ffffff' },
@@ -678,55 +686,6 @@
        allowBlank: false,
        snap: {
          radius: 20
        },
        createEdge() {
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: '#000000',
                strokeWidth: 1,
                targetMarker: {
                  name: 'block',
                  width: 12,
                  height: 8
                }
              }
            },
            zIndex: 2
          })
        },
        validateConnection({ targetMagnet }) {
          return !!targetMagnet
        }
      },
      highlighting: {
        magnetAdsorbed: {
          name: 'stroke',
          args: {
            attrs: {
              fill: '#5F95FF',
              stroke: '#5F95FF'
            }
          }
        }
      },
      translating: {
        restrict(cellView) {
          const cell = cellView.cell
          const parentId = cell.prop('parent')

          if (parentId) {
            const parentNode = graph.getCellById(parentId)
            if (parentNode) {
              return parentNode.getBBox().moveAndExpand({
                x: 0,
                y: 36,
                width: 0,
                height: -36,
              })
            }
          }
          return cell.getBBox()
        }
      }
    })
@@ -742,6 +701,16 @@
      })
      graph.resetCells(cells)
      graph.positionContent('top')
    }

    if (config.plot.click) {
      graph.on('cell:click', ({ node }) => {
        this.checkNode(graph, node)
      })
  
      graph.on('blank:click', () => {
        this.checkNode(graph)
      })
    }
  }

@@ -912,19 +881,19 @@
      showPorts(ports, false)
    })

    graph.on('node:click', ({ e, x, y, node, view }) => {
    graph.on('node:click', ({ node }) => {
      this.selectNode = node
      
      this.setState({node: node.store.data})
    })
    graph.on('edge:click', ({ e, x, y, edge, view }) => {
    graph.on('edge:click', ({ edge }) => {
      this.selectNode = edge
      
      this.setState({node: edge.store.data})

      graph.clearTransformWidgets()
    })
    graph.on('blank:click', ({ e, x, y }) => {
    graph.on('blank:click', () => {
      this.selectNode = null
      
      this.setState({node: null})
@@ -989,8 +958,7 @@
    })

    const p3 = graph.createNode({
      shape: 'mk-text',
      label: '文本'
      shape: 'mk-text'
    })
    
    stencil.load([p1, p2, p3], 'group2')
@@ -1095,8 +1063,15 @@
    })

    graph
      .use(new Transform({
        resizing: true,
        rotating: true
      }))
      .use(new Selection())
      .use(new Snapline())
      .use(new Snapline({
        enabled: true,
        filter: (Graph) => Graph.prop('shape') !== 'lane'
      }))
      .use(new Keyboard())
      .use(new Clipboard())
      .use(new History())
@@ -1141,14 +1116,18 @@
    graph.bindKey(['meta+c', 'ctrl+c'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        if (cells[0].prop('shape') !== 'lane' && cells[0].prop('shape') !== 'edge') {
        graph.copy(cells)
        }
      }
      return false
    })
    graph.bindKey(['meta+x', 'ctrl+x'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        if (cells[0].prop('shape') !== 'lane' && cells[0].prop('shape') !== 'edge') {
        graph.cut(cells)
        }
      }
      return false
    })
@@ -1175,9 +1154,19 @@
    graph.bindKey(['backspace', 'delete'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.removeCells(cells)
        this.selectNode = null
        this.setState({node: null})
        
        if (cells[0].prop('shape') === 'lane') {
          graph.startBatch('delete-lane')

          graph.removeCells(cells)
          this.deleteLane(cells[0], graph)

          graph.stopBatch('delete-lane')
        } else {
          graph.removeCells(cells)
        }
      }
    })

@@ -1199,8 +1188,10 @@
      showPorts(ports, false)
    })

    graph.on('node:added', ({ cell, index, options }) => {
    graph.on('node:added', ({ cell }) => {
      if (cell.prop('shape') === 'lane') {
        if (cell.prop('zIndex') === 0) return

        graph.startBatch('add-lane')

        this.addLane(cell, graph)
@@ -1212,22 +1203,26 @@
        if (num <= 1) {
          message.warning('请添加泳道！')
          graph.removeCells([cell])
        } else {
        } else if (!cell.prop('parent')) {
          this.addNode(cell, graph)
        }
      }
    })
    graph.on('node:click', ({ e, x, y, node, view }) => {
    graph.on('node:click', ({ node }) => {
      this.selectNode = node
      this.setState({node: node.store.data})

      if (node.prop('shape') === 'lane') {
        graph.clearTransformWidgets()
      }
    })
    graph.on('edge:click', ({ e, x, y, edge, view }) => {
    graph.on('edge:click', ({ edge }) => {
      this.selectNode = edge
      this.setState({node: edge.store.data})

      graph.clearTransformWidgets()
    })
    graph.on('blank:click', ({ e, x, y }) => {
    graph.on('blank:click', () => {
      this.selectNode = null
      
      this.setState({node: null})
@@ -1292,8 +1287,7 @@
    })

    const p3 = graph.createNode({
      shape: 'mk-text',
      label: '文本'
      shape: 'mk-text'
    })
    
    stencil.load([p1, p2, p3], 'group2')
@@ -1372,6 +1366,25 @@
    // }, {padding: 20})
  }

  deleteLane = (cell, graph) => {
    let id = cell.id

    let nodes = graph.getNodes()
    let cells = []

    nodes.forEach(item => {
      if (item.prop('shape') === 'lane') return

      if (item.prop('parent') === id) {
        cells.push(item)
      }
    })

    graph.removeCells(cells)

    this.resetlane(cell.id, cell.prop('position/x'), -cell.prop('size/width'))
  }

  addLane = (cell, graph) => {
    const { config } = this.state

@@ -1406,6 +1419,7 @@
    }

    let height = 400

    if (typeof(config.plot.height) === 'number' || /px/.test(config.plot.height)) {
      height = parseInt(config.plot.height)
    }
@@ -1498,12 +1512,29 @@
    const { node } = this.state

    if (node.shape === 'edge') {
      let labels = this.selectNode.prop('labels')
      if (!labels || labels.length === 0) {
        labels = [{
          attrs: {label: { text: '' }}
        }]
      }

      if (key === 'title') {
        this.selectNode.setLabels(value)
        labels = JSON.parse(JSON.stringify(labels))
        labels[0].attrs.label.text = value
        this.selectNode.setLabels(labels)
      } else if (key === 'stroke') {
        this.selectNode.attr('line/stroke', value)
      } else if (key === 'strokeWidth') {
        this.selectNode.attr('line/strokeWidth', value)
      } else if (key === 'fontSize') {
        labels = JSON.parse(JSON.stringify(labels))
        labels[0].attrs.label.fontSize = value
        this.selectNode.setLabels(labels)
      } else if (key === 'fontFill') {
        labels = JSON.parse(JSON.stringify(labels))
        labels[0].attrs.label.fill = value
        this.selectNode.setLabels(labels)
      } else if (key === 'lineType') {
        if (value === 'dash') {
          this.selectNode.attr('line/strokeDasharray', 5)
@@ -1564,6 +1595,83 @@
    }
  }

  checkNode = (graph, node) => {
    const { plot, config } = this.state

    let nodes = graph.getNodes()

    nodes.forEach(item => {
      if (item.prop('shape') === 'lane') return

      if (item.prop('oristyle')) {
        let style = item.prop('oristyle')

        item.prop('attrs/body/fill', style.fill)
        item.prop('attrs/body/stroke', style.stroke)
        item.prop('attrs/text/fill', style.text)
      }
    })

    if (!node || ['lane', 'mk-text', 'edge'].includes(node.prop('shape'))) {
      MKEmitter.emit('resetSelectLine', config.uuid, '', '')
      return
    }

    if (!node.prop('oristyle')) {
      node.prop('oristyle', {
        fill: node.prop('attrs/body/fill'),
        stroke: node.prop('attrs/body/stroke'),
        text: node.prop('attrs/text/fill')
      })
    }

    node.prop('attrs/body/fill', lightColor)
    node.prop('attrs/body/stroke', sysColor)
    node.prop('attrs/text/fill', sysColor)

    let sign = node.prop('mksign') || ''

    if (plot.click === 'menus') {
      let menu = null
      
      if (plot.menus && plot.menus.length > 0) {
        plot.menus.forEach(m => {
          if (sign !== m.sign) return
          menu = m
        })
      }
      if (!menu || !menu.MenuID) return

      let newtab = {
        MenuID: menu.MenuID,
        MenuName: menu.MenuName,
        MenuNo: menu.MenuNo || '',
        type: menu.tabType,
        param: {$BID: sign}
      }

      MKEmitter.emit('modifyTabs', newtab, true)
    } else if (plot.click === 'menu') {
      let menuId = plot.menu.slice(-1)[0]
      let newtab = window.GLOB.mkThdMenus.filter(m => m.MenuID === menuId)[0]

      if (!newtab && plot.MenuID) {
        newtab = {
          MenuID: plot.MenuID,
          MenuName: plot.MenuName,
          MenuNo: plot.MenuNo,
          type: plot.tabType
        }
      } else if (!newtab) {
        return
      }

      MKEmitter.emit('modifyTabs', {...newtab, param: {$BID: sign}}, true)
    } else {
      MKEmitter.emit('resetSelectLine', config.uuid, sign, {})
    }
  }

  resetlane = (id, x, offset) => {
    let nodes = this.mkGraph.getNodes()

@@ -1597,7 +1705,7 @@
            </div> : null
          }
          <NormalHeader config={config} />
          <div className="canvas" style={{width: '100%', minHeight: config.plot.height, height: config.plot.height}} id={config.uuid + 'canvas'}>
          <div className={'canvas only-show' + (config.plot.click ? ' switchable' : '')} style={{width: '100%', minHeight: config.plot.height, height: config.plot.height}} id={config.uuid + 'canvas'}>
            <div id={config.uuid + 'container'} className="mk-container"></div>
          </div>
        </div>