2023-06-27

king

2023-06-27 656ea3139db54b8dc9a29b8cb239d0f0df9a6c05

2023-06-27

 src/menu/components/chart/antv-X6/chartcompile/formconfig.jsx

@@ -211,10 +211,22 @@
      }, {
        value: 'lane',
        label: '泳道图'
      }, {
        value: 'kapmap',
        label: '组织结构图'
      }]
      }],
      controlFields: [
        {field: 'gridType', values: ['xflow']},
        {field: 'backgroundColor', values: ['xflow']}
      ],
    },
    {
      type: 'radio',
      field: 'export',
      label: '下载',
      initval: card.export || 'png',
      required: false,
      options: [
        {value: 'none', label: '禁用'},
        {value: 'png', label: 'PNG图'},
      ],
    },
    {
      type: 'radio',

 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">

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

@@ -36,164 +36,17 @@
  .x6-cell.x6-edge.x6-edge-selected path:nth-child(2) {
    stroke: #1890ff;
  }
  .x6-cell[data-shape="lane"] {
    cursor: default;
  }

  .canvas {
    margin: 0px;
    letter-spacing: 0px;
    display: flex;

    .mk-stencil {
      width: 180px;
      min-width: 180px;
      height: 100%;
      position: relative;
      z-index: 2;
      border-right: 1px solid #dfe3e8;
      transition: all 0.2s;

      .x6-widget-stencil-title {
        display: none;
      }
      .x6-widget-stencil-content {
        overflow-y: auto;
      }
      .x6-widget-stencil-content::-webkit-scrollbar {
        width: 7px;
      }
      .x6-widget-stencil-content::-webkit-scrollbar-thumb {
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.13);
        background: rgba(0, 0, 0, 0.13);
      }
      .x6-widget-stencil-content::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, 0.07);
        background: rgba(0, 0, 0, 0);
      }
      .tool-control {
        position: absolute;
        right: -13px;
        top: 5px;
        z-index: 3;
        background: #ffffff;
        width: 25px;
        height: 25px;
        border: 1px solid #d8d8d8;
        border-radius: 30px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
      }
    }
    .mk-stencil.merge {
      width: 0px;
      min-width: 0px;

      .tool-control {
        right: -25px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        .anticon-double-left {
          transform: rotate(180deg);
        }
      }
    }

    .mk-node-edit {
      width: 180px;
      min-width: 180px;
      height: 100%;
      position: relative;
      z-index: 2;
      border-left: 1px solid #dfe3e8;
      background: #ffffff;
      transition: all 0.2s;

      .header {
        width: 100%;
        height: 32px;
        text-align: center;
        line-height: 32px;
        background-color: #f5f5f5!important;
        overflow-x: hidden;
        white-space: nowrap;
      }
      .empty {
        width: 100%;
        text-align: center;
        padding-top: 20px;
        overflow-x: hidden;
        white-space: nowrap;
      }

      .tool-control {
        position: absolute;
        left: -13px;
        top: 5px;
        z-index: 3;
        background: #ffffff;
        width: 25px;
        height: 25px;
        border: 1px solid #d8d8d8;
        border-radius: 30px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
        .anticon-double-left {
          transform: rotate(180deg);
        }
      }
    }
    .mk-node-edit.merge {
      width: 0px;
      min-width: 0px;

      .tool-control {
        left: -25px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        .anticon-double-left {
          transform: rotate(0deg);
        }
      }
    }

    .mk-container {
      width: calc(100% - 180px);
      // width: calc(100% - 180px);
      height: 100%;
    }
    .x6-widget-stencil  {
      background-color: #fff;
    }
    .x6-widget-stencil-title {
      background-color: #fff;
    }
    .x6-widget-stencil-group-title {
      background-color: #f5f5f5!important;
    }
    .x6-widget-transform {
      margin: -1px 0 0 -1px;
      padding: 0px;
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div {
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div:hover {
      background-color: #3dafe4;
    }
    .x6-widget-transform-active-handle {
      background-color: #3dafe4;
    }
    .x6-widget-transform-resize {
      border-radius: 0;
    }
    .x6-widget-selection-inner {
      border: 1px solid #239edd;
    }
    .x6-widget-selection-box {
      opacity: 0;
    }
  }


 src/menu/components/chart/antv-X6/lane.json

New file
@@ -0,0 +1,1162 @@
[{
  "position": {
    "x": 0,
    "y": 0
  },
  "size": {
    "width": 200,
    "height": 500
  },
  "attrs": {
    "text": {
      "text": "阶段1"
    }
  },
  "visible": true,
  "shape": "lane",
  "id": "086eb967-7a70-4581-bb82-1dd87f6473e3",
  "zIndex": 0
}, {
  "position": {
    "x": 200,
    "y": 0
  },
  "size": {
    "width": 200,
    "height": 500
  },
  "attrs": {
    "text": {
      "text": "阶段2"
    }
  },
  "visible": true,
  "shape": "lane",
  "id": "eab0b7c3-3eb4-45da-8b43-cc215047edd4",
  "zIndex": 0
}, {
  "position": {
    "x": 400,
    "y": 0
  },
  "size": {
    "width": 200,
    "height": 500
  },
  "attrs": {
    "text": {
      "text": "阶段3"
    }
  },
  "visible": true,
  "shape": "lane",
  "id": "8666799f-c76c-4695-8804-0d3579caadc4",
  "zIndex": 0
}, {
  "position": {
    "x": 600,
    "y": 0
  },
  "size": {
    "width": 200,
    "height": 500
  },
  "attrs": {
    "text": {
      "text": "阶段4"
    }
  },
  "visible": true,
  "shape": "lane",
  "id": "68e49c35-cf6f-46f0-bcde-754c2a2b0ffe",
  "zIndex": 0
}, {
  "position": {
    "x": 67,
    "y": 70
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "Start"
    },
    "body": {
      "rx": 20,
      "ry": 26
    }
  },
  "visible": true,
  "shape": "mk-rect",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "7af1dd51-e0c8-45e2-8f72-96777215e0da"
    }, {
      "group": "right",
      "id": "d0576432-07e4-4f9e-bb0a-81fc7eabdbb3"
    }, {
      "group": "bottom",
      "id": "6faa8816-930d-4356-9fbe-c18bbdfc99ab"
    }, {
      "group": "left",
      "id": "161b1890-3c4a-4758-b444-7a249763ee3a"
    }]
  },
  "id": "c6f49af2-3f6f-4b60-88e3-ea0f45223f34",
  "zIndex": 1,
  "parent": "086eb967-7a70-4581-bb82-1dd87f6473e3"
}, {
  "position": {
    "x": 267,
    "y": 70
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "Process"
    }
  },
  "visible": true,
  "shape": "mk-rect",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
    }, {
      "group": "right",
      "id": "5c37a597-97e2-4f2e-a676-017f66060bbd"
    }, {
      "group": "bottom",
      "id": "5573dafd-2958-410c-a4a0-e38bc6a24065"
    }, {
      "group": "left",
      "id": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
    }]
  },
  "id": "26c76caa-ca35-4f72-abd3-9bdf348081b0",
  "zIndex": 2,
  "parent": "eab0b7c3-3eb4-45da-8b43-cc215047edd4"
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "78e0c6e9-a882-468e-91e1-f01399015440",
  "zIndex": 2,
  "source": {
    "cell": "c6f49af2-3f6f-4b60-88e3-ea0f45223f34",
    "port": "d0576432-07e4-4f9e-bb0a-81fc7eabdbb3"
  },
  "target": {
    "cell": "26c76caa-ca35-4f72-abd3-9bdf348081b0",
    "port": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "6418ad5a-f6af-486f-9068-0642c5c2fb1f",
  "zIndex": 2,
  "source": {
    "cell": "26c76caa-ca35-4f72-abd3-9bdf348081b0",
    "port": "5c37a597-97e2-4f2e-a676-017f66060bbd"
  },
  "target": {
    "cell": "864acc4a-daa5-4fae-9b2a-c90c1eb7752e",
    "port": "56c9c736-744a-48f3-84bb-706a0f15712f"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "458e8e95-f5e7-46a0-add3-e42c7b832178",
  "zIndex": 2,
  "source": {
    "cell": "864acc4a-daa5-4fae-9b2a-c90c1eb7752e",
    "port": "8e9111c6-83d2-44d5-b6be-2c5504d8ff72"
  },
  "target": {
    "cell": "aae00f04-39b6-403d-98a2-057ea251376b",
    "port": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
  },
  "labels": ["Yes"]
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "3f9348e4-d2bd-4300-b873-8915fe7cc152",
  "zIndex": 2,
  "source": {
    "cell": "864acc4a-daa5-4fae-9b2a-c90c1eb7752e",
    "port": "23e59070-cc3f-4005-80b8-0d8eec0eba8f"
  },
  "target": {
    "cell": "246493f4-865f-407e-9407-4df6f5dae340",
    "port": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
  },
  "labels": ["No"]
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "206575cf-9c23-4c95-8f98-e448f95b6bb3",
  "zIndex": 2,
  "source": {
    "cell": "246493f4-865f-407e-9407-4df6f5dae340",
    "port": "5573dafd-2958-410c-a4a0-e38bc6a24065"
  },
  "target": {
    "cell": "54347093-ddd3-46c4-b2d5-b65352c10ac3",
    "port": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "e88f16a4-393c-4572-9bf4-0775dff8b021",
  "zIndex": 2,
  "source": {
    "cell": "54347093-ddd3-46c4-b2d5-b65352c10ac3",
    "port": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
  },
  "target": {
    "cell": "d684e64f-6fac-4879-bd74-2749c9f2436f",
    "port": "23e59070-cc3f-4005-80b8-0d8eec0eba8f"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "d5cc4a65-9209-422f-b971-7b0790938018",
  "zIndex": 2,
  "source": {
    "cell": "d684e64f-6fac-4879-bd74-2749c9f2436f",
    "port": "8e9111c6-83d2-44d5-b6be-2c5504d8ff72"
  },
  "target": {
    "cell": "37ef7b6f-659d-4e10-812d-df7dc7c4d66e",
    "port": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
  },
  "labels": ["Yes"]
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "18aa70cc-a580-48b2-9b14-a2313ee3e69c",
  "zIndex": 2,
  "source": {
    "cell": "37ef7b6f-659d-4e10-812d-df7dc7c4d66e",
    "port": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
  },
  "target": {
    "cell": "1aa90d24-7fca-4298-a0e7-17b4bc88e33b",
    "port": "d0576432-07e4-4f9e-bb0a-81fc7eabdbb3"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "30eff504-21f8-46ca-8809-28ce4aaadf03",
  "zIndex": 2,
  "source": {
    "cell": "d684e64f-6fac-4879-bd74-2749c9f2436f",
    "port": "56c9c736-744a-48f3-84bb-706a0f15712f"
  },
  "target": {
    "cell": "1aa90d24-7fca-4298-a0e7-17b4bc88e33b",
    "port": "7af1dd51-e0c8-45e2-8f72-96777215e0da"
  },
  "labels": ["No"]
}, {
  "position": {
    "x": 467,
    "y": 70
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "Judge"
    },
    "body": {
      "refPoints": "0,10 10,0 20,10 10,20"
    }
  },
  "visible": true,
  "shape": "mk-polygon",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "52a617c4-1c62-4bd6-b827-6215feac4495"
    }, {
      "group": "right",
      "id": "23e59070-cc3f-4005-80b8-0d8eec0eba8f"
    }, {
      "group": "bottom",
      "id": "8e9111c6-83d2-44d5-b6be-2c5504d8ff72"
    }, {
      "group": "left",
      "id": "56c9c736-744a-48f3-84bb-706a0f15712f"
    }]
  },
  "id": "864acc4a-daa5-4fae-9b2a-c90c1eb7752e",
  "zIndex": 3,
  "parent": "8666799f-c76c-4695-8804-0d3579caadc4"
}, {
  "position": {
    "x": 467,
    "y": 170
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "Process"
    }
  },
  "visible": true,
  "shape": "mk-rect",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
    }, {
      "group": "right",
      "id": "5c37a597-97e2-4f2e-a676-017f66060bbd"
    }, {
      "group": "bottom",
      "id": "5573dafd-2958-410c-a4a0-e38bc6a24065"
    }, {
      "group": "left",
      "id": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
    }]
  },
  "id": "aae00f04-39b6-403d-98a2-057ea251376b",
  "zIndex": 4,
  "parent": "8666799f-c76c-4695-8804-0d3579caadc4"
}, {
  "position": {
    "x": 670,
    "y": 170
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "Process"
    }
  },
  "visible": true,
  "shape": "mk-rect",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
    }, {
      "group": "right",
      "id": "5c37a597-97e2-4f2e-a676-017f66060bbd"
    }, {
      "group": "bottom",
      "id": "5573dafd-2958-410c-a4a0-e38bc6a24065"
    }, {
      "group": "left",
      "id": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
    }]
  },
  "id": "246493f4-865f-407e-9407-4df6f5dae340",
  "zIndex": 5,
  "parent": "68e49c35-cf6f-46f0-bcde-754c2a2b0ffe"
}, {
  "position": {
    "x": 670,
    "y": 260
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "Process"
    }
  },
  "visible": true,
  "shape": "mk-rect",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
    }, {
      "group": "right",
      "id": "5c37a597-97e2-4f2e-a676-017f66060bbd"
    }, {
      "group": "bottom",
      "id": "5573dafd-2958-410c-a4a0-e38bc6a24065"
    }, {
      "group": "left",
      "id": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
    }]
  },
  "id": "54347093-ddd3-46c4-b2d5-b65352c10ac3",
  "zIndex": 6,
  "parent": "68e49c35-cf6f-46f0-bcde-754c2a2b0ffe"
}, {
  "position": {
    "x": 467,
    "y": 260
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "Judge"
    },
    "body": {
      "refPoints": "0,10 10,0 20,10 10,20"
    }
  },
  "visible": true,
  "shape": "mk-polygon",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "52a617c4-1c62-4bd6-b827-6215feac4495"
    }, {
      "group": "right",
      "id": "23e59070-cc3f-4005-80b8-0d8eec0eba8f"
    }, {
      "group": "bottom",
      "id": "8e9111c6-83d2-44d5-b6be-2c5504d8ff72"
    }, {
      "group": "left",
      "id": "56c9c736-744a-48f3-84bb-706a0f15712f"
    }]
  },
  "id": "d684e64f-6fac-4879-bd74-2749c9f2436f",
  "zIndex": 7,
  "parent": "8666799f-c76c-4695-8804-0d3579caadc4"
}, {
  "position": {
    "x": 467,
    "y": 370
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "Process"
    }
  },
  "visible": true,
  "shape": "mk-rect",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "c825ad9f-4b0a-4c6c-aee0-1c861955a794"
    }, {
      "group": "right",
      "id": "5c37a597-97e2-4f2e-a676-017f66060bbd"
    }, {
      "group": "bottom",
      "id": "5573dafd-2958-410c-a4a0-e38bc6a24065"
    }, {
      "group": "left",
      "id": "7b15a915-f31a-4338-a68a-1fe5cf1f78da"
    }]
  },
  "id": "37ef7b6f-659d-4e10-812d-df7dc7c4d66e",
  "zIndex": 8,
  "parent": "8666799f-c76c-4695-8804-0d3579caadc4"
}, {
  "position": {
    "x": 270,
    "y": 370
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "End"
    },
    "body": {
      "rx": 20,
      "ry": 26
    }
  },
  "visible": true,
  "shape": "mk-rect",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "7af1dd51-e0c8-45e2-8f72-96777215e0da"
    }, {
      "group": "right",
      "id": "d0576432-07e4-4f9e-bb0a-81fc7eabdbb3"
    }, {
      "group": "bottom",
      "id": "6faa8816-930d-4356-9fbe-c18bbdfc99ab"
    }, {
      "group": "left",
      "id": "161b1890-3c4a-4758-b444-7a249763ee3a"
    }]
  },
  "id": "1aa90d24-7fca-4298-a0e7-17b4bc88e33b",
  "zIndex": 9,
  "parent": "eab0b7c3-3eb4-45da-8b43-cc215047edd4"
}]

 src/menu/components/chart/antv-X6/xflow.json

