antvis/G6

Do you want to work on this issue?

You can request for a bounty in order to promote it!

[Bug]: Error: [G6 v5.0.43] Unknown element type of id: #6865

mianbing posted onGitHub

Describe the bug / 问题描述


// 配置可拖拽元素
// behaviors: ['drag-element'],

// 自定义六边形组合
export default class CircleComboWithExtraButton extends BaseCombo {
  protected getKeyStyle(attributes: Required<BaseComboStyleProps>) {
    const [width] = this.getKeySize(attributes);
    return { ...super.getKeyStyle(attributes), size: width };
  }

  // 实现 drawKeyShape 方法
  protected drawKeyShape(attributes: Required<BaseComboStyleProps>, container: any) {
    return this.upsert('Hexagon', Hexagon, this.getKeyStyle(attributes), container) as Hexagon;
  }
}

注册 -> 添加combo数据 -> render,之后拖拽Node元素没有问题,拖拽combo时,无法拖动,控制台报错 Error: [G6 v5.0.43] Unknown element type of id:


// 排查是 this.upsert 返回的元素没有id值,临时解决方案如下:
export default class CircleComboWithExtraButton extends BaseCombo {
  protected getKeyStyle(attributes: Required<BaseComboStyleProps>) {
    const [width] = this.getKeySize(attributes);
    return { ...super.getKeyStyle(attributes), size: width };
  }

  protected drawKeyShape(attributes: Required<BaseComboStyleProps>, container: any) {
     // 临时解决方案,将container的id,赋值给新的图形
     const customCombo = this.upsert('Hexagon', Hexagon, this.getKeyStyle(attributes), container) as Hexagon;
     customCombo.id = container.id
    return customCombo
  }
}

https://stackblitz.com/edit/react-wcozswdw?file=index.js

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

No response

Version / 版本

🆕 5.x

OS / 操作系统

  • macOS
  • Windows
  • Linux
  • Others / 其他

Browser / 浏览器

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

您在使用 G6 v5.0.43 时遇到了一个问题,涉及自定义组合拖拽时报错 "Unknown element type of id"。根据您提供的代码和描述,问题的根源在于 this.upsert 返回的元素没有 id 值。

您已经找到一个临时解决方案,即将 containerid 赋值给新的图形。这是一个有效的临时修复方法,但可能不是最优雅的解决方案。

为了更好地解决这个问题,您可以考虑以下几点:

  1. 确保每个元素都有唯一的 ID:在创建自定义组合时,确保每个元素都分配了一个唯一的 ID。这可以通过在创建元素时生成一个唯一的标识符来实现。

  2. 检查 upsert 方法的实现:查看 upsert 方法的实现,确保它在创建元素时正确地分配了 ID。

  3. 调试和日志记录:在 drawKeyShape 方法中添加日志记录,以便在调试时可以看到每个元素的 ID 和其他属性。

如果您需要进一步的帮助或有其他问题,请随时告诉我。

<details> <summary>🪧 Tips</summary> For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me. </details>

posted by petercat-assistant[bot] about 1 month ago

你可以使用this.upsert的hooks方法进行id赋值

Image

posted by LWtower 17 days ago

Fund this Issue

$0.00
Funded
Only logged in users can fund an issue

Pull requests