使用jsPlumb制作流程图设计器

jsPlumb是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。在现代浏览器中，它使用SVG或者Canvas技术，而对于IE8以下(含IE8)的古董浏览器，则使用VML技术。

项目主页：http://jsplumbtoolkit.com/

GitHub：https://github.com/sporritt/jsPlumb

作为插件，主要支持jQuery/MooTools/YUI3三种js库，目前最新版本为1.4.1。其中作为jQuery的插件需要用到jQuery、jQuery UI，建议使用最新版本的库避免一些bug。

本文主要使用jQuery 1.9.0、jQuery UI 1.9.2、jsPlumb 1.4.1来绘制流程图。

资源准备

下载jsPlumb，用到以下几个文件：

• build/js/jquery.jsPlumb-1.4.1-all.min.js
• build/lib/jquery-1.9.0-min.js
• build/lib/jquery-ui-1.9.2-min.js
• build/lib/jquery.ui.touch-punch.min.js (可选) 用于触摸支持

以及build/demo/js/demo-helper-jquery.js，主要用于绘图模式的切换，调整为如下代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

jsPlumb.bind("ready", function() {   // chrome fix.   document.onselectstart = function() { return false; };   // render mode   var resetRenderMode = function(desiredMode) {     var newMode = jsPlumb.setRenderMode(desiredMode);     $(".rmode").removeClass("selected");     $(".rmode[mode='" + newMode + "']").addClass("selected");     $(".rmode[mode='canvas']").attr("disabled", !jsPlumb.isCanvasAvailable());     $(".rmode[mode='svg']").attr("disabled", !jsPlumb.isSVGAvailable());     $(".rmode[mode='vml']").attr("disabled", !jsPlumb.isVMLAvailable());     nodeFlow.init();   };   $(".rmode").bind("click", function() {     var desiredMode = $(this).attr("mode");     if (jsPlumbDemo.reset) jsPlumbDemo.reset();     jsPlumb.reset();     resetRenderMode(desiredMode);   });   resetRenderMode(jsPlumb.SVG); });

再准备css样式(从flowchartDemo.css调整而来)：

?

1 2 3 4 5 6 7 8 9 10 11 12

.node { border: 1px solid #346789; box-shadow: 2px 2px 19px #aaa; -o-box-shadow: 2px 2px 19px #aaa; -webkit-box-shadow: 2px 2px 19px #aaa; -moz-box-shadow: 2px 2px 19px #aaa; -moz-border-radius: 0.5em; border-radius: 0.5em; opacity: 0.8; filter: alpha(opacity=80); width: 7em; height: 5em; line-height: 5em; text-align: center; z-index: 20; position: absolute; background-color: #eeeeef; color: black; font-family: helvetica; padding: 0.5em; font-size: 1em; }   .node:hover { box-shadow: 2px 2px 19px #444; -o-box-shadow: 2px 2px 19px #444; -webkit-box-shadow: 2px 2px 19px #444; -moz-box-shadow: 2px 2px 19px #444; opacity: 0.8; filter: alpha(opacity=80); }   ._jsPlumb_connector { z-index: 4; } ._jsPlumb_endpoint { z-index: 21; cursor: pointer; } ._jsPlumb_dragging { z-index: 4000; }   .dragHover { border: 1px dotted red; }   .aLabel { background-color: white; padding: 0.4em; font: 12px sans-serif; color: #444; z-index: 21; border: 1px dotted gray; opacity: 0.8; filter: alpha(opacity=80); }   .ep { position: absolute; right: 5px; top: 5px; width: 1em; height: 1em; background-color: #994466; cursor: pointer; }

最终引入的资源如下：

?

1 2 3 4 5 6 7

<script src='js/jquery-1.9.0.min.js'></script>  <script src='js/jquery-ui-1.9.2.min.js'> <link href="css/demo.css" rel="stylesheet" /> <script src="js/jquery.jsPlumb-1.4.1-all-min.js"></script> <script src="js/jquery.ui.touch-punch.min.js"></script> <script src="js/demo.init.js"></script> <script src="js/demo-helper-jquery.js"></script>

主要实现

参照例子中的Flowchart以及State Machine，实现如下：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

; (function() {   window.nodeFlow = {     init: function() {       // 设置点、线的默认样式       jsPlumb.importDefaults({         DragOptions: { cursor: 'pointer', zIndex: 2000 },         Endpoint: ["Dot", { radius: 1 }],         HoverPaintStyle: { strokeStyle: "#42a62c", lineWidth: 2 },         ConnectionOverlays: [           ["Arrow", { location: -7, id: "arrow", length: 14, foldback: 0.8 }],           ["Label", { location: 0.1, id: "label" }]         ]       });       // 连接事件       jsPlumb.bind("jsPlumbConnection", function(conn, originalEvent) {         if (conn.connection.sourceId == conn.connection.targetId) {           jsPlumb.detach(conn);           alert("不能连接自己！");         }         $.each(jsPlumb.getEndpoints(conn.source), function(i, el) {           if (conn.connection != el.connections[0] &&             (el.connections[0].targetId == conn.targetId || (el.connections[0].sourceId == conn.targetId && el.connections[0].targetId == conn.sourceId))) {             jsPlumb.detach(conn);             alert("不能重复连接！");             return false;           }         });           nodeFlow.onConnectionChange && nodeFlow.onConnectionChange(conn);         conn.connection.bind("editCompleted", function(o) {           if (typeof console != "undefined")             console.log("connection edited. path is now ", o.path);         });       });       // 取消连接事件       jsPlumb.bind("jsPlumbConnectionDetached", function(conn) {         nodeFlow.onConnectionChange && nodeFlow.onConnectionChange(conn);       });       // 双击取消连接       jsPlumb.bind("dblclick", function(conn, originalEvent) {         jsPlumb.detach(conn);       });       // 连接的元素       // 本例中.node既是源头又是目标       var nodeList = $(".node");       nodeList.each(function(i, e) {         // 设置连接的源元素         jsPlumb.makeSource($(e), {           filter: ".ep", // .ep元素用于拖动连接           anchor: "Continuous",           connector: ["Flowchart", { curviness: 20 }], // 连接的方式为流程图           connectorStyle: { strokeStyle: "#014ae1", lineWidth: 2 },           maxConnections: -1 // 最大连接数不限         });       });       // 设置连接目标       jsPlumb.makeTarget(nodeList, {         dropOptions: { hoverClass: "dragHover" },         anchor: "Continuous"       });       // 初始化所有连接元素为可拖动       jsPlumb.draggable(nodeList);     }   }; })();

 

保存及载入状态

创建如下html结构作为测试：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<asp:HiddenField runat="server" ID="connections" /><!--保存连接--> <asp:HiddenField runat="server" ID="locations" /><!--保存元素位置--> <div class="nodeWrapper" style="height:100%;">   <div class="node" id='node1' data-id="1">     <div class="ep"></div>     <strong>节点1</strong>   </div>   <div class="node" id='node1' data-id="1">     <div class="ep"></div>     <strong>节点1</strong>   </div>   <div class="node" id='node2' data-id="2">     <div class="ep"></div>     <strong>节点2</strong>   </div>   <div class="node" id='node3' data-id="3">     <div class="ep"></div>     <strong>节点3</strong>   </div> </div>

在连接状态改变、表单提交时保存连接数据：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

// 连接改变时把所有的节点位置、连接以JSON格式存入到隐藏域中 nodeFlow.onConnectionChange = function() {   var connections = [], locations = [], conns = jsPlumb.getAllConnections();   $.each(conns, function(scopeName, scopeConnections) {     $.each(scopeConnections, function(i, el) {       locations.push($.extend(el.source.offset(), { nodeId: el.source.data("id") }));       locations.push($.extend(el.target.offset(), { nodeId: el.target.data("id") }));       connections.push({ source: el.source.data("id"), target: el.target.data("id") });     });   });   $("input[id$=connections]").val(JSON.stringify(connections));   $("input[id$=locations]").val(JSON.stringify(locations)); }; // 提交表单时更新连接数据 $(":submit").click(nodeFlow.onConnectionChange);

通过以上代码，即可以在表单提交时把流程图的状态保存到数据库。

载入数据

调整html代码如下：

?

1 2 3 4 5 6 7 8 9 10

<div class="nodeWrapper" style="height:100%;">   <asp:Repeater runat="server" ID="nodeList">     <ItemTemplate>       <div class="node" id='node<%#Eval("nodeId") %>' data-id="<%#Eval("nodeId") %>" style="<%#GetLocation((int)Eval("nodeId"))%>">         <div class="ep"></div>         <strong><%#Eval("nodeName") %></strong>       </div>     </ItemTemplate>   </asp:Repeater> </div>

从数据库获取节点、位置、连接数据：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66

/// <summary> /// 节点信息 /// </summary> public class NodeItem {     public int NodeId { get; set; }     public string NodeName { get; set; } } /// <summary> /// 节点位置信息 /// </summary> public class NodeLocation {     public int NodeId { get; set; }     public double Left { get; set; }     public double Top { get; set; } } /// <summary> /// 节点连接信息 /// </summary> public class NodeConnection {     public int Source { get; set; }     public int Target { get; set; } }   List<NodeLocation> locationData;   protected void Page_Load(object sender, EventArgs e) {     if (!IsPostBack)     {         var nodeData = new List<NodeItem>         {             new NodeItem{NodeId=1, NodeName="节点1"},             new NodeItem{NodeId=2, NodeName="节点2"},             new NodeItem{NodeId=3, NodeName="节点3"}         };         nodeList.DataSource = nodeData;         nodeList.DataBind();                   // 从数据库获取位置以及连接         locationData = JsonConvert.DeserializeObject<List<NodeLocation>>(locationString);         var connectionData = JsonConvert.DeserializeObject<List<NodeConnection>>(connectionString);           // 连接所有节点         var builder = new StringBuilder();         builder.Append("jsPlumb.bind(\"ready\", function() {");         connectionData.ForEach(c =>         {             builder.AppendFormat("jsPlumb.connect({{source: 'node{0}', target: 'node{1}'}});", c.Source.ToString(), c.Target.ToString());         });         builder.Append("});");     } }   /// <summary> /// 获取位置 /// </summary> protected string GetLocation(int nodeId) {     var ll = locationData.FirstOrDefault(l => l.NodeId == nodeId);     if (ll != null)         return "left:" + ll.Left.ToString() + "px;top:" + ll.Top.ToString() + "px;";     return string.Empty; }

其中，每次载入时，都需要获取所有连接的数据，并通过脚本把所有节点连接起来。

 

结尾

以上功能只用到jsPlumb少量API，实现起来都比较简单。更多的功能参考官方文档及API文档进行扩展。

在使用jsPlumb之前也看过一些其他的js组件：

• Rapha?l：绘图功能非常强大，但是没有提供更直接的例子，需要花费较多的开发时间
• D3：理由同上
• JointJS：对IE支持不好
• JavaScript InfoVis Toolkit：操作起来比较复杂，表现形式较少
• jQuery OrgChart：只能用来呈现组织结构图，不能进行编辑
• jssvggraph：只有呈现不具备编辑功能
• JS Flowchart：操作复杂，界面不够现代
• ternlight：缺乏API文档
• Strawberry：国人开发的，运行效果似乎不太良好(ie10)
• Diagramo：功能强大、操作不简单，而且使用php
• WireIt：demo太过简单，而且在ie下表现不佳
• jGraphUI：操作不够简单$10
• creately：商业软件
• mxGraph：商业软件，价格高昂$5000+
• MindFusion：商业软件$300+
• Draw2D touch：商业软件499 ?
• yworks：商业软件$5000+
• GoJS HTML5 Canvas：商业软件$2795+