节点类型迁移 - rect 类型 #4574

请复制以下模板表示认领，填写相关信息，然后删除模板中的注释。 Please copy the following template, fill in the relevant information, and then delete the comments in the template.

## Issue 认领 / Issue Claim

**贡献者/Contributor**

> 例如：张三, 李四
> For example: John Smith, Sarah Johnson

**预计完成时间/Estimated Completion Date**

> 例如：2023-06-06
> For example: May 30, 2023

**联系方式/Contact Information**

> 例如：contact@email.com
> For example: contact@email.com

**其他信息/Additional Information**

> 例如：这个 issue 比预期的要复杂，我希望能获得更多的奖励
> For example: This issue is more complex than expected, and I hope to receive more reward.

您好，可否在V5分支中增加 CircleNode的测试用例，供参考测试RectNode

您好，可否在V5分支中增加 CircleNode的测试用例，供参考测试RectNode

这里有节点的单元测试，可以参考下看看：https://github.com/antvis/G6/blob/v5/packages/g6/tests/unit/node-spec.ts

Issue 认领 / Issue Claim

贡献者/Contributor

zqqcee

预计完成时间/Estimated Completion Date

2023-06-20

联系方式/Contact Information

例如：zqqcee@163.com

其他信息/Additional Information

无

您好，想问一下，此处RectNode继承于BaseNode，而不继承于CircleNode是否更合适？我理解drawLabelShape, drawAnchorShapes等方法可能都需要重写

您好，想问一下，此处RectNode继承于BaseNode，而不继承于CircleNode是否更合适？我理解drawLabelShape, drawAnchorShapes等方法可能都需要重写

是的，应该继承 BaseNode，我应该写错了，改了一下

Hello! 最近在做RectNode的迁移工作，想提问几个问题：

1. 设置keyShape无效

在data中这么设置矩形的width与height，无法生效，是不是mergeStyle出了什么问题 ？x与y属性可以设置，但是width和height属性却无法设置

const data = {
  nodes: [
    {
      id: '2',
      data: {
        x: 100,
        y: 200,
        width: 100,
        height: 100,
        type: 'rect-node',
      },
    },
  ],
};

2. 有没有方法可以获取badgeShape的文字宽度

如果能获取到徽标的文字宽度，能够更加精确地调整徽标位置。但是如果拿宽度需要先拿canvas的context，然后调用measureText()方法。请问有没有内置方法能在BaseNode中拿到canvas的上下文？

3. 如何设置多个徽标，目前只设置了一个徽标

可否提供配置示例呢，感谢！

const data = {
  nodes: [
    {
      id: '2',
      data: {
        x: 100,
        y: 200,
        width: 100,
        height: 100,
        type: 'rect-node',
        badgeShapes: {
          tag: 'badgeShape',
          position: 'rightTop',
          text: '1234',
          size: 10
        },
      },
    },
  ],
};

4. mergeStyle方法需要重写吗？

在重写drawAnchorShapes()方法的时候，发现mergedStyle出了点问题。打印出来mergedStyle是这样的

<img width="1034" alt="image" src="https://github.com/antvis/G6/assets/55946653/9ed066ab-056a-4601-a7ac-e9a3c603b8af">

5. 当label位于center时，labelBackground不显示,如图：

   <img width="223" alt="image" src="https://github.com/antvis/G6/assets/55946653/e04988a2-88e8-4c25-a16b-d10a8b009997">

    const data = {
        nodes: [
            {
                id: '2',
                data: {
                    x: 100,
                    y: 200,
                    width: 100,
                    height: 100,
                    type: 'rect-node',
                    labelShape: {
                        text: 'label',
                        position: 'center',
                    },
                    // iconShape: {
                    //     img: 'https://gw.alipayobjects.com/zos/basement_prod/012bcf4f-423b-4922-8c24-32a89f8c41ce.svg',
                    //     // text: 'label',
                    // },
                    badgeShapes: {
                        tag: 'badgeShape',
                        position: 'rightTop',
                        text: 'b',
                        size: 10
                    },
                    labelBackgroundShape: {
                        fill: 'red'
                    }
                },
            },
        ],
    };

我应该如何设置zIndex让它更合理呢？

目前完成进度：