New file
@@ -0,0 +1,986 @@
[{
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "83fd4cbd-727e-4e99-b35a-854ea08a5a3e",
  "zIndex": 0,
  "source": {
    "cell": "a464f73a-c12d-4612-ae76-55ae754618e2",
    "port": "18cb49ca-e40a-4cb5-8a05-18c5ed7644fe"
  },
  "target": {
    "cell": "310c8213-f07a-4d30-9d35-36f03a7ceb8e",
    "port": "c6e8912a-e3a3-4765-9aad-0767b55eb976"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "31c3bf79-0ea5-46d1-acd0-028de2161075",
  "zIndex": 0,
  "source": {
    "cell": "310c8213-f07a-4d30-9d35-36f03a7ceb8e",
    "port": "95ae6a99-3024-4667-8c77-8b3e0404b07a"
  },
  "target": {
    "cell": "ef3d1b04-c830-4146-89a4-23e330fce83d",
    "port": "6c62d9ff-0d11-4d44-b234-76033f91b67d"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "79a4da44-2d8e-47fa-8449-fe3623805ffc",
  "zIndex": 0,
  "source": {
    "cell": "ef3d1b04-c830-4146-89a4-23e330fce83d",
    "port": "7024e8d6-df2f-4273-aadb-67ed01507bae"
  },
  "target": {
    "cell": "dba4e54b-96e7-4bb8-9d2f-d76d47ce662e",
    "port": "e1ad288c-6567-413f-b2c3-132d43a566c5"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "ffb2b76e-2d42-494a-a646-eb50fd410168",
  "zIndex": 0,
  "source": {
    "cell": "ef3d1b04-c830-4146-89a4-23e330fce83d",
    "port": "6a767960-f16e-4b71-93f8-82400370fe2c"
  },
  "target": {
    "cell": "85e38883-641d-48ed-9701-15148be3cd7f",
    "port": "e1ad288c-6567-413f-b2c3-132d43a566c5"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "ea73c7bb-645a-4198-a020-21b5df708e52",
  "zIndex": 0,
  "source": {
    "cell": "ef3d1b04-c830-4146-89a4-23e330fce83d",
    "port": "acd6bf40-8a98-481d-9280-a7df27da1743"
  },
  "target": {
    "cell": "aef01570-a760-4b9b-ae64-fae758f3b1ca",
    "port": "c493019f-b8a3-4ac2-b250-b92fcb5553ae"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "0e9ddb8a-8587-406c-b9c3-4876ea47ee36",
  "zIndex": 0,
  "source": {
    "cell": "dba4e54b-96e7-4bb8-9d2f-d76d47ce662e",
    "port": "037a3476-fa69-4253-87a5-a96834358056"
  },
  "target": {
    "cell": "832fc8cc-140f-45c5-ada0-d58736d6e78c",
    "port": "ec7d25b5-2c18-49ff-bfe7-37e77945b8b6"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "f3390158-6041-472e-b59e-c98b22a33926",
  "zIndex": 0,
  "source": {
    "cell": "85e38883-641d-48ed-9701-15148be3cd7f",
    "port": "037a3476-fa69-4253-87a5-a96834358056"
  },
  "target": {
    "cell": "832fc8cc-140f-45c5-ada0-d58736d6e78c",
    "port": "c6e8912a-e3a3-4765-9aad-0767b55eb976"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "7a6ecc86-505f-41c6-ad1a-3627ed46d930",
  "zIndex": 0,
  "source": {
    "cell": "aef01570-a760-4b9b-ae64-fae758f3b1ca",
    "port": "1532799f-dd72-441e-b753-c4356a9a6589"
  },
  "target": {
    "cell": "832fc8cc-140f-45c5-ada0-d58736d6e78c",
    "port": "f8b52aa8-fcf9-42c3-a573-badfec3097fb"
  }
}, {
  "shape": "edge",
  "attrs": {
    "line": {
      "stroke": "#000000",
      "strokeWidth": 1,
      "targetMarker": {
        "name": "block",
        "width": 12,
        "height": 8
      }
    }
  },
  "id": "2106ab62-284c-4889-bffa-194d8eec02da",
  "zIndex": 0,
  "source": {
    "cell": "832fc8cc-140f-45c5-ada0-d58736d6e78c",
    "port": "95ae6a99-3024-4667-8c77-8b3e0404b07a"
  },
  "target": {
    "cell": "66f14529-c53b-43be-be90-8408f6658b07",
    "port": "748fb9f4-355c-4a6d-b8b2-f826c2dbbb42"
  }
}, {
  "position": {
    "x": 110,
    "y": 150
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "开始"
    },
    "body": {
      "rx": 20,
      "ry": 26
    }
  },
  "visible": true,
  "shape": "mk-rect",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "dae0a153-31a7-4d9d-ae2b-7fce5b86eda3"
    }, {
      "group": "right",
      "id": "18cb49ca-e40a-4cb5-8a05-18c5ed7644fe"
    }, {
      "group": "bottom",
      "id": "f2667aa6-1f8b-485b-9de6-ed61b6abe815"
    }, {
      "group": "left",
      "id": "748fb9f4-355c-4a6d-b8b2-f826c2dbbb42"
    }]
  },
  "id": "a464f73a-c12d-4612-ae76-55ae754618e2",
  "zIndex": 1
}, {
  "position": {
    "x": 239,
    "y": 150
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "过程"
    }
  },
  "visible": true,
  "shape": "mk-rect",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "ec7d25b5-2c18-49ff-bfe7-37e77945b8b6"
    }, {
      "group": "right",
      "id": "95ae6a99-3024-4667-8c77-8b3e0404b07a"
    }, {
      "group": "bottom",
      "id": "f8b52aa8-fcf9-42c3-a573-badfec3097fb"
    }, {
      "group": "left",
      "id": "c6e8912a-e3a3-4765-9aad-0767b55eb976"
    }]
  },
  "id": "310c8213-f07a-4d30-9d35-36f03a7ceb8e",
  "zIndex": 2
}, {
  "position": {
    "x": 470,
    "y": 150
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "决策"
    },
    "body": {
      "refPoints": "0,10 10,0 20,10 10,20"
    }
  },
  "visible": true,
  "shape": "mk-polygon",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "d4b5354c-82f3-4a4f-ae58-bf0085b514aa"
    }, {
      "group": "right",
      "id": "037a3476-fa69-4253-87a5-a96834358056"
    }, {
      "group": "bottom",
      "id": "3c1e94df-6424-4d63-b744-8f5f67c2e54a"
    }, {
      "group": "left",
      "id": "e1ad288c-6567-413f-b2c3-132d43a566c5"
    }]
  },
  "id": "85e38883-641d-48ed-9701-15148be3cd7f",
  "zIndex": 3
}, {
  "position": {
    "x": 470,
    "y": 80
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "决策"
    },
    "body": {
      "refPoints": "0,10 10,0 20,10 10,20"
    }
  },
  "visible": true,
  "shape": "mk-polygon",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "d4b5354c-82f3-4a4f-ae58-bf0085b514aa"
    }, {
      "group": "right",
      "id": "037a3476-fa69-4253-87a5-a96834358056"
    }, {
      "group": "bottom",
      "id": "3c1e94df-6424-4d63-b744-8f5f67c2e54a"
    }, {
      "group": "left",
      "id": "e1ad288c-6567-413f-b2c3-132d43a566c5"
    }]
  },
  "id": "dba4e54b-96e7-4bb8-9d2f-d76d47ce662e",
  "zIndex": 4
}, {
  "position": {
    "x": 470,
    "y": 223
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "可选过程"
    },
    "body": {
      "rx": 6,
      "ry": 6
    }
  },
  "visible": true,
  "shape": "mk-rect",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "9b1425a8-33db-4b10-a699-fb36fb452bb0"
    }, {
      "group": "right",
      "id": "1532799f-dd72-441e-b753-c4356a9a6589"
    }, {
      "group": "bottom",
      "id": "dfb1a762-247a-4056-8a8c-5f102eaebfac"
    }, {
      "group": "left",
      "id": "c493019f-b8a3-4ac2-b250-b92fcb5553ae"
    }]
  },
  "id": "aef01570-a760-4b9b-ae64-fae758f3b1ca",
  "zIndex": 5
}, {
  "position": {
    "x": 365,
    "y": 150
  },
  "size": {
    "width": 36,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "连接"
    }
  },
  "visible": true,
  "shape": "mk-circle",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "7024e8d6-df2f-4273-aadb-67ed01507bae"
    }, {
      "group": "right",
      "id": "6a767960-f16e-4b71-93f8-82400370fe2c"
    }, {
      "group": "bottom",
      "id": "acd6bf40-8a98-481d-9280-a7df27da1743"
    }, {
      "group": "left",
      "id": "6c62d9ff-0d11-4d44-b234-76033f91b67d"
    }]
  },
  "id": "ef3d1b04-c830-4146-89a4-23e330fce83d",
  "zIndex": 6
}, {
  "position": {
    "x": 590,
    "y": 150
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "过程"
    }
  },
  "visible": true,
  "shape": "mk-rect",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "ec7d25b5-2c18-49ff-bfe7-37e77945b8b6"
    }, {
      "group": "right",
      "id": "95ae6a99-3024-4667-8c77-8b3e0404b07a"
    }, {
      "group": "bottom",
      "id": "f8b52aa8-fcf9-42c3-a573-badfec3097fb"
    }, {
      "group": "left",
      "id": "c6e8912a-e3a3-4765-9aad-0767b55eb976"
    }]
  },
  "id": "832fc8cc-140f-45c5-ada0-d58736d6e78c",
  "zIndex": 7
}, {
  "position": {
    "x": 729,
    "y": 150
  },
  "size": {
    "width": 66,
    "height": 36
  },
  "attrs": {
    "text": {
      "text": "结束"
    },
    "body": {
      "rx": 20,
      "ry": 26
    }
  },
  "visible": true,
  "shape": "mk-rect",
  "ports": {
    "groups": {
      "top": {
        "position": "top",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "right": {
        "position": "right",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "bottom": {
        "position": "bottom",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      },
      "left": {
        "position": "left",
        "attrs": {
          "circle": {
            "r": 4,
            "magnet": true,
            "stroke": "var(--mk-sys-color)",
            "strokeWidth": 1,
            "fill": "#fff",
            "style": {
              "visibility": "hidden"
            }
          }
        }
      }
    },
    "items": [{
      "group": "top",
      "id": "dae0a153-31a7-4d9d-ae2b-7fce5b86eda3"
    }, {
      "group": "right",
      "id": "18cb49ca-e40a-4cb5-8a05-18c5ed7644fe"
    }, {
      "group": "bottom",
      "id": "f2667aa6-1f8b-485b-9de6-ed61b6abe815"
    }, {
      "group": "left",
      "id": "748fb9f4-355c-4a6d-b8b2-f826c2dbbb42"
    }]
  },
  "id": "66f14529-c53b-43be-be90-8408f6658b07",
  "zIndex": 8
}]

 src/menu/menushell/card.jsx

@@ -133,14 +133,6 @@
    }
  }

  // if (card.type === 'antvX6') { // 测试
  //   return (
  //     <div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} style={style}>
  //       <AntvX6 card={card} updateConfig={updateConfig} deletecomponent={delCard}/>
  //     </div>
  //   )
  // }

  return (
    <div className={'ant-col mk-component-card ant-col-' + (card.width || 24)} ref={node => drag(drop(node))} style={style}>
      {getCardComponent()}

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

New file
@@ -0,0 +1,1361 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Spin, Tooltip, Empty, message, Modal, notification } from 'antd'
import { VerticalAlignTopOutlined, VerticalAlignBottomOutlined, SaveOutlined, ZoomInOutlined, ZoomOutOutlined, OneToOneOutlined, DoubleLeftOutlined, 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 Api from '@/api'
import UtilsDM from '@/utils/utils-datamanage.js'
import MKEmitter from '@/utils/events.js'
import asyncComponent from '@/utils/asyncComponent'
import NormalHeader from '@/tabviews/custom/components/share/normalheader'
import './index.scss'

const NodeUpdate = asyncComponent(() => import('./nodeupdate'))

const groups = {
  top: {
    position: 'top',
    attrs: {
      circle: {
        r: 4,
        magnet: true,
        stroke: 'var(--mk-sys-color)',
        strokeWidth: 1,
        fill: '#fff',
        style: {
          visibility: 'hidden'
        }
      }
    }
  },
  right: {
    position: 'right',
    attrs: {
      circle: {
        r: 4,
        magnet: true,
        stroke: 'var(--mk-sys-color)',
        strokeWidth: 1,
        fill: '#fff',
        style: {
          visibility: 'hidden'
        }
      }
    }
  },
  bottom: {
    position: 'bottom',
    attrs: {
      circle: {
        r: 4,
        magnet: true,
        stroke: 'var(--mk-sys-color)',
        strokeWidth: 1,
        fill: '#fff',
        style: {
          visibility: 'hidden'
        }
      }
    }
  },
  left: {
    position: 'left',
    attrs: {
      circle: {
        r: 4,
        magnet: true,
        stroke: 'var(--mk-sys-color)',
        strokeWidth: 1,
        fill: '#fff',
        style: {
          visibility: 'hidden'
        }
      }
    }
  }
}

Graph.registerNode(
  'lane',
  {
    inherit: 'rect',
    markup: [
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'rect',
        selector: 'name-rect',
      },
      {
        tagName: 'text',
        selector: 'name-text',
      },
    ],
    attrs: {
      body: {
        fill: '#FFF',
        stroke: '#5F95FF',
        strokeWidth: 1,
      },
      'name-rect': {
        width: 200,
        height: 36,
        fill: '#5F95FF',
        stroke: '#fff',
        strokeWidth: 1,
        x: -1,
      },
      'name-text': {
        ref: 'name-rect',
        refY: 0.5,
        refX: 0.5,
        textAnchor: 'middle',
        fontWeight: 'bold',
        fill: '#fff',
        fontSize: 14,
      },
    },
    zIndex: 0
  },
  true,
)

