Open lulujianglab opened 4 years ago
在一些中后台应用的开发中,有些业务往往需要用到流程设计器,比如:管理网络、审批流程等等...正是因为有多种业务都需要使用到流程图的功能,所以对于能快速产出一个流程设计器是非常必须的
古话说的好,预先善其事,必先利其器。所以首先要做的就是选择一个合适的开源基础库,站在巨人的肩膀上,总是跑的更快
开源时代,社区的资源总是非常丰富,身为小程序媛的我漏出幸福的微笑😊
最终,我选择了 ggEditor,因为它完全开源,使用很简单,很轻量级,而且天然基于 react,非常完美
ggEditor
我们可以按照 github 上 ggEditor 的安装步骤操作
启动之后的界面效果可以参考:http://ggeditor.com/demo/#/flow
我们可以看到它的官方 demo 功能是比较齐全的,基本上已经实现了一个元素拖拽及元素属性编辑的完整功能
我们知道整个流程编辑器基本可以分为三部分,一部分是左侧的元素面板区,另一部分是右侧的元素属性配置区,再就是中间的流程展示区,每个流程元素上可以有相应的事件响应
所以这里主要介绍以上相应的属性
flow-circle
flow-rect
flow-rhombus
flow-capsule
props.shape
props.size
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 // 渲染层级 }
Flow 编辑器配置 在 组件上,最重要的是监听事件:
<Flow onNodeClick={(e) => { console.log(e); }}/>
更多的我们可以参考页面事件 Page Events
拖拽节点时,区分是新节点还是旧节点。可以用onDrop - 监听拖拽放置事件,如果是从元素面板区拖拽新节点到画布上,onDrop 返回的事件对象中 currentItem 和 currentShape 都是 undefined。而如果是挪动旧节点的位置,这两个字段会记录拖动的图形图项。当然,也可以监听节点拖动结束事件 - onNodeDragEnd,这个事件只会在拖动画布上的节点时才触发
onDrop
currentItem
currentShape
undefined
onNodeDragEnd
锚点连线取消,比如有一个需求是当目标节点已经连线的时候,就取消连线。可以用 onAfterChange 事件,根据 item(type: 'edge') 或者 model(source:'xxxx') 对象中的参数进行判断。最后用结合异步函数和 <withPropsAPI> 组件取消连线:
onAfterChange
<withPropsAPI>
handleAddItem = (e) => { this.apiAction('undo') } apiAction = (command) => { const { propsAPI } = this.props setTimeout(() => { propsAPI.executeCommand(command) }, 0) }
<withPropsAPI>是 ggEditor 自带的包装组件,同时它又自带 propsAPI 属性,更多的属性值我们可以参考 propsAPI
propsAPI
保存数据。上面 <withPropsAPI> 提供的 propsAPI 属性中,包含了 save() 方法。我们可以封装一个 SaveButton 组件,暴露一个 onSave 事件,然后用 <withPropsAPI> 包装该组件。具体可参考 demo
save()
SaveButton
onSave
自定义键盘操作。可以通过监听 onKeyDown 和 onKeyUp 手动创建多个快捷命令
onKeyDown
onKeyUp
handleKeyUp = e => { // 键盘抬起时重置记录的按键 this.keysDown = '' } handleKeyDown = e => { // 拼接按键命令 if (this.keysDown.length === 0) { this.keysDown = e.domEvent.key } else { this.keysDown += `+${e.domEvent.key}` } // 自定义键盘操作 switch (this.keysDown) { case 'Meta+c': this.diyCopyCommand() break case 'Control+c': this.diyCopyCommand() break case 'Meta+v': this.diyPasteCommand() break case 'Control+v': this.diyPasteCommand() break default: break } } // 自定义复制 diyCopyCommand = () => { const { propsAPI } = this.props let selected = propsAPI.getSelected() if (selected.length > 0) { this.commandAction('copy') } } // 自定义粘贴 diyPasteCommand = () => { this.commandAction('paste') }
以上只是 ggEditor 的核心组件和功能。还有很多组件没有提交,比如 <Minimap>、<ContextMenu>、<Toolbar> ,我们可以具体去看项目 demo
<Minimap>
<ContextMenu>
<Toolbar>
其他的属性解析可以参考官网 API
如果 <Item> 自带的参数不满足需求,可以使用 <ReisterNode> 来封装自己的 <Item>
<Item>
<ReisterNode>
比如自定义一个 start-node,就可以自行封装一个 node 组件
start-node
具体可以参考 Issues
ggEditor 是基于 umijs 脚手架的, umijs不得不说,太简单粗暴,默认不支持IE,如果需要支持,需要我们开启配置
需要在 .umirc.js 中配置
targets: { ie: 11, }
Chrome warning
IE bug
查看后发现都是指向同一个问题,因为 dva 的最新版本,具体可以看看升级dva最新版提示Warning: Please use require("dva").dynamic instead of require("dva/dynamic"). Support for the latter will be removed in the next major release. 和 2.6.0-beta.4 版本新抛出警告
require("dva").dynamic
require("dva/dynamic")
为了快速解决这个问题,我去瞅了眼 ant-design-pro,发现它三天前提交的,但是dva版本仍是用的低版本,非常 nice
以上,便可快速解决 IE11 白屏的问题
在 React 项目中引入 GG-Editor 编辑可视化流程
常见问题
PS:终于用上自己写的博客系统写文章啦,体验还是非常八错的 😊😊
在一些中后台应用的开发中,有些业务往往需要用到流程设计器,比如:管理网络、审批流程等等...正是因为有多种业务都需要使用到流程图的功能,所以对于能快速产出一个流程设计器是非常必须的
工具选择
古话说的好,预先善其事,必先利其器。所以首先要做的就是选择一个合适的开源基础库,站在巨人的肩膀上,总是跑的更快
开源时代,社区的资源总是非常丰富,身为小程序媛的我漏出幸福的微笑😊
最终,我选择了
ggEditor
,因为它完全开源,使用很简单,很轻量级,而且天然基于 react,非常完美快速构建
引用 ggEditor
我们可以按照 github 上 ggEditor 的安装步骤操作
启动之后的界面效果可以参考:http://ggeditor.com/demo/#/flow
我们可以看到它的官方 demo 功能是比较齐全的,基本上已经实现了一个元素拖拽及元素属性编辑的完整功能
属性解析
我们知道整个流程编辑器基本可以分为三部分,一部分是左侧的元素面板区,另一部分是右侧的元素属性配置区,再就是中间的流程展示区,每个流程元素上可以有相应的事件响应
所以这里主要介绍以上相应的属性
flow-circle
| 圆角矩形flow-rect
| 菱形flow-rhombus
| 椭圆矩形flow-capsule
props.shape
和props.size
,所以通常 model 只需配置 color、label。配置项如下:Flow 编辑器配置 在 组件上,最重要的是监听事件:
更多的我们可以参考页面事件 Page Events
拖拽节点时,区分是新节点还是旧节点。可以用
onDrop
- 监听拖拽放置事件,如果是从元素面板区拖拽新节点到画布上,onDrop
返回的事件对象中currentItem
和currentShape
都是undefined
。而如果是挪动旧节点的位置,这两个字段会记录拖动的图形图项。当然,也可以监听节点拖动结束事件 -onNodeDragEnd
,这个事件只会在拖动画布上的节点时才触发锚点连线取消,比如有一个需求是当目标节点已经连线的时候,就取消连线。可以用
onAfterChange
事件,根据 item(type: 'edge') 或者 model(source:'xxxx') 对象中的参数进行判断。最后用结合异步函数和<withPropsAPI>
组件取消连线:<withPropsAPI>
是 ggEditor 自带的包装组件,同时它又自带propsAPI
属性,更多的属性值我们可以参考 propsAPI保存数据。上面
<withPropsAPI>
提供的propsAPI
属性中,包含了save()
方法。我们可以封装一个SaveButton
组件,暴露一个onSave
事件,然后用<withPropsAPI>
包装该组件。具体可参考 demo自定义键盘操作。可以通过监听
onKeyDown
和onKeyUp
手动创建多个快捷命令以上只是 ggEditor 的核心组件和功能。还有很多组件没有提交,比如
<Minimap>
、<ContextMenu>
、<Toolbar>
,我们可以具体去看项目 demo其他的属性解析可以参考官网 API
自定义节点
如果
<Item>
自带的参数不满足需求,可以使用<ReisterNode>
来封装自己的<Item>
比如自定义一个
start-node
,就可以自行封装一个 node 组件具体可以参考 Issues
兼容 IE11
ggEditor 是基于 umijs 脚手架的, umijs不得不说,太简单粗暴,默认不支持IE,如果需要支持,需要我们开启配置
需要在 .umirc.js 中配置
dva 版本问题
Chrome warning
IE bug
查看后发现都是指向同一个问题,因为 dva 的最新版本,具体可以看看升级dva最新版提示Warning: Please use
require("dva").dynamic
instead ofrequire("dva/dynamic")
. Support for the latter will be removed in the next major release. 和 2.6.0-beta.4 版本新抛出警告为了快速解决这个问题,我去瞅了眼 ant-design-pro,发现它三天前提交的,但是dva版本仍是用的低版本,非常 nice
以上,便可快速解决 IE11 白屏的问题
参考文档
在 React 项目中引入 GG-Editor 编辑可视化流程
常见问题
PS:终于用上自己写的博客系统写文章啦,体验还是非常八错的 😊😊