• drawKeyShape 重写完成
• labelShape 重写完成
• iconShape 重写完成
• haloShape 重写完成
• badgeShapes 重写完成
• labelBackgroundShape 重写完成
• otherShapes 正在研究如何配置，可否提供一些配置的demo
• drawAnchorShapes 配置过程出现bug

1. 设置keyShape无效

v5 我们把所有关于某一个图形的样式和配置统一放到节点/边 mapper 返回值的对应图形的配置上，比如这里的 width height 其实你想设置的是 keyShape 的宽高，那么应当在节点 mapper 的返回值的 keyShape 里面，上周刚刚写了一个 4 -> 5 的区别使用指南，关于样式的区别在这里：https://www.yuque.com/antv/g6/upskr08w5gce8w99#aH4J3

2. 有没有方法可以获取badgeShape的文字宽度

如果你想要获得文字宽度以绘制背景图形的话，是否可以参考 https://github.com/antvis/G6/blob/c5a4696088b15eaf4fbcb4c5530f6e885fe605e2/packages/g6/src/stdlib/item/node/base.ts#L551

另外，既然是继承 Base，这些重复的部分似乎不需要重写？可能有略微不同的话，可以 super 一下略再略加修改？包括你上面已经够勾选的那些复写的函数，最好就是能复用就复用～～这样后续一套代码比较好维护～

3. 如何设置多个徽标，目前只设置了一个徽标

这里是在 mapper 里面返回了多个徽标的例子，其实无论数据中怎么写，最终是看这个 mapper 返回的是什么样的，最终在渲染的时候读取的 mapper 返回的这个结果：https://github.com/antvis/G6/blob/c5a4696088b15eaf4fbcb4c5530f6e885fe605e2/packages/g6/tests/intergration/performance/performance.ts#L2023

如果用户没配置，就有一个默认的 mapper: https://github.com/antvis/G6/blob/c5a4696088b15eaf4fbcb4c5530f6e885fe605e2/packages/g6/src/util/mapper.ts#L6

总之原则上就是，原始数据是用户数据，它的格式可以是相对自由的，mapper 会要求格式化为我们内部渲染的格式，最终以 mapper 解析后的格式为准～

4. mergeStyle方法需要重写吗？

应该没有问题不需要重写吧，我们读取的时候按照这个格式来读

5. 当label位于center时，labelBackground不显示,如图：

确实是 zIndex 的问题，是在主题里面设置的：https://github.com/antvis/G6/blob/c5a4696088b15eaf4fbcb4c5530f6e885fe605e2/packages/g6/src/stdlib/theme/light.ts#L70

因为这个是我们设计师给的方案，labelBackgroundShape 在最下面，keyShape 在中间层，文本最上层。理论上这种设定适用于 label 不在节点中心的情况下。在节点中心时应该处理一下，不过就跟其他的不统一了，导致没办法在 theme 里面统一去定义。这个我再考虑一下，circle 应该也有类似的问题，你可以先忽略，我来想想解法。

感谢你的趟坑，给了我们很多启发，相信这个小迁移完后你也对 v5 有了更多了解，后面再有兴趣做稍微复杂点的功能也会得心应手了。如果有任何觉得 v5 设计不合理的地方，欢迎跟我们讨论。

补充：原始数据（用户数据层）还是希望能够尽量少与 G6 相关的属性，主要是放一些业务属性，然后在 mapper 中去解析后返回对应和 G6 渲染相关的配置，如这里描述：https://www.yuque.com/antv/g6/upskr08w5gce8w99#pzWjp

Hello，我已经完成了全部的开发，需要先提一个PR看看效果吗？我会把这个PR缩减到2-3个commit，仅修改rect.ts文件，和测试demo，以方便你们review。

我几乎重写了所有的方法，因为base.ts 似乎是为Circle设计的。 而rect的BBox和circle有一些差别，因此在一些设置位置的地方，我都要重新写一遍计算位置的代码。 如果想增强复用的话，可能需要修改一下base.ts方法，不过这需要先征求你们的意见。我觉得一种比较理想的代码结构是：Base负责处理upsertShape()，而继承Base的Circle与Rect传入不同的position,type等属性。 可以先CR我这一版的代码，不知道我的测试是否100%覆盖，可以先看看完成的效果与设计稿有没有出入，有没有要修正的地方。 Thanks～！😊

draft: #4634

