蚂蚁金服数据可视化团队曾经开源了一款 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 就是节点,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 或者图片控制,要想保证二者统一,就会需要很多额外的工作
三、自定义节点
如果 <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
四、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
五、页面事件 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. 锚点连线取消
连