用zrender实现工作流图形化设计（附范例代码）

冷不防 2022-07-14 09:45 96阅读 0赞

公司研发的管理系统有工作流图形化设计和查看功能，这个功能的开发历史比较久远。在那个暗无天日的年月里，IE几乎一统江湖，所以顺理成章地采用了当时红极一时的VML技术。

后来的事情大家都知道了，IE开始走下坡路，VML这个技术现在早已灭绝，导致原来的工作流图形化功能完全不能使用，所以需要采用新技术来重写工作流图形化功能。

多方对比之后，决定采用zrender库来实现（关于zrender库的介绍，请看http://ecomfe.github.io/zrender/），花了一天的时间，终于做出了一个大致的效果模型，如下图所示：

![4069-20161205215047757-19674427.png][]![4069-20161205215133804-1090638490.png][]

流程图由两类部件组成：活动部件和连接弧部件，每一类部件包含多个性状不同的部件。

以活动部件为例，圆形的是开始活动，平行四边形是自动活动，长方形是人工活动，等等。

在代码实现上，定义了Unit（部件基类），所有的部件都继承自这个基类。通过Graph类来管理整个流程图，包括所有部件、上下文菜单等等都由Graph来统一管理和调度，代码如下：

\+   ?

<table> 
 <tbody> 
  <tr> 
   <td> 
    <div>
      1 
    </div> 
    <div>
      2 
    </div> 
    <div>
      3 
    </div> 
    <div>
      4 
    </div> 
    <div>
      5 
    </div> 
    <div>
      6 
    </div> 
    <div>
      7 
    </div> 
    <div>
      8 
    </div> 
    <div>
      9 
    </div> 
    <div>
      10 
    </div> 
    <div>
      11 
    </div> 
    <div>
      12 
    </div> 
    <div>
      13 
    </div> 
    <div>
      14 
    </div> 
    <div>
      15 
    </div> 
    <div>
      16 
    </div> 
    <div>
      17 
    </div> 
    <div>
      18 
    </div> 
    <div>
      19 
    </div> 
    <div>
      20 
    </div> 
    <div>
      21 
    </div> 
    <div>
      22 
    </div> 
    <div>
      23 
    </div> 
    <div>
      24 
    </div> 
    <div>
      25 
    </div> 
    <div>
      26 
    </div> 
    <div>
      27 
    </div> 
    <div>
      28 
    </div> 
    <div>
      29 
    </div> 
    <div>
      30 
    </div> 
    <div>
      31 
    </div> 
    <div>
      32 
    </div> 
    <div>
      33 
    </div> 
    <div>
      34 
    </div> 
    <div>
      35 
    </div> 
    <div>
      36 
    </div> 
    <div>
      37 
    </div> 
    <div>
      38 
    </div> 
    <div>
      39 
    </div> 
    <div>
      40 
    </div> 
    <div>
      41 
    </div> 
    <div>
      42 
    </div> 
    <div>
      43 
    </div> 
    <div>
      44 
    </div> 
    <div>
      45 
    </div> 
    <div>
      46 
    </div> 
    <div>
      47 
    </div> 
    <div>
      48 
    </div> 
    <div>
      49 
    </div> 
    <div>
      50 
    </div> 
    <div>
      51 
    </div> 
    <div>
      52 
    </div> 
    <div>
      53 
    </div> 
    <div>
      54 
    </div> 
    <div>
      55 
    </div> 
    <div>
      56 
    </div> 
    <div>
      57 
    </div> 
    <div>
      58 
    </div> 
    <div>
      59 
    </div> 
    <div>
      60 
    </div> 
    <div>
      61 
    </div> 
    <div>
      62 
    </div> 
    <div>
      63 
    </div> 
    <div>
      64 
    </div> 
    <div>
      65 
    </div> 
    <div>
      66 
    </div> 
    <div>
      67 
    </div> 
    <div>
      68 
    </div> 
    <div>
      69 
    </div> 
    <div>
      70 
    </div> 
    <div>
      71 
    </div> 
    <div>
      72 
    </div> 
    <div>
      73 
    </div> 
    <div>
      74 
    </div> 
    <div>
      75 
    </div> 
    <div>
      76 
    </div> 
    <div>
      77 
    </div> 
    <div>
      78 
    </div> 
    <div>
      79 
    </div> 
    <div>
      80 
    </div> 
    <div>
      81 
    </div> 
    <div>
      82 
    </div> 
    <div>
      83 
    </div> 
    <div>
      84 
    </div> 
    <div>
      85 
    </div> 
    <div>
      86 
    </div> 
    <div>
      87 
    </div> 
    <div>
      88 
    </div> 
    <div>
      89 
    </div> 
    <div>
      90 
    </div> 
    <div>
      91 
    </div> 
    <div>
      92 
    </div> 
    <div>
      93 
    </div> 
    <div>
      94 
    </div> 
    <div>
      95 
    </div> 
    <div>
      96 
    </div> 
    <div>
      97 
    </div> 
    <div>
      98 
    </div> 
    <div>
      99 
    </div> 
    <div>
      100 
    </div> 
    <div>
      101 
    </div> 
    <div>
      102 
    </div> 
    <div>
      103 
    </div> 
    <div>
      104 
    </div> 
    <div>
      105 
    </div> 
    <div>
      106 
    </div> 
    <div>
      107 
    </div> 
    <div>
      108 
    </div> 
    <div>
      109 
    </div> 
    <div>
      110 
    </div> 
    <div>
      111 
    </div> 
    <div>
      112 
    </div> 
    <div>
      113 
    </div> 
    <div>
      114 
    </div> 
    <div>
      115 
    </div> 
    <div>
      116 
    </div> 
    <div>
      117 
    </div> 
    <div>
      118 
    </div> 
    <div>
      119 
    </div> 
    <div>
      120 
    </div> 
    <div>
      121 
    </div> 
    <div>
      122 
    </div> 
    <div>
      123 
    </div> 
    <div>
      124 
    </div> 
    <div>
      125 
    </div> 
    <div>
      126 
    </div> 
    <div>
      127 
    </div> 
    <div>
      128 
    </div> 
    <div>
      129 
    </div> 
    <div>
      130 
    </div> 
    <div>
      131 
    </div> 
    <div>
      132 
    </div> 
    <div>
      133 
    </div> 
    <div>
      134 
    </div> 
    <div>
      135 
    </div> 
    <div>
      136 
    </div> 
    <div>
      137 
    </div> 
    <div>
      138 
    </div> 
    <div>
      139 
    </div> 
    <div>
      140 
    </div> 
    <div>
      141 
    </div> 
    <div>
      142 
    </div> 
    <div>
      143 
    </div> 
    <div>
      144 
    </div> 
    <div>
      145 
    </div> 
    <div>
      146 
    </div> 
    <div>
      147 
    </div> 
    <div>
      148 
    </div> 
    <div>
      149 
    </div> 
    <div>
      150 
    </div> 
    <div>
      151 
    </div> 
    <div>
      152 
    </div> 
    <div>
      153 
    </div> 
    <div>
      154 
    </div> 
    <div>
      155 
    </div> 
    <div>
      156 
    </div> 
    <div>
      157 
    </div> 
    <div>
      158 
    </div> 
    <div>
      159 
    </div> 
    <div>
      160 
    </div> 
    <div>
      161 
    </div> 
    <div>
      162 
    </div> 
    <div>
      163 
    </div> 
    <div>
      164 
    </div> 
    <div>
      165 
    </div> 
    <div>
      166 
    </div> 
    <div>
      167 
    </div> 
    <div>
      168 
    </div> 
    <div>
      169 
    </div> 
    <div>
      170 
    </div> 
    <div>
      171 
    </div> 
    <div>
      172 
    </div> 
    <div>
      173 
    </div> 
    <div>
      174 
    </div> 
    <div>
      175 
    </div> 
    <div>
      176 
    </div> 
    <div>
      177 
    </div> 
    <div>
      178 
    </div> 
    <div>
      179 
    </div> 
    <div>
      180 
    </div> 
    <div>
      181 
    </div> 
    <div>
      182 
    </div> 
    <div>
      183 
    </div> 
    <div>
      184 
    </div> 
    <div>
      185 
    </div> 
    <div>
      186 
    </div> 
    <div>
      187 
    </div> 
    <div>
      188 
    </div> 
    <div>
      189 
    </div> 
    <div>
      190 
    </div> 
    <div>
      191 
    </div> 
    <div>
      192 
    </div> 
    <div>
      193 
    </div> 
    <div>
      194 
    </div> 
    <div>
      195 
    </div> 
    <div>
      196 
    </div> 
    <div>
      197 
    </div> </td> 
   <td> 
    <div> 
     <div> 
      <code>var</code> 
      <code>Libra = {};</code> 
     </div> 
     <div> 
      <code>Libra.Workflow = {};</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>Libra.Workflow.Graph = </code> 
      <code>function</code> 
      <code>(type, options){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>graph = </code> 
      <code>this</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>activities = {},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>transitions = {};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>zrenderInstance,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>contextMenuContainer;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.type = type;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.addActivity = </code> 
      <code>function</code> 
      <code>(activity){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>activity.graph = graph;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>activities[activity.id] = {object:activity};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.getActivity = </code> 
      <code>function</code> 
      <code>(id){ </code> 
      <code>return</code> 
      <code> activities[id].object; };</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.addTransition = </code> 
      <code>function</code> 
      <code>(transition){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>transition.graph = graph;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>transitions[transition.id] = {object:transition};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>function</code> 
      <code>modElements(shapes){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>shapes.each(</code> 
      <code>function</code> 
      <code>(shape){ zrenderInstance.modElement(shape); });</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>shapes;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 当前正在拖放的节点</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>dragingActivity = </code> 
      <code>null</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 活动节点拖放开始</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.onActivityDragStart = </code> 
      <code>function</code> 
      <code>(activity){ dragingActivity = activity; };</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 活动节点拖放结束</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.onActivityDragEnd = </code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(dragingActivity) refreshActivityTransitions(dragingActivity);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>dragingActivity = </code> 
      <code>null</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 拖动过程处理</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>function</code> 
      <code>zrenderInstanceOnMouseMove(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(dragingActivity != </code> 
      <code>null</code> 
      <code>) refreshActivityTransitions(dragingActivity);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 刷新活动相关的所有连接弧</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>function</code> 
      <code>refreshActivityTransitions(activity){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>activityId = activity.id;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>for</code> 
      <code>(</code> 
      <code>var</code> 
      <code>key </code> 
      <code>in</code> 
      <code>transitions){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>transition = transitions[key].object;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(transition.from === activityId || transition.to == activityId){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>zrenderInstance.refreshShapes(modElements(transition.refresh(graph)));</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 当前选中的部件</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>selectedUnit = </code> 
      <code>null</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.onUnitSelect = </code> 
      <code>function</code> 
      <code>(unit){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(selectedUnit) zrenderInstance.refreshShapes(modElements(selectedUnit.unselect(graph)));</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>zrenderInstance.refreshShapes(modElements(unit.select(graph)));</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>selectedUnit = unit;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 记录当前鼠标在哪个部件上，可以用来生成上下文相关菜单</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>currentUnit = </code> 
      <code>null</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.onUnitMouseOver = </code> 
      <code>function</code> 
      <code>(unit){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>currentUnit = unit;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.onUnitMouseOut = </code> 
      <code>function</code> 
      <code>(unit){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(currentUnit === unit) currentUnit = </code> 
      <code>null</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 上下文菜单事件响应</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>function</code> 
      <code>onContextMenu(event){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>Event.stop(event);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(currentUnit) currentUnit.showContextMenu(event, contextMenuContainer, graph);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.addShape = </code> 
      <code>function</code> 
      <code>(shape){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>zrenderInstance.addShape(shape);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 初始化</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.init = </code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>canvasElement = options.canvas.element;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>canvasElement.empty();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>canvasElement.setStyle({height: document.viewport.getHeight() + </code> 
      <code>'px'</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>zrenderInstance = graph.type.zrender.init(document.getElementById(canvasElement.identify()));</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>for</code> 
      <code>(</code> 
      <code>var</code> 
      <code>key </code> 
      <code>in</code> 
      <code>activities){ activities[key].object.addTo(graph); }</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>for</code> 
      <code>(</code> 
      <code>var</code> 
      <code>key </code> 
      <code>in</code> 
      <code>transitions){ transitions[key].object.addTo(graph); }</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 创建上下文菜单容器</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>contextMenuContainer = </code> 
      <code>new</code> 
      <code> Element(</code> 
      <code>'div'</code> 
      <code>, { </code> 
      <code>'class'</code> 
      <code>: </code> 
      <code>'context-menu'</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>contextMenuContainer.hide();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>document.body.appendChild(contextMenuContainer);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>Event.observe(contextMenuContainer, </code> 
      <code>'mouseout'</code> 
      <code>, </code> 
      <code>function</code> 
      <code>(event){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 关闭时，应判断鼠标是否已经移出菜单容器</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(!Position.within(contextMenuContainer, event.clientX, event.clientY)){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>contextMenuContainer.hide();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 侦听拖动过程</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>zrenderInstance.on(</code> 
      <code>'mousemove'</code> 
      <code>, zrenderInstanceOnMouseMove);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 上下文菜单</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>Event.observe(document, </code> 
      <code>'contextmenu'</code> 
      <code>, onContextMenu);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 呈现或刷新呈现</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.render = </code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>canvasElement = options.canvas.element;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>canvasElement.setStyle({height: document.viewport.getHeight() + </code> 
      <code>'px'</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>zrenderInstance.render();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div> 
      <code>};</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>/*</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>* 部件（包括活动和连接弧）</code> 
     </div> 
     <div> 
      <code>&nbsp;</code> 
      <code>*/</code> 
     </div> 
     <div> 
      <code>Libra.Workflow.Unit = Class.create({ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>id: </code> 
      <code>null</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>title: </code> 
      <code>null</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>graph: </code> 
      <code>null</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 当前是否被选中</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>selected: </code> 
      <code>false</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 上下文菜单项集合</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>contextMenuItems: [],</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>initialize: </code> 
      <code>function</code> 
      <code>(options){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>_this = </code> 
      <code>this</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>_this.id = options.id;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>_this.title = options.title;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>createShapeOptions: </code> 
      <code>function</code> 
      <code>(){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>_this = </code> 
      <code>this</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>{ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>hoverable : </code> 
      <code>true</code> 
      <code>,</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>clickable : </code> 
      <code>true</code> 
      <code>,</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>onclick: </code> 
      <code>function</code> 
      <code>(params){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 选中并高亮</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>_this.graph.onUnitSelect(_this);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>onmouseover: </code> 
      <code>function</code> 
      <code>(params){ _this.graph.onUnitMouseOver(_this); },</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>onmouseout: </code> 
      <code>function</code> 
      <code>(params){ _this.graph.onUnitMouseOut(_this); }</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>};</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>addTo: </code> 
      <code>function</code> 
      <code>(graph){},</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 刷新显示</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>refresh: </code> 
      <code>function</code> 
      <code>(graph){ </code> 
      <code>return</code> 
      <code> []; },</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 选中</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>select: </code> 
      <code>function</code> 
      <code>(graph){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.selected = </code> 
      <code>true</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>this</code> 
      <code>.refresh(graph);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 取消选中</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>unselect: </code> 
      <code>function</code> 
      <code>(graph){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.selected = </code> 
      <code>false</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>return</code> 
      <code>this</code> 
      <code>.refresh(graph);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 显示上下文菜单</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>showContextMenu: </code> 
      <code>function</code> 
      <code>(event, container, graph){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>container.hide();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>container.innerHTML = </code> 
      <code>''</code> 
      <code>;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>ul = </code> 
      <code>new</code> 
      <code>Element(</code> 
      <code>'ul'</code> 
      <code>);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>container.appendChild(ul);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>this</code> 
      <code>.buildContextMenuItems(ul, graph);</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 加偏移，让鼠标位于菜单内</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>offset = -5;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>rightEdge = document.body.clientWidth - event.clientX;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>bottomEdge = document.body.clientHeight - event.clientY;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(rightEdge &lt; container.offsetWidth)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>container.style.left = document.body.scrollLeft + event.clientX - container.offsetWidth + offset;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>else</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>container.style.left = document.body.scrollLeft + event.clientX + offset;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>if</code> 
      <code>(bottomEdge &lt; container.offsetHeight)</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>container.style.top = document.body.scrollTop + event.clientY - container.offsetHeight + offset;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>else</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>container.style.top = document.body.scrollTop + event.clientY + offset;</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>container.show();</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>},</code> 
     </div> 
     <div>
       &nbsp; 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>// 创建上下文菜单项</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>buildContextMenuItems: </code> 
      <code>function</code> 
      <code>(container, graph){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>var</code> 
      <code>unit = </code> 
      <code>this</code> 
      <code>;</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>unit.contextMenuItems.each(</code> 
      <code>function</code> 
      <code>(item){ </code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>item.addTo(container);</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>});</code> 
     </div> 
     <div> 
      <code>&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code>}</code> 
     </div> 
     <div> 
      <code>});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

zrender默认已经支持了对图形的拖动，所以活动部件的拖动只需要设置dragable属性为真即可。不过虽然活动部件可以拖动，但活动部件上的连接线不会跟着一起动，这需要侦听拖动开始事件、拖动结束事件以及拖动过程中的鼠标移动事件，来实现连接线的实时重绘。在Graph中侦听鼠标移动事件，就是为了实现连接线等相关图形的实时重绘。

每个部件都规划了八个连接点，默认情况下，连接弧不固定与某个连接点，而是根据活动部件的位置关系，自动找出最近的连接点，所以在拖动活动部件的时候，可以看到连接弧在活动部件上的连接点在不断变化。

上面只是以最简化的方式实现了工作流图形化设计的基本功能，完善的图形化设计应包含曲线、连接点的拖放等等，如下图所示：

![4069-20161205221455694-59017204.png][]

上面是公司产品中的工作流图形化设计功能，功能相对于上面的范例要完善许多，但基本原理不变，无非就是细节处理更多一些。

特别是在画的地方花了很多时间，中学的平面几何知识几乎都忘记了，所以做起来花了不少功夫，这部分准备以后专门写篇文章来详谈。

本文的结尾会给出前期建模测试阶段的完整代码下载，是前期代码，不是最终代码，原因你懂的，见谅。

http://files.cnblogs.com/files/rrooyy/WorkflowGraphic.zip

[4069-20161205215047757-19674427.png]: http://images2015.cnblogs.com/blog/4069/201612/4069-20161205215047757-19674427.png
[4069-20161205215133804-1090638490.png]: /images/20220714/c018b4b892c14ed7a9af29a6f777fc77.png
[4069-20161205221455694-59017204.png]: /images/20220714/88c1c669a9c148e985b3f25c4c7571b3.png