急：当节点收起的时候，如何计算画布的宽高，滚动条自动伸缩 #4532

问题描述

当节点收起的时候，如何计算画布的宽高，滚动条自动伸缩，节点超级多，展示成一颗从左至右的树 const initDrag = () => { G6.registerNode( 'icon-node', { draw(cfg: any, group) { const t: any = this const styles = t.getShapeStyle(cfg) const { labelCfg = {} } = cfg

        const w = styles.width
        const h = styles.height

        const keyShape = group.addShape('rect', {
          attrs: {
            ...styles,
            x: -w / 2,
            y: -h / 2,
            fill:
              cfg.status == 1
                ? '#52c41a'
                : cfg.status == 2
                ? '#5f95ff'
                : '#808080'
          }
        })
        if (cfg.name) {
          group.addShape('text', {
            attrs: {
              ...labelCfg.style,
              text:
                cfg.name.split('&')[0].length > 8
                  ? cfg.name.substring(0, 8) + '...'
                  : cfg.name.split('&')[0],
              y: cfg.name.indexOf('&') >= 0 ? -10 : 0,
              textAlign: 'center',
              textBaseline: 'middle'
            }
          })
          group.addShape('text', {
            attrs: {
              ...labelCfg.style,
              text: cfg.name.split('&')[1],
              y: 22,
              textAlign: 'center'
            }
          })
          if (cfg.children && cfg.children.length) {
            group.addShape('rect', {
              attrs: {
                x: 72,
                y: -10,
                width: 16,
                height: 16,
                stroke: 'rgba(0, 0, 0, 0.25)',
                cursor: 'pointer',
                fill: '#fff',
                radius: 8
              },
              name: 'collapse-back',
              modelId: cfg.id
            })
            group.addShape('text', {
              attrs: {
                x: 80,
                y: 0,
                textAlign: 'center',
                textBaseline: 'middle',
                text: cfg.collapsed ? '+' : '-',
                fontSize: 20,
                cursor: 'pointer',
                fill: 'rgba(0, 0, 0, 0.25)'
              },
              name: 'collapse-text',
              modelId: cfg.id
            })
          }
        }
        return keyShape
      }
    },
    'rect'
  )

  const defaultNodeStyle = {
    radius: 4
  }
  const tooltip = new G6.Tooltip({
    // offsetX: 20,
    // offsetY: 30,
    // 允许出现 tooltip 的 item 类型
    itemTypes: ['node'],
    // 自定义 tooltip 内容
    getContent: (e: any) => {
      const outDiv = document.createElement('div')
      const nodeName = e.item?.getModel().name
      outDiv.innerHTML = `${nodeName.split('&')[0]}`
      return outDiv
    }
  })
  // const minimap = new G6.Minimap({
  //   size: [200, 100],
  //   type: 'delegate'
  // })
  const container = document.getElementById('drag') as any
  // const scrollWidth = container.scrollWidth - 8
  // const scrollHeight = container.scrollHeight * 40 || 500
  graph.value = new G6.TreeGraph({
    container: document.getElementById('drag') as string | HTMLElement,
    width: container.scrollWidth - 8,
    height: container.scrollHeight * 40 || 500,
    linkCenter: true,
    plugins: [tooltip],
    // fitView: true,
    // fitViewPadding: [20, 40, 50, 20],
    modes: {
      default: [
        // 添加节点展开收起
        {
          type: 'collapse-expand',
          onChange: (item: any, collapsed: any) => {
            const data = item.get('model')
            graph.value.updateItem(item, {
              collapsed
            })
            data.collapsed = collapsed
            return true
          }
        },
        'drag-canvas'
        // 'zoom-canvas'
      ]
    }, // 是否可以缩放
    defaultNode: {
      type: 'icon-node',
      size: [160, 60],
      style: defaultNodeStyle,
      labelCfg: {
        style: {
          fill: '#fff',
          fontSize: 16
        }
      }
    },
    defaultEdge: {
      type: 'cubic-horizontal', // 线的展示方式
      style: {
        stroke: '#a2b1c3'
      }
    },
    layout: {
      type: 'indented',
      direction: 'LR',
      dropCap: false,
      indent: 300,
      getHeight: function getHeight() {
        return 36
      }
    }
  })
  graph.value.data(nodeStatusList.value)
  graph.value.on('afterlayout', () => {
    const box = graph.value.getGroup().getCanvasBBox()
    graph.value.changeSize(box.width, box.height)
  })
  graph.value.render()
  graph.value.fitView()
}

重现链接

没有链接

重现步骤

graph.value.on('afterlayout', () => { const box = graph.value.getGroup().getCanvasBBox() graph.value.changeSize(box.width, box.height) }) 写了这个代码，但是渲染完毕时，点第一层节点 ，滚动条就不会变化 如果点最后一层节点，在点倒数第二层节点，这样一层一层点过来的话，画布的高度还是重新计算了，但是也不是特别准，当我滚动条滑到最后的时候是空白的，那个高度计算的不准确

预期行为

节点展开收缩的高度始终是画布的高度

平台

fdfdf

屏幕截图或视频（可选）

一层一层收起来的时候，滚动条是发生变化了，但是还是计算的不是很准

收到最后一个节点时候，滚动条也 不会发生变化

补充说明（可选）

另外tooltip的显示也有点问题，只有在第一屏渲染的节点可以显示tooltip，往下滑动一下滚动条，下面的节点就不显示tooltip了