在 React 項目中引入 GG-Editor 編輯可視化流程

螞蟻金服數據可視化團隊曾經開源了一款 G6-Editor，但後來停止了對外支持，學習成本太高好在後來他們團隊的大牛高力結合 React + G6 開源了一個 GG-Editor（其實就是G6-Editor）不過相關的文檔還是太少，實際的使用依然是一個不斷摸索的過程... 常見問題: https ...

螞蟻金服數據可視化團隊曾經開源了一款 G6-Editor，但後來停止了對外支持，學習成本太高

好在後來他們團隊的大牛高力結合 React + G6 開源了一個 GG-Editor（其實就是G6-Editor）

不過相關的文檔還是太少，實際的使用依然是一個不斷摸索的過程...

常見問題: https://github.com/gaoli/GGEditor/issues/130

一、引用 GG-Editor

直接通過 npm 或 yarn 安裝依賴

npm install --save gg-editor

由於對 GG-Editor 不熟悉，所以我將它自帶的 Demo 作為模版，在此基礎上進行開發

將 node_modules/gg-editor/demo/src/ 下的 Flow 目錄和 components、common 目錄拷出來，放到開發目錄下進行改造

這個 demo 基於 ant 開發，所以需要引入 ant

npm install --save antd

另外 demo 使用了 CSS Modules，需要在項目配置中啟用

比如在我的項目中，就把原本的 index.css 重命名為 index.module.css，然後修改相應的引入路徑

由於只是開發可視化流程，所以 components 目錄下多餘的文件（以 Koni 和 Mind 開頭的文件）都以刪掉

然後將 Flow/index.js 提出來作為項目入口，改造後的目錄如下：

二、 Item 節點配置

demo 啟動之後的界面是這樣的

左邊是 gg-editor 提供的四種基礎節點類型，其對應的組件是 /components/EditorItemPanel

這個組件下引入了四個 gg-deitor <Item> 組件，官方提供的 API 如下：

http://ggeditor.com/docs/api/itemPanel.zh-CN.html

其中 type 有 node 和 edge 兩個值可選，node 就是節點，edge 是連接節點的連線

shape 可選參數有：圓形 'flow-circle' | 圓角矩形 'flow-rect' | 菱形 'flow-rhombus' | 橢圓矩形 'flow-capsule'

src 可以引入一張圖片作為當前節點的預覽樣式

也可以自定義子節點，<Item /> 會接收 props.children 作為預覽樣式

需要註意的是，不管是 src 還是子節點，都只是一個預覽樣式，並不等於編輯器畫板中的樣式

而畫板中的樣式，由 model 決定，其配置項如下：

model: {
    color: '#333', // 節點主題色（選中顏色、激活顏色基於該值）
    size: [10, 10], // [x, y] 節點尺寸
    shape: 'cirle', // 圖形：圓形 circle | 圓角矩形 rect | 菱形 rhombus | 橢圓矩形 capsule
    style: { // 關鍵形樣式(可覆蓋color的普通樣式，但激活、選中依然無效，坑！)
        fill: 'red', // 填充背景
        stroke: 'blue' // 形狀描邊
    },
    label: { // 節點標簽
        text: '開始節點', // 文本內容
        fill: 'green' // 文本顏色
    },
    index: 1 // 渲染層級
}

不過 model 預設會繼承 <Item> 組件的 props.shape 和 props.size，所以通常 model 只需配置 color、label

這裡有個比較難受的地方：畫板中的節點樣式由 model 控制，而節點預覽樣式由 CSS 或者圖片控制，要想保證二者統一，就會需要很多額外的工作

三、自定義節點

如果 <Item> 自帶的參數不滿足需求，可以使用 <ReisterNode> 來封裝自己的 <Item>

<ReisterNode> 可以接收上面三個參數，其中 name 是組件名稱

在 <Item> 的 shape 屬性中指定 name，就能拖拽生成自定義的節點

extend 可以繼承一個基本圖形（'flow-circle', 'flow-rect' 等）

config 可以參考官方的 Issues：https://github.com/gaoli/GGEditor/issues/76

