refactor(elements): adjust elements type define

packages/g6/src/elements/base-element.ts

@@ -4,7 +4,7 @@ import type { BaseShapeStyleProps } from './shapes';
 import { BaseShape } from './shapes';
 
 export abstract class BaseElement<T extends BaseShapeStyleProps> extends BaseShape<T> {
-  public get parsedAttributes() {
+  protected get parsedAttributes() {
     return this.attributes as Required<T>;
   }
 
@@ -25,28 +25,4 @@ export abstract class BaseElement<T extends BaseShapeStyleProps> extends BaseSha
 
     return animation;
   }
-
-  /**
-   * <zh/> 在元素完成创建并执行完入场动画后调用
-   *
-   * <en/> Called after the element is created and the entrance animation is completed
-   * @override
-   */
-  public onCreate() {}
-
-  /**
-   * <zh/> 在元素更新并执行完过渡动画后调用
-   *
-   * <en/> Called after the element is updated and the transition animation is completed
-   * @override
-   */
-  public onUpdate() {}
-
-  /**
-   * <zh/> 在元素完成退场动画并销毁后调用
-   *
-   * <en/> Called after the element completes the exit animation and is destroyed
-   * @override
-   */
-  public onDestroy() {}
 }

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

@@ -1,7 +1,17 @@
 import { AABB, BaseStyleProps, DisplayObject, DisplayObjectConfig, Group } from '@antv/g';
 import { isFunction } from '@antv/util';
 import { COMBO_KEY } from '../../constants';
-import type { CollapsedMarkerStyleProps, ID, NodeLikeData, Padding, Point, Prefix, STDSize, Size } from '../../types';
+import type {
+  CollapsedMarkerStyleProps,
+  Combo,
+  ID,
+  NodeLikeData,
+  Padding,
+  Point,
+  Prefix,
+  STDSize,
+  Size,
+} from '../../types';
 import { getBBoxHeight, getBBoxWidth, getCombinedBBox, getExpandedBBox } from '../../utils/bbox';
 import { idOf } from '../../utils/id';
 import { parsePadding } from '../../utils/padding';
@@ -74,7 +84,10 @@ export interface BaseComboStyleProps
  *
  * <en/> When customizing a combo, it is recommended to use this class as the base class. In this way, users only need to focus on the logic of drawing keyShape
  */
