在网页上画工作流

之前看过 CS 版本的画工作流工具，在工作流节点中配置业务单据界面呈现，用 Gateway 决定业务单据的流程状态，用任务节点连接线配置业务操作。此工作流把界面层 view 、界面管理层 manager 、业务逻辑联系起来，并做为总入口，介绍业务单据的工作流程和每一流程节点的相应界面。这样一来，系统分析人员、实施人员、公司管理层可先一步跟踪流程是否正确，界面元素是否达到客户需求。主体方向正确了，对接下来的工作开展就有一定的把握。

在工作流程任务节点 task 中 配置或预览界面，这听起来很新鲜。传统方式下要整个系统跑起来，并且有记录才能看到界面。而这样在工作流就能先预览界面，这可真让测试人员惊喜：以前要测 试整个系统界面是否正确，要个个功能点准备记录，有时还要换登录用户才能看到相应的界面，这可是很花时间的大——工程。能先预览界面，测试人员眼睛闪着 光，带着疑问。在 CS 版本下预览跟 BS 网页上看到的界面是否差异太大，要能像网页那样出效果，该多好。

有网页预览效果，这也是我想追求的。于是才有了这个在网页上画工作流的想法。那 BS 式工作流可行性如何呢？试试呗。

先找画板 Canvas ，有画板才能画框、画线条之类的。呵呵， HTML5 有 Canvas 。这 Canvas 可以画出来任务节点 Task ，分支 Gateway ，画起始点 Start, End ，流程线 Arrowline 。能画出来，那能拖拉不？ Canvas 只支持在画板上的拖拉，不支持画板上某一图型的拖拉事件响应。这真让人失望。网页上 flash 的表现这么灵活，用 flash 来画如何？ flash 可以对某一图形元素写响应事件，可是 flash 要与后台 java 进行数据交互又成为一个难点。怎么办呢？难道在网页上工作流只能止于想法阶段。

如果将网页元素浮起来做流程元素可不可行呢？任务节点 Task 图可以做背景 Table ，节点名字可以在 TD 中显示， Table 做的任务节点可以响应拖拉事件。用这种方式可以画出 Task, Gateway, Start, End 流程元素，那流程线怎么做呢？箭头直线可以用 Canvas 动态画出来，可以用 Table 分行装载直线名称和直线图，或者在一个单元格换行装载。可直线都是有旋转角度的， Table 可以旋转吗？ CSS 可以做到旋转 Table 。哈哈，这下可拖拉的网页流程元素都有了。有些人可能会问，像任务节点 Task 是可以整个 Table 中任意点点击都当选中，可非矩形的流程节点，如圆形的 Start/End ，菱形 Gateway ，拖拉可是有范围的。这点嘛，在流程节点中限制一定范围的才响应就可以了。

 

 

流程元素实验结果如上图。这期间遇到一个问题：怎样确定流程走线的角度。根据横坐标的长度 xMove 、竖坐标的长度 yMove 可以知道直线的角度，可是如果转的角度大于 90 ，流程走线的名称跟着反了过来，不够直观。要保证直线名称的直观性，直线与水平线的夹角只能在 90 度以内。那样的话，箭头方向又不对了。只好在画直线的 Canvas 上下功夫，向水平线方向时画右箭头，反方向时画左箭头。

接下来开始画工作流。

第一步，先放上画板 Canvas 。

给用户画流程，流下画流程的轨迹，合符一定规则的图形则转化成标准流程元素。用户在画板上画中心点交叉的十字出一个流程交叉 Gateway ，即画好十字交叉后，在网页上从标准流程 Task 元素 Clone 放上一个流程交叉 Gateway ，并清空画板。用户在画板上画起点交叉的十字出一个流程任务 Task ，也是 Clone 后加到网页。设计上是这样寥寥几句，实现起来就是另一回事了。先写个 JavaScript 的画板 Draw 类，当 Canvas.onmousedown 时定位画板起点，并让 ducument.onmousemoving 时在画板上画鼠标走线，让 document.onmouseup 时起笔成图。下面是画的一个画：

 

 

第二步，画流程元素。画 Task, Gateway 都是两条直线成图的。

Draw 初始时

?  先定义两条线。 this.lines = [[0,0, 0,0], [0,0, 0,0]];

（看出来不？一条直线 [0,0, 0,0] 为起点 0,0 加上终点 0,0 ）

画板起笔

?  定位当前直线起点

起笔成图

?  定位当前直线终点，并使下一直线为当前直线。

?  当前一次直线与这一次直线都移了一定长度，算两直线交点。如果交点在中心，则添加 Gateway ；如果交点在起点，则添加 Task ；

效果如下：

 

第三步：画流程路线。

在添加流程元素时

1.         让流程元素记录它的中心点坐标 x, y

2.         流程元素 onmousedown 记录直线起点坐标

3.         流程元素 onmouseup 记录直线终点坐标，添加流程走线 Arrowline

1.         起点流程元素 StartObj 的中心点坐标与终点流程无线 EndObj 的中心点坐标成一直线 line 。

2.         起点元素 StartObj 与 line 的交点 start ，终点元素与 line 的交点 end 。两交点的连线为流程走线。

3.         两交点的中点，加流程走线中心点与走线中的直线中心点的旋转长度，为流程走线的中点。（呵呵，这点很关键，要不流程走线的两端就不在 start ， end 上了。）

4.         在中点添加 Arrowline ，并旋转一定的角度。

各流程元素实现流程元素基类方法。（ JS 也可以有接口、多态的）

1.         坐标是否在流程元素中 isMouseIn

2.         流程元素与中心直线的交点

效果如图：

 

 

第四步，让流程元素可移动起来。

添加流程走线 arrowline 时

?  在起点对象的出直线集合 outs 上添加 line 。

?  在终点对象的进直线集合 ins 上添加 line 。

?  在流程走线 line 上记起点对象 from ，终点对象 to

流程元素 ctlKey 并 onmouvedown 下笔时，记移动的起点对象，起点坐标。

鼠标移动时，在画板上流下移动痕迹。

鼠标起（完笔）时，移动距离确定。

让与流程元素连接的入直线集合、出直线集合重画。

效果如图：

 

 

第五步，美化流程元素图