Graph.registerNode(
  'mk-rect',
  {
    inherit: 'rect',
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
)

Graph.registerNode(
  'mk-polygon',
  {
    inherit: 'polygon',
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
)

Graph.registerNode(
  'mk-paral',
  {
    inherit: 'polygon',
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'bottom' }
      ]
    }
  },
  true
)

Graph.registerNode(
  'mk-circle',
  {
    inherit: 'circle',
    width: 36,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
)

Graph.registerNode(
  'mk-ellipse',
  {
    inherit: 'ellipse',
    width: 66,
    height: 36,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  true
)

Graph.registerNode(
  'mk-star',
  {
    inherit: 'polygon',
    width: 36,
    height: 36,
    points: '100,10 40,198 190,78 10,78 160,198',
    attrs: {
      body: {
        fill: '#FFFFFF',
        stroke: '#000000',
        strokeWidth: 1,
        fillRule: 'nonzero'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    },
    ports: {
      groups,
      items: [
        { group: 'top' },
        { group: 'right' },
        { group: 'bottom' },
        { group: 'left' }
      ]
    }
  },
  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 = {
    config: PropTypes.object,
    mainSearch: PropTypes.any
  }

  state = {
    config: null,
    toolunfold: true,
    nodeunfold: true,
    editing: false,
    node: null,
    arr_field: 'id,cells',
    loading: false
  }

  selectNode = null
  mkGraph = null

  UNSAFE_componentWillMount () {
    const { config } = this.props
    let _config = fromJS(config).toJS()

    let BID = ''
    let BData = ''

    if (config.setting.supModule) {
      BData = window.GLOB.CacheData.get(config.setting.supModule)
    } else {
      BData = window.GLOB.CacheData.get(config.$pageId)
    }
    if (BData) {
      BID = BData.$BID || ''
    }
    
    this.setState({
      config: _config,
      BID: BID || '',
      BData: BData || '',
      plot: _config.plot
    }, () => {
      if (config.setting.onload === 'true') {
        setTimeout(() => {
          this.loadData()
        }, _config.setting.delay || 0)
      }
    })
  }

  shouldComponentUpdate (nextProps, nextState) {
    return !is(fromJS(this.state), fromJS(nextState))
  }

  /**
   * @description 组件销毁，清除state更新，清除快捷键设置
   */
  componentWillUnmount () {
    this.setState = () => {
      return
    }
  }

  async loadData () {
    const { mainSearch } = this.props
    const { config, arr_field, BID } = this.state

    if (config.setting.supModule && !BID) { // BID 不存在时，不做查询
      if (!is(fromJS(this.data), fromJS([]))) {
        this.data = []
        this.handleData()
      }
      return
    }

    let searches = config.setting.useMSearch && mainSearch ? mainSearch : []

    let requireFields = searches.filter(item => item.required && item.value === '')
    if (requireFields.length > 0) {
      return
    }

    this.setState({
      loading: true
    })

    let _orderBy = config.setting.order || ''
    let param = UtilsDM.getQueryDataParams(config.setting, arr_field, searches, _orderBy, '', '', BID)

    let result = await Api.genericInterface(param)
    if (result.status) {
      if (config.$cache && config.setting.onload !== 'false') {
        Api.writeCacheConfig(config.uuid, result.data || '')
      }

      this.setState({
        loading: false
      })

      if (!is(fromJS(this.data), fromJS(result.data || []))) {
        this.data = result.data || []
        this.handleData()
      }

      if (result.message) {
        if (result.ErrCode === 'Y') {
          Modal.success({
            title: result.message
          })
        } else if (result.ErrCode === 'S') {
          notification.success({
            top: 92,
            message: result.message,
            duration: 2
          })
        }
      }
    } else {
      this.setState({
        loading: false
      })
      
      if (!result.message) return
      if (result.ErrCode === 'N') {
        Modal.error({
          title: result.message,
        })
      } else if (result.ErrCode !== '-2') {
        notification.error({
          top: 92,
          message: result.message,
          duration: 10
        })
      }
    }
  }

  handleData = () => {
    const { config } = this.state

    MKEmitter.emit('resetSelectLine', config.uuid, '', '')

    let _element = document.getElementById(config.uuid + 'container')
    if (_element) {
      _element.innerHTML = ''
    }

    setTimeout(() => {
      this.viewrender()
    }, 50)
  }

  viewrender = () => {
    const { plot } = this.state

    if (plot.subtype === 'xflow') {
      this.xflowrender()
    } else if (plot.subtype === 'lane') {
      this.lanerender()
    }
  }

  xflowrender = () => {
    const { config } = this.state

    const graph = new Graph({
      container: document.getElementById(config.uuid + 'container'),
      grid: config.plot.grid,
      scaling: {
        min: 0.5,
        max: 2
      },
      autoResize: true,
      panning: true,
      background: {
        color: config.plot.backgroundColor || 'transparent'
      },
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: 'ctrl'
      },
      connecting: {
        router: 'manhattan',
        connector: {
          name: 'rounded',
          args: {
            radius: 8
          }
        },
        anchor: 'center',
        connectionPoint: 'anchor',
        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'
            }
          }
        }
      }
    })

    // #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: 150,
          layoutOptions: {
            rowHeight: 70
          }
        }
      ],
      layoutOptions: {
        columns: 2,
        columnWidth: 80,
        rowHeight: 55
      }
    })

    document.getElementById(config.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(config.uuid + 'container')
      const ports = container.querySelectorAll('.x6-port-body')
      showPorts(ports, true)
    })
    graph.on('node:mouseleave', () => {
      const container = document.getElementById(config.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-paral',
      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: ''
    })

    const p3 = graph.createNode({
      shape: 'mk-text',
      label: '文本'
    })
    
    stencil.load([p1, p2, p3], 'group2')
    
    this.mkGraph = graph
  }

  lanerender = () => {
    const { config } = this.state

    const graph = new Graph({
      container: document.getElementById(config.uuid + 'container'),
      scaling: {
        min: 0.5,
        max: 2
      },
      autoResize: true,
      panning: true,
      background: { color: '#ffffff' },
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: 'ctrl'
      },
      connecting: {
        router: 'manhattan',
        connector: {
          name: 'rounded',
          args: {
            radius: 8
          }
        },
        anchor: 'center',
        connectionPoint: 'anchor',
        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()
        }
      }
    })

    graph
      .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: 150,
          layoutOptions: {
            rowHeight: 70
          }
        },
        {
          title: '泳道',
          name: 'group3',
          graphHeight: 120,
          layoutOptions: {
            rowHeight: 70
          }
        }
      ],
      layoutOptions: {
        columns: 2,
        columnWidth: 80,
        rowHeight: 55
      }
    })

    document.getElementById(config.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: { dx: 0, dy: 20 } })
      }
      return false
    })

    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', ({ cell }) => {
      if (cell.prop('shape') === 'lane') return

      const container = document.getElementById(config.uuid + 'container')
      const ports = container.querySelectorAll('.x6-port-body')
      showPorts(ports, true)
    })
    graph.on('node:mouseleave', () => {
      const container = document.getElementById(config.uuid + 'container')
      const ports = container.querySelectorAll('.x6-port-body')
      showPorts(ports, false)
    })

    graph.on('node:added', ({ cell, index, options }) => {
      if (cell.prop('shape') === 'lane') {
        graph.startBatch('add-lane')

        this.addLane(cell, graph)

        graph.stopBatch('add-lane')
      } else {
        let num = graph.getCellCount()

        if (num <= 1) {
          message.warning('请添加泳道！')
          graph.removeCells([cell])
        } else {
          this.addNode(cell, graph)
        }
      }
    })
    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-paral',
      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: ''
    })

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

    const g1 = graph.createNode({
      shape: 'lane',
      label: '阶段n'
    })
    
    stencil.load([g1], 'group3')

    // let data = [{"id":"1","shape":"lane","width":260,"height":500,"position":{"x":0,"y":0},"label":"阶段1", preId: '', nextId: '2'},{"id":"2","shape":"lane","width":200,"height":500,"position":{"x":260,"y":0},"label":"<Function>", preId: '1', nextId: '3'},{"id":"3","shape":"lane","width":200,"height":500,"position":{"x":460,"y":0},"label":"<Function>", preId: '2', nextId: '4'},{"id":"4","shape":"lane","width":200,"height":500,"position":{"x":660,"y":0},"label":"<Function>", preId: '3', nextId: ''}]
    // let cells = []
    // data.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 { config } = this.state
    this.mkGraph.exportPNG(config.name, {padding: 20})
  }

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

    let nodes = graph.getNodes()

    cell.prop('zIndex', 0)
    let basePoint = cell.prop('position/x')

    if (basePoint <= 0 || nodes.length <= 1) {
      basePoint = 0
    } else {
      let _h = false
      let _l = 0
      nodes.forEach(item => {
        if (item.id === cell.id) return
        if (item.prop('shape') !== 'lane') return
  
        let x1 = item.prop('position/x')
        let x2 = item.prop('position/x') + item.prop('size/width')
        if (basePoint > x1 && basePoint <= x2) {
          basePoint = x2
          _h = true
        }
        if (_l < x2) {
          _l = x2
        }
      })

      if (!_h && _l) {
        basePoint = _l
      }
    }

    let height = 400
    if (typeof(config.plot.height) === 'number' || /px/.test(config.plot.height)) {
      height = parseInt(config.plot.height)
    }

    cell.prop('size', {width: 200, height: height})
    cell.prop('position', {x: basePoint, y: 0})

    this.resetlane(cell.id, basePoint, 200)
  }

  addNode = (cell, graph) => {
    let nodes = graph.getNodes()

    let cx1 = cell.prop('position/x')
    let cx2 = cx1 + cell.prop('size/width')
    let cx3 = parseInt((cx1 + cx2) / 2)

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

      let x1 = item.prop('position/x')
      let x2 = item.prop('position/x') + item.prop('size/width')
      
      if (cx3 > x1 && cx3 <= x2) {
        cell.prop('parent', item.id)

        if (cx1 < x1) {
          cell.prop('position/x', x1)
        } else if (cx2 > x2) {
          cell.prop('position/x', x2 - cell.prop('size/width'))
        }

        let y1 = item.prop('size/height') - cell.prop('size/height')

        if (cell.prop('position/y') < 36) {
          cell.prop('position/y', 36)
        } else if (cell.prop('position/y') > y1) {
          cell.prop('position/y', y1)
        }
      }
    })

    if (!cell.prop('parent')) {
      let flane = null
      let llane = null
      let lane = null
      nodes.forEach(item => {
        if (item.prop('shape') !== 'lane') return
        if (!flane) {
          flane = item
          llane = item
        } else {
          if (item.prop('position/x') < flane.prop('position/x')) {
            flane = item
          }
          if (item.prop('position/x') > llane.prop('position/x')) {
            llane = item
          }
        }
      })

      if (cx1 <= flane.prop('position/x')) {
        lane = flane
      } else {
        lane = llane
      }

      let x1 = lane.prop('position/x')
      let x2 = lane.prop('position/x') + lane.prop('size/width')
      
      cell.prop('parent', lane.id)

      if (cx1 < x1) {
        cell.prop('position/x', x1)
      } else if (cx2 > x2) {
        cell.prop('position/x', x2 - cell.prop('size/width'))
      }

      let y1 = lane.prop('size/height') - cell.prop('size/height')

      if (cell.prop('position/y') < 36) {
        cell.prop('position/y', 36)
      } else if (cell.prop('position/y') > y1) {
        cell.prop('position/y', y1)
      }
    }
  }

  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 (node.shape === 'lane') {
      if (key === 'title') {
        this.selectNode.attr('text/text', value)
      } else if (key === 'fill') {
        this.selectNode.attr('name-rect/fill', value)
      } else if (key === 'stroke') {
        this.selectNode.attr('body/stroke', value)
      } else if (key === 'fontSize') {
        this.selectNode.attr('name-text/fontSize', value)
      } else if (key === 'fontFill') {
        this.selectNode.attr('name-text/fill', value)
      } else if (key === 'height') {
        this.selectNode.prop('size/height', value)
      } else if (key === 'width') {
        this.mkGraph.startBatch('width-change')
        let offset = value - this.selectNode.prop('size/width')

        this.selectNode.prop('size/width', value)
        this.selectNode.attr('name-rect/width', value)

        this.resetlane(this.selectNode.id, this.selectNode.prop('position/x'), offset)

        this.mkGraph.stopBatch('width-change')
      }
    } 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)
      } else if (key === 'mksign') {
        this.selectNode.prop('mksign', value)
      }
    }
  }

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

    nodes.forEach(item => {
      if (item.id === id || item.prop('parent') === id) return
      if (item.prop('shape') === 'edge') return

      let x1 = item.prop('position/x')
      if (x1 < x) return

      item.prop('position/x', x1 + offset)
    })
  }

  render() {
    const { loading, config, empty, toolunfold, nodeunfold, node } = this.state

    return (
      <div className="custom-x6-plot-box" id={'anchor' + config.uuid} style={config.style}>
        {loading ?
          <div className="loading-mask">
            <div className="ant-spin-blur"></div>
            <Spin />
          </div> : null
        }
        <NormalHeader config={config} />
        {empty ? <Empty description={false}/> : null}
        <div className="mk-toolbar">
          <div className="left-tool">
            {config.plot.subtype === 'xflow' ? <Tooltip title="置前">
              <VerticalAlignTopOutlined onClick={this.setTop}/>
            </Tooltip> : null}
            {config.plot.subtype === 'xflow' ? <Tooltip title="置后">
              <VerticalAlignBottomOutlined onClick={this.setBottom}/>
            </Tooltip> : null}
            <Tooltip title="保存">
              <SaveOutlined onClick={this.save}/>
            </Tooltip>
            {config.plot.export === 'png' ? <Tooltip title="导出图片">
              <DownloadOutlined onClick={this.savePicture}/>
            </Tooltip> : null}
          </div>
          <div className="right-tool">
            <Tooltip title="放大">
              <ZoomInOutlined onClick={this.setZoomIn}/>
            </Tooltip>
            <Tooltip title="缩小">
              <ZoomOutOutlined onClick={this.setZoomOut}/>
            </Tooltip>
            <Tooltip title="1:1">
              <OneToOneOutlined onClick={this.setZoomInt}/>
            </Tooltip>
          </div>
        </div>
        <div className="canvas" style={{width: '100%', minHeight: config.plot.height, height: config.plot.height}} id={config.uuid + 'canvas'}>
          <div id={config.uuid + 'stencil'} className={'mk-stencil ' + (toolunfold ? '' : 'merge')}>
            <div className="tool-control" onClick={() => this.setState({toolunfold: !toolunfold})}>
              <DoubleLeftOutlined />
            </div>
          </div>
          <div id={config.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>
    )
  }
}

