V5.0.0-beta.27 自定义组件设置连接桩图形为矩形， 覆写 drawAnchorShapes 时有 error

[America-first-melon]

Describe the bug

1. 默认情况下，所有的连接桩好像为 圆形，设置大小和颜色时必须传入 圆形的参数。
   

2. 所以需要“自定义组件” 去实现一个矩形的连接桩， 参考文档，使用 drawAnchorShapes 进行覆写（默认为 circle 需要设置为 rect ）， 复制 这里的代码，, 其中 this.boundsCache = undefined， this.getAnchorPosition 也错误。

是使用方式不对吗？还是 只需要 执行 this.upsertShape 这一行就够了。

import { Graph, Extensions, extend, stdLib } from '@antv/g6';
import { GShapeStyle } from '@antv/g6/lib/types/item';
// https://g6-next.antv.antgroup.com/apis/item/node/custom-node#drawothershapes
class CustomProc extends Extensions.RectNode {
  // https://github.com/antvis/G6/blob/fddf9a5c0f7933b4d704038a7474358cb47037d0/packages/g6/src/stdlib/item/node/base.ts#L531
  drawAnchorShapes(model, shapeMap) {
    const { anchorShapes: commonStyle, keyShape: keyShapeStyle } =
      this.mergedStyles;

    const individualConfigs = Object.values(this.mergedStyles).filter(
      (style) => style.tag === 'anchorShape',
    );
    if (!individualConfigs.length) return;
    console.log(this.boundsCache)
    
    this.boundsCache.keyShapeLocal =
      this.boundsCache.keyShapeLocal || shapeMap.keyShape.getLocalBounds();
    const shapes = {};
    const anchorPositionMap = this.calculateAnchorPosition(keyShapeStyle);
    individualConfigs.forEach((config, i) => {
      const { position, fill = keyShapeStyle.fill, ...style } = config;
      const [cx, cy] = this.getAnchorPosition(position, anchorPositionMap);
      const id = `anchorShape${i}`;
      shapes[id] = this.upsertShape(
        'rect',
        id,
        {
          cx,
          cy,
          fill,
          ...commonStyle,
          ...style,
        } as GShapeStyle,
        shapeMap,
        model,
      );
    });
    return shapes;
  }
}

export default CustomProc

Your Example Website or App

null

Screenshots or Videos

No response

Platform

• OS: [e.g. macOS, Windows, Linux]
• Browser: [e.g. Chrome, Safari, Firefox]
• Version: [e.g. 91.1]

Additional context

No response

[github-actions]

hi @America-first-melon, welcome!

[github-actions]

Hi @America-first-melon, Please star this repo if you find it useful! Thanks ⭐!
你好 @America-first-melon。如果该仓库对你有用，可以 star 一下，感谢你的 ⭐!

[Aarebecca]

你好，issue 中提到的 “这里的代码，” 应该是过时的代码，麻烦重新参考下最新的代码哈

G6/packages/g6/src/stdlib/item/node/base.ts

Lines 484 to 531 in 48308e0

	public drawAnchorShapes(
	model: NodeDisplayModel | ComboDisplayModel,
	shapeMap: NodeShapeMap | ComboShapeMap,
	diffData?: {
	previous: NodeModelData | ComboModelData;
	current: NodeModelData | ComboModelData;
	},
	diffState?: { previous: State[]; current: State[] },
	): {
	[shapeId: string]: DisplayObject;
	} {
	const { anchorShapes: commonStyle, keyShape: keyShapeStyle } =
	this.mergedStyles;
	const individualConfigs = Object.values(this.mergedStyles).filter(
	(style) => style.tag === 'anchorShape',
	);
	if (!individualConfigs.length) return;
	const shapes = {};
	const anchorPositionMap = this.calculateAnchorPosition(keyShapeStyle);
	individualConfigs.forEach((config, i) => {
	const { position, fill = keyShapeStyle.fill, ...style } = config;
	const [cx, cy] = this.getAnchorPosition(
	position,
	anchorPositionMap,
	shapeMap,
	);
	const id = `anchorShape${i}`;
	shapes[id] = this.upsertShape(
	'circle',
	id,
	{
	cx,
	cy,
	fill,
	...commonStyle,
	...style,
	} as GShapeStyle,
	{
	shapeMap,
	model,
	diffData,
	diffState,
	},
	);
	});
	return shapes;
	}

[Aarebecca]

如果参考最新代码仍有问题，请重新打开此 issue

[America-first-melon]

如果参考最新代码仍有问题，请重新打开此 issue

更简洁了，最后依旧生成 this.upsertShape 即可。

请问一下，大佬们预计什么时候发布 rc 版本？