開發(fā)組在開發(fā)過程中，都不可避免地遇到了一些困難或問題，但都最終想出辦法克服了。我們認為這樣的經(jīng)驗是有必要記錄下來的，因此就有了【技術(shù)博客】。

基于JsPlumb和JQuery-UI的流程圖的保存和再生成

這篇技術(shù)博客基于軟件工程課程的VisualPytorch之上，代碼在一定程度上參考了https://www.cnblogs.com/sggx/p/3836432.html這篇博客。

VisualPytorch項目鏈接如下：VisualPytorch

前言-為什么要保存流程圖

對于這樣一個類流程圖或者模型圖，用戶會有保存、查看以及再編輯的需求，僅僅提供讓用戶拖拽連線的功能、讓用戶每次都從頭搭建是會嚴重影響用戶體驗的，因此需要能夠保存模型圖。

這篇博客主要用于提供思路，而非提供整套的解決方案，具體解決方案因人而異。

如何保存流程圖

保存流程圖是兩方面的問題：

（1）選定合適的保存格式

（2）確保保存的信息足夠來還原完整的圖

在保存時，我采用的是將整個圖分為兩個數(shù)組保存入數(shù)據(jù)庫中。圖主要由模塊（開始、reshape層）和連線兩部分組成，因此我選擇將模塊保存為一個json，而連線保存為數(shù)組。

保存模塊采用的主要方法

$("#canvas").find(".node").each(function (index, element) {var id = $(element).attr('id');nets[id] = {"name": $(element).attr('name'),"attribute": eval('(' + window.localStorage.getItem(id) + ')'),"left": $(element).css('left'),"top": $(element).css('top')}});

在畫布中遍歷所有的模塊類，nets對象的標簽為模塊的id，而內(nèi)容為需要保存的屬性。需要注意的是，left與top屬性必須保存，其相當于x,y坐標，用于還原時定位div的位置。

保存連線采用的主要方法

for (var i = 0; i < conn_list.length; i++) {var source_id = conn_list[i]["sourceId"];var target_id = conn_list[i]["targetId"];var conn = {"source": {"id": source_id,"anchor_position": conn_list[i]["endpoints"][0]["anchor"]["type"]},"target": {"id": target_id,"anchor_position": conn_list[i]["endpoints"][1]["anchor"]["type"]}};nets_conn.push(conn);}

連線保存需要注意兩個地方，首先是conn_list的獲得，即如何得到目前的所有連線，這里我調(diào)用了JsPlumb中現(xiàn)有的接口

conn_list = jsPlumb.getAllConnections()

另一個地方時anchor_position。這里涉及到了JsPlumb的部分，在連線的時候，只有有anchor的地方才可以連線，為了復原整個圖，我們需要記錄下anchor的位置。

如何復原流程圖

如何將保存的數(shù)據(jù)從數(shù)據(jù)庫中取出不應(yīng)該是本博客的內(nèi)容，不多贅述。先貼上完整代碼

var structure = eval('(' + net_work["structure"] + ')');var nets = structure['nets'];var nets_conn = structure['nets_conn'];var static_val = structure['static'];var drop_function = $("#canvas").droppable('option', 'drop');var event;jQuery.each(nets, function (id, val) {jsPlumb.ready(function () {var ui = {'offset': {'left': parseInt(val['left'].split('px')) + $("#canvas").offset().left,'top': parseInt(val['top'].split('px')) + $("#canvas").offset().top},'draggable': [{"id": val['name'],"innerHTML": $("#" + val['name'])[0].innerHTML}],'id': id};drop_function(event, ui);});window.localStorage.setItem(id, JSON.stringify(val['attribute']));});jQuery.each(nets_conn, function (id, val) {jsPlumb.ready(function () {jsPlumb.connect({"source": val['source']['id'],"target": val['target']['id'],"anchors": [val['source']['anchor_position'], val['target']['anchor_position']],"endpoint": ["Dot", {radius: 5}],"paintStyle": {stroke: "#fc2f49",strokeWidth: 3,},"maxConnections": -1,"connector": ["Flowchart", {stub: [40, 60],gap: 5,cornerRadius: 5,alwaysRespectStubs: true}],"overlays": [["Arrow", {width: 10, length: 10, location: 1}]],"connectionsDetachable": true,})});});

代碼看著很多，原理非常簡單，就是把用戶畫圖的操作再用js腳本做一遍。

放置模塊

首先第一點，用戶在拖拽div進入畫布時，畫布為droppable狀態(tài)，會觸發(fā)JQuery-UI 的drop事件。

$("#canvas").droppable({scope: "ss",drop: function (event, ui) {.......} })

第一段代碼中的

var drop_function = $("#canvas").droppable('option', 'drop')

drop_function函數(shù)就對應(yīng)了drop事件觸發(fā)后執(zhí)行的代碼塊。

如此一來便很容易理解，只要讓每個被保存的模塊去觸發(fā)drop事件即可，參數(shù)ui用保存的屬性來自己構(gòu)造，詳情參照代碼。

重新連線

重新連線部分，直接調(diào)用JsPlumb的連線方法

jsPlumb.connect()

即可。

注意我們的anchor要選擇之前保存的anchor。

轉(zhuǎn)載于:https://www.cnblogs.com/1606-huluwa/p/10872754.html

總結(jié)

以上是生活随笔為你收集整理的【技术博客】基于JsPlumb和JQuery-UI的流程图的保存和再生成的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。