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

 

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐
  • —软件人才免语言低担保 赴美带薪读研!—



你可能感兴趣的:(web,流程设计)