蚂蚁金服数据可视化团队曾经开源了一款 G6-Editor，但后来中止了对外支持，学习成本过高css
好在后来他们团队的大牛高力结合 React + G6 开源了一个 GG-Editor（其实就是G6-Editor）html
不过相关的文档仍是太少，实际的使用依然是一个不断摸索的过程...node
常见问题: https://github.com/gaoli/GGEditor/issues/130git
1、引用 GG-Editor程序员
直接经过 npm 或 yarn 安装依赖github
npm install --save gg-editor
因为对 GG-Editor 不熟悉，因此我将它自带的 Demo 做为模版，在此基础上进行开发npm
将 node_modules/gg-editor/demo/src/ 下的 Flow 目录和 components、common 目录拷出来，放到开发目录下进行改造api
这个 demo 基于 ant 开发，因此须要引入 antantd
npm install --save antd
另外 demo 使用了 CSS Modules，须要在项目配置中启用异步
好比在个人项目中，就把本来的 index.css 重命名为 index.module.css，而后修改相应的引入路径
因为只是开发可视化流程，因此 components 目录下多余的文件（以 Koni 和 Mind 开头的文件）都以删掉
而后将 Flow/index.js 提出来做为项目入口，改造后的目录以下：
2、 Item 节点配置
demo 启动以后的界面是这样的
左边是 gg-editor 提供的四种基础节点类型，其对应的组件是 /components/EditorItemPanel
这个组件下引入了四个 gg-deitor <Item> 组件，官方提供的 API 以下：
http://ggeditor.com/docs/api/itemPanel.zh-CN.html
其中 type 有 node 和 edge 两个值可选，node 就是节点，edge 是链接节点的连线
shape 可选参数有：圆形 'flow-circle' | 圆角矩形 'flow-rect' | 菱形 'flow-rhombus' | 椭圆矩形 'flow-capsule'
src 能够引入一张图片做为当前节点的预览样式
也能够自定义子节点，<Item /> 会接收 props.children 做为预览样式
须要注意的是，不论是 src 仍是子节点，都只是一个预览样式，并不等于编辑器画板中的样式
而画板中的样式，由 model 决定，其配置项以下：
model: { color: '#333', // 节点主题色（选中颜色、激活颜色基于该值） size: [10, 10], // [x, y] 节点尺寸 shape: 'cirle', // 图形：圆形 circle | 圆角矩形 rect | 菱形 rhombus | 椭圆矩形 capsule style: { // 关键形样式(可覆盖color的普通样式，但激活、选中依然无效，坑！) fill: 'red', // 填充背景 stroke: 'blue' // 形状描边 }, label: { // 节点标签 text: '开始节点', // 文本内容 fill: 'green' // 文本颜色 }, index: 1 // 渲染层级 }
不过 model 默认会继承 <Item> 组件的 props.shape 和 props.size，因此一般 model 只需配置 color、label
这里有个比较难受的地方：画板中的节点样式由 model 控制，而节点预览样式由 CSS 或者图片控制，要想保证两者统一，就会须要不少额外的工做
3、自定义节点
若是 <Item> 自带的参数不知足需求，可使用 <ReisterNode> 来封装本身的 <Item>
<ReisterNode> 能够接收上面三个参数，其中 name 是组件名称
在 <Item> 的 shape 属性中指定 name，就能拖拽生成自定义的节点
extend 能够继承一个基本图形（'flow-circle', 'flow-rect' 等）
config 能够参考官方的 Issues：https://github.com/gaoli/GGEditor/issues/76
假如须要自定义一个 start-node，就能够自行封装一个 node 组件
而后在 ItemPanel 中的 <Item> 指定组件名称
最后在 <Flow> 组件下面引入
若是仍是不明白 <ReisterNode> 如何使用，能够参考这个 Demo：https://codesandbox.io/s/4j62moqy0w
4、Flow 编辑器配置
官方文档地址：http://ggeditor.com/docs/api/flow.zh-CN.html
组件默承认以将连线到空白处，设置 noEndEdge 为 false 就只能在节点之间连线
align 参数能够设置对齐的样式，好比对齐线：
<Flow align={{ line: { stroke: 'blue', // 对齐线颜色 lineWidth: 2 // 对齐线宽度 } }} />
shortcut 能够配置内置的快捷键命令，支持的命令有：
但通过试验，只有适用页面为 All 的命令可配置，而其它命令（如 Ctrl+C）都无效
组件自己默认的连线是曲线 'flow-smooth'，在编辑时能够手动修改，也能够在 graph 中限定连线类型：
<Flow graph={{edgeDefaultShape: 'flow-polyline-round'}}/>
更多关于 graph 的配置项能够参考这里：https://www.yuque.com/antv/g6/api-graph
在 <FLow> 组件上，最重要的是监听事件：
<Flow onNodeClick={(e) => { console.log(e); }} />
事件是整个编辑器的灵魂，下面将重点介绍一下 GG-Editor 的 Page Events
5、页面事件 Page Events
官方文档：http://ggeditor.com/docs/api/pageEvents.zh-CN.html
文档中对支持的事件和事件对象都有说明，这里再也不细说，主要分享几个场景
// 事件总览参考 /node_modules/gg-editor/src/common/constants.js
1. 拖拽节点，区分新节点仍是旧节点
监听拖拽放置事件：onDrop
从 <ItemPanel> 拖拽新节点到画布的时候，onDrop 返回的事件对象是这样的：
这时 currentItem 和 currentShape 都是 undefined
而若是只是挪动旧节点的位置，这两个字段会记录拖拖动的图形图项
或者监听节点拖动结束事件：onNodeDragEnd
这个事件只会在拖动画布上的节点才会触发
2. 锚点连线取消
连线触发的事件不少，好比 onDrop、onDragEnd，不过我的推荐监听 onAfterChange
当子项更改的时候会触发 onAfterChange 事件，若是是连线，事件对象以下：
若是有需求，当目标节点已经连线的时候，就取消连线，就能够根据 item 或者 model 对象中的参数进行判断
最后用结合异步函数和 <withPropsAPI> 组件取消连线：
这里用到的 <withPropsAPI> 组件，是 GG-Editor 自带的包装组件
通过 <withPropsAPI> 包装的组件，会自带 propsAPI 属性
executeCommand() 方法能够执行上面第四部分 (shortcut) 提到的全部命令
3. 保存
上面 <withPropsAPI> 提供的 propsAPI 属性中，包含了 save() 方法
能够封装一个 SaveButton 组件，暴露一个 onSave 事件
而后用 <withPropsAPI> 包装该组件
详情能够参考这个 Demo: https://codesandbox.io/s/r4kzkn441m
4. 自定义键盘操做
上面提到过，Ctrl + C 的复制快捷键无效
但这个功能十分关键，能够经过监听 onKeyDown 和 onKeyUp 手动建立这个快捷命令
建立一个 keysDown 字段来记录按下的按键，keyUp 时清空
小结：
上面的内容只介绍了 GG-Editor 核心的几个组件和功能
像 <Minimap>、<ContextMenu>、<Toolbar> 这些组件参考 Demo 就足够，因此并无说起
基于上面的介绍，已经可以使用 GG-Editor 进行开发，若是有其它疑问，能够在 GitHub 仓库提 Issues
最后发一下牢骚：阅读源码这种事，必须配一个程序员鼓励师才能开展