感觉不是徽标和标签位置的问题，而是矩形位置需要改变，你可以尝试把你当前的测试demo加上边，边应该会连接到矩形左上角而不是中央，因为矩形是从左上角开始画的（至少svg里是这样）。其实只需要调整矩形的xy为宽高一半的负数，就可以实现类似圆的那种居中效果（比如在defaultStyles中设置），同时可以复用base里面的其他所有方法。但是感觉把xy暴露给用户设置，来实现正常功能感觉也不是很合理，这里感觉需要改一改……

感觉不是徽标和标签位置的问题，而是矩形位置需要改变，你可以尝试把你当前的测试demo加上边，边应该会连接到矩形左上角而不是中央，因为矩形是从左上角开始画的（至少svg里是这样）。其实只需要调整矩形的xy为宽高一半的负数，就可以实现类似圆的那种居中效果（比如在defaultStyles中设置），同时可以复用base里面的其他所有方法。但是感觉把xy暴露给用户设置，来实现正常功能感觉也不是很合理，这里感觉需要改一改……

是的，rect和circle的BBox似乎不太一样，我尝试一下移动矩形的这个方案，感谢！

感觉不是徽标和标签位置的问题，而是矩形位置需要改变，你可以尝试把你当前的测试demo加上边，边应该会连接到矩形左上角而不是中央，因为矩形是从左上角开始画的（至少svg里是这样）。其实只需要调整矩形的xy为宽高一半的负数，就可以实现类似圆的那种居中效果（比如在defaultStyles中设置），同时可以复用base里面的其他所有方法。但是感觉把xy暴露给用户设置，来实现正常功能感觉也不是很合理，这里感觉需要改一改……

这样的话，如果x与y初始定位(0，0)的话，那转换后的坐标就变成了(-width/2, -height/2)，有点奇怪，有什么调整的办法吗？

感觉不是徽标和标签位置的问题，而是矩形位置需要改变，你可以尝试把你当前的测试demo加上边，边应该会连接到矩形左上角而不是中央，因为矩形是从左上角开始画的（至少svg里是这样）。其实只需要调整矩形的xy为宽高一半的负数，就可以实现类似圆的那种居中效果（比如在defaultStyles中设置），同时可以复用base里面的其他所有方法。但是感觉把xy暴露给用户设置，来实现正常功能感觉也不是很合理，这里感觉需要改一改……

非常专业～就是这个意思

感觉不是徽标和标签位置的问题，而是矩形位置需要改变，你可以尝试把你当前的测试demo加上边，边应该会连接到矩形左上角而不是中央，因为矩形是从左上角开始画的（至少svg里是这样）。其实只需要调整矩形的xy为宽高一半的负数，就可以实现类似圆的那种居中效果（比如在defaultStyles中设置），同时可以复用base里面的其他所有方法。但是感觉把xy暴露给用户设置，来实现正常功能感觉也不是很合理，这里感觉需要改一改……

这样的话，如果x与y初始定位(0，0)的话，那转换后的坐标就变成了(-width/2, -height/2)，有点奇怪，有什么调整的办法吗？

没有毛病哈，其实就是我们统一所有的节点自身坐标系的原点在其中间位置。和 svg 或 canvas 绘制 rect 不同，它 rect 坐标系原点在矩形左上角

感觉不是徽标和标签位置的问题，而是矩形位置需要改变，你可以尝试把你当前的测试demo加上边，边应该会连接到矩形左上角而不是中央，因为矩形是从左上角开始画的（至少svg里是这样）。其实只需要调整矩形的xy为宽高一半的负数，就可以实现类似圆的那种居中效果（比如在defaultStyles中设置），同时可以复用base里面的其他所有方法。但是感觉把xy暴露给用户设置，来实现正常功能感觉也不是很合理，这里感觉需要改一改……

这样的话，如果x与y初始定位(0，0)的话，那转换后的坐标就变成了(-width/2, -height/2)，有点奇怪，有什么调整的办法吗？

没有毛病哈，其实就是我们统一所有的节点自身坐标系的原点在其中间位置。和 svg 或 canvas 绘制 rect 不同，它 rect 坐标系原点在矩形左上角

好的好的，我已经提了PR了，那其实只需要在keyShape加两行就好，白重写了好多代码😭😭 ，要是一开始能想到就好了

感谢 @zqqcee 已完成该项功能～

悬赏金已支付，与 https://github.com/antvis/G6/issues/4576 同一笔支付宝支付～ 此 issue 关闭～