Merge branch 'develop'

king

2025-05-13 f18eef383f288e453b7b6d0a34237ddf6e6620e8

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

@@ -1,947 +1,197 @@
import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { is, fromJS } from 'immutable'
import { Popover, message } from 'antd'
import { Popover } from 'antd'
import { ToolOutlined, DeleteOutlined, FontColorsOutlined } from '@ant-design/icons'
import G6 from '@antv/g6'
import { Graph } from '@antv/x6'

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

const { Util } = G6

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

const MindData = [
  'Modeling Methods',
  [
    'Classification',
    ['Logistic regression', 'Linear discriminant analysis', 'Rules', 'Decision trees', 'Naive Bayes', 'K nearest neighbor', 'Probabilistic neural network', 'Support vector machine']
  ],
  [
    'Consensus',
    [
      'Models diversity',
      ['Different initializations', 'Different parameter choices', 'Different architectures', 'Different modeling methods', 'Different training sets', 'Different feature sets']
    ],
    [
      'Methods',
      ['Classifier selection', 'Classifier fusion']
    ],
    [
      'Common',
      ['Bagging', 'Boosting', 'AdaBoost']
    ]
  ],
  [
    'Regression',
    ['Multiple linear regression', 'Partial least squares', 'Multi-layer feedforward neural network', 'General regression neural network', 'Support vector regression']
  ]
]

const styles = {
  blue: '#1890ff',
  red: '#f5222d',
  orange_red: '#fa541c',
  orange: '#fa8c16',
  orange_yellow: '#faad14',
  yellow: '#fadb14',
  yellow_green: '#a0d911',
  green: '#52c41a',
  cyan: '#13c2c2',
  blue_purple: '#2f54eb',
  purple: '#722ed1',
  magenta: '#eb2f96',
  grass_green: '#aeb303',
  deep_red: '#c32539',
  deep_blue: '#1d3661'
}

let systemColor = '#1890ff'
if (window.GLOB.style) {
  let type = window.GLOB.style.replace(/bg_black_style_|bg_white_style_/, '')
  systemColor = styles[type] || '#1890ff'
}
const COLORS = ['#5B8FF9', '#F6BD16', '#5AD8A6', '#945FB9', '#E86452', '#6DC8EC', '#FF99C3', '#1E9493', '#FF9845', '#5D7092']

// 思维导图
G6.registerNode(
  'dice-mind-map-root', {
    jsx: (cfg) => {
      const width = Util.getTextSize(cfg.label, 16)[0] + 24

      return `
        <group>
          <rect style={{width: ${width}, height: 42, stroke: ${systemColor}, radius: 4}} keyshape>
            <text style={{ fontSize: 16, marginLeft: 6, marginTop: 12 }}>${cfg.label}</text>
          </rect>
        </group>
      `
    },
    getAnchorPoints() {
      return [
        [0, 0.5],
        [1, 0.5]
      ]
    }
  },
  'single-node',
)

G6.registerNode(
  'dice-mind-map-leaf', {
    jsx: (cfg) => {
      const width = Util.getTextSize(cfg.label, 12)[0] + 24

      return `
        <group>
          <rect style={{width: ${width}, height: 26, fill: 'transparent', cursor: pointer }}>
            <text style={{ fontSize: 12, fill: ${cfg.selected ? systemColor : '#000000'}, marginLeft: 12, marginTop: 6, cursor: pointer }}>${cfg.label}</text>
          </rect>
          <rect style={{ fill: ${cfg.color}, width: ${width}, height: 2, x: 0, y: 32, cursor: pointer }} />
        </group>
      `
    },
    getAnchorPoints() {
      return [
        [0, 0.965],
        [1, 0.965]
      ]
    }
  },
  'single-node',
)
G6.registerBehavior('dice-mindmap', {
  getEvents() {
    return {
      'node:click': 'editNode',
      'canvas:click': 'onCanvasClick'
    }
  },
  editNode(evt) {
    const item = evt.item
    const model = item.get('model')

    this.graph.getNodes().forEach(node => {
      let _model = node.get('model')
      if (_model.selected) {
        _model.selected = false
        this.graph.updateItem(node, _model, false)
      }
    })

    model.selected = true
    this.graph.updateItem(item, model, false)
  },
  onCanvasClick(e) {
    this.graph.getNodes().forEach(node => {
      let _model = node.get('model')
      if (_model.selected) {
        _model.selected = false
        this.graph.updateItem(node, _model, false)
      }
    })
  }
})
G6.registerBehavior('scroll-canvas', {
  getEvents: function getEvents() {
    return {
      wheel: 'onWheel'
    }
  },
  onWheel: function onWheel(ev) {
    const { graph } = this
    if (!graph) {
      return
    }
    if (ev.ctrlKey) {
      const canvas = graph.get('canvas')
      const point = canvas.getPointByClient(ev.clientX, ev.clientY)
      let ratio = graph.getZoom()
      if (ev.wheelDelta > 0) {
        ratio += ratio * 0.05
      } else {
        ratio *= ratio * 0.05
      }
      graph.zoomTo(ratio, {
        x: point.x,
        y: point.y
      })
    } else {
      const x = ev.deltaX || ev.movementX
      const y = ev.deltaY || ev.movementY || (-ev.wheelDelta * 125) / 3
      graph.translate(-x, -y)
    }
    ev.preventDefault()
  }
})