export default antvX6Chart

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

New file
@@ -0,0 +1,245 @@
.custom-x6-plot-box {
  position: relative;
  box-sizing: border-box;
  background: #ffffff;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  
  .mk-toolbar {
    width: 100%;
    height: 40px;
    border: 1px solid #1890ff;

    .left-tool {
      float: left;
      line-height: 40px;
      .anticon {
        margin: 0 10px;
        font-size: 16px;
        cursor: pointer;
      }
    }
    .right-tool {
      float: right;
      line-height: 40px;
      .anticon {
        margin: 0 10px;
        font-size: 16px;
        cursor: pointer;
      }
    }
  }
  .x6-graph-scroller::-webkit-scrollbar {
    display: none;
  }
  .x6-cell.x6-edge.x6-edge-selected path:nth-child(2) {
    stroke: #1890ff;
  }
  .x6-cell[data-shape="lane"] {
    cursor: default;
  }
  .x6-node[data-shape="mk-polygon"]:hover {
    .x6-port {
      circle {
        visibility: visible!important;
      }
    }
  }

  .canvas {
    margin: 0px;
    letter-spacing: 0px;
    display: flex;

    .mk-stencil {
      width: 180px;
      min-width: 180px;
      height: 100%;
      position: relative;
      z-index: 2;
      border-right: 1px solid #dfe3e8;
      transition: all 0.2s;

      .x6-widget-stencil-title {
        display: none;
      }
      .x6-widget-stencil-content {
        overflow-y: auto;
      }
      .x6-widget-stencil-content::-webkit-scrollbar {
        width: 5px;
      }
      .x6-widget-stencil-content::-webkit-scrollbar-thumb {
        border-radius: 5px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.07);
        background: rgba(0, 0, 0, 0.07);
      }
      .x6-widget-stencil-content::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
        border-radius: 3px;
        border: 1px solid rgba(0, 0, 0, 0.07);
        background: rgba(0, 0, 0, 0);
      }
      .tool-control {
        position: absolute;
        right: -13px;
        top: 5px;
        z-index: 3;
        background: #ffffff;
        width: 25px;
        height: 25px;
        border: 1px solid #d8d8d8;
        border-radius: 30px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
      }

      .x6-widget-stencil-group[data-name="group3"] {
        .x6-graph-svg {
          top: 5px;
          left: 5px;
          right: 5px;
        }
        .x6-cell {
          transform: none!important;
          rect:nth-child(2) {
            width: 165px!important;
          }
          text {
            transform: matrix(1,0,0,1,85,18)!important;
          }
        }
      }
    }
    .mk-stencil.merge {
      width: 0px;
      min-width: 0px;

      .tool-control {
        right: -25px;
        border-top-left-radius: 0px;
        border-bottom-left-radius: 0px;
        .anticon-double-left {
          transform: rotate(180deg);
        }
      }
    }

    .mk-node-edit {
      width: 180px;
      min-width: 180px;
      height: 100%;
      position: relative;
      z-index: 2;
      border-left: 1px solid #dfe3e8;
      background: #ffffff;
      transition: all 0.2s;

      .header {
        width: 100%;
        height: 32px;
        text-align: center;
        line-height: 32px;
        background-color: #f5f5f5!important;
        overflow-x: hidden;
        white-space: nowrap;
      }
      .empty {
        width: 100%;
        text-align: center;
        padding-top: 20px;
        overflow-x: hidden;
        white-space: nowrap;
      }

      .tool-control {
        position: absolute;
        left: -13px;
        top: 5px;
        z-index: 3;
        background: #ffffff;
        width: 25px;
        height: 25px;
        border: 1px solid #d8d8d8;
        border-radius: 30px;
        text-align: center;
        line-height: 25px;
        cursor: pointer;
        .anticon-double-left {
          transform: rotate(180deg);
        }
      }
    }
    .mk-node-edit.merge {
      width: 0px;
      min-width: 0px;

      .tool-control {
        left: -25px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        .anticon-double-left {
          transform: rotate(0deg);
        }
      }
    }

    .mk-container {
      width: calc(100% - 180px);
      height: 100%;
    }
    .x6-widget-stencil  {
      background-color: #fff;
    }
    .x6-widget-stencil-title {
      background-color: #fff;
    }
    .x6-widget-stencil-group-title {
      background-color: #f5f5f5!important;
    }
    .x6-widget-transform {
      margin: -1px 0 0 -1px;
      padding: 0px;
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div {
      border: 1px solid #239edd;
    }
    .x6-widget-transform > div:hover {
      background-color: #3dafe4;
    }
    .x6-widget-transform-active-handle {
      background-color: #3dafe4;
    }
    .x6-widget-transform-resize {
      border-radius: 0;
    }
    .x6-widget-selection-inner {
      border: 1px solid #239edd;
    }
    .x6-widget-selection-box {
      opacity: 0;
    }
  }

  .chart-header {
    position: relative;
    height: 45px;
    border-bottom: 1px solid #e8e8e8;
    overflow: hidden;
    padding-right: 35px;

    .chart-title {
      text-decoration: inherit;
      font-weight: inherit;
      font-style: inherit;
      float: left;
      line-height: 45px;
      margin-left: 10px;
      position: relative;
      z-index: 1;
    }
  }
}

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