假如需要自定義一個 start-node，就可以自行封裝一個 node 組件

然後在 ItemPanel 中的 <Item> 指定組件名稱

最後在 <Flow> 組件下麵引入

如果還是不明白 <ReisterNode> 如何使用，可以參考這個 Demo：https://codesandbox.io/s/4j62moqy0w

四、Flow 編輯器配置

官方文檔地址：http://ggeditor.com/docs/api/flow.zh-CN.html

組件預設可以將連線到空白處，設置 noEndEdge 為 false 就只能在節點之間連線

align 參數可以設置對齊的樣式，比如對齊線：

<Flow align={{
    line: {
        stroke: 'blue', // 對齊線顏色
        lineWidth: 2 // 對齊線寬度
    }
}} />

shortcut 可以配置內置的快捷鍵命令，支持的命令有：

但經過試驗，只有適用頁面為 All 的命令可配置，而其它命令（如 Ctrl+C）都無效

組件本身預設的連線是曲線 'flow-smooth'，在編輯時可以手動修改，也可以在 graph 中限定連線類型：

<Flow graph={{edgeDefaultShape: 'flow-polyline-round'}}/>

更多關於 graph 的配置項可以參考這裡：https://www.yuque.com/antv/g6/api-graph

在 <FLow> 組件上，最重要的是監聽事件：

  <Flow onNodeClick={(e) => {
      console.log(e);
    }}
  />

事件是整個編輯器的靈魂，下麵將重點介紹一下 GG-Editor 的 Page Events

五、頁面事件 Page Events

官方文檔：http://ggeditor.com/docs/api/pageEvents.zh-CN.html

文檔中對支持的事件和事件對象都有說明，這裡不再細說，主要分享幾個場景

// 事件總覽參考 /node_modules/gg-editor/src/common/constants.js

1. 拖拽節點，區分新節點還是舊節點

監聽拖拽放置事件：onDrop

從 <ItemPanel> 拖拽新節點到畫布的時候，onDrop 返回的事件對象是這樣的：

這時 currentItem 和 currentShape 都是 undefined

而如果只是挪動舊節點的位置，這兩個欄位會記錄拖拖動的圖形圖項

或者監聽節點拖動結束事件：onNodeDragEnd

這個事件只會在拖動畫布上的節點才會觸發

2. 錨點連線取消

連線觸發的事件很多，比如 onDrop、onDragEnd，不過個人推薦監聽 onAfterChange

當子項更改的時候會觸發 onAfterChange 事件，如果是連線，事件對象如下：

如果有需求，當目標節點已經連線的時候，就取消連線，就可以根據 item 或者 model 對象中的參數進行判斷

最後用結合非同步函數和 <withPropsAPI> 組件取消連線：

這裡用到的 <withPropsAPI> 組件，是 GG-Editor 自帶的包裝組件

經過 <withPropsAPI> 包裝的組件，會自帶 propsAPI 屬性

executeCommand() 方法可以執行上面第四部分 (shortcut) 提到的所有命令

3. 保存

上面 <withPropsAPI> 提供的 propsAPI 屬性中，包含了 save() 方法

可以封裝一個 SaveButton 組件，暴露一個 onSave 事件

然後用 <withPropsAPI> 包裝該組件

詳情可以參考這個 Demo: https://codesandbox.io/s/r4kzkn441m

4. 自定義鍵盤操作

上面提到過，Ctrl + C 的複製快捷鍵無效

但這個功能十分關鍵，可以通過監聽 onKeyDown 和 onKeyUp 手動創建這個快捷命令

創建一個 keysDown 欄位來記錄按下的按鍵，keyUp 時清空

小結：

上面的內容只介紹了 GG-Editor 核心的幾個組件和功能

像 <Minimap>、<ContextMenu>、<Toolbar> 這些組件參考 Demo 就足夠，所以並沒有提及

基於上面的介紹，已經能夠使用 GG-Editor 進行開發，如果有其它疑問，可以在 GitHub 倉庫提 Issues

最後發一下牢騷：閱讀源碼這種事，必須配一個程式員鼓勵師才能開展