// 缩进文件树
G6.registerNode('indentedRoot', {
  draw(model, group) {
    const keyShape = group.addShape('rect', {
      attrs: {
        x: -46,
        y: -16,
        width: 92,
        height: 32,
        fill: systemColor,
        radius: 2,
        stroke: '#5B8FF9',
        lineWidth: 0
      },
      name: 'key-shape'
    })

    const text = group.addShape('text', {
      attrs: {
        text: model.label || 'root',
        fill: "#fff",
        fontSize: 12,
        x: 0,
        y: 0,
        textAlign: 'center',
        textBaseline: 'middle'
      },
      name: 'root-text-shape'
    })
    const textBBox = text.getBBox()
    const width = textBBox.width + 24
    const height = textBBox.height + 12
    keyShape.attr({
      x: -width / 2,
      y: -height / 2,
      width,
      height
    })

    return keyShape
  },
  getAnchorPoints() {
    return [
      [0.5, 1]
    ]
  },
  update: undefined
})

G6.registerNode('indentedNode', {
  addChildCount(group, tag, props) {
    const { collapsed, branchColor, count } = props
    let clickCircleY = 10
    // 子类数量 icon，绘制圆点在节点正下方
    if (tag) {
      const childCountGroup = group.addGroup({
        name: 'child-count-group'
      })
      childCountGroup.setMatrix([1, 0, 0, 0, 1, 0, 0, clickCircleY, 1])
      const countBackWidth = collapsed ? 26 : 12
      childCountGroup.addShape('rect', {
        attrs: {
          width: countBackWidth,
          height: 12,
          radius: 6,
          stroke: branchColor,
          lineWidth: 2,
          fill: collapsed ? branchColor : '#fff',
          x: -countBackWidth / 2,
          y: -6,
          cursor: 'pointer',
        },
        name: 'child-count-rect-shape'
      })
      const childCountText = childCountGroup.addShape('text', {
        attrs: {
          text: count,
          fill: '#fff',
          x: 0,
          y: 0,
          fontSize: 10,
          textAlign: 'center',
          textBaseline: 'middle',
          cursor: 'pointer',
        },
        name: 'child-count-text-shape'
      })
      const childHoverIcon = childCountGroup.addShape('path', {
        attrs: {
          stroke: '#fff',
          lineWidth: 1,
          cursor: 'pointer',
          path: [['M', -3, 2], ['L', 0, -2], ['L', 3, 2]]
        },
        name: 'child-count-expand-icon',
        capture: false
      })
      childHoverIcon.hide()

      // 连接 count 的线段
      const countLink = group.addShape('path', {
        attrs: {
          path: [['M', 0, 0], ['L', 0, 11]],
          stroke: branchColor,
          lineWidth: 2,
        },
        name: 'count-link'
      })
      countLink.toBack()

      if (collapsed) {
        childCountGroup.show()
        childCountText.show()
        countLink.show()
      }
      else {
        childCountGroup.hide()
        childCountText.hide()
        countLink.hide()
      }

      clickCircleY += 16
    }
  },
  addBottomLine(group, props) {
    const { x, width, stroke, lineWidth } = props
    return group.addShape('path', {
      attrs: {
        path: [
          ['M', x - 1, 0],
          ['L', width, 0],
        ],
        stroke,
        lineWidth,
      },
      name: 'node-path-shape'
    })
  },
  addName(group, props) {
    const { label, x = 0, y, fill } = props
    return group.addShape('text', {
      attrs: {
        text: label,
        x,
        y,
        textAlign: 'start',
        textBaseline: 'top',
        fill,
        fontSize: 14,
        fontFamily: 'PingFangSC-Regular',
        cursor: 'pointer',
      },
      name: 'not-root-text-shape'
    })
  },
  draw(model, group) {
    const { collapsed, depth, label, children, selected } = model
    // 是否为根节点
    const rootNode = depth === 0
    // 子节点数量
    const childCount = children ? children.length : 0

    let width = 0
    const height = 24
    const x = 0
    const y = -height / 2
    const borderRadius = 4
    // 名称文本
    const text = this.addName(group, { label, x, y })

    let textWidth = text.getBBox().width
    width = textWidth + 20

    const keyShapeAttrs = {
      x,
      y,
      width,
      height,
      radius: borderRadius,
      fill: undefined,
      stroke: undefined,
    }

    const keyShape = group.addShape('rect', {
      attrs: keyShapeAttrs,
      name: 'root-key-shape-rect-shape'
    })

    // 底部横线
    const bottomLine = this.addBottomLine(group, {
      stroke: model.branchColor || '#AAB7C4',
      lineWidth: 3,
      x,
      width
    })

    let nameColor = 'rgba(0, 0, 0, 0.85)'

    if (selected) {
      nameColor = systemColor
    }

    // 名称
    text.attr({
      y: y - 12,
      fill: nameColor
    })
    text.toFront()
    textWidth = text.getBBox().width

    if (bottomLine) bottomLine.toFront()

    this.addChildCount(group, childCount && !rootNode, {
      collapsed,
      branchColor: model.branchColor,
      count: childCount ? `${childCount}` : undefined
    })

    const bbox = group.getBBox()
    const backContainer = group.addShape('path', {
      attrs: {
        path: childCount ? [
          ['M', bbox.minX, bbox.minY],
          ['L', bbox.maxX, bbox.minY],
          ['L', bbox.maxX, bbox.maxY],
          ['L', bbox.minX + 20, bbox.maxY],
          ['L', bbox.minX + 20, bbox.maxY + 20],
          ['L', bbox.minX, bbox.maxY + 20],
          ['Z']
        ] : [
          ['M', bbox.minX, bbox.minY],
          ['L', bbox.maxX, bbox.minY],
          ['L', bbox.maxX, bbox.maxY],
          ['L', bbox.minX, bbox.maxY],
          ['Z']
        ],
        fill: '#fff',
        opacity: 0
      }
    })
    backContainer.toBack()
    return keyShape
  }
})

G6.registerEdge('indentedEdge', {
  afterDraw: (cfg, group) => {
    const sourceNode = cfg.sourceNode && cfg.sourceNode.getModel()
    const targetNode = cfg.targetNode && cfg.targetNode.getModel()
    const color = sourceNode.branchColor || targetNode.branchColor || cfg.color || '#000'

    const keyShape = group.get('children')[0]
    keyShape.attr({
      stroke: color,
      lineWidth: 3 // branchThick
    })
    group.toBack()
  },
  getControlPoints: (cfg) => {
    const startPoint = cfg.startPoint
    const endPoint = cfg.endPoint
    return [
      startPoint,
Graph.registerNode(
  'lane',
  {
    inherit: 'rect',
    markup: [
      {
        x: startPoint.x,
        y: endPoint.y,
        tagName: 'rect',
        selector: 'body',
      },
      endPoint
    ]
  },
  update: undefined
}, 'polyline')

G6.registerBehavior('wheel-scroll', {
  getDefaultCfg() {
    return {
      direction: 'y',
      zoomKey: 'ctrl',
      sensitivity: 3,
      scalableRange: -64
    }
  },
  getEvents() {
    return {
      wheel: 'onWheel'
    }
  },
  onWheel(ev) {
    const graph = this.graph
    let keyDown = ev[`${this.zoomKey}Key`]
    if (this.zoomKey === 'control') keyDown = ev.ctrlKey
    if (keyDown) {
      const sensitivity = this.get('sensitivity')
      const canvas = graph.get('canvas')
      const point = canvas.getPointByClient(ev.clientX, ev.clientY)
      let ratio = graph.getZoom()
      if (ev.wheelDelta > 0) {
        ratio *= (1 + 0.01 * sensitivity)
      } else {
        ratio *= (1 - 0.01 * sensitivity)
      }
      graph.zoomTo(ratio, {
        x: point.x,
        y: point.y
      })
      graph.emit('wheelzoom', ev)
    } else {
      let dx = ev.deltaX || ev.movementX
      let dy = ev.deltaY || ev.movementY
      if (!dy && navigator.userAgent.indexOf('Firefox') > -1) dy = (-ev.wheelDelta * 125) / 3

      const width = this.graph.get('width')
      const height = this.graph.get('height')
      const graphCanvasBBox = this.graph.get('group').getCanvasBBox()

      let expandWidth = this.scalableRange
      let expandHeight = this.scalableRange
      // 若 scalableRange 是 0~1 的小数，则作为比例考虑
      if (expandWidth < 1 && expandWidth > -1) {
        expandWidth = width * expandWidth
        expandHeight = height * expandHeight
      }

      const { minX, maxX, minY, maxY } = graphCanvasBBox

      if (dx > 0) {
        if (maxX < -expandWidth) {
          dx = 0
        } else if (maxX - dx < -expandWidth) {
          dx = maxX + expandWidth
        }
      } else if (dx < 0) {
        if (minX > width + expandWidth) {
          dx = 0
        } else if (minX - dx > width + expandWidth) {
          dx = minX - (width + expandWidth)
        }
      }

      if (dy > 0) {
        if (maxY < -expandHeight) {
          dy = 0
        } else if (maxY - dy < -expandHeight) {
          dy = maxY + expandHeight
        }
      } else if (dy < 0) {
        if (minY > height + expandHeight) {
          dy = 0
        } else if (minY - dy > height + expandHeight) {
          dy = minY - (height + expandHeight)
        }
      }

      if (this.get('direction') === 'x') {
        dy = 0
      } else if (this.get('direction') === 'y') {
        dx = 0
      }

      graph.translate(-dx, -dy)
    }
    ev.preventDefault()
  }
})
G6.registerBehavior('hover-node', {
  getEvents() {
    return {
      'node:mouseover': 'onNodeMouseOver',
      'node:mouseleave': 'onNodeMouseLeave',
      'node:mouseenter': 'onNodeMouseEnter'
    }
  },
  onNodeMouseEnter(ev) {
    const { item } = ev
    if (!item || item.get('destroyed')) return
    item.toFront()
    const model = item.getModel()
    const { collapsed, depth } = model
    const rootNode = depth === 0 || model.isRoot
    const group = item.getContainer()

    if (rootNode) return

    // 控制子节点个数标记
    if (!collapsed) {
      const childCountGroup = group.find(e => e.get('name') === 'child-count-group')
      if (childCountGroup) {
        childCountGroup.show()
      }
    }
  },
  onNodeMouseOver(ev) {
    const shape = ev.target

    // tooltip显示、隐藏
    this.graph.emit('tooltip: show', ev)

    // expand 状态下，若 hover 到子节点个数标记，填充背景+显示收起 icon
    const { item } = ev
    const group = item.getContainer()
    const model = item.getModel()
    if (!model.collapsed) {
      const childCountGroup = group.find(e => e.get('name') === 'child-count-group')
      if (childCountGroup) {
        childCountGroup.show()
        const back = childCountGroup.find(e => e.get('name') === 'child-count-rect-shape')
        const expandIcon = childCountGroup.find(e => e.get('name') === 'child-count-expand-icon')
        const rootNode = model.depth === 0 || model.isRoot
        const branchColor = rootNode ? '#576286' : model.branchColor
        if (shape.get('parent').get('name') === 'child-count-group') {
          if (back) {
            back.attr('fill', branchColor || '#fff')
          }
          if (expandIcon) {
            expandIcon.show()
          }
        } else {
          if (back) {
            back.attr('fill', '#fff')
          }
          if (expandIcon) {
            expandIcon.hide()
          }
        }
      }
    }
  },
  onNodeMouseLeave(ev) {
    const { item } = ev
    const model = item.getModel()
    const group = item.getContainer()
    const { collapsed } = model

    if (!collapsed) {
      const childCountGroup = group.find(e => e.get('name') === 'child-count-group')
      if (childCountGroup) {
        childCountGroup.hide()
      }

      const iconsLinkPath = group.find(e => e.get('name') === 'icons-link-path')
      if (iconsLinkPath) {
        iconsLinkPath.hide()
      }
    }

    this.graph.emit('tooltip: hide', ev)
  }
})
G6.registerBehavior('click-node', {
  getEvents() {
    return {
      'node:click': 'onNodeClick',
      'canvas:click': 'onCanvasClick'
    }
  },
  onNodeClick(e) {
    const { item, target } = e
    const shape = target
    const shapeName = shape.cfg.name
    let model = item.getModel()

    // 点击收起/展开 icon
    if (shapeName === 'child-count-rect-shape' || shapeName === 'child-count-text-shape') {
      const updatedCollapsed = !model.collapsed
      this.graph.updateItem(item, { collapsed: updatedCollapsed })
      this.graph.layout()
      return
    }

    // 选中节点
    this.graph.getNodes().forEach(node => {
      let _model = node.get('model')
      if (_model.selected) {
        _model.selected = false
        this.graph.updateItem(node, _model, false)
      }
    })

    model.selected = true
    this.graph.updateItem(item, model, false)

    return
  },
  onCanvasClick(e) {
    this.graph.getNodes().forEach(node => {
      let _model = node.get('model')
      if (_model.selected) {
        _model.selected = false
        this.graph.updateItem(node, _model, false)
      }
    })
  }
})
const dataIndTransform = (data) => {
  const changeData = (d) => {
    let data = { ...d }

    data.type = data.isRoot ? 'indentedRoot' : 'indentedNode'

    if (d.children) {
      data.children = d.children.map((child) => changeData(child))
    }
    // 给定 branchColor 和 0-2 层节点 depth
    if (data.children && data.children.length) {
      data.depth = 0
      data.children.forEach((subtree, i) => {
        subtree.branchColor = COLORS[i % COLORS.length]
        // dfs
        let currentDepth = 1
        subtree.depth = currentDepth
        Util.traverseTree(subtree, child => {
          child.branchColor = COLORS[i % COLORS.length]

          if (!child.depth) {
            child.depth = currentDepth + 1
          }
          else currentDepth = subtree.depth
          if (child.children) {
            child.children.forEach(subChild => {
              subChild.depth = child.depth + 1
            })
          }

          if (!data.isRoot) {
            child.collapsed = data.collapsed || false
          }
          return true
        })
      })
    }

    return data
  }
  return changeData(data)
}

// 知识图谱树
G6.registerNode('treeNode', {
  draw: (cfg, group) => {
    const { label, selected, children, isRoot } = cfg
    const rootNode = !!isRoot
    const hasChildren = children && children.length !== 0

    let width = 0
    const height = 28
    const x = 0
    const y = -height / 2

    // 名称文本
    const text = group.addShape('text', {
      attrs: {
        text: label,
        x: x * 2,
        y,
        textAlign: 'left',
        textBaseline: 'top',
        fontFamily: 'PingFangSC-Regular',
      {
        tagName: 'rect',
        selector: 'name-rect',
      },
      cursor: 'pointer',
      name: 'name-text-shape',
    })
    const textWidth = text.getBBox().width
    width = textWidth + 20

    width = width < 60 ? 60 : width

    if (!rootNode && hasChildren) {
      width += 22
    }

    const keyShapeAttrs = {
      x,
      y,
      width,
      height,
      radius: 4
    }

    const keyShape = group.addShape('rect', {
      attrs: keyShapeAttrs,
      name: 'root-key-shape-rect-shape'
    })

    if (!rootNode) {
      // 底部横线
      group.addShape('path', {
        attrs: {
          path: [
            ['M', x - 1, 0],
            ['L', width, 0],
          ],
          stroke: '#AAB7C4',
          lineWidth: 1,
        },
        name: 'node-path-shape'
      })
    }

    const mainX = x - 10
    const mainY = -height + 15

    if (rootNode) {
      group.addShape('rect', {
        attrs: {
          x: mainX,
          y: mainY,
          width: width + 12,
          height,
          radius: 14,
          fill: systemColor,
          cursor: 'pointer',
        },
        name: 'main-shape'
      })
    }

    let nameColor = 'rgba(0, 0, 0, 0.85)'
    if (selected) {
      nameColor = systemColor
    }

    // 名称
    if (rootNode) {
      group.addShape('text', {
        attrs: {
          text: label,
          x: mainX + 18,
          y: 1,
          textAlign: 'left',
          textBaseline: 'middle',
          fill: '#ffffff',
          fontSize: 12,
          fontFamily: 'PingFangSC-Regular',
          cursor: 'pointer',
        },
        name: 'root-text-shape'
      })
    } else {
      group.addShape('text', {
        attrs: {
          text: label,
          x: mainX + 6,
          y: y - 5,
          textAlign: 'start',
          textBaseline: 'top',
          fill: nameColor,
          fontSize: 12,
          fontFamily: 'PingFangSC-Regular',
          cursor: 'pointer',
        },
        name: 'not-root-text-shape'
      })
    }

    // 子类数量
    if (hasChildren && !rootNode) {
      const childCountHeight = 12
      const childCountX = width - 22
      const childCountY = -childCountHeight / 2

      group.addShape('rect', {
        attrs: {
          width: 22,
          height: 12,
          stroke: systemColor,
          fill: '#fff',
          x: childCountX,
          y: childCountY,
          radius: 6,
          cursor: 'pointer',
        },
        name: 'child-count-rect-shape',
      })
      group.addShape('text', {
        attrs: {
          text: `${children.length}`,
          fill: 'rgba(0, 0, 0, .65)',
          x: childCountX + 11,
          y: childCountY + 12,
          fontSize: 10,
          width: 22,
          textAlign: 'center',
          cursor: 'pointer',
        },
        name: 'child-count-text-shape'
      })
    }

    return keyShape
  }
})

G6.registerEdge('smooth', {
  draw(cfg, group) {
    const { startPoint, endPoint } = cfg
    const hgap = Math.abs(endPoint.x - startPoint.x)

    const path = [
      ['M', startPoint.x, startPoint.y],
      [
        'C',
        startPoint.x + hgap / 4,
        startPoint.y,
        endPoint.x - hgap / 2,
        endPoint.y,
        endPoint.x,
        endPoint.y,
      ],
    ]

    const shape = group.addShape('path', {
      attrs: {
        stroke: '#AAB7C4',
        path,
      {
        tagName: 'text',
        selector: 'name-text',
      },
      name: 'smooth-path-shape',
    })
    return shape
    ],
    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,
)

G6.registerBehavior('click-item', {
  getEvents() {
    return {
      'node:click': 'onNodeClick',
      'canvas:click': 'onCanvasClick'
Graph.registerNode(
  'mk-rect',
  {
    inherit: 'rect',
    width: 100,
    height: 32,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    }
  },
  onNodeClick(e) {
    const { item } = e
    let model = item.getModel()
  true
)

    if (model.children) return
    // 选中节点
    this.graph.getNodes().forEach(node => {
      let _model = node.get('model')
      if (_model.selected) {
        _model.selected = false
        this.graph.updateItem(node, _model, false)
Graph.registerNode(
  'mk-polygon',
  {
    inherit: 'polygon',
    width: 100,
    height: 32,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    })

    model.selected = true
    this.graph.updateItem(item, model, false)

    return
    }
  },
  onCanvasClick(e) {
    this.graph.getNodes().forEach(node => {
      let _model = node.get('model')
      if (_model.selected) {
        _model.selected = false
        this.graph.updateItem(node, _model, false)
      }
    })
  }
})
  true
)

class antvG6Chart extends Component {
Graph.registerNode(
  'mk-circle',
  {
    inherit: 'circle',
    width: 40,
    height: 40,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    }
  },
  true
)

Graph.registerNode(
  'mk-ellipse',
  {
    inherit: 'ellipse',
    width: 100,
    height: 32,
    attrs: {
      body: {
        strokeWidth: 1,
        stroke: '#000000',
        fill: '#FFFFFF'
      },
      text: {
        fontSize: 12,
        fill: '#262626'
      }
    }
  },
  true
)

Graph.registerNode(
  'mk-star',
  {
    inherit: 'polygon',
    width: 40,
    height: 40,
    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'
      }
    }
  },
  true
)

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

class antvX6Chart extends Component {
  static propTpyes = {
    card: PropTypes.object,
    updateConfig: PropTypes.func,
@@ -949,8 +199,7 @@
  }

  state = {
    card: null,
    eventListener: null
    card: null
  }

  UNSAFE_componentWillMount () {
@@ -959,9 +208,20 @@
    if (card.isNew) {
      let _plot = {
        width: card.width || 24,
        height: 400,
        height: 500,
        subtype: card.subtype,
        name: card.name
        name: card.name,
        grid: {
          visible: true,
          type: 'dot',
          args: {
            color: '#a0a0a0',
            thickness: 1
          }
        },
        gridType: 'dot',
        function: 'show',
        supModule: []
      }

      let _card = {
@@ -973,7 +233,7 @@
        width: _plot.width,
        name: _plot.name,
        subtype: card.subtype,
        setting: { interType: 'system' },
        setting: { interType: '' },
        style: {
          borderWidth: '1px', borderColor: 'rgb(217, 217, 217)',
          marginLeft: '8px', marginRight: '8px', marginTop: '8px', marginBottom: '8px'
@@ -986,32 +246,12 @@
        plot: _plot,
      }

      if (card.config) {
        let config = fromJS(card.config).toJS()

        _card.plot = config.plot
        _card.plot.name = card.name
        _card.style = config.style
        _card.headerStyle = config.headerStyle

        _card.setting = config.setting
        _card.columns = config.columns
        _card.scripts = config.scripts
      }

      this.updateComponent(_card)
    } else {
      this.setState({
        card: fromJS(card).toJS()
      })
    }
  }

  componentDidMount () {
    MKEmitter.addListener('tabsChange', this.handleTabsChange)
    setTimeout(() => {
      this.viewrender()
    }, 1000)
  }

  shouldComponentUpdate (nextProps, nextState) {
@@ -1025,349 +265,145 @@
    this.setState = () => {
      return
    }
    MKEmitter.removeListener('tabsChange', this.handleTabsChange)
  }

  handleTabsChange = (parentId) => {
  componentDidMount () {
    setTimeout(() => {
      this.viewrender()
    }, 1000)
  }

  plotchange = (res) => {
    const { card } = this.state

    if (parentId.indexOf(card.uuid) > -1 || parentId === 'all') {
      let _element = document.getElementById(card.uuid + 'canvas')
    if (
      card.plot.subtype !== res.plot.subtype ||
      (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) {
        _element.innerHTML = ''
      }

      this.$timer && clearTimeout(this.$timer)
      this.$timer = setTimeout(this.viewrender, 100)
    }
  }

  getdata = () => {
    const { card } = this.state

    const setData = (list) => {
      let item = {
        label: list[0],
        id: list[0],
        children: []
      }
      if (!list[1]) {
        delete item.children

        return item
      } else if (!Array.isArray(list[1])) {
        return list.map(m => ({label: m, id: m}))
      }

      for (let i = 1; i < list.length; i++) {
        let cell = setData(list[i])

        if (Array.isArray(cell)) {
          item.children.push(...cell)
        } else {
          item.children.push(cell)
        }
      }
  
      return item
      setTimeout(() => {
        this.viewrender()
      }, 50)
    }

    let data = setData(MindData)

    if (card.plot.subtype === 'mindmap') {
      if (card.plot.dirField) {
        data.children[0].direction = 'left'
        data.children[2].direction = 'left'
      }
  
      data.children.forEach(item => {
        if (item.direction === 'left') {
          item.color = card.plot.leftColor || '#26C281'
        } else {
          item.direction = 'right'
          item.color = card.plot.nodeColor || '#1890ff'
        }
      })

      data.collapsed = false
      data.type = 'dice-mind-map-root'

      const collapse = (item) => {
        if (!item.children) return

        item.children.forEach(cell => {
          cell.collapsed = card.plot.collapsed === 'true'
          cell.direction = cell.direction || 'right'
          cell.type = 'dice-mind-map-leaf'
          cell.color = cell.color || item.color
          collapse(cell)
        })
      }

      collapse(data)
    } else if (card.plot.subtype === 'indentTree') {
      data.isRoot = true
      data.collapsed = false

      data.children.forEach(item => {
        item.collapsed = card.plot.collapsed === 'true'
      })
    } else if (card.plot.subtype === 'kapmap') {
      data.isRoot = true
      data.collapsed = false

      if (card.plot.collapsed === 'true') {
        const collapse = (item) => {
          if (!item.children) return

          item.children.forEach(cell => {
            cell.collapsed = true
            collapse(cell)
          })
        }

        collapse(data)
      }
    }
    
    return data
    this.updateComponent(res)
  }

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

    if (card.plot.subtype === 'mindmap') {
      this.ponitrender()
    } else if (card.plot.subtype === 'indentTree') {
      this.indentrender()
    } else if (card.plot.subtype === 'kapmap') {
      this.kapmaprender()
    if (card.plot.subtype === 'xflow') {
      this.xflowrender()
    } else if (card.plot.subtype === 'lane') {
      this.lanerender()
    }
  }

  kapmaprender = () => {
  xflowrender = () => {
    const { card } = this.state
    const plot = card.plot
    const data = this.getdata()
    const height = getHeight(plot.height)

    const graph = new G6.TreeGraph({
      container: card.uuid + 'canvas',
      width: this.wrap.scrollWidth - 30,
      height: height,
      modes: {
        default: [
          {
            type: 'collapse-expand',
          },
          'drag-canvas',
          'zoom-canvas',
          'click-item'
        ],
    const graph = new Graph({
      container: document.getElementById(card.uuid + 'container'),
      grid: card.plot.grid,
      scaling: {
        min: 0.5,
        max: 2
      },
      defaultNode: {
        type: 'treeNode',
        anchorPoints: [
          [0, 0.5],
          [1, 0.5],
        ],
      autoResize: true,
      interacting: false,
      background: {
        color: card.plot.backgroundColor || 'transparent'
      },
      defaultEdge: {
        type: 'smooth',
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: 'ctrl'
      },
      layout: {
        type: 'compactBox',
        direction: 'LR',
        getId: function getId(d) {
          return d.id
        },
        getHeight: function getHeight() {
          return 16
        },
        getWidth: function getWidth(d) {
          const labelWidth = G6.Util.getTextSize(d.label, 12)[0]
          const width = 60 + labelWidth
          return width
        },
        getVGap: function getVGap() {
          return 15
        },
        getHGap: function getHGap() {
          return 30
        }
      }
    })

    graph.data(data)
    graph.render()
    graph.fitView()

    if (plot.collapsed === 'true') {
      graph.zoomTo(1, { x: 0, y: height / 2 })
    }
  }

  indentrender = () => {
    const { card } = this.state
    const plot = card.plot
    const data = this.getdata()

    const tree = new G6.TreeGraph({
      container: card.uuid + 'canvas',
      width: this.wrap.scrollWidth - 30,
      height: getHeight(plot.height),
      layout: {
        type: 'indented',
        direction: 'LR',
        isHorizontal: true,
        indent: 40,
        getHeight: (d) => {
          if (d.isRoot) {
            return 30
      connecting: {
        router: 'manhattan',
        connector: {
          name: 'rounded',
          args: {
            radius: 8
          }
          if (d.collapsed && d.children && d.children.length) {
            return 36
          }
          return 22
        },
        getVGap: () => {
          return 10
        },
      },
      defaultEdge: {
        type: 'indentedEdge',
        style: {
          lineWidth: 2,
          radius: 16
        anchor: 'center',
        connectionPoint: 'anchor',
        allowBlank: false,
        snap: {
          radius: 20
        }
      },
      minZoom: 0.5,
      modes: {
        default: [
          'drag-canvas',
          'wheel-scroll',
          'hover-node',
          'click-node'
        ]
      }
    })
    
    tree.on('afterrender', e => {
      tree.getEdges().forEach(edge => {
        const targetNode = edge.getTarget().getModel()
        const color = targetNode.branchColor
        tree.updateItem(edge, { color })
      })
      setTimeout(() => {
        tree.moveTo(32, 32)
        tree.zoomTo(0.7)
      }, 16)

    let cells = []
    xflows.forEach((item) => {
      if (item.shape === 'edge') {
        cells.push(graph.createEdge(item))
      } else {
        cells.push(graph.createNode(item))
      }
    })
    
    tree.data(dataIndTransform(data))
    
    tree.render()
    graph.resetCells(cells)
    graph.positionContent('center')
  }

  /**
   * @description 散点图
   */
  ponitrender = () => {
  lanerender = () => {
    const { card } = this.state
    const plot = card.plot
    const data = this.getdata()
    const width = this.wrap.scrollWidth - 30
    const height = getHeight(plot.height)
    let modes = ['drag-canvas', 'zoom-canvas', 'dice-mindmap']

    if (plot.collapsed === 'true') {
      modes = [{ type: 'collapse-expand' },'drag-canvas', 'zoom-canvas', 'dice-mindmap']
    }

    const tree = new G6.TreeGraph({
      container: card.uuid + 'canvas',
      width: width,
      height: height,
      fitView: true,
      layout: {
        type: 'mindmap',
        direction: 'H',
        getHeight: () => {
          return 16
        },
        getWidth: (node) => {
          return node.level === 0 ?
            Util.getTextSize(node.label, 16)[0] + 12 :
            Util.getTextSize(node.label, 12)[0]
        },
        getVGap: () => {
          return 10
        },
        getHGap: () => {
          return 60
        },
        getSide: (node) => {
          return node.data.direction
        }
    const graph = new Graph({
      container: document.getElementById(card.uuid + 'container'),
      scaling: {
        min: 0.5,
        max: 2
      },
      defaultEdge: {
        type: 'cubic-horizontal',
        style: {
          lineWidth: 2
        }
      autoResize: true,
      interacting: false,
      background: { color: '#ffffff' },
      mousewheel: {
        enabled: true,
        zoomAtMousePosition: true,
        modifiers: 'ctrl'
      },
      minZoom: 0.5,
      modes: {
        default: modes
      connecting: {
        router: 'manhattan',
        connector: {
          name: 'rounded',
          args: {
            radius: 8
          }
        },
        anchor: 'center',
        connectionPoint: 'anchor',
        allowBlank: false,
        snap: {
          radius: 20
        }
      }
    })

    tree.data(data)
    
    tree.render()

    if (plot.collapsed === 'true' && plot.dirField) {
      tree.zoomTo(1, { x: width / 2, y: height / 2 })
    } else if (plot.collapsed === 'true') {
      tree.zoomTo(1, { x: 0, y: height / 2 })
    }
    let cells = []
    lanes.forEach((item) => {
      if (item.shape === 'edge') {
        cells.push(graph.createEdge(item))
      } else {
        cells.push(graph.createNode(item))
      }
    })
    graph.resetCells(cells)
    graph.positionContent('top')
  }

  updateComponent = (card) => {
    if (this.state.card && (!is(fromJS(card.plot), fromJS(this.state.card.plot)) || !is(fromJS(card.style), fromJS(this.state.card.style)))) {
      let _element = document.getElementById(card.uuid + 'canvas')
      if (_element) {
        _element.innerHTML = ''
      }
      this.$timer && clearTimeout(this.$timer)
      this.$timer = setTimeout(() => {
        this.viewrender()
      }, 150)
    }

    card.width = card.plot.width
    card.name = card.plot.name
    card.subtype = card.plot.subtype
    
    card.$c_ds = true
    card.errors = checkComponent(card)

    if (card.errors.length === 0) {
      card.$tables = getTables(card)
    }
    
    if (!card.plot.valueField) {
      card.errors.push({ level: 0, detail: '图表信息尚未设置！'})
    } else {
      let columns = card.columns.map(c => c.field)
      if (!columns.includes(card.plot.valueField)) {
        card.errors.push({ level: 0, detail: '值字段在字段集中不存在'})
      } else if (!columns.includes(card.plot.labelField)) {
        card.errors.push({ level: 0, detail: '文本字段在字段集中不存在'})
      } else if (!columns.includes(card.plot.parentField)) {
        card.errors.push({ level: 0, detail: '上级字段在字段集中不存在'})
      }
    }
    card.errors = []
    card.$tables = []

    this.setState({
      card: card
@@ -1404,41 +440,24 @@
    let _style = resetStyle(card.style)

    return (
      <div className="menu-scatter-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
      <div className="menu-x6-chart-edit-box" style={_style} onClick={this.clickComponent} id={card.uuid}>
        <Popover overlayClassName="mk-popover-control-wrap" mouseLeaveDelay={0.2} mouseEnterDelay={0.2} content={
          <div className="mk-popover-control">
            <ChartCompileForm config={card} plotchange={this.updateComponent}/>
            <CopyComponent type="antvG6" card={card}/>
            <ChartCompileForm config={card} plotchange={this.plotchange}/>
            <CopyComponent type="antvX6" card={card}/>
            <FontColorsOutlined className="style" title="调整样式" onClick={this.changeStyle}/>
            <UserComponent config={card}/>
            <DeleteOutlined className="close" title="delete" onClick={() => this.props.deletecomponent(card.uuid)}/>
            <SettingComponent config={card} updateConfig={this.updateComponent}/>
          </div>
        } trigger="hover">
          <ToolOutlined/>
        </Popover>
        <NormalHeader config={card} updateComponent={this.updateComponent}/>
        <div className="canvas" style={{minHeight: card.plot.height}} id={card.uuid + 'canvas'} ref={ref => this.wrap = ref}></div>
        <div className="canvas" style={{width: '100%', minHeight: card.plot.height, height: card.plot.height}} id={card.uuid + 'canvas'}>
          <div id={card.uuid + 'container'} className="mk-container"></div>
        </div>
        <div className="component-name">
          <div className="center">
            <div className="title" onDoubleClick={() => {
              let oInput = document.createElement('input')
              oInput.value = 'anchor' + card.uuid
              document.body.appendChild(oInput)
              oInput.select()
              document.execCommand('Copy')
              document.body.removeChild(oInput)
              message.success('复制成功。')
            }}>{card.name}</div>
            <div className="content">
              {card.errors && card.errors.map((err, index) => {
                if (err.level === 0) {
                  return <span key={index} className="error">{err.detail}</span>
                } else {
                  return <span key={index} className="waring">{err.detail}；</span>
                }
              })}
            </div>
            <div className="title">{card.name}</div>
          </div>
        </div>
      </div>
@@ -1446,4 +465,4 @@
  }
}

export default antvG6Chart
export default antvX6Chart