refactor(elements): remove getKey method on base-node (#5811)

packages/g6/__tests__/utils/create.ts

@@ -77,7 +77,7 @@ export function createGraphCanvas(
  */
 class CenterConnectCircle extends Circle {
   public getIntersectPoint(): Point {
-    const bounds = this.getKey().getBounds();
+    const bounds = this.getShape('key').getBounds();
     return bounds.center;
   }
 }

packages/g6/src/elements/combos/base-combo.ts

@@ -151,7 +151,7 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
       this.getGraphicStyle(attributes),
       'collapsedMarker',
     );
-    const keyShape = this.getKey();
+    const keyShape = this.getShape('key');
     const [x, y] = getXYByPlacement(keyShape.getLocalBounds(), 'center');
 
     const style = { ...collapsedMarkerStyle, x, y };

packages/g6/src/elements/combos/circle.ts

@@ -55,7 +55,7 @@ export class CircleCombo extends BaseCombo<CircleComboStyleProps> {
   }
 
   public getIntersectPoint(point: Point): Point {
-    const keyShapeBounds = this.getKey().getBounds();
+    const keyShapeBounds = this.getShape('key').getBounds();
     return getEllipseIntersectPoint(point, keyShapeBounds);
   }
 }

packages/g6/src/elements/nodes/base-node.ts

@@ -239,7 +239,7 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
       this.getGraphicStyle(attributes),
       'label',
     );
