[Bug]: Adding the "type" property for the Node, Edge and Combo interface #6826

Describe the bug / 问题描述

The Node, Edge and Combo interfaces are missing the type property: https://github.com/Crystal-RainSlide/G6/blob/74c0497a2cc21ce655d419034d395db1234c22f4/packages/g6/src/types/element.ts#L10

Without the type property, one can't even distinguish between Element, or, Node | Edge | Combo. That's ab especially common situation for G6's event listeners.

Problem when fixing

However, since Combo extends Node, and class BaseCombo extends BaseNode, setting Node["type"] to "node" and Combo["type"] to "combo" would always result in conflict.

Solution

Instead, I added a BaseNodeLike class and NodeLike interface with type: "node" | "combo";, and let both Node / BaseNode and Combo / BaseCombo extend on NodeLike / BaseNodeLike, then narrow their type property to either "node" or "combo":

https://github.com/Crystal-RainSlide/G6/tree/refactor-BaseNodeLike

This branch also include some improvements to related file (mainly base-node.ts and base-edge.ts). I can start a PR if you accept this solution (and the improvements). Tell me if any part of it need revise.

Reproduction link / 复现链接

No response

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

new G6.Graph({
  // other options...

  behaviors: [
    /** @type {import("@antv/g6").ClickSelectOptions} */
    ({
      type: "click-select",
      onClick: ({ target }) => {
        if ("type" in target) { // This should exclude Document
          // TypeScript Error: target (Document | Element) has no "id" prop
          console.log(target.id);
          // Actually can log the id without type error
        }
      },
    }),
  ],

});

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

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