File was renamed from src/menu/components/chart/antv-X6/nodeupdate/index.jsx
@@ -52,20 +52,16 @@
    }

    if (node.shape === 'edge') {
      // let fontSize = 14
      // if (node.attrs && node.attrs.text) {
      //   fontSize = node.attrs.text.fontSize || 14
      // }
      let stroke = ''

      if (node.attrs && node.attrs.line) {
        stroke = node.attrs.line.stroke || '#A2B1C3'
        stroke = node.attrs.line.stroke || '#000000'
      }

      let strokeWidth = ''

      if (node.attrs && node.attrs.line) {
        strokeWidth = node.attrs.line.strokeWidth || 2
        strokeWidth = node.attrs.line.strokeWidth || 1
      }

      let lineType = 'solid'
@@ -110,19 +106,132 @@
            {value: 'solid', text: '实线'},
            {value: 'dash', text: '虚线'}
          ]
        }
      ]
    } else if (node.shape === 'lane') {
      let fontFill = '#262626'
      if (node.attrs && node.attrs.text) {
        fontFill = node.attrs.text.fill || '#262626'
      }
      
      let fill = ''
      if (node.attrs && node.attrs['name-rect']) {
        fill = node.attrs['name-rect'].fill || ''
      }

      let width = 100
      if (node.size) {
        width = node.size.width || 100
      }
      let height = 100
      if (node.size) {
        height = node.size.height || 100
      }

      let fontSize = 12
      if (node.attrs && node.attrs.text) {
        fontSize = node.attrs.text.fontSize || 12
      }

      let stroke = ''
      if (node.attrs && node.attrs.body) {
        stroke = node.attrs.body.stroke || ''
      }
      return [
        {
          type: 'title',
          label: '标题'
        },
        // {
        //   type: 'number',
        //   field: 'fontSize',
        //   label: '字号',
        //   initval: fontSize
        // },
        // {
        //   type: 'color',
        //   field: 'fontFill',
        //   label: '颜色',
        //   initval: fontFill
        // }
        {
          type: 'text',
          field: 'title',
          label: '标签',
          initval: title
        },
        {
          type: 'title',
          label: '样式'
        },
        {
          type: 'color',
          field: 'stroke',
          label: '边框',
          initval: stroke
        },
        {
          type: 'number',
          field: 'width',
          label: '宽度',
          help: '宽度不可小于100',
          initval: width
        },
        {
          type: 'number',
          field: 'height',
          label: '高度',
          help: '高度不可小于100',
          initval: height
        },
        {
          type: 'title',
          label: '标题样式'
        },
        {
          type: 'color',
          field: 'fill',
          label: '背景',
          initval: fill
        },
        {
          type: 'number',
          field: 'fontSize',
          label: '字号',
          initval: fontSize
        },
        {
          type: 'color',
          field: 'fontFill',
          label: '颜色',
          initval: fontFill
        }
      ]
    } else if (node.shape === 'mk-text') {
      let fontFill = '#262626'
      if (node.attrs && node.attrs.text) {
        fontFill = node.attrs.text.fill || '#262626'
      }

      let fontSize = 12
      if (node.attrs && node.attrs.text) {
        fontSize = node.attrs.text.fontSize || 12
      }
      return [
        {
          type: 'title',
          label: '内容'
        },
        {
          type: 'text',
          field: 'title',
          label: '标签',
          initval: title
        },
        {
          type: 'title',
          label: '文本样式'
        },
        {
          type: 'number',
          field: 'fontSize',
          label: '字号',
          initval: fontSize
        },
        {
          type: 'color',
          field: 'fontFill',
          label: '颜色',
          initval: fontFill
        }
      ]
    } else {
      let fontFill = '#262626'
@@ -186,7 +295,17 @@
          field: 'fontFill',
          label: '颜色',
          initval: fontFill
        }
        },
        {
          type: 'title',
          label: '自定义信息'
        },
        {
          type: 'text',
          field: 'mksign',
          label: '标记',
          initval: node.mksign || ''
        },
      ]
    }
  }
