• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

FlowDesigner: 基于jsplumb的开源流程设计器--FlowDesigner

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称:

FlowDesigner

开源软件地址:

https://gitee.com/openEA/FlowDesigner

开源软件介绍:

基于JsPlumb的流程设计器FlowDesigner

原master分支改名为feature-ES6分支

项目介绍

FlowDesigner来源于Linkey BPM中的流程设计器,作用于流程运行过程中的图形描述。它的操作简捷轻巧,能快速绘制出流程图。组件单独也可以使用,并能嵌入到任何需要该组件的系统中。

技术选型

为什么选用JsPlumb呢?在项目开始之前我对各类技术进行了调研,主要看了一下jsplumb、joint、Raphael、GoJS、dagre-d3这几个,最后我选择了JsPlumb,因为它开源,使用起来也比较方便,文档也是比较齐全的。d3也非常强大,但是学习成本太高。其中还用到了一个非常重要的用于描述图形的库GraphlibJS,使用它可以很方便的管理图形,它内部已经实现了关于图论的大部分算法。JsPlumb官网:https://jsplumbtoolkit.comJsPlumb GitHub:https://github.com/sporritt/jsplumb/GraphlibJS GitHub:https://github.com/dagrejs/graphlib

相关项目

osflow-engine:独立的流程引擎jar;

osflow-designer:流程定义工具,是FlowDesigner含后台表数据的升级版本;

osflow-server:基于SpringBoot的流程微服务项目

效果展示

● 基本面板基本面板

● 拖拽节点到绘图区连线拖拽节点到绘图区连线

● 水平、垂直对齐拖拽节点到绘图区连线

● 显示/隐藏网格显示/隐藏网格

● 单节点、多节点移动单节点、多节点移动

● 改变节点对齐的排序顺序(按住Ctrl键一个一个单击选中要对齐的节点,单击的顺序就是对齐的排列顺序)改变节点对齐的排序顺序

● 撤销与重做撤销与重做

● 清空画布,重新绘制清空画布,重新绘制

● 保存为图片保存为图片

● 修改连线样式修改连线样式

● 调整对齐间距调整对齐间距

● 帮助文档和快捷键大全帮助文档和快捷键大全

● 退出流程设计器友好的未保存提示退出流程设计器友好的未保存提示

● 修改节点文本和连接线文本修改节点文本和连接线文本

● 保存流程图(会生成一段json数据,后台可以保存这段数据,为了便于调试,生成的json数据可以通过快捷键Ctrl+L打开的测试窗口看到。同时也可以从该窗口载入其他的符合流程图的json数据)保存流程图

联科流程应用开发平台交流QQ 群 (入群请 备注 下载渠道,需等待管理员审核)
OpenEA开源技术交流02:748293464 (推荐)


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap