2023-06-27

king

2023-06-27 656ea3139db54b8dc9a29b8cb239d0f0df9a6c05

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

@@ -1,27 +1,20 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover, Tooltip, message } from 'antd'
import { ToolOutlined, DeleteOutlined, FontColorsOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, DoubleLeftOutlined, DownloadOutlined } from '@ant-design/icons'
import { Popover, Tooltip } from 'antd'
import { ToolOutlined, DeleteOutlined, FontColorsOutlined, VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, DownloadOutlined } from '@ant-design/icons'
import { Graph, Shape } from '@antv/x6'
import { Stencil } from '@antv/x6-plugin-stencil'
import { Transform } from '@antv/x6-plugin-transform'
import { Selection } from '@antv/x6-plugin-selection'
import { Snapline } from '@antv/x6-plugin-snapline'
import { Keyboard } from '@antv/x6-plugin-keyboard'
import { Clipboard } from '@antv/x6-plugin-clipboard'
import { History } from '@antv/x6-plugin-history'
import { Export } from '@antv/x6-plugin-export'

import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import asyncIconComponent from '@/utils/asyncIconComponent'
import { resetStyle, getTables, checkComponent } from '@/utils/utils-custom.js'
import lanes from './lane.json'
import xflows from './xflow.json'
import './index.scss'

const SettingComponent = asyncIconComponent(() => import('@/menu/datasource'))
const ChartCompileForm = asyncIconComponent(() => import('./chartcompile'))
const NodeUpdate = asyncIconComponent(() => import('./nodeupdate'))
const CopyComponent = asyncIconComponent(() => import('@/menu/components/share/copycomponent'))
const NormalHeader = asyncComponent(() => import('@/menu/components/share/normalheader'))

@@ -115,7 +108,7 @@
      },
      'name-rect': {
        width: 200,
        height: 30,
        height: 36,
        fill: '#5F95FF',
        stroke: '#fff',
        strokeWidth: 1,
@@ -128,9 +121,10 @@
        textAnchor: 'middle',
        fontWeight: 'bold',
        fill: '#fff',
        fontSize: 12,
        fontSize: 14,
      },
    },
    zIndex: 0
  },
  true,
)
@@ -144,8 +138,8 @@
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#5F95FF',
        fill: '#EFF4FF'
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
@@ -174,8 +168,8 @@
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#5F95FF',
        fill: '#EFF4FF'
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
@@ -204,8 +198,8 @@
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#5F95FF',
        fill: '#EFF4FF'
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
@@ -234,8 +228,8 @@
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#5F95FF',
        fill: '#EFF4FF'
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
@@ -264,8 +258,8 @@
    points: '100,10 40,198 190,78 10,78 160,198',
    attrs: {
      body: {
        fill: '#EFF4FF',
        stroke: '#5F95FF',
        fill: '#FFFFFF',
        stroke: '#000000',
        strokeWidth: 1,
        fillRule: 'nonzero'
      },
@@ -287,6 +281,26 @@
  true
)

Graph.registerNode(
  'mk-text',
  {
    inherit: 'rect',
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 0,
        fill: 'transparent'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    }
  },
  true
)

class antvX6Chart extends Component {
  static propTpyes = {
    card: PropTypes.object,
@@ -295,15 +309,8 @@
  }

  state = {
    card: null,
    eventListener: null,
    toolunfold: true,
    nodeunfold: true,
    node: null
    card: null
  }

  selectNode = null
  mkGraph = null

  UNSAFE_componentWillMount () {
    const { card } = this.props
@@ -311,7 +318,7 @@
    if (card.isNew) {
      let _plot = {
        width: card.width || 24,
        height: 400,
        height: 500,
        subtype: card.subtype,
        name: card.name,
        grid: {
@@ -322,7 +329,8 @@
            thickness: 1
          }
        },
        gridType: 'dot'
        gridType: 'dot',
        export: 'png'
      }

      let _card = {
@@ -379,8 +387,8 @@

    if (
      card.plot.subtype !== res.plot.subtype ||
      card.plot.gridType !== res.plot.gridType ||
      card.plot.backgroundColor !== res.plot.backgroundColor
      (res.plot.gridType && card.plot.gridType !== res.plot.gridType) ||
      (res.plot.gridType && card.plot.backgroundColor !== res.plot.backgroundColor)
    ) {
      let _element = document.getElementById(card.uuid + 'container')
      if (_element) {
@@ -401,8 +409,6 @@
      this.xflowrender()
    } else if (card.plot.subtype === 'lane') {
      this.lanerender()
    // } else if (card.plot.subtype === 'xflow') {
      // this.xflowrender()
    }
  }

@@ -444,8 +450,8 @@
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: '#A2B1C3',
                strokeWidth: 2,
                stroke: '#000000',
                strokeWidth: 1,
                targetMarker: {
                  name: 'block',
                  width: 12,
@@ -473,190 +479,16 @@
      }
    })

    // #region 使用插件
    graph
      .use(new Transform({
        resizing: true,
        rotating: true
      }))
      .use(new Selection())
      .use(new Snapline())
      .use(new Keyboard())
      .use(new Clipboard())
      .use(new History())
      .use(new Export())

    // #region 初始化 stencil
    const stencil = new Stencil({
      title: '流程图',
      target: graph,
      stencilGraphWidth: 180,
      stencilGraphHeight: 180,
      groups: [
        {
          title: '通用节点',
          name: 'group1'
        },
        {
          title: '自定义',
          name: 'group2',
          graphHeight: 120,
          layoutOptions: {
            rowHeight: 70
          }
        }
      ],
      layoutOptions: {
        columns: 2,
        columnWidth: 80,
        rowHeight: 55
    let cells = []
    xflows.forEach((item) => {
      if (item.shape === 'edge') {
        cells.push(graph.createEdge(item))
      } else {
        cells.push(graph.createNode(item))
      }
    })

    document.getElementById(card.uuid + 'stencil').appendChild(stencil.container)

    // #region 快捷键与事件
    graph.bindKey(['meta+c', 'ctrl+c'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.copy(cells)
      }
      return false
    })
    graph.bindKey(['meta+x', 'ctrl+x'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.cut(cells)
      }
      return false
    })
    graph.bindKey(['meta+v', 'ctrl+v'], () => {
      if (!graph.isClipboardEmpty()) {
        graph.paste({ offset: 32 })
      }
      return false
    })

    // undo redo
    graph.bindKey(['meta+z', 'ctrl+z'], () => {
      if (graph.canUndo()) {
        graph.undo()
      }
      return false
    })
    graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
      if (graph.canRedo()) {
        graph.redo()
      }
      return false
    })

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

    // 控制连接桩显示/隐藏
    const showPorts = (ports, show) => {
      for (let i = 0, len = ports.length; i < len; i += 1) {
        ports[i].style.visibility = show ? 'visible' : 'hidden'
      }
    }
    graph.on('node:mouseenter', () => {
      const container = document.getElementById(card.uuid + 'container')
      const ports = container.querySelectorAll('.x6-port-body')
      showPorts(ports, true)
    })
    graph.on('node:mouseleave', () => {
      const container = document.getElementById(card.uuid + 'container')
      const ports = container.querySelectorAll('.x6-port-body')
      showPorts(ports, false)
    })

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

      graph.clearTransformWidgets()
    })
    graph.on('blank:click', ({ e, x, y }) => {
      this.selectNode = null
      
      this.setState({node: null})
    })
    
    const r1 = graph.createNode({
      shape: 'mk-rect',
      label: '开始',
      attrs: {
        body: {
          rx: 20,
          ry: 26
        }
      }
    })
    const r2 = graph.createNode({
      shape: 'mk-rect',
      label: '过程'
    })
    const r3 = graph.createNode({
      shape: 'mk-rect',
      attrs: {
        body: {
          rx: 6,
          ry: 6
        }
      },
      label: '可选过程'
    })
    const r4 = graph.createNode({
      shape: 'mk-polygon',
      attrs: {
        body: {
          refPoints: '0,10 10,0 20,10 10,20'
        }
      },
      label: '决策'
    })
    const r5 = graph.createNode({
      shape: 'mk-polygon',
      attrs: {
        body: {
          refPoints: '10,0 40,0 30,20 0,20'
        }
      },
      label: '数据'
    })
    const r6 = graph.createNode({
      shape: 'mk-circle',
      label: '连接'
    })
    
    stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
    
    const p1 = graph.createNode({
      shape: 'mk-ellipse',
      label: 'ellipse'
    })
    const p2 = graph.createNode({
      shape: 'mk-star',
      label: ''
    })
    
    stencil.load([p1, p2], 'group2')
    
    this.mkGraph = graph
    graph.resetCells(cells)
    graph.positionContent('center')
  }

  lanerender = () => {
@@ -664,16 +496,13 @@

    const graph = new Graph({
      container: document.getElementById(card.uuid + 'container'),
      grid: card.plot.grid,
      scaling: {
        min: 0.5,
        max: 2
      },
      autoResize: true,
      panning: true,
      background: {
        color: card.plot.backgroundColor || 'transparent'
      },
      background: { color: '#ffffff' },
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
@@ -697,8 +526,8 @@
          return new Shape.Edge({
            attrs: {
              line: {
                stroke: '#A2B1C3',
                strokeWidth: 2,
                stroke: '#000000',
                strokeWidth: 1,
                targetMarker: {
                  name: 'block',
                  width: 12,
@@ -734,9 +563,9 @@
            if (parentNode) {
              return parentNode.getBBox().moveAndExpand({
                x: 0,
                y: 30,
                y: 36,
                width: 0,
                height: -30,
                height: -36,
              })
            }
          }
@@ -745,277 +574,16 @@
      }
    })

    // #region 使用插件
    graph
      .use(new Transform({
        resizing: true,
        rotating: true
      }))
      .use(new Selection())
      .use(new Snapline())
      .use(new Keyboard())
      .use(new Clipboard())
      .use(new History())
      .use(new Export())

    // #region 初始化 stencil
    const stencil = new Stencil({
      title: '流程图',
      target: graph,
      stencilGraphWidth: 180,
      stencilGraphHeight: 180,
      groups: [
        {
          title: '通用节点',
          name: 'group1'
        },
        {
          title: '自定义',
          name: 'group2',
          graphHeight: 120,
          layoutOptions: {
            rowHeight: 70
          }
        }
      ],
      layoutOptions: {
        columns: 2,
        columnWidth: 80,
        rowHeight: 55
      }
    })

    document.getElementById(card.uuid + 'stencil').appendChild(stencil.container)

    // #region 快捷键与事件
    graph.bindKey(['meta+c', 'ctrl+c'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.copy(cells)
      }
      return false
    })
    graph.bindKey(['meta+x', 'ctrl+x'], () => {
      const cells = graph.getSelectedCells()
      if (cells.length) {
        graph.cut(cells)
      }
      return false
    })
    graph.bindKey(['meta+v', 'ctrl+v'], () => {
      if (!graph.isClipboardEmpty()) {
        graph.paste({ offset: 32 })
      }
      return false
    })

    // undo redo
    graph.bindKey(['meta+z', 'ctrl+z'], () => {
      if (graph.canUndo()) {
        graph.undo()
      }
      return false
    })
    graph.bindKey(['meta+shift+z', 'ctrl+shift+z'], () => {
      if (graph.canRedo()) {
        graph.redo()
      }
      return false
    })

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

    // 控制连接桩显示/隐藏
    const showPorts = (ports, show) => {
      for (let i = 0, len = ports.length; i < len; i += 1) {
        ports[i].style.visibility = show ? 'visible' : 'hidden'
      }
    }
    graph.on('node:mouseenter', () => {
      const container = document.getElementById(card.uuid + 'container')
      const ports = container.querySelectorAll('.x6-port-body')
      showPorts(ports, true)
    })
    graph.on('node:mouseleave', () => {
      const container = document.getElementById(card.uuid + 'container')
      const ports = container.querySelectorAll('.x6-port-body')
      showPorts(ports, false)
    })

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

      graph.clearTransformWidgets()
    })
    graph.on('blank:click', ({ e, x, y }) => {
      this.selectNode = null
      
      this.setState({node: null})
    })
    
    const r1 = graph.createNode({
      shape: 'mk-rect',
      label: '开始',
      attrs: {
        body: {
          rx: 20,
          ry: 26
        }
      }
    })
    const r2 = graph.createNode({
      shape: 'mk-rect',
      label: '过程'
    })
    const r3 = graph.createNode({
      shape: 'mk-rect',
      attrs: {
        body: {
          rx: 6,
          ry: 6
        }
      },
      label: '可选过程'
    })
    const r4 = graph.createNode({
      shape: 'mk-polygon',
      attrs: {
        body: {
          refPoints: '0,10 10,0 20,10 10,20'
        }
      },
      label: '决策'
    })
    const r5 = graph.createNode({
      shape: 'mk-polygon',
      attrs: {
        body: {
          refPoints: '10,0 40,0 30,20 0,20'
        }
      },
      label: '数据'
    })
    const r6 = graph.createNode({
      shape: 'mk-circle',
      label: '连接'
    })
    
    stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
    
    const p1 = graph.createNode({
      shape: 'mk-ellipse',
      label: 'ellipse'
    })
    const p2 = graph.createNode({
      shape: 'mk-star',
      label: ''
    })
    
    stencil.load([p1, p2], 'group2')

    let data = [{"id":"1","shape":"lane","width":200,"height":500,"position":{"x":60,"y":60},"label":"<Function>"},{"id":"2","shape":"lane","width":200,"height":500,"position":{"x":260,"y":60},"label":"<Function>"},{"id":"3","shape":"lane","width":200,"height":500,"position":{"x":460,"y":60},"label":"<Function>"},{"id":"4","shape":"lane","width":200,"height":500,"position":{"x":660,"y":60},"label":"<Function>"}]
    let cells = []
    data.forEach((item) => {
      if (item.shape === 'lane-edge') {
    lanes.forEach((item) => {
      if (item.shape === 'edge') {
        cells.push(graph.createEdge(item))
      } else {
        cells.push(graph.createNode(item))
      }
    })
    graph.resetCells(cells)
    graph.zoomToFit({ padding: 10, maxScale: 1 })

    this.mkGraph = graph
  }
  
  setTop = () => {
    if (!this.selectNode) {
      message.warning('请选择节点！')
      return
    }
    this.selectNode.toFront()
  }

  setBottom = () => {
    if (!this.selectNode) {
      message.warning('请选择节点！')
      return
    }
    // let cells = this.mkGraph.getCells()
    this.selectNode.toBack()
  }

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

  setZoomOut = () => {
    this.mkGraph.zoom(-0.1)
  }

  setZoomInt = () => {
    this.mkGraph.zoomTo(1)
  }

  save = () => {
    // let nodes = this.mkGraph.toJSON()
  }

  savePicture = () => {
    const { card } = this.state
    this.mkGraph.exportPNG(card.name, {padding: 20})
  }

  changeProps = (value, key) => {
    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)
      } else if (key === 'fill') {
        this.selectNode.attr('body/fill', value)
      } else if (key === 'stroke') {
        this.selectNode.attr('body/stroke', value)
      } else if (key === 'fontSize') {
        this.selectNode.attr('text/fontSize', value)
      } else if (key === 'fontFill') {
        this.selectNode.attr('text/fill', value)
      }
    }
    graph.positionContent('top')
  }

  updateComponent = (card) => {
@@ -1061,7 +629,7 @@
  }

  render() {
    const { card, toolunfold, nodeunfold, node } = this.state
    const { card } = this.state
    let _style = resetStyle(card.style)

    return (
@@ -1080,45 +648,33 @@
        <NormalHeader config={card} updateComponent={this.updateComponent}/>
        <div className="mk-toolbar">
          <div className="left-tool">
            <Tooltip title="置前">
              <VerticalAlignTopOutlined onClick={this.setTop}/>
            </Tooltip>
            <Tooltip title="置后">
              <VerticalAlignBottomOutlined onClick={this.setBottom}/>
            </Tooltip>
            {card.plot.subtype === 'xflow' ? <Tooltip title="置前">
              <VerticalAlignTopOutlined/>
            </Tooltip> : null}
            {card.plot.subtype === 'xflow' ? <Tooltip title="置后">
              <VerticalAlignBottomOutlined/>
            </Tooltip> : null}
            <Tooltip title="保存">
              <SaveOutlined onClick={this.save}/>
              <SaveOutlined/>
            </Tooltip>
            <Tooltip title="导出图片">
              <DownloadOutlined onClick={this.savePicture}/>
            </Tooltip>
            {card.plot.export === 'png' ? <Tooltip title="导出图片">
              <DownloadOutlined/>
            </Tooltip> : null}
          </div>
          <div className="right-tool">
            <Tooltip title="放大">
              <ZoomInOutlined onClick={this.setZoomIn}/>
              <ZoomInOutlined/>
            </Tooltip>
            <Tooltip title="缩小">
              <ZoomOutOutlined onClick={this.setZoomOut}/>
              <ZoomOutOutlined/>
            </Tooltip>
            <Tooltip title="1:1">
              <OneToOneOutlined onClick={this.setZoomInt}/>
              <OneToOneOutlined/>
            </Tooltip>
          </div>
        </div>
        <div className="canvas" style={{width: '100%', minHeight: card.plot.height, height: card.plot.height}} id={card.uuid + 'canvas'}>
          <div id={card.uuid + 'stencil'} className={'mk-stencil ' + (toolunfold ? '' : 'merge')}>
            <div className="tool-control" onClick={() => this.setState({toolunfold: !toolunfold})}>
              <DoubleLeftOutlined />
            </div>
          </div>
          <div id={card.uuid + 'container'} className="mk-container"></div>
          <div className={'mk-node-edit ' + (nodeunfold ? '' : 'merge')}>
            <div className="tool-control" onClick={() => this.setState({nodeunfold: !nodeunfold})}>
              <DoubleLeftOutlined />
            </div>
            <div className="header">设置</div>
            {!node ? <div className="empty">未选中</div> : <NodeUpdate node={node} onChange={this.changeProps}/>}
          </div>
        </div>
        <div className="component-name">
          <div className="center">