小编先容

前段韶光项目中短缺一个流程设计器模块,于是花了一个来月的韶光从技能选型到开拓再到功能完善搞了一个流程设计器。
由于本人不怎么善于写前端代码,开拓过程中碰到了不少问题,初版的代码写得有点糟糕,不过功能大部分都已经实现。
后期有韶光再对代码进行重构。

技能选型

为什么选用JsPlumb呢?在项目开始之前我对各种技能进行了调研,紧张看了一下jsplumb、joint、Raphael、GoJS、dagre-d3这几个,末了我选择了JsPlumb,由于它开源,利用起来也比较方便,文档也是比较完好的。
d3也非常强大,但是学习本钱太高。
个中还用到了一个非常主要的用于描述图形的库GraphlibJS,利用它可以很方便的管理图形,它内部已经实现了关于图论的大部分算法。

JsPlumb官网:https://jsplumbtoolkit.com JsPlumb GitHub:https://github.com/sporritt/jsplumb/ GraphlibJS GitHub:https://github.com/dagrejs/graphlib效果展示基本面板

基本面板

jsp对齐基于JsPlumb的流程设计器FlowDesigner GraphQL

拖拽节点到绘图区连线

拖拽节点到绘图区连线

水平、垂直对齐

水平、垂直对齐

显示/隐蔽网格

显示/隐蔽网格

项目地址gitee:https://gitee.com/yjblogs/FlowDesigner