自定义元素中使用Rect，鼠标hover时报错

[coco-w]

报错信息为：Uncaught Error: [G6 v5.0.43] Unknown element type of id:

自定义元素部分代码如下:

export class ExtendRect extends Rect {
  /**
   * 绘制头部
   */

  protected drawHeader(attributes: Required<ExtendRectStyleProps>, container: Group) {
    // 自定义绘制逻辑，创建一个 G.Text
    const width = (attributes.size as number[])[0];
    const height = (attributes.size as number[])[1];

    const textWidth = getTextWidth(attributes.data.nodeTitle, '18px');
    const headerGroup = this.upsert(
      `header-group-${attributes.data.id}`,
      Rect,
      {
        x: 0,
        y: 0,
        size: [width, headerHeight],
        pointerEvents: 'none',
        cursor: 'move',
      },
      container,
    );
    const imageSize = 28;
    const textDx = -width / 2 + textWidth + 20 + imageSize;
    const textDy = -height / 2 + headerHeight / 2;
    this.upsert(
      'text',
      Text,
      {
        text: attributes.data.nodeTitle,
        fill: '#16151C',
        dx: textDx,
        dy: textDy,
        textAlign: 'center',
        textBaseline: 'middle',
        fontSize: 18,
        fontFamily: 'Alibaba PuHuiTi',
        // ...subStyleProps(attributes, ['nodeTitle']),
      },
      headerGroup,
    );

    const icon = this.upsert(
      `title-icon-${attributes.data.id}`,
      Rect,
      {
        x: -width / 2 + imageSize,
        y: -height / 2 + headerHeight / 2,
        size: imageSize,
        iconFontFamily: 'iconfont', // 对应 iconfont.css 中的 `font-family` 属性值
        iconText: '\ue01b', // 对应 iconfont.css 中的 `content` 属性值，注意加 `u`
        iconFill: '#fff',
        iconFontSize: 18,
        fill: '#0052D9',
        pointerEvents: 'none',
        cursor: 'move',
        // @ts-ignore
        radius: 5,
      },
      headerGroup,
    );
    icon.style.pointerEvents = 'none';
  }
}

[petercat-assistant[bot]]

根据您提供的错误信息和代码片段，问题可能出在 upsert 方法中使用的 Rect 和 Text 元素类型。错误信息提示 Unknown element type of id，这表明在使用自定义元素时，可能没有正确注册或使用这些元素。

以下是一些可能的解决方案：

1. 检查元素类型注册：

   • 确保 Rect 和 Text 类型在 G6 中是已知的。如果您使用的是自定义的 Rect 和 Text，请确保它们已在 G6 中正确注册。

2. 检查 upsert 方法：

   • 确保 upsert 方法的实现中，传递的类型是 G6 可以识别的。可能需要查看 upsert 方法的实现，确保它能够处理传递的类型。

3. 调试 id 的生成：

   • 确保生成的 id 是唯一且正确的。错误信息中提到 Unknown element type of id，这可能意味着生成的 id 不符合预期。

如果这些建议没有解决问题，您可以提供更多的上下文信息或尝试在 G6 的文档中查找关于自定义元素的更多信息。

如果需要进一步的帮助，请随时告诉我！

🪧 Tips

For further assistance, please describe your question in the comments and @petercat-assistant to start a conversation with me.