antv x6踩坑记录一

x6的配置啥的，这里就不赘诉了，可以去官网看antv x6官网地址，写得很详细，这里主要讲一下使用x6的过程中遇到的坑的问题，有的找到了解决办法，有的暂时没找到解决办法，如果哪位大佬有解决办法，愿意分享的话，十分感激！

1. MiniMap和Selection不能共用：这个问题我暂时没有找到解决办法。在使用小地图的时候，再在画布中框选了子节点并添加了群组节点，在群组没有收缩的时候是能够正常展示，但是群组收缩后再次打开就会导致整个页面崩溃。这里的建议是，值进行群组节点的增加，但是不建议给群组节点增加收缩功能
2. 增加群组节点并添加子节点的时候，群组节点内部是空白的：这里要说一下x6的渲染优先级，在fromJSON这个方法中，能识别的一个数组，数组中包含两个对象，edges和nodes，节点的渲染优先级是按照nodes数组中的节点来渲染的，就是说，如果群组节点在子节点后渲染，那么群组节点就是空的，所以这里需要做一下nodes数组排序，将群组节点放到子节点之前优先渲染，这样群组节点就不会出现空白了
3. 在项目中，遇到一个问题，就是在实例化x6的node节点的时候，出现了Class constructor Node cannot be invoked without 'new'这样的错误，意思是说new的父类和子类不在同一个地方，去网上搜索了很多答案，提示都是webpack配置错误，但是在我们这个项目中，去webpack导入了x6的依赖后，然后有出现7了一系列的其他问题，加之这个项目的webpack配置很久了（17年配置的，很多配置不能轻易改动），此外，在x6的官网去更改typescript的写法为JavaScript的写法，也会出现这个问题，最后选择的是一个绕开的方式去实现的
   官网实现的demo地址，功能就是群组节点继承node，然后拓展收缩功能
   本地绕开实现方式：参考x6的dag源码改造

import { minBy, maxBy, sortBy, fill } from 'lodash-es';
import { Graph, Node } from '@antv/x6'

export const GROUP_HORIZONTAL__PADDING = 24 // 分组横向 padding
export const GROUP_VERTICAL__PADDING = 40 // 分组纵向 padding
export const NODE_WIDTH = 180
export const NODE_HEIGHT = 32

// 根据群组节点的收缩状态及子节点，计算出节点群组的尺寸和位置
export function calcNodeScale(groupData, children,) {
  const { isCollapsed } = groupData
  const minX = minBy(children, 'position.x').position.x
  const minY = minBy(children, 'position.y').position.y
  const maxX = maxBy(children, 'position.x').position.x
  const maxY = maxBy(children, 'position.y').position.y
  const minW = minBy(children, 'size.width').size.width
  const minH = maxBy(children, 'size.height').size.height
  const maxW = maxBy(children, 'size.width').size.width
  const maxH = maxBy(children, 'size.height').size.height
  const defaultX = minX - GROUP_HORIZONTAL__PADDING
  const defaultY = minY - GROUP_VERTICAL__PADDING
  const defaultWidth = maxX - minX + 2 * GROUP_HORIZONTAL__PADDING + NODE_WIDTH
  if (isCollapsed) {
    return {
      x: defaultX + defaultWidth / 2 - NODE_WIDTH / 2,
      y: defaultY,
      width: NODE_WIDTH,
      height: NODE_HEIGHT,
    }
  }
  return {
    x: defaultX,
    y: defaultY,
    width: maxW + GROUP_VERTICAL__PADDING + (maxX - minX),
    height: maxY - minY + 2 * GROUP_VERTICAL__PADDING + NODE_HEIGHT,
  }
}
// 格式化单个群组，新增群组时复用
export function formatGroupInfoToNodeMeta(groupData, nodeDatas, edges) {
  const { id, isCollapsed, fill, stroke, name } = groupData;
  const includedNodes = nodeDatas.filter(
    (nodeMeta) => nodeMeta.groupId.toString() === id.toString()
  )
  const { x, y, width, height } = calcNodeScale(groupData, includedNodes)
    return {
      type: 'group',
      ...groupData,
      id: id.toString(),
      x,
      y,
      width,
      height,
      zIndex: 1,
      data: { ...groupData, type: 'group', includedNodes, id: id.toString() },
      ports: {
        items: portItems,
      },
    }
  }

  // 群组配置
  const config = getGroupConfig(name);
  return {
    type: 'group',
    ...groupData,
    id: id.toString(),
    x,
    y,
    width,
    height,
    ...config,
    zIndex: 1,
    data: { ...groupData, type: 'group', includedNodes, id: id.toString() },
  }
}

// 获取群组的配置
export function getGroupConfig(name) {
  return {
    markup: [
      {
        tagName: 'rect',
        selector: 'body',
      },
      {
        tagName: 'text',
        selector: 'label',
      },
      {
        tagName: 'g',
        selector: 'buttonGroup',
        children: [
          {
            tagName: 'rect',
            selector: 'button',
            attrs: {
              'pointer-events': 'visiblePainted',
            },
          },
          {
            tagName: 'path',
            selector: 'buttonSign',
            attrs: {
              fill: 'none',
              'pointer-events': 'none',
              d: 'M 2 5 8 5',
            },
          },
        ],
      },
    ],
    attrs: {
      body: {
        refWidth: '100%',
        refHeight: '100%',
        strokeWidth: 1,
        fill: "#fff",
        stroke: '#1890ff',
      },
      buttonGroup: {
        refX: 8,
        refY: 8,
      },
      button: {
        height: 14,
        width: 16,
        rx: 2,
        ry: 2,
        fill: '#f5f5f5',
        stroke: '#ccc',
        cursor: 'pointer',
        event: 'node:collapse',
      },
      buttonSign: {
        refX: 3,
        refY: 2,
        stroke: '#808080',
      },
      label: {
        fontSzie: 12,
        fill: '#000',
        refX: 60,
        refY: 16,
        text: name
      },
    },
  }
}