remuneration/src/utils/antvG6.js

// import { Rect } from '@antv/g'
import {
  Badge,
  // idOf,
  CommonEvent,
  BaseBehavior,
  // BaseNode
  Circle
  // treeToGraphData
} from '@antv/g6'

/**
 * 自定义树结构展开/收起
 */
export class CollapseExpandTree extends BaseBehavior {
  constructor (context, options) {
    super(context, options)
    this.bindEvents()
  }

  update (options) {
    this.unbindEvents()
    super.update(options)
    this.bindEvents()
  }

  bindEvents () {
    const { graph } = this.context
    graph.on('collapse-expand', this.onCollapseExpand)
  }

  unbindEvents () {
    const { graph } = this.context
    graph.off('collapse-expand', this.onCollapseExpand)
  }

  status = 'idle';

  onCollapseExpand = async (event) => {
    this.status = 'busy'
    const { id, collapsed } = event
    const { graph } = this.context
    await graph.frontElement(id)
    if (collapsed) await graph.collapseElement(id)
    else await graph.expandElement(id)
    this.status = 'idle'
  }
}

export class MindMapNode extends Circle {
  static defaultStyleProps = {
    showBtn: true
  };

  constructor (options) {
    Object.assign(options.style, MindMapNode.defaultStyleProps)
    super(options)
  }

  // 获取子数据
  get childrenData () {
    // 调用上下文中的model对象的getChildrenData方法，传入当前对象的id，返回子数据
    return this.context.model.getChildrenData(this.id)
  }

  status = true

  drawCollapseShape (attributes, container) {
    // const iconStyle = this.getCollapseStyle(attributes)
    const nodes = this.context.graph.getNodeData(this.id)
    if (!nodes.children && !nodes.hasChildren) {
      return
    }
    const btn = this.upsert('collapse-expand', Badge, {
      backgroundFill: '#409EFF',
      backgroundHeight: 26,
      backgroundWidth: 26,
      lineHeight: 50,
      cursor: 'pointer',
      fill: '#fff',
      fontSize: 24,
      text: attributes.collapsed || nodes.hasChildren ? '+' : '-',
      textAlign: 'center',
      visibility: 'visible',
      x: 40,
      y: 0
    }, container)

    this.forwardEvent(btn, CommonEvent.CLICK, async (event) => {
      event.stopPropagation()
      if (!this.status) {
        return
      }
      const parent = this.context.graph.getNodeData(this.id)
      if (parent.hasChildren) {
        await this.addChildrenData(parent)
        return
      }
      this.status = false
      this.context.graph.emit('collapse-expand', {
        id: this.id,
        collapsed: !attributes.collapsed
      })
      setTimeout(() => {
        this.status = true
      }, 500)
    })
  }

  // 绘制标签形状
  drawTapShape (attributes, container) {
    const nodes = this.context.graph.getNodeData(this.id)
    const btn = this.upsert('status', Badge, {
      text: `${nodes.tag} [标注]`,
      fontSize: 14,
      textAlign: 'left',
      transform: [['translate', 90, 30]],
      padding: [10],
      fill: '#409EFF',
      zIndex: 5
    }, container)

    this.forwardEvent(btn, CommonEvent.CLICK, async (event) => {
      event.stopPropagation()
      nodes.editTag && nodes.editTag(nodes)
    })
  }

  async addChildrenData (parent) {
    this.status = false
    const { graph } = this.context
    // 展开关闭
    const data = await parent.getChildren(this.id)
    if (!data) {
      return
    }
    graph.addNodeData(data.nodes)
    graph.addEdgeData(data.edges)
    graph.updateNodeData([{
      id: this.id,
      hasChildren: false,
      children: [...data.nodes.map(e => e.id)]
    }])
    await graph.render()
    this.status = true
  }

  forwardEvent (target, type, listener) {
    if (target && !Reflect.has(target, '__bind__')) {
      Reflect.set(target, '__bind__', true)
      target.addEventListener(type, listener)
    }
  }

  render (attributes = this.parsedAttributes, container = this) {
    super.render(attributes, container)

    this.drawCollapseShape(attributes, container)
    this.drawTapShape(attributes, container)
  }
}