基於JsPlumb的流程設計器FlowDesigner
項目介紹
前段時間項目中缺少一個流程設計器模塊，於是花了一個來月的時間從技術選型到開發再到功能完善搞了一個流程設計器。由於本人不怎麼擅長寫前端代碼，開發過程中碰到了不少問題，初版的代碼寫得有點糟糕，不過功能大部分都已經實現。後期有時間再對代碼進行重構。
技術選型
爲什麼選用JsPlumb呢？在項目開始之前我對各類技術進行了調研，主要看了一下jsplumb、joint、Raphael、GoJS、dagre-d3這幾個，最後我選擇了JsPlumb，因爲它開源，使用起來也比較方便，文檔也是比較齊全的。d3也非常強大，但是學習成本太高。
其中還用到了一個非常重要的用於描述圖形的庫GraphlibJS，使用它可以很方便的管理圖形，它內部已經實現了關於圖論的大部分算法。
JsPlumb官網：https://jsplumbtoolkit.com
JsPlumb GitHub：https://github.com/sporritt/jsplumb/
GraphlibJS GitHub：https://github.com/dagrejs/graphlib
效果展示
● 基本面板
● 拖拽節點到繪圖區連線
● 水平、垂直對齊
● 顯示/隱藏網格
● 單節點、多節點移動
● 改變節點對齊的排序順序(按住Ctrl鍵一個一個單擊選中要對齊的節點，單擊的順序就是對齊的排列順序)
● 撤銷與重做
● 清空畫布，重新繪製
● 保存爲圖片
● 修改連線樣式
● 調整對齊間距
● 幫助文檔和快捷鍵大全
● 退出流程設計器友好的未保存提示
● 修改節點文本和連接線文本
● 保存流程圖(會生成一段json數據，後臺可以保存這段數據，爲了便於調試，生成的json數據可以通過快捷鍵Ctrl+L打開的測試窗口看到。同時也可以從該窗口載入其他的符合流程圖的json數據)
