GGEditor踩坑记录（不推荐）

需求：
使用react实现类似如下的可视化画拓扑图的界面

分析

可以看出主要功能点有
1.可视化拖拽组件
2.绘制节点和路径

经查阅，找到了与需求十分接近的组件

GGEditor

这是由阿里的一位大佬写的开源的可视化图编辑器，可以实现绘制节点和路径的功能，支持常用快捷键，如ctrl+c,ctrl+v,delete等，效果如下图：
demo地址

使用

简单地介绍完需要的库后，开始使用。

1.创建一个名为demo的react项目，为了方便，我将使用typescript语言

npx create-react-app demo --typescript

2.安装GGEditor

npm install gg-editor --save

3.为了方便开发，可以使用热更新插件react-refresh，参考此处
4.首先，删除demo/src目录下不必要的文件

5.画流程图
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import GGEditor, {Flow} from 'gg-editor';

//数据
const data = {
    nodes: [
        {
            id: '0',
 label: '点1',
 x: 55,
 y: 55,
 },
 {
            id: '1',
 label: '点2',
 x: 55,
 y: 255,
 },
 ],
 edges: [
        {
            label: '边1',
 source: '0',
 target: '1',
 },
 ],
};
class App extends React.Component {
    render() {
        return (
            
 
  );
 }
}
ReactDOM.render(, document.getElementById('root'));

6.带命令工具栏

import React from 'react';
import ReactDOM from 'react-dom';
import GGEditor, {Command, ContextMenu, Flow, constants} from 'gg-editor';
import styles from './index.less';
import { Icon } from '@ant-design/compatible';
import {Divider, Tooltip} from 'antd';
import upperFirst from 'lodash/upperFirst';
const { EditorCommand } = constants;
const IconFont = Icon.createFromIconfontCN({
    scriptUrl: 'https://at.alicdn.com/t/font_1518433_oa5sw7ezue.js',
});
const FLOW_COMMAND_LIST = [
    EditorCommand.Undo,
 EditorCommand.Redo,
 '|',
 EditorCommand.Copy,
 EditorCommand.Paste,
 EditorCommand.Remove,
 '|',
 EditorCommand.ZoomIn,
 EditorCommand.ZoomOut,
];
const flowData = {
    nodes: [
        {
            id: '0',
 label: 'Node',
 x: 50,
 y: 50,
 },
 {
            id: '1',
 label: 'Node',
 x: 50,
 y: 200,
 },
 ],
 edges: [
        {
            label: 'Label',
 source: '0',
 sourceAnchor: 1,
 target: '1',
 targetAnchor: 0,
 },
 ],
};
function App() {
    return (
        
 
 {FLOW_COMMAND_LIST.map((name, index) => {
                    if (name === '|') {
                        return ;
 }
                    return (
                        
 
 
   );
 })}
            
 
 {/*  */}
             {
                    const { x: left, y: top } = position;
 return (
                        
 {[EditorCommand.Undo, EditorCommand.Redo, EditorCommand.PasteHere].map(name => {
                                return (
                                    
 
 
 {upperFirst(name)}
 
  );
 })}
                        
 );
 }}
            />
  );
}
ReactDOM.render(, document.getElementById('root'));

7.节点提供栏

import React from 'react';
import ReactDOM from 'react-dom';
import GGEditor, { Flow, Item, ItemPanel} from 'gg-editor';
import styles from './index.less';
const data = {
    nodes: [
        {
            id: '0',
 label: 'Node',
 x: 50,
 y: 50,
 },
 {
            id: '1',
 label: 'Node',
 x: 50,
 y: 200,
 },
 ],
 edges: [
        {
            label: 'Label',
 source: '0',
 sourceAnchor: 1,
 target: '1',
 targetAnchor: 0,
 },
 ],
};
function App() {
    return (
        
 
 
 
  
 
  
 
  
 
  
 
   
  );
}
ReactDOM.render(, document.getElementById('root'));