@@ -194,6 +313,12 @@
  change = (value, key) => {
    if (key === 'fontSize') {
      if (typeof(value) !== 'number' || value < 0) {
        return
      }
    } else if (key === 'width' || key === 'height') {
      if (typeof(value) !== 'number') {
        return
      } else if (value < 100) {
        return
      }
    }
@@ -225,7 +350,7 @@
      } else if (item.type === 'number') {
        fields.push(
          <Col span={24} key={index}>
            <Form.Item label={item.label}>
            <Form.Item label={item.label} help={item.help || null}>
              <InputNumber defaultValue={item.initval} precision={0} min={0} onChange={(value) => this.change(value, item.field)} />
            </Form.Item>
          </Col>
@@ -278,9 +403,11 @@

  render() {
    return (
      <Form className="node-edit-form">
        <Row>{this.getFields()}</Row>
      </Form>
      <div className="node-edit-form-wrap">
        <Form className="node-edit-form">
          <Row>{this.getFields()}</Row>
        </Form>
      </div>
    )
  }
}

 src/tabviews/custom/components/chart/antv-X6/nodeupdate/index.scss

File was renamed from src/menu/components/chart/antv-X6/nodeupdate/index.scss
@@ -1,5 +1,6 @@
.node-edit-form {
  padding-top: 10px;
  overflow: hidden;
  .split-line {
    display: block;
    border-bottom: 1px solid #d9d9d9;
@@ -28,6 +29,12 @@
      .ant-form-item-control {
        line-height: 24px;
      }
      .ant-form-explain {
        font-size: 12px;
        min-height: 18px;
        color: #c8c8c8;
        margin-top: 1px;
      }
      .ant-input {
        height: 24px;
        padding: 0px 4px;
@@ -49,11 +56,11 @@
      }

      .color-sketch-block {
        height: 22px;
        height: 20px;
        margin-top: 2px;
        .color-sketch-block-box {
          width: 22px;
          height: 22px;
          width: 20px;
          height: 20px;
        }
        .color-sketch-value {
          display: none;
@@ -64,4 +71,22 @@
      }
    }
  }
}
.node-edit-form-wrap {
  height: calc(100% - 32px);
  overflow-y: auto;
}
.node-edit-form-wrap::-webkit-scrollbar {
  width: 5px;
}
.node-edit-form-wrap::-webkit-scrollbar-thumb {
  border-radius: 5px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.07);
  background: rgba(0, 0, 0, 0.07);
}
.node-edit-form-wrap::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.05);
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.07);
  background: rgba(0, 0, 0, 0);
}

 src/tabviews/custom/index.jsx

