前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >@antv/g6 自定义节点 调用被复写的方法

@antv/g6 自定义节点 调用被复写的方法

作者头像
路过君
发布2023-05-27 14:31:19
7760
发布2023-05-27 14:31:19
举报
文章被收录于专栏:路过君BLOG from CSDN

版本

@antv/g6": “^4.8.10”

场景

@antv/g6通过继承的方法实现自定义形状时,自定义的函数会复写被继承的形状的对应函数,导致被继承的形状的某些特性丢失,通过以下方法解决此问题

方法

代码语言:javascript
复制
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'
);

源码分析

G6/packages/core/src/element/shape.ts 注册节点,边,组合的逻辑类似,以注册节点api为例

代码语言:javascript
复制
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;
  }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-05-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 版本
  • 场景
  • 方法
  • 源码分析
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档