一、前言
G6-Editor 是 AntV 官方提供的、專注於圖可視化編輯器的類庫，也是市面上完成度較高的圖可視化編輯器。然而令人詬病的是其文檔對新手極度不友好，我一度懷疑此文檔只有他們自己開發人員才能看得懂，回首學習的過程里如同是漆黑中前行，苦不堪言。為了讓后來者不重蹈覆轍，我願化為螢火用微弱的光點指引前行的道路。
目標
1、組件使用
2、自定義節點
3、數據關聯
4、自定義命令
開發環境
這里使用的框架是Vue，UI使用Element-ui，以及主角G6-Editor，建議clone文章最下面的github項目結合閱讀。
二、進入實戰
2.1Editor 是整個編輯器的主控類，其主要職責是將編輯器的各個組件協同起來。
用法：
import G6Editor from '@antv/g6-editor' const editor = new G6Editor() // 元素面板欄 Itempannel const itempannel = new G6Editor.Itempannel({ container: 'itempannel', }) // 工具欄 Toolbar const toolbar = new G6Editor. Toolbar({ container: 'toolbar', }) // 詳細面板 Detailpannel const detailpannel = new G6Editor.Detailpannel ({ container: 'detailpannel' }) // 縮略圖 Minimap const minimap = new G6Editor.Minimap({ container: 'minimap', height: 226, width: 226 }) // 組件掛載到Editor editor.add(page) editor.add(itempannel) editor.add(toolbar) editor.add(detailpannel) editor.add(minimap) 復制代碼Tips：先實例化組件，然后再掛載到Editor
△ 以上。
Toolbar 工具欄類，負責工具欄按鈕的命令綁定、可用禁用狀態控制。
G6-Editor內置了多種命令，亦可以自定義命令。
用法：
<!-- Toolbar -->
<div id="toolbar" class="toolbar"> <i data-command="delete" class="command el-icon el-icon-delete" title="刪除"></i> <i data-command="zoomIn" class="command el-icon el-icon-zoom-in" title="放大"></i> <i data-command="save" class="command el-icon el-icon-upload" title="保存"></i> </div> 復制代碼// Command
const Command = G6Editor.Command
// 自定義Save命令
Command.registerCommand('save', { // 命令是否進入隊列，默認是 true queue: false, // 命令是否可用 enable(eidtor) { return true }, // 正向命令 execute(eidtor) { // 獲取當前page const page = this.editor.getCurrentPage() const data = page.save() console.log(data) }, // 快捷鍵：Ctrl+shirt+s shortcutCodes : [['ctrlKey', 'shiftKey', 's']] }) 復制代碼Tips：工具欄的控件標簽必須要有 data-command="delete"和 class="command"否則無效。其中delete為內置或自定義命令名稱。
△ 以上。
Itempannel 元素面板欄，負責處理元素添加的通訊。
用法：
<!-- 元素面板欄 -->
<div id="itempannel" class="ph left"> <div class="getItem" data-type="node" data-shape="flow-rect" data-size="120*48" data-label="常規節點" data-color="#1890FF"> <img draggable="false" src="https://gw.alipayobjects.com/zos/rmsportal/wHcJakkCXDrUUlNkNzSy.svg" alt="" srcset=""> </div> <div class="getItem" data-type="node" data-shape="flow-circle" data-size="72*72" data-label="起止節點" data-color="#FA8C16"> <img draggable="false" src="https://gw.alipayobjects.com/zos/rmsportal/ZnPxbVjKYADMYxkTQXRi.svg" alt="" srcset=""> </div> <div class="getItem" data-type="node" data-shape="flow-rhombus" data-size="80*72" data-label="分叉節點" data-color="#13C2C2"> <img draggable="false" src="https://gw.alipayobjects.com/zos/rmsportal/SnWIktArriZRWdGCnGfK.svg" alt="" srcset=""> </div> <div class="getItem" data-type="node" data-shape="flow-capsule" data-size="80*48" data-label="模型節點" data-color="#722ED1"> <img draggable="false" src="https://gw.alipayobjects.com/zos/rmsportal/rQMUhHHSqwYsPwjXxcfP.svg" alt="" srcset=""> </div> <!-- 注意！我跟別人不一樣，我是自定義的節點 --> <div class="getItem" data-type="node" data-shape="customNode" data-size="80*48" data-label="我是自定義的" data-color="#722ED1"> <img draggable="false" src="https://user-gold-cdn.xitu.io/2019/3/15/169809645b016da6?w=114&h=128&f=png&s=1893" alt="" srcset=""> </div> </div> 復制代碼自定義節點
// 注意！這里不能使用new G6Editor.Flow()的形式，是無效的。
// 應使用 const Flow = G6Editor.Flow
const Flow = G6Editor.Flow
Flow.registerNode('customNode', { draw(item){ const group = item.getGraphicGroup() const model = item.getModel() group.addShape('text', { attrs: { x: 0, y: 0, fill: '#333', text: model.label } }) group.addShape('text', { attrs: { x: 0, y: 0, fill: '#333', text: ' ('+model.x+', '+model.y+') \n 原點是組的圖坐標', textBaseline: 'top' } }) return group.addShape('rect', { attrs: { x: 0, y: 0, width: 100, height: 100, stroke: 'red' } }) } }) 復制代碼含class="getItem"的元素會被當做節點，可以往編輯器拖動。
data-* 所有 * 都會被設置進添加圖項的數據模型。
data-type 元素類型
data-shape 元素圖形
data-size 元素大小
data-label 元素標簽
data-color 元素顏色
draggable 禁止、啟動拖拽默認行為
△ 以上。
Detailpannel 屬性欄類，負責屬性欄顯示隱藏的控制。通俗點說，就是不同的操作可以顯示不同的面板。
用法：
<!-- 詳細面板 -->
<div id="detailpannel" class="detailpannel"> <div data-status="node-selected" class="panel" id="node_detailpanel"> <div class="panel-title">屬性詳情</div> <div class="block-container"> <el-input v-model="nodeLabel" size="mini" @change="changeNodeLabel" placeholder="請輸入內容"></el-input> </div> </div> </div> 復制代碼data-status 標識不同頁面狀態下，各個右鍵菜單容器的顯示隱藏。
<div data-status="node-selected">節點屬性欄</div> <div data-status="edge-selected">邊屬性欄</div> <div data-status="group-selected">群組屬性欄</div> <div data-status="canvas-selected">畫布屬性欄</div> <div data-status="multi-selected">多選時屬性欄</div> 復制代碼△ 以上。
Minimap 縮略圖類，負責繪制縮略圖及雙圖聯動。
<!-- 縮略圖 -->
<div class="minimap"> <div class="panel-title">縮略圖</div> <div id="minimap"></div> </div> 復制代碼這個倒沒什么好說的，可以參考官方的文檔和實例。
△ 以上。
高能預警！ 最后一個也是最重要的一個！數據關聯！！！不和業務數據關聯的一切都是耍流氓。
還記得Detailpannel屬性欄類嗎？ 里面有一個輸入框，事件綁定了changeNodeLabel，用來修改節點的label屬性。
// methods changeNodeLabel(value) { const editor = this.editor // 執行命令 editor.executeCommand(() => { const page = editor.getCurrentPage() const selectedItems = page.getSelected() selectedItems.forEach(item => { // 更新屬性 page.update(item.id, { label: value }) }) }) } 復制代碼另外選擇節點，也需要將label的值設置到輸入框里。
// 獲取當前page
const currentPage = editor.getCurrentPage()
// 監聽選擇變化
currentPage.on('afteritemselected', ev => { // 選擇對象為Node節點 if (ev.item.isNode) { // 獲取屬性 const nm = ev.item.getModel() _this.nodeLabel = nm.label } // 選擇對象為Edge節點 if (ev.item.isEdge) { // 獲取屬性 const nm = ev.item.getModel() _this.nodeLabel = nm.label } }) 復制代碼△ 以上。
后話
由於代碼段都是比較零散，最好結合下面提供在github上的項目食用，如果文章對你有幫助，請隨手一個贊或者收藏。另外文章寫得倉促有很多不足的地方，希望大家輕拍，哈哈哈~
github倉庫 ：github.com/leeggco/g6-…
轉載於:https://juejin.im/post/6844903797639102471