自定义Combo如果不继承rect，其update方法要怎么更新其大小？

[qdonglu]

问题描述

首先，使用的是默认的rect combo，但是连线无法正确指向combo的中心，也没办法指向上下端边界。考虑自定义combo，但是不知道update方法要怎么更新其大小？

重现链接

https://codesandbox.io/p/sandbox/antv-g6-combo-layout-ljhql9?file=%2Findex.js%3A299%2C30

重现步骤

无

预期行为

连线能正常指向combo的中心；或者自定义combo的update实现设置尺寸。

平台

• 操作系统: [macOS, Windows, Linux, React Native ...]
• 网页浏览器: [Google Chrome, Safari, Firefox]
• G6 版本: [4.5.1 ... ]

屏幕截图或视频（可选）

No response

补充说明（可选）

No response

[dosubot]

To customize your combo in G6 and address the issue with connection points not correctly pointing to the combo's center or edges, you can adjust the anchor property within the RectComboStyleProps. For example, to make connections point to the top center of the combo, you can set the anchor to [0.5, 0], and for the bottom center, to [0.5, 1]. This adjustment can be made dynamically based on the combo's state or other conditions by modifying relevant methods, such as drawKeyShape, to change the anchor property accordingly.

For updating the combo's size using the update method, ensure that the attributes passed to this method include the new width and height values. Here's a simplified example of how you might implement this:

// Example method to update combo size
updateComboSize(comboId: string, newSize: { width: number; height: number }) {
  const combo = this.findById(comboId); // Find the combo by ID
  if (combo) {
    combo.update({
      ...combo.getAttributes(), // Get current attributes
      width: newSize.width,
      height: newSize.height,
    });
  }
}

This approach assumes you have a way to find a combo by its ID and directly update its attributes. The actual implementation may vary based on the full capabilities of G6's RectCombo and its parent classes. For more detailed guidance, refer to the G6 documentation or source code, as the exact syntax and parameters for the update method might differ.

If you encounter any further questions or need additional clarification, feel free to ask.

Sources

• 是否有方法更新combo的大小（不是固定大小fixSize）
• packages/g6/src/elements/combos/rect.ts
• packages/g6/src/utils/id.ts

About Dosu

This response is meant to be useful and save you time. It is not meant to be a precise solution, but rather a starting point for your own research.

Help me be more useful! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

If you want to continue the conversation, start your reply with @dosu-bot.