螞蟻金服數據可視化團隊曾經開源了一款 G6-Editor，但後來中止了對外支持，學習成本過高css
好在後來他們團隊的大牛高力結合 React + G6 開源了一個 GG-Editor（其實就是G6-Editor）html
不過相關的文檔仍是太少，實際的使用依然是一個不斷摸索的過程...node
常見問題: https://github.com/gaoli/GGEditor/issues/130git
1、引用 GG-Editor程序員
直接經過 npm 或 yarn 安裝依賴github
npm install --save gg-editor
因爲對 GG-Editor 不熟悉，因此我將它自帶的 Demo 做爲模版，在此基礎上進行開發npm
將 node_modules/gg-editor/demo/src/ 下的 Flow 目錄和 components、common 目錄拷出來，放到開發目錄下進行改造api
這個 demo 基於 ant 開發，因此須要引入 antantd
npm install --save antd
另外 demo 使用了 CSS Modules，須要在項目配置中啓用異步
好比在個人項目中，就把本來的 index.css 重命名爲 index.module.css，而後修改相應的引入路徑
因爲只是開發可視化流程，因此 components 目錄下多餘的文件（以 Koni 和 Mind 開頭的文件）都以刪掉
而後將 Flow/index.js 提出來做爲項目入口，改造後的目錄以下：
2、 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 或者圖片控制，要想保證兩者統一，就會須要不少額外的工做
3、自定義節點
若是 <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
4、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
5、頁面事件 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
最後發一下牢騷：閱讀源碼這種事，必須配一個程序員鼓勵師才能開展