Can you teach me more about custom nodes? #6866

自定义节点在 G6 中是一个非常强大的功能，可以让你根据自己的需求来设计节点的外观和行为。针对你提到的问题，我会逐一进行解答：

1. 大矩形里有个小矩形，设置 x/y 不改变位置：

   • 在 G6 中，自定义节点的绘制是通过 draw 方法来实现的。你需要确保在绘制小矩形时，正确地设置了相对于大矩形的坐标。
   • 例如，假设你有一个大矩形和一个小矩形，你可以这样设置：

     G6.registerNode('custom-node', {
       draw(cfg, group) {
         const bigRect = group.addShape('rect', {
           attrs: {
             x: 0,
             y: 0,
             width: 100,
             height: 100,
             fill: '#C6E5FF',
           },
         });
         const smallRect = group.addShape('rect', {
           attrs: {
             x: 20, // 相对于大矩形的 x 坐标
             y: 20, // 相对于大矩形的 y 坐标
             width: 50,
             height: 50,
             fill: '#7F8C8D',
           },
         });
         return bigRect;
       },
     });

2. 实现拖曳节点：

   • G6 本身支持节点的拖拽，不需要额外使用 interact.js。你只需要在初始化图时，启用 drag-node 行为即可：

     const graph = new G6.Graph({
       container: 'mountNode',
       width: 800,
       height: 600,
       modes: {
         default: ['drag-node'], // 启用拖拽节点
       },
     });

   • 如果你想学习 interact.js，可以查看其官方文档，但对于 G6 的节点拖拽，内置的功能已经足够。

3. 使用 5.0 版本的新特性：

   • G6 5.0 版本引入了许多新特性，包括深色和浅色主题。确保你在使用最新版本的 G6，并参考最新的文档。
   • 例如，设置主题可以通过以下方式：

     const graph = new G6.Graph({
       container: 'mountNode',
       width: 800,
       height: 600,
       theme: 'dark', // 设置为深色主题
     });

希望这些信息能帮助你更好地理解和使用 G6 的自定义节点功能。如果有更多问题，欢迎继续提问！

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

主要是这一页的教程https://g6.antv.antgroup.com/manual/element/node/custom-node[ 重试 错误原因 ](javascript:void(0))

我有很多低级错误，页面里的每一个示例代码，其自定义绘制逻辑的地方，我都按照我这js初学者的经验复制粘贴，然后乱写。比如 1.我想使用antvG做个大矩形里有个小矩形，能显示出来，但设置x/y也不改变其左上角的显示位置。 2.我想实现拖曳节点，我不会interactjs的interact（），设置drag-element只有内置节点能动，我想学会interactjs 3.我用AI帮我写，都是4.0版本的写法，很多新特性比如深色浅色我也要用，就没法舍弃5.0了，再加上需要高度自定义，用的antvG，也因此学antvG6很混乱

最终：能请写一个详细的5.0自定义逻辑吗？就是上面那个链接 drawkeyshape（），render（）都写一个详细的例子和注释 比如一个iPhone图书APP的书库epub文件没有封面的时候，就是大矩形包着小矩形，然后显示书名和作者，很优美，我想模仿。 然后教程就随意定制一个，比如自定义个同心圆就行： 1.画出同心圆 2.实现功能拖曳，让它也能直接drag-element一开就能拖曳缩放，或者是interactjs另外实现拖动和resize 3.主要是详细实现展示出来，我们就能更了更顶层逻辑，我们就不用看AI生成的4.0或者不断提更多issue了 4.看下面人工智能生成的，registerNode好像有废除了吧，好像也没有G6.xxx了吧，我也是用的register（）注册才能显示的， 5.需要把链接里的几个示例代码都写的更详细一些。

G6 里面的内置节点、behaviors、plugins 都是基于像 BaseNode 这样的基类实现的，所以有一个好的方法是可以去 G6/packages/g6 源码里看看 circle、rect 这些基础元素是如何基于 BaseNode 实现的🌹，后面我们也会逐步完善文档的案例，你有好的内容欢迎向 G6 提 PR 补充👏