react使用gg-editor编写拓扑编辑器

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

• Ant Design Pro -demo地址
• 语雀Graph文档
• ant pro 使用指南

准备工作

• 运行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 {
  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 (
      
        保存
      
    );
  }
}

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)); 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

方法来源：

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.height;
      const imageData = ctx.getImageData(0, 0, imgW, imgH);
    
1
2
3
4
5
6
7
8
9
10
11