From 2a3629979d1bc6d0a6c90e481ac93eabd2bfefd1 Mon Sep 17 00:00:00 2001
From: king <18310653075@163.com>
Date: 星期四, 01 六月 2023 10:45:21 +0800
Subject: [PATCH] Merge branch 'master' into positec

---
 src/menu/components/chart/antv-X6/index.jsx | 1753 ++++++++++++++++-----------------------------------------
 1 files changed, 507 insertions(+), 1,246 deletions(-)

diff --git a/src/menu/components/chart/antv-X6/index.jsx b/src/menu/components/chart/antv-X6/index.jsx
index 985a6f5..885210e 100644
--- a/src/menu/components/chart/antv-X6/index.jsx
+++ b/src/menu/components/chart/antv-X6/index.jsx
@@ -1,947 +1,29 @@
 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, 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 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, getTables, checkComponent } from '@/utils/utils-custom.js'
 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锛岀粯鍒跺渾鐐瑰湪鑺傜偣姝d笅鏂�
-    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,
-      {
-        x: startPoint.x,
-        y: endPoint.y,
-      },
-      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',
-      },
-      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,
-      },
-      name: 'smooth-path-shape',
-    })
-    return shape
-  },
-})
-
-G6.registerBehavior('click-item', {
-  getEvents() {
-    return {
-      'node:click': 'onNodeClick',
-      'canvas:click': 'onCanvasClick'
-    }
-  },
-  onNodeClick(e) {
-    const { item } = e
-    let model = item.getModel()
-
-    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)
-      }
-    })
-
-    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)
-      }
-    })
-  }
-})
-
-class antvG6Chart extends Component {
+class antvX6Chart extends Component {
   static propTpyes = {
     card: PropTypes.object,
     updateConfig: PropTypes.func,
@@ -986,32 +68,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,311 +87,531 @@
     this.setState = () => {
       return
     }
-    MKEmitter.removeListener('tabsChange', this.handleTabsChange)
   }
 
-  handleTabsChange = (parentId) => {
-    const { card } = this.state
-
-    if (parentId.indexOf(card.uuid) > -1 || parentId === 'all') {
-      let _element = document.getElementById(card.uuid + 'canvas')
-      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
-    }
-
-    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
+  componentDidMount () {
+    setTimeout(() => {
+      this.viewrender()
+    }, 1000)
   }
 
   viewrender = () => {
-    const { card } = this.state
+    // 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') {
+    // if (card.plot.subtype === 'mindmap') {
+    //   this.ponitrender()
+    // } else if (card.plot.subtype === 'indentTree') {
+    //   this.indentrender()
+    // } else if (card.plot.subtype === 'kapmap') {
       this.kapmaprender()
-    }
+    // }
   }
 
   kapmaprender = () => {
     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',
+    preWork()
+
+    // #region 鍒濆鍖栫敾甯�
+    const graph = new Graph({
+      container: document.getElementById(card.uuid + 'container'),
+      grid: true,
+      mousewheel: {
+        enabled: true,
+        zoomAtMousePosition: true,
+        modifiers: 'ctrl',
+        minScale: 0.5,
+        maxScale: 3,
+      },
+      connecting: {
+        router: 'manhattan',
+        connector: {
+          name: 'rounded',
+          args: {
+            radius: 8,
           },
-          'drag-canvas',
-          'zoom-canvas',
-          'click-item'
-        ],
+        },
+        anchor: 'center',
+        connectionPoint: 'anchor',
+        allowBlank: false,
+        snap: {
+          radius: 20,
+        },
+        createEdge() {
+          return new Shape.Edge({
+            attrs: {
+              line: {
+                stroke: '#A2B1C3',
+                strokeWidth: 2,
+                targetMarker: {
+                  name: 'block',
+                  width: 12,
+                  height: 8,
+                },
+              },
+            },
+            zIndex: 0,
+          })
+        },
+        validateConnection({ targetMagnet }) {
+          return !!targetMagnet
+        },
       },
-      defaultNode: {
-        type: 'treeNode',
-        anchorPoints: [
-          [0, 0.5],
-          [1, 0.5],
-        ],
+      highlighting: {
+        magnetAdsorbed: {
+          name: 'stroke',
+          args: {
+            attrs: {
+              fill: '#5F95FF',
+              stroke: '#5F95FF',
+            },
+          },
+        },
       },
-      defaultEdge: {
-        type: 'smooth',
+    })
+    // #endregion
+
+    // #region 浣跨敤鎻掍欢
+    graph
+      .use(
+        new Transform({
+          resizing: true,
+          rotating: true,
+        }),
+      )
+      .use(
+        new Selection({
+          rubberband: true,
+          showNodeSelectionBox: true,
+        }),
+      )
+      .use(new Snapline())
+      .use(new Keyboard())
+      .use(new Clipboard())
+      .use(new History())
+    // #endregion
+
+    // #region 鍒濆鍖� stencil
+    const stencil = new Stencil({
+      title: '娴佺▼鍥�',
+      target: graph,
+      stencilGraphWidth: 200,
+      stencilGraphHeight: 180,
+      collapsable: true,
+      groups: [
+        {
+          title: '鍩虹娴佺▼鍥�',
+          name: 'group1',
+        },
+        {
+          title: '绯荤粺璁捐鍥�',
+          name: 'group2',
+          graphHeight: 250,
+          layoutOptions: {
+            rowHeight: 70,
+          },
+        },
+      ],
+      layoutOptions: {
+        columns: 2,
+        columnWidth: 80,
+        rowHeight: 55,
       },
-      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
-        }
+    })
+    document.getElementById('stencil').appendChild(stencil.container)
+    // #endregion
+
+    // #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()) {
+        const cells = graph.paste({ offset: 32 })
+        graph.cleanSelection()
+        graph.select(cells)
+      }
+      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
+    })
+
+    // select all
+    graph.bindKey(['meta+a', 'ctrl+a'], () => {
+      const nodes = graph.getNodes()
+      if (nodes) {
+        graph.select(nodes)
       }
     })
 
