在多层combo结构的图里，自定义layout无法获取正确的combo size #4729

问题描述

您好~我想实现一个自定义layout：根据用户与combo的交互（expand/collapse）动态获取所有combo的状态、位置与size，然后在自定义layout的execute()或layout(data)计算并设置combo的 [x, y]。但我在计算combo位置时发现self.nodes.size并非combo实际渲染的宽高，导致自定义layout下combo的位置与预期不符。

自定义layout原本预期： 所有最外层的combo里，先检查每个combo是否collapsed——

1. collapsed combo先横向排布
2. expanded combo均向右平移nodeWidth / 2，所有combo应该向左对齐
3. 每次用户expand/collapse combo，触发当前layout重新计算

然而渲染出的结果并不符合预期，而且有overlap，证明execute()获取的self.nodes.size并不准确。 如果双击collapse一个最外层combo，会发现self.nodes.size并不是collapsed后的size（即使combo.collapsed=true）

我的问题是：该如何获取combo最新的正确size？尤其是在用户expand/collapse combo之后

非常感谢！:)

codesandbox示例的layout config如下:

    layout: {
      type: "comboCombined",
      innerLayout: new G6.Layout.grid({}),
      outerLayout: new G6.Layout["custom-layout"]({})
    }

自定义layout代码如下:

    G6.registerLayout("custom-layout", {
      execute() {
        const self = this;
        const { nodes } = self;

        const collapsedCombos = [];
        const expandedCombos = [];

        nodes.forEach((node) => {
          const { itemType, collapsed } = node;

          if (itemType === "combo" && !collapsed) {
            expandedCombos.push(node);
          } else {
            collapsedCombos.push(node);
          }
        });

        // 1. position collapsed combos first, top aligned
        collapsedCombos.forEach((combo, i) => {
          let comboW = combo.size[0];

          combo.x = comboW / 2 + i * comboW;
          combo.y = -200;
        });

        // 2. position expanded combos, left aligned
        let prevHeight = 0;
        expandedCombos.forEach((combo, i) => {
          let comboW = combo.size[0];
          let comboH = combo.size[1];

          combo.x = comboW / 2;
          combo.y = prevHeight + comboH / 2;

          prevHeight += comboH;
        });
      }
    });

重现链接

https://codesandbox.io/s/sample-map-mngv57?file=/src/CloudMapConfig.ts

重现步骤

1. 初始化graph，自定义layout渲染的结果并不符合预期
2. 或者双击collapse一个最外层combo，layout并未根据combo最新的状态(expand/collapse)更新

预期行为

在执行自定义layout计算combo位置时，每次都能获取combo最新的正确size（width与height）

平台

• 操作系统: [macOS, React 18]
• 网页浏览器: [Google Chrome]
• G6 版本: [4.8.17]

屏幕截图或视频（可选）

初始状态 <img width="709" alt="Screen Shot 2023-07-11 at 12 59 35 PM" src="https://github.com/antvis/G6/assets/7640361/940b4b9a-5cab-425e-8966-d8bf5ad19223">

有collapsed combo的情况 <img width="695" alt="Screen Shot 2023-07-11 at 12 56 30 PM" src="https://github.com/antvis/G6/assets/7640361/f66abcfd-39c6-463c-aec7-bff7bcd3c57c">

补充说明（可选）

No response