前言
背景
- 為什麼需要重新開發？
- 業務需求（沒有買賣就沒有殺害 o(╥﹏╥)o ）
- 強大的go.js可以完美的製作流程圖功能，受限於其license，只能捨棄
- G6庫也十分強大，曾以G6為底層開發過一版，但是在繪製節點之間連線時，無法做到自由配置，導致功能跟不上需求，也放棄了
目標
- 明確目標：這個庫需要完成哪些功能？
- 需要有開始/結束、步驟、判斷，連線，這幾個流程圖的基礎節點
- 給定一組資料，能正常的展示出流程圖
- 流程圖需要可編輯：增刪節點，自由定位
分析
- 節點如何繪製?
- 節點是由一系列基礎圖形組合而來
- 比如說要繪製開始節點，那它是由橢圓和文字這兩個基礎圖形組合而來
- 定義基礎圖形，節點的樣式就可以千變萬化
- 一組基礎圖形就是一個節點，節點內圖形的座標相對於節點
- 如何避免重複重新整理計算?
- 該庫有顯示模式與編輯模式
- 編輯模式下存在增刪節點操作，若每次操作都重繪整個畫板，無疑增加計算
- 設計兩個畫板，一個用來顯示不常改變的節點：顯示層；另一個用來繪製常重新整理的節點：編輯層；這樣可以節省大量計算資源
- 節點之間連線邏輯？
- 節點之間的連線要遵從儘量不重合、不相交
- 當前使用的邏輯是：將節點用長方形包裹，有四個面，從開始節點到結束節點，有4 * 4條繪製邏輯
實現
- 提供全域性方法註冊自定義節點，在此可以定義任何你想繪製的圖形，在後面使用只需要提供這個圖形的名稱及配置資訊
- 建立編輯器例項，此時會初始化內部的渲染引擎，ID管理器，節點管理器，事件分發中心
- 渲染引擎：真正在皮膚上繪製圖形，依據自定義圖形的描述繪製
- ID管理器：每個節點都對應的id，此ID唯一，在此生成
- 節點管理器：管理節點的增刪改操作
- 事件分發中心：接收瀏覽器事件，並轉化成內部處理事件，供內部消化及向外部透出
下面是：系統架構圖
下面是：程式執行圖
寫在最後
- 感謝各位看官耐心的看到最後
- 這個專案的完成度還是不夠，現在也只出產demo，後續還有很多需要跟進的地方
- 本專案參考了go.js的流程圖操作，參考了g6的API寫法
- 若有任何你覺得不爽的地方，歡迎指出
- 若你任何的建議或想法，歡迎討論
- 附帶個廣告：我的小站