在 React 项目中引入 GG-Editor 编辑可视化流程

蚂蚁金服数据可视化团队曾经开源了一款 G6-Editor，但后来停止了对外支持，学习成本太高

好在后来他们团队的大牛高力结合 React + G6 开源了一个 GG-Editor（其实就是G6-Editor）

不过相关的文档还是太少，实际的使用依然是一个不断摸索的过程...

常见问题: https://github.com/gaoli/GGEditor/issues/130

 

 

一、引用 GG-Editor

直接通过 npm 或 yarn 安装依赖

npm install --save gg-editor

由于对 GG-Editor 不熟悉，所以我将它自带的 Demo 作为模版，在此基础上进行开发

将 node_modules/gg-editor/demo/src/ 下的 Flow 目录和 components、common 目录拷出来，放到开发目录下进行改造

这个 demo 基于 ant 开发，所以需要引入 ant

npm install --save antd

另外 demo 使用了 CSS Modules，需要在项目配置中启用

比如在我的项目中，就把原本的 index.css 重命名为 index.module.css，然后修改相应的引入路径

由于只是开发可视化流程，所以 components 目录下多余的文件（以 Koni 和 Mind 开头的文件）都以删掉

然后将 Flow/index.js 提出来作为项目入口，改造后的目录如下：

 

 

二、 Item 节点配置

demo 启动之后的界面是这样的

左边是 gg-editor 提供的四种基础节点类型，其对应的组件是 /components/EditorItemPanel

这个组件下引入了四个 gg-deitor <Item> 组件，官方提供的 API 如下：

http://ggeditor.com/docs/api/itemPanel.zh-CN.html

其中 type 有 node 和 edge 两个值可选，node 就是节点