web流程设计器再整理

 

  引言   

   时隔多年，前端发展实在迅猛，各类框架层出不穷，在优雅，简洁，高效以及维护方面各有千秋，只是回过头来看看，自己还是对jquery最顺手，作为个人的业余爱好玩玩，基于jquery ui体系写代码实在是很舒服的一件事情。

    回到正题，在09年的时候，当时顺手写过一个jbpm4的web流程设计器，非常简单的一个雏形，在当前环境下，web流程设计器也是成堆出现的，轮子这东西，只是享受造的过程，有时间玩一玩，结果什么的，不是追求的重点，对于有同样想法的同学，可以拿着代码去玩一玩，有兴趣的可以深入规范和改造一下，代码这种东西有事情是随性而为，里面不如意的地方很多。

  web流程设计器界面组成

1. 上方工具栏
2. 左边模型树
3. 中间图形编辑区
4. 右边属性编辑器
5. 编辑区节点上的浮动面板
6. 编辑区右键菜单

 

 

  功能介绍

• 全选
• 导出图片
• 增加节点
• 删除节点
• 节点文本编辑
• 区域选择
• 移动节点
• 横向对齐
• 纵向对齐
• 增加连接线
• 删除连接线
• 增加泳道
• 删除泳道
• 撤销重做

 

  示例和源码

当前主要在chrome里面测试。

演示地址：http://220.249.113.11/gims/demo/flow-designer.html

github地址：https://github.com/zhyi12/youi-web-demo