-    graph.data(data)
-    graph.render()
-    graph.fitView()
+    // delete
+    graph.bindKey('backspace', () => {
+      const cells = graph.getSelectedCells()
+      if (cells.length) {
+        graph.removeCells(cells)
+      }
+    })
 
-    if (plot.collapsed === 'true') {
-      graph.zoomTo(1, { x: 0, y: height / 2 })
+    // zoom
+    graph.bindKey(['ctrl+1', 'meta+1'], () => {
+      const zoom = graph.zoom()
+      if (zoom < 1.5) {
+        graph.zoom(0.1)
+      }
+    })
+    graph.bindKey(['ctrl+2', 'meta+2'], () => {
+      const zoom = graph.zoom()
+      if (zoom > 0.5) {
+        graph.zoom(-0.1)
+      }
+    })
+
+    // 鎺у埗杩炴帴妗╂樉绀�/闅愯棌
+    const showPorts = (ports, show) => {
+      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)
+    })
+    // #endregion
 
-  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
-          }
-          if (d.collapsed && d.children && d.children.length) {
-            return 36
-          }
-          return 22
+    // #region 鍒濆鍖栧浘褰�
+    const ports = {
+      groups: {
+        top: {
+          position: 'top',
+          attrs: {
+            circle: {
+              r: 4,
+              magnet: true,
+              stroke: '#5F95FF',
+              strokeWidth: 1,
+              fill: '#fff',
+              style: {
+                visibility: 'hidden',
+              },
+            },
+          },
         },
-        getVGap: () => {
-          return 10
+        right: {
+          position: 'right',
+          attrs: {
+            circle: {
+              r: 4,
+              magnet: true,
+              stroke: '#5F95FF',
+              strokeWidth: 1,
+              fill: '#fff',
+              style: {
+                visibility: 'hidden',
+              },
+            },
+          },
+        },
+        bottom: {
+          position: 'bottom',
+          attrs: {
+            circle: {
+              r: 4,
+              magnet: true,
+              stroke: '#5F95FF',
+              strokeWidth: 1,
+              fill: '#fff',
+              style: {
+                visibility: 'hidden',
+              },
+            },
+          },
+        },
+        left: {
+          position: 'left',
+          attrs: {
+            circle: {
+              r: 4,
+              magnet: true,
+              stroke: '#5F95FF',
+              strokeWidth: 1,
+              fill: '#fff',
+              style: {
+                visibility: 'hidden',
+              },
+            },
+          },
         },
       },
-      defaultEdge: {
-        type: 'indentedEdge',
-        style: {
-          lineWidth: 2,
-          radius: 16
-        }
-      },
-      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)
-    })
-    
-    tree.data(dataIndTransform(data))
-    
-    tree.render()
-  }
-
-  /**
-   * @description 鏁g偣鍥�
-   */
-  ponitrender = () => {
-    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']
+      items: [
+        {
+          group: 'top',
+        },
+        {
+          group: 'right',
+        },
+        {
+          group: 'bottom',
+        },
+        {
+          group: 'left',
+        },
+      ],
     }
 
