[Bug]: 关于combo折叠后的线条长度问题 #6946

Describe the bug / 问题描述

我正在使用g6的antv-dagre布局绘制图形,同时将过长的数据使用combo组合起来方便折叠查看,但是折叠后线条的长度并没发生变化, layout了也是一样 这是为什么? 我该如何修改线条的长度呢?

展开

折叠

源码

<script setup>
import {onMounted, render} from "vue";
import {Circle, Path} from '@antv/g';
import {CircleCombo, ExtensionCategory, Graph, GraphEvent, register} from "@antv/g6";
import {getNodes} from './initNodes.js';
import {getEdges} from "@/initEdges.js";
import {getCombos} from "@/initCombos.js";

const collapse = (x, y, r) => {
  return [
    ['M', x - r, y],
    ['a', r, r, 0, 1, 0, r * 2, 0],
    ['a', r, r, 0, 1, 0, -r * 2, 0],
    ['M', x - r + 4, y],
    ['L', x + r - 4, y],
  ];
};

const expand = (x, y, r) => {
  return [
    ['M', x - r, y],
    ['a', r, r, 0, 1, 0, r * 2, 0],
    ['a', r, r, 0, 1, 0, -r * 2, 0],
    ['M', x - r + 4, y],
    ['L', x - r + 2 * r - 4, y],
    ['M', x - r + r, y - r + 4],
    ['L', x, y + r - 4],
  ];
};


class CircleComboWithExtraButton extends CircleCombo {
  render(attributes, container) {
    attributes.type = "rect";
    super.render(attributes, container);
    this.drawButton(attributes);
  }

  drawButton(attributes) {
    const { collapsed } = attributes;
    const [, height] = this.getKeySize(attributes);
    const btnR = 8;
    const y = height / 2 + btnR;
    const d = collapsed ? expand(0, y, btnR) : collapse(0, y, btnR);

    const hitArea = this.upsert('hit-area', Circle, { cy: y, r: 10, fill: '#fff', cursor: 'pointer' }, this);
    this.upsert('button', Path, { stroke: '#3d81f7', d, cursor: 'pointer' }, hitArea);
  }

  onCreate() {
    this.shapeMap['hit-area'].addEventListener('click', async () => {
      const id = this.id;
      const collapsed = !this.attributes.collapsed;
      const { graph } = this.context;
      if (collapsed) {
        await graph.collapseElement(id);
      }
      else {
        await graph.expandElement(id);
      }
    });
  }


}

register(ExtensionCategory.COMBO, 'circle-combo-with-extra-button', CircleComboWithExtraButton);
onMounted(() => {
  const graph = new Graph({
    container: document.getElementById("container"),
    //renderer: () => new Renderer(),
    animation: false,
    enableOptimize: true,
    data: {
      nodes: getNodes(),
      edges: getEdges(),
      combos: getCombos(),
    },
    autoResize: true,
    layout: [
      {
        type: 'antv-dagre',
        rankdir: 'LR',
        align: 'UL',
        controlPoints: true,
        nodesep: 25,
        ranksep: 35,
        sortByCombo: true,
      },
    ],
    autoFit: 'view',
    combo: {
      type: 'circle-combo-with-extra-button',
    },
    behaviors: ['level-of-detail', 'zoom-canvas', 'drag-canvas',  'optimize-viewport-transform'],
  });


  graph.once(GraphEvent.AFTER_RENDER, () => {
   graph.getComboData()?.forEach(async (combo) => await graph.collapseElement(combo?.id));
  });

  graph.render();


});
</script>

<template>
  <div id="container" style="height: 100vh"></div>
</template>

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

Version / 版本

5.0.44

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他