@@ -40,6 +40,7 @@
const CustomChart = asyncComponent(() => import('./components/chart/custom-chart'))
const TimeLine = asyncComponent(() => import('./components/timeline/normal-timeline'))
const AntvG6 = asyncComponent(() => import('./components/chart/antv-G6'))
const AntvX6 = asyncComponent(() => import('./components/chart/antv-X6'))
const Voucher = asyncComponent(() => import('./components/module/voucher'))
const Account = asyncComponent(() => import('./components/module/account'))
const Iframe = asyncComponent(() => import('./components/iframe'))
@@ -1430,6 +1431,12 @@
            <AntvG6 config={item} data={data} mainSearch={mainSearch}/>
          </Col>
        )
      } else if (item.type === 'antvX6') {
        return (
          <Col span={item.width} style={style} key={item.uuid}>
            <AntvX6 config={item} mainSearch={mainSearch}/>
          </Col>
        )
      } else if (item.type === 'module' && item.subtype === 'voucher') {
        return (
          <Col span={item.width} style={style} key={item.uuid}>

 src/views/login/index.jsx

@@ -556,6 +556,8 @@
        _param.secretkey = Utils.encrypt(_param.LText, _param.timestamp)

        Api.getSystemConfig(_param).then(res => {
          if (!res) return
          
          if (res.status) {
            // positecgroup
            // res.Banner = res.Banner ? res.Banner.replace(/:8080/ig, '').replace(/http:/ig, 'https:') : ''