@antv/g6 custom node calls the overridden method

Version

@antv/g6": “^4.8.10”

Scenes

@antv/g6 When implementing a custom shape through inheritance, the custom function will overwrite the corresponding function of the inherited shape, resulting in the loss of some characteristics of the inherited shape. Solve this problem by the following methods

method

import {
    
    registerNode, Shape} from "@antv/g6";
// 获取形状工厂
const shapeFactory = Shape.Node
// 获取被继承的形状定义
const extendShape = shapeFactory.getShape('circle')
register('my-circle',
    {
    
    
        afterDraw(cfg, group, rst) {
    
    
        	// 调用被继承的形状定义的逻辑
            if (extendShape && extendShape.afterDraw) {
    
    
                extendShape.afterDraw(cfg, group, rst)
            }
            // 执行自己的逻辑
        },
        setState(name?: string, value?: string | boolean, item?: Item) {
    
    
          	// 调用被继承的形状定义的逻辑
            if (extendShape && extendShape.setState) {
    
    
                extendShape.setState(name, value, item)
            }
            // 执行自己的逻辑
        }
    },
    'circle'
);

Source code analysis

G6/packages/core/src/element/shape.ts
registers nodes, edges, and the combination logic is similar, taking the registration node api as an example

public static registerNode(
    shapeType: string,
    nodeDefinition: ShapeOptions | ShapeDefine,
    extendShapeType?: string,
  ) {
    
    
    // 已经注册的节点形状映射
    const shapeFactory = Shape.Node;
    let shapeObj;

    if (typeof nodeDefinition === 'string' || typeof nodeDefinition === 'function') {
    
    
      const autoNodeDefinition = createNodeFromXML(nodeDefinition);
      shapeObj = {
    
     ...shapeFactory.getShape('single-node'), ...autoNodeDefinition };
    } else if (nodeDefinition.jsx) {
    
    
      const {
    
     jsx } = nodeDefinition;
      const autoNodeDefinition = createNodeFromXML(jsx);
      shapeObj = {
    
    
        ...shapeFactory.getShape('single-node'),
        ...autoNodeDefinition,
        ...nodeDefinition,
      };
    } else {
    
    
      // 如果节点定义是对象，也就是配置选项形式
      shapeFactory.getShape(extendShapeType);
      // 1. 获取被继承的形状定义，如果被继承的定义不存在则使用一个空的定义实现ShapeFramework
      const extendShape = extendShapeType ? shapeFactory.getShape(extendShapeType) : ShapeFramework;
      // 2. 合并定义，被继承的形状定义中的成员被直接覆盖
      shapeObj = {
    
     ...extendShape, ...nodeDefinition };
    }

    shapeObj.type = shapeType;
    shapeObj.itemType = 'node';
    shapeFactory[shapeType] = shapeObj;
    return shapeObj;
  }

  public static registerEdge(
    shapeType: string,
    edgeDefinition: ShapeOptions,
    extendShapeType?: string,
  ) {
    
    
    const shapeFactory = Shape.Edge;
    const extendShape = extendShapeType ? shapeFactory.getShape(extendShapeType) : ShapeFramework;
    const shapeObj = {
    
     ...extendShape, ...edgeDefinition };
    shapeObj.type = shapeType;
    shapeObj.itemType = 'edge';
    shapeFactory[shapeType] = shapeObj;
    return shapeObj;
  }