專案背景
最近在準備開發作業流引擎相關模塊，完成表結構設計后開始著手流程設計器的技術選型，調研了眾多開源專案后決定基于jsplumb.js開源庫進行自研開發，保證定制化的便捷性，相關效果圖及專案地址如下
專案地址：https://gitee.com/code2roc/fast-flow-desgion
需求概述
流程設計器中最基礎的兩個元素為活動（節點）和變遷（連接），我們需要以下基礎功能來配合相關介面進行作業流相關設計資料的保存/修改
- 活動的添加/洗掉/移動
- 變遷的添加/洗掉
- 活動/變遷資料的全部讀取
- 根據json渲染活動與變遷
相關引入依賴如下表所示
| 名稱 | 功能 |
|---|---|
| jsplumb.js | 設計器主要依賴，用于繪制相關圖形與動態操作實作 |
| jquery.js | jsplumb依賴的庫 |
| jquery-ui.js | jsplumb依賴的庫，進行拖拽系結 |
| contextMenu.js | 實作右擊選單 |
| mustache.js | 模板引擎渲染活動，避免字串拼接 |
實作思路
活動添加
通過mustache的render方法渲染添加到html后，需要呼叫draggable方法讓活動能夠進行自由拖動，其中grid引數作用是固定每次拖拽移動最小距離，便于不同節點經過移動后對齊
<script type="text/x-mustache" id="jnode-template">
<div id="{{id}}" jnode="{{jnode}}" style="top:{{top}}px;left:{{left}}px">
<div >{{{jnodeHtml}}}</div>
</div>
</script>
jsPlumb.draggable(id, {
containment: 'parent',
grid: [8, 8]
})
活動洗掉
通過jsPlumb.remove方法洗掉，會洗掉相關活動與連接的變遷，引數是活動id，通過右鍵選單的點擊事件獲取屬性
callback: function(itemKey, opt, rootMenu, originalEvent) {
var id = $($(opt.$trigger[0]).parent()).attr("id");
jsPlumb.remove(id)
}
活動移動
在活動拖動的程序中位置進行變化，我們需要進行事件監聽獲取實時位置保存到資料庫，通過jsPlumb.draggable方法的stop方法注冊實作
jsPlumb.draggable(id, {
containment: 'parent',
grid: [8, 8],
stop: function(event, ui) {
var nodeID = $(ui.helper.context).attr("id");
moveActivity(nodeID, ui.position.left, ui.position.top);
}
});
變遷添加
jsplumb節點可以添加相關錨點，連接不同錨點會自動繪制連線，在實際操作時連線要求錨點對準操作精度較高不便捷，所以我們通過設定節點整體物件為連接物件，可實作滑鼠放置在活動div范圍內進行拖拽連線，需要注意makeSource和makeTarget需要同時執行，節點才能作為起點與終點
function registAutoConnect(id) {
jsPlumb.makeSource(id, {
endpoint: "Dot",
anchor: "Continuous"
})
jsPlumb.makeTarget(id, {
endpoint: "Dot",
anchor: "Continuous"
})
}
以上方法是手動在流程設計器中進行操作連接，如果我們通過介面獲取已有資料，需要通過connect方法進行代碼渲染變遷
需要注意jsplumb中connection的id為自動生成，我們需要通過setAttribute方法對canvas進行id賦值操作，才能系結我要自己的id資料
function addConnect(id, sourceID, targetID) {
var connection = jsPlumb.connect(
{
source: sourceID,
target: targetID
});
connection.id = id
jsPlumb.setAttribute(connection.canvas, "id", connection.id)
}
通過監聽connection事件我們可以知道連接添加完成，進行相關介面呼叫，但我們需要區分是我們通過設計器操作還是代碼渲染，只要判斷originalEvent是否存在，存在則是通過滑鼠操作的
jsPlumb.bind("connection", function(connInfo, originalEvent) {
if (originalEvent) {
}
});
變遷洗掉
通過jsPlumb.detach方法進行變遷的洗掉，默認只洗掉變遷不洗掉連接的活動
function deleteConnect(id) {
var connects = jsPlumb.getAllConnections();
for (var i = 0; i < connects.length; i++) {
var connect = connects[i];
if (connect.id == id) {
jsPlumb.detach(connect)
}
}
}
其它
代碼還包含很多其他細節，如下所示，就不詳細贅述了，大家可以仔細閱讀，專案中包含了詳細的注釋
- 連接添加控制，例如開始節點不能為連接終點，結束節點不能為起點
- 匯入默認配置控制連線樣式
- 各種操作模式指標變換及互動模式
- 流程圖整體移動
- 活動/變遷的選中效果及點擊空白處取消
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/544375.html
標籤：其他
上一篇：Module理解及使用