-    const tree = new G6.TreeGraph({
-      container: card.uuid + 'canvas',
-      width: width,
-      height: height,
-      fitView: true,
-      layout: {
-        type: 'mindmap',
-        direction: 'H',
-        getHeight: () => {
-          return 16
+    Graph.registerNode(
+      'custom-rect',
+      {
+        inherit: 'rect',
+        width: 66,
+        height: 36,
+        attrs: {
+          body: {
+            strokeWidth: 1,
+            stroke: '#5F95FF',
+            fill: '#EFF4FF',
+          },
+          text: {
+            fontSize: 12,
+            fill: '#262626',
+          },
         },
-        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
-        }
+        ports: { ...ports },
       },
-      defaultEdge: {
-        type: 'cubic-horizontal',
-        style: {
-          lineWidth: 2
-        }
+      true,
+    )
+
+    Graph.registerNode(
+      'custom-polygon',
+      {
+        inherit: 'polygon',
+        width: 66,
+        height: 36,
+        attrs: {
+          body: {
+            strokeWidth: 1,
+            stroke: '#5F95FF',
+            fill: '#EFF4FF',
+          },
+          text: {
+            fontSize: 12,
+            fill: '#262626',
+          },
+        },
+        ports: {
+          ...ports,
+          items: [
+            {
+              group: 'top',
+            },
+            {
+              group: 'bottom',
+            },
+          ],
+        },
       },
-      minZoom: 0.5,
-      modes: {
-        default: modes
-      }
+      true,
+    )
+
+    Graph.registerNode(
+      'custom-circle',
+      {
+        inherit: 'circle',
+        width: 45,
+        height: 45,
+        attrs: {
+          body: {
+            strokeWidth: 1,
+            stroke: '#5F95FF',
+            fill: '#EFF4FF',
+          },
+          text: {
+            fontSize: 12,
+            fill: '#262626',
+          },
+        },
+        ports: { ...ports },
+      },
+      true,
+    )
+
+    Graph.registerNode(
+      'custom-image',
+      {
+        inherit: 'rect',
+        width: 52,
+        height: 52,
+        markup: [
+          {
+            tagName: 'rect',
+            selector: 'body',
+          },
+          {
+            tagName: 'image',
+          },
+          {
+            tagName: 'text',
+            selector: 'label',
+          },
+        ],
+        attrs: {
+          body: {
+            stroke: '#5F95FF',
+            fill: '#5F95FF',
+          },
+          image: {
+            width: 26,
+            height: 26,
+            refX: 13,
+            refY: 16,
+          },
+          label: {
+            refX: 3,
+            refY: 2,
+            textAnchor: 'left',
+            textVerticalAnchor: 'top',
+            fontSize: 12,
+            fill: '#fff',
+          },
+        },
+        ports: { ...ports },
+      },
+      true,
+    )
+
+    const r1 = graph.createNode({
+      shape: 'custom-rect',
+      label: '寮�濮�',
+      attrs: {
+        body: {
+          rx: 20,
+          ry: 26,
+        },
+      },
     })
+    const r2 = graph.createNode({
+      shape: 'custom-rect',
+      label: '杩囩▼',
+    })
+    const r3 = graph.createNode({
+      shape: 'custom-rect',
+      attrs: {
+        body: {
+          rx: 6,
+          ry: 6,
+        },
+      },
+      label: '鍙�夎繃绋�',
+    })
+    const r4 = graph.createNode({
+      shape: 'custom-polygon',
+      attrs: {
+        body: {
+          refPoints: '0,10 10,0 20,10 10,20',
+        },
+      },
+      label: '鍐崇瓥',
+    })
+    const r5 = graph.createNode({
+      shape: 'custom-polygon',
+      attrs: {
+        body: {
+          refPoints: '10,0 40,0 30,20 0,20',
+        },
+      },
+      label: '鏁版嵁',
+    })
+    const r6 = graph.createNode({
+      shape: 'custom-circle',
+      label: '杩炴帴',
+    })
+    stencil.load([r1, r2, r3, r4, r5, r6], 'group1')
 
-    tree.data(data)
-    
-    tree.render()
+    const imageShapes = [
+      {
+        label: 'Client',
+        image:
+          'https://gw.alipayobjects.com/zos/bmw-prod/687b6cb9-4b97-42a6-96d0-34b3099133ac.svg',
+      },
+      {
+        label: 'Http',
+        image:
+          'https://gw.alipayobjects.com/zos/bmw-prod/dc1ced06-417d-466f-927b-b4a4d3265791.svg',
+      },
+      {
+        label: 'Api',
+        image:
+          'https://gw.alipayobjects.com/zos/bmw-prod/c55d7ae1-8d20-4585-bd8f-ca23653a4489.svg',
+      },
+      {
+        label: 'Sql',
+        image:
+          'https://gw.alipayobjects.com/zos/bmw-prod/6eb71764-18ed-4149-b868-53ad1542c405.svg',
+      },
+      {
+        label: 'Clound',
+        image:
+          'https://gw.alipayobjects.com/zos/bmw-prod/c36fe7cb-dc24-4854-aeb5-88d8dc36d52e.svg',
+      },
+      {
+        label: 'Mq',
+        image:
+          'https://gw.alipayobjects.com/zos/bmw-prod/2010ac9f-40e7-49d4-8c4a-4fcf2f83033b.svg',
+      },
+    ]
+    const imageNodes = imageShapes.map((item) =>
+      graph.createNode({
+        shape: 'custom-image',
+        label: item.label,
+        attrs: {
+          image: {
+            'xlink:href': item.image,
+          },
+        },
+      }),
+    )
+    stencil.load(imageNodes, 'group2')
+    // #endregion
 
-    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 })
+    function preWork() {
+      // 杩欓噷鍗忓姪婕旂ず鐨勪唬鐮侊紝鍦ㄥ疄闄呴」鐩腑鏍规嵁瀹為檯鎯呭喌杩涜璋冩暣
+      const container = document.getElementById(card.uuid + 'canvas')
+      const stencilContainer = document.createElement('div')
+      stencilContainer.id = 'stencil'
+      stencilContainer.classList.add('mk-stencil')
+      const graphContainer = document.createElement('div')
+      graphContainer.id = card.uuid + 'container'
+      graphContainer.classList.add('mk-container')
+      container.appendChild(stencilContainer)
+      container.appendChild(graphContainer)
     }
   }
 
@@ -1354,19 +636,6 @@
 
     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: '涓婄骇瀛楁鍦ㄥ瓧娈甸泦涓笉瀛樺湪'})
-      }
     }
 
     this.setState({
@@ -1410,7 +679,6 @@
             <ChartCompileForm config={card} plotchange={this.updateComponent}/>
             <CopyComponent type="antvG6" 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>
@@ -1418,18 +686,11 @@
           <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>
         <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="title">{card.name}</div>
             <div className="content">
               {card.errors && card.errors.map((err, index) => {
                 if (err.level === 0) {
@@ -1446,4 +707,4 @@
   }
 }
 
-export default antvG6Chart
\ No newline at end of file
+export default antvX6Chart
\ No newline at end of file

--
Gitblit v1.8.0