refactor: adjust element type definition

packages/g6/src/behaviors/lasso-select.ts

@@ -1,5 +1,5 @@
 import { Path } from '@antv/g';
-import type { IPointerEvent, Points } from '../types';
+import type { IPointerEvent, Point } from '../types';
 import { pointsToPath } from '../utils/path';
 import type { BrushSelectOptions } from './brush-select';
 import { BrushSelect, getCursorPoint } from './brush-select';
@@ -21,7 +21,7 @@ export interface LassoSelectOptions extends BrushSelectOptions {}
  * <en/> Select a group of elements with an irregular polygon.
  */
 export class LassoSelect extends BrushSelect {
-  private points?: Points;
+  private points?: Point[];
   private pathShape?: Path;
 
   /**

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

@@ -3,10 +3,11 @@ import { isFunction } from '@antv/util';
 import { COMBO_KEY } from '../../constants';
 import type {
   CollapsedMarkerStyleProps,
+  Combo,
   ID,
   NodeLikeData,
   Padding,
-  Position,
+  Point,
   Prefix,
   STDSize,
   Size,
@@ -83,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> = {
@@ -184,7 +188,7 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
     return ancestors.length;
   }
 
-  public getComboPosition(attributes: Required<S>): Position {
+  public getComboPosition(attributes: Required<S>): Point {
     const { x = 0, y = 0, collapsed, context, childrenData = [] } = attributes;
 
     if (childrenData.length === 0) return [+x, +y, 0];
@@ -195,7 +199,7 @@ export abstract class BaseCombo<S extends BaseComboStyleProps = BaseComboStylePr
 
       if (descendants.length > 0) {
         // combo 被收起，返回平均中心位置 / combo is collapsed, return the average center position
-        const totalPosition = descendants.reduce((acc, datum) => add(acc, positionOf(datum)), [0, 0, 0] as Position);
+        const totalPosition = descendants.reduce((acc, datum) => add(acc, positionOf(datum)), [0, 0, 0] as Point);
         return divide(totalPosition, descendants.length);
       }
       // empty combo

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/data.ts

@@ -14,12 +14,11 @@ import type {
   PartialEdgeData,
   PartialGraphData,
   PartialNodeLikeData,
-  Position,
+  Point,
   State,
 } from '../types';
 import type { EdgeDirection } from '../types/edge';
 import type { ElementType } from '../types/element';
-import type { Point } from '../types/point';
 import { cloneElementData, mergeElementsData } from '../utils/data';
 import { arrayDiff } from '../utils/diff';
 import { toG6Data, toGraphlibData } from '../utils/graphlib';
@@ -563,25 +562,25 @@ export class DataController {
     model.mergeNodeData(id, value);
   }
 
-  public getElementPosition(id: ID): Position {
+  public getElementPosition(id: ID): Point {
     const datum = this.getElementDataById(id) as NodeLikeData;
     return positionOf(datum);
   }
 
-  public translateNodeBy(id: ID, offset: Position) {
+  public translateNodeBy(id: ID, offset: Point) {
     const curr = this.getElementPosition(id);
     const position = add(curr, [...offset, 0].slice(0, 3) as Point);
     this.translateNodeTo(id, position);
   }
 
-  public translateNodeTo(id: ID, position: Position) {
+  public translateNodeTo(id: ID, position: Point) {
     const [x = 0, y = 0, z = 0] = position;
     this.preventUpdateNodeLikeHierarchy(() => {
       this.updateNodeData([{ id, style: { x, y, z } }]);
     });
   }
 
-  public translateComboBy(id: ID, offset: Position) {
+  public translateComboBy(id: ID, offset: Point) {
     const [dx = 0, dy = 0, dz = 0] = offset;
     if ([dx, dy, dz].some(isNaN) || [dx, dy, dz].every((o) => o === 0)) return;
     const combo = this.getComboData([id])[0];
@@ -608,7 +607,7 @@ export class DataController {
     );
   }
 
-  public translateComboTo(id: ID, position: Position) {
+  public translateComboTo(id: ID, position: Point) {
     if (position.some(isNaN)) return;
     const [tx = 0, ty = 0, tz = 0] = position;
     const combo = this.getComboData([id])?.[0];

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/runtime/graph.ts

@@ -36,7 +36,6 @@ import type {
   PartialGraphData,
   PartialNodeLikeData,
   Point,
-  Position,
   State,
   Vector2,
   ViewportAnimationEffectTiming,
@@ -1184,7 +1183,7 @@ export class Graph extends EventEmitter {
    * @param animation - <zh/> 是否启用动画 | <en/> whether to enable animation
    * @apiCategory element
    */
-  public async translateElementBy(id: ID, offset: Position, animation?: boolean): Promise<void>;
+  public async translateElementBy(id: ID, offset: Point, animation?: boolean): Promise<void>;
   /**
    * <zh/> 批量将元素平移指定距离
    *
@@ -1193,15 +1192,15 @@ export class Graph extends EventEmitter {
    * @param animation - <zh/> 是否启用动画 | <en/> whether to enable animation
    * @apiCategory element
    */
-  public async translateElementBy(offsets: Record<ID, Position>, animation?: boolean): Promise<void>;
+  public async translateElementBy(offsets: Record<ID, Point>, animation?: boolean): Promise<void>;
   public async translateElementBy(
-    args1: ID | Record<ID, Position>,
-    args2?: Position | boolean,
+    args1: ID | Record<ID, Point>,
+    args2?: Point | boolean,
     args3: boolean = true,
   ): Promise<void> {
     const [config, animation] = isObject(args1)
       ? [args1, (args2 as boolean) ?? true]
-      : [{ [args1 as ID]: args2 as Position }, args3];
+      : [{ [args1 as ID]: args2 as Point }, args3];
 
     Object.entries(config).forEach(([id, offset]) => this.context.model.translateNodeBy(id, offset));
     await this.context.element!.draw({ animation })?.finished;
@@ -1216,7 +1215,7 @@ export class Graph extends EventEmitter {
    * @param animation - <zh/> 是否启用动画 | <en/> whether to enable animation
    * @apiCategory element
    */
-  public async translateElementTo(id: ID, position: Position, animation?: boolean): Promise<void>;
+  public async translateElementTo(id: ID, position: Point, animation?: boolean): Promise<void>;
   /**
    * <zh/> 批量将元素平移至指定位置
    *
@@ -1225,15 +1224,15 @@ export class Graph extends EventEmitter {
    * @param animation - <zh/> 是否启用动画 | <en/> whether to enable animation
    * @apiCategory element
    */
-  public async translateElementTo(positions: Record<ID, Position>, animation?: boolean): Promise<void>;
+  public async translateElementTo(positions: Record<ID, Point>, animation?: boolean): Promise<void>;
   public async translateElementTo(
-    args1: ID | Record<ID, Position>,
-    args2?: boolean | Position,
+    args1: ID | Record<ID, Point>,
+    args2?: boolean | Point,
     args3: boolean = true,
   ): Promise<void> {
     const [config, animation] = isObject(args1)
       ? [args1, (args2 as boolean) ?? true]
-      : [{ [args1 as ID]: args2 as Position }, args3];
+      : [{ [args1 as ID]: args2 as Point }, args3];
 
     Object.entries(config).forEach(([id, position]) => this.context.model.translateNodeTo(id, position));
     await this.context.element!.draw({ animation })?.finished;
@@ -1247,7 +1246,7 @@ export class Graph extends EventEmitter {
    * @returns <zh/> 元素位置 | <en/> element position
    * @apiCategory element
    */
-  public getElementPosition(id: ID): Position {
+  public getElementPosition(id: ID): Point {
     return this.context.model.getElementPosition(id);
   }