> 本文首發於 **[NebulaGraph 公眾號](https://nebula-website-cn.oss-cn-hangzhou.aliyuncs.com/nebula-blog/WeChatOffical.png)**

![開源圖編輯庫 NebulaGraph VEditor 的設計思路分享](https://nebula-website-cn.oss-cn-hangzhou.aliyuncs.com/nebula-website/images/VEditor/Web%20%E5%9B%BE%E7%BC%96%E8%BE%91%E5%BA%93_%E7%94%BB%E6%9D%BF%201.jpg)

NebulaGraph VEditor 是一個擁有高效能、高可定製的所見即所得圖視覺化編輯器前端庫。

NebulaGraph VEditor 底層基於 SVG 繪圖，它透過合理抽象程式碼結構以易於二次開發和自定義繪製，極適用於審批流，工作流，血緣關係，ETL 處理，圖查詢等圖（Graph）和網路（Network）型拓撲資訊的所見即所得編輯和預覽場景。在 NebulaGraph 專案中，VEditor 輕鬆支援了圖查詢，圖編輯，圖建模，圖結構，圖路徑展示等視覺化場景。

在 NebulaGraph 中經過不斷迭代、打磨之後，VEditor 已經相對完善，開源了相關程式碼。基於此，今天我就來為大家分享一下它的一些設計的思路與思考。

## 基本特性

* 高定製性的點，線形狀，一切部件皆可定製
* 扁平，簡單，直接的程式碼架構
* 小地圖，磁吸線
* 各類快捷鍵支援
* 歷史記錄
* 輕量化，壓縮前僅 160kb

## 設計理念

最早開始接觸圖編輯庫時，本身需求其實並不高，能滿足定製 + 動畫即可，但看了業界非常多的流程相簿後，作為一名前端工程師的自我修養讓人很難對有些過度設計的架構，臃腫的介面，複雜的類關係有好感，這與我追尋簡單，精簡，低耦合的程式碼理念相悖。因此最終決定手寫一個輕量的庫，並能滿足各種業務場景的定製需求。VEditor 的設計理念就是希望在可定製性和可理解性的基礎上能讓開發者用起來更輕便，減少學習各類 API，減少依賴各類庫。

## 技術架構

![開源圖編輯庫 NebulaGraph VEditor 的設計思路分享](https://nebula-website-cn.oss-cn-hangzhou.aliyuncs.com/nebula-website/images/VEditor/11.png)

整體架構主要透過事件來做實體間的依賴管理，也建議主要透過事件來獲取整個流程圖的狀態變化。

其中渲染流程為半自動渲染，改變流程圖資料後需要手動觸發渲染，其他狀態下對畫布進行操作會觸發使用者定義的 shape 渲染函式，完成自定義節點渲染節點或線渲染。

## 渲染實現

VEditor 主體使用 SVG 進行渲染，得益於 SVG 的宣告式使用方式，其內部結構都是外接可見的，對其進行樣式定製化會非常的容易，使用者可以在外界直接複寫相關的 SVG 樣式即可，同時還可以直接操作 SVGDOM 監聽相關的滑鼠事件，及對某些節點新增各類動畫。

在形狀渲染上，主要透過暴露出來的 Shape 介面註冊使用者的自定義渲染函式。從這個角度上來看，VEditor 可以基於任意使用渲染技術進行渲染，只要渲染介面返回 SVGDOM 即可，這個 DOM 可以是 SVGElement 或 ForeignObject 等。因此在使用 React 或 Vue 等虛擬 DOM 框架時，非常推薦用其管理 SVG 的渲染。甚至某些情況下可以包裹一個 Canvas 來渲染 WebGL 的節點，這非常大的擴充了業務中的定製性。

除了節點外，錨點及線也支援實現對應介面後註冊為 Shape 的物件渲染，在我們的 Explorer 的實際業務中利用這個特點，實現了圖計算流配置支援動態增刪改演算法引數錨點和TP查詢輸入輸出錨點（圖 1），以及圖視覺化查詢中邊的過濾，步數渲染（圖 2)。也歡迎大家申請 Explorer 試用，體驗下流程圖相關功能，試用地址 https://nebula-graph.com.cn/products/explorer/

![開源圖編輯庫 NebulaGraph VEditor 的設計思路分享](https://nebula-website-cn.oss-cn-hangzhou.aliyuncs.com/nebula-website/images/VEditor/12.png)
![開源圖編輯庫 NebulaGraph VEditor 的設計思路分享](https://nebula-website-cn.oss-cn-hangzhou.aliyuncs.com/nebula-website/images/VEditor/13.png)

整體架構主要透過事件來做實體間的依賴管理，也建議主要透過事件來獲取整個流程圖的狀態變化。

其中渲染流程為半自動渲染，改變流程圖資料後需要手動觸發渲染，其他狀態下對畫布進行操作會觸發使用者定義的 shape 渲染函式，完成自定義節點渲染節點或線渲染。

## 資料結構設計

VEditor 的資料結構和絕大部分的同類庫類似，但不會破壞使用者的物件引用，也就是在使用者往節點或線的物件上掛載相關資料時，會對齊進行保留，這樣會方便使用者實現諸如節點配置，邊配置等操作後將相關資料直接掛載到點資料上。因此歷史記錄的 Redo，Undo 等操作會將使用者的資料當做快照一同儲存下來。

```
{
	nodes:[{
		uuid:"uuid",
		type:"default",// shape型別 
	}],
	lines:[{
		from:"uuid",
		to:"uuid",
		fromPoint:0,
		toPoint:0
	}]
}
```

## 效能設計

眾所周知，SVG 在小解析度的渲染上，效能比 Canvas 差了許多，這也是易用性提升帶來的一個缺點。尤其是在初始化時大量比較複雜或有動畫的節點時，非常明顯。針對這種情況，VEditor 的資料渲染部分採用的是非同步流程，將錨點的渲染放到了下一個事件迴圈裡，避免同步過程中大量獲取 bbox 帶來的瀏覽器強制重繪。在結束繪製後，快取對應的節點資料避免重複獲取。

![開源圖編輯庫 NebulaGraph VEditor 的設計思路分享](https://nebula-website-cn.oss-cn-hangzhou.aliyuncs.com/nebula-website/images/VEditor/14.png)

而在新增節點或線等操作時，SVG 的 DOM 特性會讓瀏覽器自動進行髒渲染，因此增量渲染的效能和 Canvas 差距並不，主要是進行互動和動畫時導致 DOM 大量重繪會比較慢。目前設計的效能指標是 1000 個複雜形狀的節點進行流暢渲染，在流程編輯類場景下是比較輕鬆的。

## 互動設計

VEdtior 預設提供了基於 Dagre 的有向圖佈局，但對其進行了最佳化，呼叫 Dagre 佈局後，會自動對所有節點進行居中處理。同時提供了自適應大小功能，在自適應後，不同於其他庫，這裡會將當前節點的座標重置為自適應的位置，在使用者儲存當前資料，可以直接還原自適應的位置。

VEditor 的小地圖採用了 canvg 渲染，直接將 SVG 轉換為 Canvas，可以保障小地圖的準確性，同時減少效能損耗。在互動上則提供了全套的檢視改變和拖拽功能。

## 未來計劃

後面的規劃中，VEditor 更傾向做一個不限領域的圖資料編輯和渲染器，在完整缺失功能的同時，會擴大圖編輯能發揮的場景並保持易用度。

* 新增框選器和多選操作
* 無向圖，雙箭頭支援
* 效能進一步最佳化

? GitHub 開源地址：https://github.com/vesoft-inc/nebulagraph-veditor

> 歡迎來給我們提建議 and 貢獻 PR 呦~

交流圖資料庫技術？加入 NebulaGraph 交流群請先[填寫下你的 NebulaGraph 名片](https://wj.qq.com/s2/8321168/8e2f/)，Nebula 小助手會拉你進群哦~~

開源圖編輯庫 NebulaGraph VEditor 的設計思路分享

相關文章