react使用gg-editor编写拓扑编辑器_ant dedign pro绘制拓扑关系图-优快云博客

本文链接：https://blog.youkuaiyun.com/ZhaoYulin6/article/details/126992015

本文档介绍了在React项目中，特别是与Ant Design Pro集成时，如何利用gg-editor创建拓扑编辑器。主要内容包括参照Ant Design Pro的代码实现、数据结构的准备、捕获和回显数据，以及开发过程中的额外功能如保存图谱、下载缩略图、显示节点详情和图谱列表小图的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标题需求开发过程中使用文档地址

准备工作

运行ant pro查看代码

地址引导
因为需要查看完整功能，因此选择完整版代码
在这里插入图片描述

查看代码：核心实现是gg-editor，版本号是2.0.2
准备数据结构
捕获数据结构
回显数据结构：

项目中加载跟ant pro同版本的项目，因此代码可以参考ant pro

在开发过程中需额外增加的功能

保存图谱
下载图谱缩略图，png jpg 透明以及白底
鼠标移入时，显示对应节点详情
显示列表图谱小图翻阅，具体效果如下

具体功能实现：
1.保存图谱+redux

import React from 'react';
import { withPropsAPI } from 'gg-editor';
import { Button } from 'antd';
import { connect } from 'react-redux'; 
import { RootState } from '../../../redux/rootReducer'; 
import { asyncActionsCreator } from '../../../pages/relationship_graph/action';

export interface EditorCommand {
  relationResourceDatas: any;
  relataBtn: any;
  addGraphData: any;
  editGraphData: any;
  [key: string]: any;
  editorTag: any;
}
class Save extends React.Component<EditorCommand> {
  constructor(EditorCommand) {
    super(EditorCommand);
  }

  handleClick = () => {
    const { propsAPI } = this.props as any;
    const { relationResourceDatas, editGraphData, inputval, editorTag, isFisrt } = this.props;
    propsAPI.save();
    const graphData = JSON.parse(JSON.stringify(propsAPI.save())); //保存下来的数据
  };

  render() {
    return (
      <Button onClick={this.handleClick} type="primary">
        保存
      </Button>
    );
  }
}

const mapStateToProps = (state: RootState) => {
  const {redux方法 } = state.ReliationShipGraph;


  return {
  redux方法 
  };
};

const mapDispatchToProps = (dispatch: any) => {
  return {
   redux值: (val) => dispatch(asyncActionsCreator.addGraphRelation(val)),
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(withPropsAPI(Save as any));

方法来源：
在这里插入图片描述

2.下载图谱缩略图，png jpg 透明以及白底

function downloadImg(type: string, state?: boolean) {
    //绘制画布
    const divCanvas: Element | any = document.getElementsByClassName('graph-container')[0];
    //缩略画布
    const minicanvas = divCanvas.getElementsByTagName('canvas')[0];
    if (minicanvas) {
      let src = '';
      const ctx = minicanvas.getContext('2d');
      const imgW = minicanvas.width;
      const imgH = minicanvas.heigh