-    const keyShape = this.getKey();
+    const keyShape = this.getShape('key');
     const keyBounds = keyShape.getLocalBounds();
 
     return Object.assign(
@@ -262,7 +262,7 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
     if (attributes.icon === false || (!attributes.iconText && !attributes.iconSrc)) return false;
 
     const iconStyle = subStyleProps(this.getGraphicStyle(attributes), 'icon');
-    const keyShape = this.getKey();
+    const keyShape = this.getShape('key');
     const [x, y] = getXYByPlacement(keyShape.getLocalBounds(), 'center');
 
     return { x, y, ...iconStyle };
@@ -294,7 +294,7 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
   }
 
   protected getBadgeStyle(style: NodeBadgeStyleProps): NodeBadgeStyleProps {
-    const keyShape = this.getKey();
+    const keyShape = this.getShape('key');
     const { placement = 'top', offsetX, offsetY, ...restStyle } = style;
     const textStyle = getTextStyleByPlacement(keyShape.getLocalBounds(), placement, offsetX, offsetY, true);
     return { ...textStyle, ...restStyle };
@@ -327,18 +327,10 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
 
   protected getPortXY(attributes: Required<S>, style: NodePortStyleProps): Point {
     const { placement = 'left' } = style;
-    const bounds = this.getKey().getLocalBounds();
+    const bounds = this.getShape('key').getLocalBounds();
     return getPortXYByPlacement(bounds, placement as PortPlacement);
   }
 
-  /**
-   * Get the key shape for the node.
-   * @returns Key shape.
-   */
-  public getKey<T extends DisplayObject>(): T {
-    return this.shapeMap.key as T;
-  }
-
   /**
    * Get the ports for the node.
    * @returns Ports shape map.
@@ -352,7 +344,7 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
    * @returns The center point of the node.
    */
   public getCenter(): Point {
-    return this.getKey().getBounds().center;
+    return this.getShape('key').getBounds().center;
   }
 
   /**
@@ -361,12 +353,12 @@ export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps
    * @returns The intersection point.
    */
   public getIntersectPoint(point: Point): Point {
-    const keyShapeBounds = this.getKey().getBounds();
+    const keyShapeBounds = this.getShape('key').getBounds();
     return getRectIntersectPoint(point, keyShapeBounds);
   }
 
   protected drawHaloShape(attributes: Required<S>, container: Group): void {
-    const keyShape = this.getKey();
+    const keyShape = this.getShape('key');
     this.upsert(
       'halo',
       keyShape.constructor as new (...args: unknown[]) => DisplayObject,

packages/g6/src/elements/nodes/circle.ts

@@ -46,7 +46,7 @@ export class Circle extends BaseNode {
   }
 
   public getIntersectPoint(point: Point): Point {
-    const keyShapeBounds = this.getKey().getBounds();
+    const keyShapeBounds = this.getShape('key').getBounds();
     return getEllipseIntersectPoint(point, keyShapeBounds);
   }
 }

packages/g6/src/elements/nodes/ellipse.ts

@@ -52,7 +52,7 @@ export class Ellipse extends BaseNode {
   }
 
   public getIntersectPoint(point: Point): Point {
-    const keyShapeBounds = this.getKey().getBounds();
+    const keyShapeBounds = this.getShape('key').getBounds();
     return getEllipseIntersectPoint(point, keyShapeBounds);
   }
 }

packages/g6/src/elements/nodes/html.ts

@@ -65,7 +65,7 @@ export class HTML extends BaseNode<HTMLStyleProps> {
   }
 
   protected getDomElement() {
-    return this.getKey<GHTML>().getDomElement();
+    return this.getShape<GHTML>('key').getDomElement();
   }
 
   protected getKeyStyle(attributes: Required<HTMLStyleProps>): GHTMLStyleProps {

packages/g6/src/elements/nodes/star.ts

@@ -49,7 +49,7 @@ export class Star extends Polygon<StarStyleProps> {
 
   protected getPortXY(attributes: Required<StarStyleProps>, style: NodePortStyleProps): Point {
     const { placement = 'top' } = style;
-    const bbox = this.getKey().getLocalBounds();
+    const bbox = this.getShape('key').getLocalBounds();
     const ports = getStarPorts(this.getOuterR(attributes), this.getInnerR(attributes));
     return getPortXYByPlacement(bbox, placement as StarPortPlacement, ports, false);
   }

packages/g6/src/elements/nodes/triangle.ts

@@ -49,7 +49,7 @@ export class Triangle extends Polygon<TriangleStyleProps> {
   protected getPortXY(attributes: Required<TriangleStyleProps>, style: NodePortStyleProps): Point {
     const { direction } = attributes;
     const { placement = 'top' } = style;
-    const bbox = this.getKey().getLocalBounds();
+    const bbox = this.getShape('key').getLocalBounds();
     const [width, height] = this.getSize(attributes);
     const ports = getTrianglePorts(width, height, direction);
     return getPortXYByPlacement(bbox, placement as TrianglePortPlacement, ports, false);
@@ -63,7 +63,7 @@ export class Triangle extends Polygon<TriangleStyleProps> {
     if (icon === false || isEmpty(iconText || iconSrc)) return false;
 
     const iconStyle = subStyleProps<IconStyleProps>(this.getGraphicStyle(attributes), 'icon');
-    const bbox = this.getKey().getLocalBounds();
+    const bbox = this.getShape('key').getLocalBounds();
     const [x, y] = getTriangleCenter(bbox, direction);
     const size = getIncircleRadius(bbox, direction) * 2 * ICON_SIZE_RATIO;
 

packages/g6/src/elements/shapes/base-shape.ts

@@ -183,8 +183,8 @@ export abstract class BaseShape<StyleProps extends BaseShapeStyleProps> extends
     return createAnimationsProxy(animationMap);
   }
 
-  public getShape(key: string): DisplayObject | undefined {
-    return this.shapeMap[key];
+  public getShape<T extends DisplayObject>(name: string): T {
+    return this.shapeMap[name] as T;
   }
 
   private setVisibility() {

packages/g6/src/utils/bbox.ts

@@ -45,7 +45,7 @@ export function getBBoxSize(bbox: AABB): [number, number] {
  * @returns <zh/> 包围盒 | <en/> bounding box
  */
 export function getNodeBBox(node: Point | Node, padding?: Padding): AABB {
-  const bbox = isPoint(node) ? getPointBBox(node) : node.getKey().getBounds();
+  const bbox = isPoint(node) ? getPointBBox(node) : node.getShape('key').getBounds();
   return padding ? getExpandedBBox(bbox, padding) : bbox;
 }
 

packages/g6/src/utils/edge.ts

@@ -289,8 +289,6 @@ export const getRadians = (bbox: AABB): Record<LoopPlacement, [number, number]>
  * @param clockwise - <zh/> 是否顺时针 | <en/> Whether to draw the loop clockwise
  * @param sourcePort - <zh/> 起点连接桩 | <en/> Source port
  * @param targetPort - <zh/> 终点连接桩 | <en/> Target port
- * @param rawSourcePoint - <zh/> 起点 | <en/> Source point
- * @param rawTargetPoint - <zh/> 终点 | <en/> Target point
  * @returns <zh/> 起点和终点 | <en/> Start and end points
  */
 export function getLoopEndpoints(
@@ -336,8 +334,6 @@ export function getLoopEndpoints(
  * @param dist - <zh/> 从节点 keyShape 边缘到自环顶部的距离 | <en/> The distance from the edge of the node keyShape to the top of the self-loop
  * @param sourcePortKey - <zh/> 起点连接桩 key | <en/> Source port key
  * @param targetPortKey - <zh/> 终点连接桩 key | <en/> Target port key
- * @param rawSourcePoint - <zh/> 起点 | <en/> Source point
- * @param rawTargetPoint - <zh/> 终点 | <en/> Target point
  * @returns <zh/> 返回绘制环形边的路径 | <en/> Returns the path of the loop edge
  */
 export function getCubicLoopPath(
@@ -409,8 +405,6 @@ export function getCubicLoopControlPoints(
  * @param dist - <zh/> 从节点 keyShape 边缘到自环顶部的距离 | <en/> The distance from the edge of the node keyShape to the top of the self-loop
  * @param sourcePortKey - <zh/> 起点连接桩 key | <en/> Source port key
  * @param targetPortKey - <zh/> 终点连接桩 key | <en/> Target port key
- * @param rawSourcePoint - <zh/> 起点 | <en/> Source point
- * @param rawTargetPoint - <zh/> 终点 | <en/> Target point
  * @returns <zh/> 返回绘制环形折线边的路径 | <en/> Returns the path of the loop polyline edge
  */
 export function getPolylineLoopPath(

packages/g6/src/utils/element.ts

@@ -122,7 +122,7 @@ export function getAllPorts(node: Node): Record<string, Port> {
   portsStyle.forEach((portStyle: NodePortStyleProps, i: number) => {
     const { key, placement } = portStyle;
     if (isSimplePort(portStyle)) {
-      ports[key || i] ||= getXYByPlacement(node.getKey().getBounds(), placement);
+      ports[key || i] ||= getXYByPlacement(node.getShape('key').getBounds(), placement);
     }
   });
   return ports;