gojs自動佈局坑點問題解決思路

原創

hashdog

2020-02-20 22:10

gojs自動佈局坑點問題解決思路

一、需求

二、難點一(自動佈局有效性切換)

三、難點二(自動佈局連線混亂)

一、需求

1.用戶可在拓撲圖面板進行編輯

2.可以通過拉取數據自動生成拓撲圖

3.用戶可以在生成的拓撲圖上二次編輯(難點1)

4.拓撲圖節點與連線的相關數據入庫

5.拉取入庫的節點和連線數據可以正常展示(難點2)

二、難點一(自動佈局有效性切換)

第二個需求需要用到gojs的layout自動佈局

參考API:https://gojs.net/latest/api/symbols/Layout.html

考官網樣例:https://gojs.net/latest/samples/tLayout.html

我們採用的是go.TreeLayout樹形佈局,參考官網樣例完成了該功能,自動佈局基本屬性需要

1.nodeData.key

2.linkData.to和linkData.from

我們從數據庫獲取自動成圖需要的json數據,Layout會自動佈局補充節點和連線的座標.

那麼問題來了,如下圖

可以發現當自動佈局生效後,用戶進行新增節點或者刪除節點,會再次觸發自動佈局效果,原有座標均被重置.也就是說,只要用戶有新增節點的操作,前面的修改會全部重置,但是又必須得使用TreeLayout,否則從後臺拉取的數據是無座標的,不會呈現在面板上.

有兩種解決方案:

1.自動成圖和用戶修改獨立做成兩個界面

2.自動成圖和用戶修改做成一個界面,控制自動佈局有效性

方案一功能冗餘,實現也較爲麻煩,體驗不好,所以嘗試第二種方案,根據官網提供的屬性,推薦使用isOngoing屬性,進行控制自動佈局是否生效

將isOngoing設置爲false，以防止添加或刪除部件等操作使此佈局無效。默認值爲true。

那麼解決思路是,將isOngoing設置爲false,當點擊自動成圖按鈕之後,將isOngoing設置爲true,自動成圖完成後,再將isOngins設置爲false,用戶再編輯的時候,就不會造成佈局無效.

代碼:

三、難點二(自動佈局連線混亂)

當自動佈局後,gojs會自動給nodedata和linkdata綁定座標,保存入庫,再次拉取節點和連線數據,使用默認佈局進行展示的時候,會發現連線有變化,如圖:

經過控制檯打印,發現節點數據沒變,連線座標缺被篡改了.拉取之後未操作,再次保存,對比第二次保存前後的連線數據,可以確定連線座標是被篡改了.參考自動佈局API對多個屬性進行調試,未果.按照官方文檔的說明,可以顯示的給節點綁定某些必要屬性,可以控制該節點的佈局效果.比如座標,但是屬性之多,調試難度大,相對複雜,最後選擇在gojs技術交流羣和論壇求助,最後在論壇中發現解決方案

論壇地址:https://forum.nwoods.com/c/gojs

新用戶可以有30天免費試用