-export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStyleProps> extends BaseNode<S> {
+export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStyleProps>
+  extends BaseNode<S>
+  implements Combo
+{
   public type = 'combo';
 
   static defaultStyleProps: Partial<BaseComboStyleProps> = {

packages/g6/src/elements/edges/base-edge.ts

@@ -4,6 +4,7 @@ import type { PathArray } from '@antv/util';
 import { isFunction, pick } from '@antv/util';
 import type {
   BaseElementStyleProps,
+  Edge,
   EdgeArrowStyleProps,
   EdgeBadgeStyleProps,
   EdgeKey,
@@ -170,7 +171,7 @@ type ParsedBaseEdgeStyleProps = Required<BaseEdgeStyleProps>;
  *
  * <en/> Base class of the edge
  */
-export abstract class BaseEdge extends BaseElement<BaseEdgeStyleProps> {
+export abstract class BaseEdge extends BaseElement<BaseEdgeStyleProps> implements Edge {
   public type = 'edge';
 
   static defaultStyleProps: Partial<BaseEdgeStyleProps> = {

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

@@ -5,6 +5,7 @@ import type { NodeData } from '../../spec';
 import type {
   BaseElementStyleProps,
   ID,
+  Node,
   NodeBadgeStyleProps,
   NodeLabelStyleProps,
   NodePortStyleProps,
@@ -185,7 +186,10 @@ export interface BaseNodeStyleProps
  *
  * <en/> Design document: https://www.yuque.com/antv/g6/gl1iof1xpzg6ed98
  */
-export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps> extends BaseElement<S> {
+export abstract class BaseNode<S extends BaseNodeStyleProps = BaseNodeStyleProps>
+  extends BaseElement<S>
+  implements Node
+{
   public type = 'node';
 
   static defaultStyleProps: Partial<BaseNodeStyleProps> = {

packages/g6/src/exports.ts

@@ -201,6 +201,8 @@ export type {
   EdgeLabelStyleProps,
   Element,
   ElementDatum,
+  ElementHooks,
+  ElementMethods,
   ElementType,
   FitViewOptions,
   IAnimateEvent,

packages/g6/src/runtime/element.ts

@@ -389,7 +389,7 @@ export class ElementController {
       {
         after: () => {
           this.emit(new ElementLifeCycleEvent(GraphEvent.AFTER_ELEMENT_CREATE, elementType, datum), context);
-          element.onCreate();
+          element.onCreate?.();
         },
       },
     );
@@ -457,7 +457,7 @@ export class ElementController {
           if (stage === 'collapse') updateStyle(element, style);
           if (exactStage === 'hide') updateStyle(element, { visibility: getCachedStyle(element, 'visibility') });
           this.emit(new ElementLifeCycleEvent(GraphEvent.AFTER_ELEMENT_UPDATE, elementType, datum), context);
-          element.onUpdate();
+          element.onUpdate?.();
         },
       },
     );
@@ -496,7 +496,7 @@ export class ElementController {
         after: () => {
           this.clearElement(id);
           element.destroy();
-          element.onDestroy();
+          element.onDestroy?.();
           this.emit(new ElementLifeCycleEvent(GraphEvent.AFTER_ELEMENT_DESTROY, elementType, datum), context);
         },
       },

packages/g6/src/types/element.ts

@@ -1,25 +1,120 @@
-import type { BaseStyleProps } from '@antv/g';
-import type { BaseCombo } from '../elements/combos';
-import type { BaseEdge } from '../elements/edges';
-import type { BaseNode } from '../elements/nodes';
+import type { BaseStyleProps, DisplayObject } from '@antv/g';
 import type { RuntimeContext } from '../runtime/types';
 import type { ComboOptions, EdgeOptions, NodeOptions } from '../spec';
+import type { Point, Port } from '../types';
+
+/**
+ * <zh/> 节点类型
+ *
+ * <en/> Node type
+ */
+export interface Node extends DisplayObject, ElementHooks, ElementMethods {
+  /**
+   * <zh/> 获取连接桩
+   *
+   * <en/> Get the ports
+   */
+  getPorts(): Record<string, Port>;
+
+  /**
+   * <zh/> 获取节点中心位置
+   *
+   * <en/> Get the center position of the node
+   */
+  getCenter(): Point;
+
+  /**
+   * <zh/> 获取交点位置
+   *
+   * <en/> Get the intersection point
+   * @param point - <zh/> 外部位置 | <en/> external position
+   * @returns <zh/> 交点位置 | <en/> intersection point
+   * @description
+   * <zh/> 给定一个外部位置，返回当前节点与该位置的连边与节点的交点位置
+   *
+   * <en/> Given an external position, return the intersection point of the edge between the current node and the position and the node
+   */
+  getIntersectPoint(point: Point): Point;
+}
+
+/**
+ * <zh/> 边类型
+ *
+ * <en/> Edge type
+ */
+export interface Edge extends DisplayObject, ElementHooks, ElementMethods {}
+
+/**
+ * <zh/> 组合类型
+ *
+ * <en/> Combo type
+ */
+export interface Combo extends Node {
+  /**
+   * <zh/> 获取组合的位置
+   *
+   * <en/> Get the position of the combo
+   * @param attributes - <zh/> 组合属性 | <en/> combo attributes
+   */
+  getComboPosition(attributes: Record<string, unknown>): Point;
+}
+
+export type Element = Node | Edge | Combo;
 
 export type ElementType = 'node' | 'edge' | 'combo';
 
 export type ElementOptions = NodeOptions | EdgeOptions | ComboOptions;
 
-export type Node = BaseNode<any>;
-
-export type Edge = BaseEdge;
-
-export type Combo = BaseCombo<any>;
-
-export type Element = Node | Edge | Combo;
-
 export interface BaseElementStyleProps extends BaseStyleProps {
   /**
    * @internal
    */
   context?: RuntimeContext;
 }
+
+/**
+ * <zh/> 元素方法
+ *
+ * <en/> Element methods
+ */
+export interface ElementMethods {
+  /**
+   * <zh/> 获取当前元素内的子图形
+   *
+   * <en/> Get the subgraph in the current element
+   * @param shapeID - <zh/> 子图形 ID | <en/> Subgraph ID
+   * @returns <zh/> 子图形 | <en/> Subgraph
+   */
+  getShape<T extends DisplayObject = DisplayObject>(shapeID: string): T;
+}
+
+/**
+ * <zh/> 元素钩子方法
+ *
+ * <en/> Element hooks
+ */
+export interface ElementHooks {
+  /**
+   * <zh/> 在元素完成创建并执行完入场动画后调用
+   *
+   * <en/> Called after the element is created and the entrance animation is completed
+   * @override
+   */
+  onCreate?: () => void;
+
+  /**
+   * <zh/> 在元素更新并执行完过渡动画后调用
+   *
+   * <en/> Called after the element is updated and the transition animation is completed
+   * @override
+   */
+  onUpdate?: () => void;
+
+  /**
+   * <zh/> 在元素完成退场动画并销毁后调用
+   *
+   * <en/> Called after the element completes the exit animation and is destroyed
+   * @override
+   */
+  onDestroy?: () => void;
+}