g6-editor 文檔

閱讀建議

因爲本文檔目錄太多，建議安裝Chrome插件 Smart TOC，可清晰一覽文檔層次結構，同時也方便按目錄跳轉查看。

因本人仍在開發及探索中，目前此文檔的層級結構還沒有肯定，只能是碰到什麼便整理總結什麼，仍待更新完善。

Github：https://github.com/blueju/vue...

g6-editor 能作什麼

g6-editor 做爲圖編輯器，根據官方文檔提供的DEMO，主要能作如下三類圖：

但在實際使用中，對所提供 API 的瞭解，彷佛又不只能作如下三類圖，還可作網絡圖/拓撲圖

1. 基礎流程圖

1. 模型流程圖

1. 思惟導圖（腦圖）

HTML

該目錄主要整理 g6-editor 在HTML層面的術語解釋、使用規範、示例和注意點。

工具欄

工具欄負責盛放一個操做按鈕，相似 wangEditor 中頂部的操做工具按鈕區域。

g6-editor 已經爲咱們作好了許多工做，咱們只須要按規範寫好HTML標籤，而後給它們配上合適的圖標和標題。

規範

• 必須擁有 data-command 屬性，並設置須要的命令，詳見本文中內置命令列表。
• class 中必須擁有 command。

示例

我使用的圖標是 font-awesome

<div id="toolbar">
  <i data-command="save" class="command fa fa-floppy-o" title="保存"></i>
  <i data-command="undo" class="command fa fa-undo" title="撤銷"></i>
  <i data-command="redo" class="command fa fa-repeat" title="重作"></i>
  <i data-command="delete" class="command fa fa-trash-o" title="刪除"></i>
  <i data-command="zoomOut" class="command fa fa-search-minus" title="縮小"></i>
  <i data-command="zoomIn" class="command fa fa-search-plus" title="放大"></i>
  <i data-command="clear" class="command fa fa-eraser" title="清除畫布"></i>
  <i data-command="toFront" class="command fa fa-arrow-up" title="提高層級"></i>
  <i data-command="toBack" class="command fa fa-arrow-down" title="降低層級"></i>
  <i data-command="selectAll" class="command fa fa-check-square-o" title="全選"></i>
  <i data-command="copy" class="command fa fa-files-o" title="複製"></i>
  <i data-command="paste" class="command fa fa-clipboard" title="粘貼"></i>
  <i data-command="autoZoom" class="command fa fa-expand" title="實際大小"></i>
  <i data-command="resetZoom" class="command fa fa-compress" title="適應頁面"></i>
  <i data-command="addGroup" class="command fa fa-object-group" title="組合"></i>
  <i data-command="unGroup" class="command fa fa-object-ungroup" title="取消組合"></i>
  ....
</div>

元素面板

元素面板負責盛放一些可拖拽的元素，供使用人員拖拽到畫板中。

元素

元素僅僅是一個定義了一些屬性和 class 的HTML標籤，爲了給予美觀的效果，我通常會往元素標籤中添加圖片。

g6-editor的官方文檔中，並未說起元素圖片，結合搜索引擎，我也僅搜索四種元素圖片，格式爲svg。

若是你想本身自定義的元素圖片，建議使用svg。

名稱	地址
起止節點	https://gw.alipayobjects.com/...
常規節點	https://gw.alipayobjects.com/...
分叉節點	https://gw.alipayobjects.com/...
模型節點	https://gw.alipayobjects.com/...

示例

<div id="itempannel">
  <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" />
  </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" />
  </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" />
  </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" />
  </div>
</div>

注意點

class 名稱

以上示例中的 class 名稱（getItem），不可刪除，不可用其餘 class 替換，不然會出現沒法將元素拖拽入畫板的問題。

data-* 屬性

元素標籤中，全部帶有 * 屬性都會被添加進節點的數據模型。

以上示例中 HTML代碼 和 data-* 屬性，已經是本人在保證語義化和無bug出現狀況下的最精簡版本，可直接複製使用。

熟悉G6的同窗可能秒懂，但若是不清楚什麼意思也不要緊，後續操做中你就會發現其聯繫。

img

元素圖片必須設置爲禁止拖拽，draggable="false"，不然拖拽到畫板後，須要二次點擊纔會取消元素選中狀態。

畫布

示例

<div id="page"></div>

注意

id

畫布標籤的 id 必須爲 page，不然控制檯會報錯，緣由不明，錯誤以下：

高度

必須在CSS中爲畫布設定高度

屬性欄

屬性欄通常在畫布右側，用於設置節點/邊/畫布等屬性，相似這種：

思路

我初次看 g6-editor 文檔的示例DEMO時，看到屬性欄的HTML標籤中含有 data-status="node-selected" 等屬性，覺得，可是在後續的操做，並未發現 data-status="*" 的屬性的做用，也多是我暫時沒有發現。

我在實踐中感受這裏 g6-editor 並無爲咱們提供什麼現成的東西，更可能是隻是咱們須要在右側這一塊區域，建立一些表單，在進行一些操做時（好比選中一個節點），經過API獲取數據並填充到表單中，以此來展現所選元素的屬性。

示例

<div id="detailpannel">
  <!-- 節點屬性欄 -->
  <div id="nodeAttributeBar" data-status="node-selected">
    <div class="title">節點屬性</div>
    <div class="main">
      <el-form :model="nodeAttributeForm" label-position="top" label-width="80px">
        <el-form-item label="節點文本">
          <el-input v-model="nodeAttributeForm.label" @change="saveNodeAttribute"></el-input>
        </el-form-item>
        <el-form-item label="寬度">
          <el-input v-model="nodeAttributeForm.width" @change="saveNodeAttribute"></el-input>
        </el-form-item>
        <el-form-item label="高度">
          <el-input v-model="nodeAttributeForm.height" @change="saveNodeAttribute"></el-input>
        </el-form-item>
        <el-form-item label="顏色">
          <el-color-picker v-model="nodeAttributeForm.color" @change="saveNodeAttribute"></el-color-picker>
        </el-form-item>
      </el-form>
    </div>
  </div>
  <!-- 邊屬性欄 -->
  <div id="edgeAttributeBar" data-status="edge-selected">
    <div class="title">邊屬性</div>
    <div class="main">
      <el-form :model="edgeAttributeForm" label-position="top" label-width="80px">
        <el-form-item label="邊文本">
          <el-input v-model="edgeAttributeForm.label" @change="saveEdgeAttribute"></el-input>
        </el-form-item>
        <el-form-item label="邊文本">
          <el-select v-model="edgeAttributeForm.shape" @change="saveEdgeAttribute">
            <el-option label="流程圖折線" value="flow-polyline"></el-option>
            <el-option label="流程圖圓⻆折線" value="flow-polyline-round"></el-option>
            <el-option label="流程圖曲線" value="flow-smooth"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
  </div>
</div>

官方文檔示例對比

未免也太簡陋了。。。

<div id="detailpannel">
    <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>
</div>

縮略圖

JavaScript

該目錄主要整理 g6-editor 在 JS 層面的術語解釋、使用規範、示例和注意點。

關閉體驗改進計劃打點請求

爲了更好服務⽤戶，G6Editor 會將 URL 和版本信息發送回 AntV 服務器，除了 URL 與 G6 版本信息外，不會收集任何其餘信息。

若有擔⼼，能夠經過下⾯的代碼關閉：

G6Editor.track(false)

編輯器

該類是整個 g6-editor 的主控類，其主要職責是將 g6-editor 的各個組件協同起來。（摘自官方文檔並作了微調）

至於爲何說是類，可能他們是用 ES6 語法 class 實現的吧。

實例化

使用須要實例化

import G6Editor from "@antv/g6-editor";
const editor = new G6Editor();
...

方法列表

可打印實例化後 editor，經過查看上一層原型鏈的方式查看更多方法。

除下表方法之外，還有一些方法，但均以 _ 開頭，可能爲私有方法用得少，下表再也不列舉，想看的可在控制檯自行查看。

方法	名稱	備註
add	添加組件
commandEnable
destroy	銷燬編輯器
executeCommand	執行命令	經過此方法執行的操做，均會進入隊列，可撤銷/重作，建議使用
getCommands
getComponents
getComponentsByType
getCurrentCommand
getCurrentPage
getDefaultCfg
setCommandDOMenable

事件

根據官網文檔，事件包括鼠標事件、編輯器事件、數據變動事件、狀態變動事件、控制事件這幾類，官方文檔僅僅只是作了模糊歸納，並未詳細列出有哪些事件。

經過查閱原官方文檔、查閱源碼 和 實際操做，總結出如下事件列表：

事件列表

import G6Editor from "@antv/g6-editor";

const editor = new G6Editor();

const page = editor.getCurrentPage()

// 下表中，節點和邊，一併簡稱爲對象

事件	備註	提供者
aftercommandexecute		editor 編輯器
beforecommandexecute		editor 編輯器
afterchange	改變後	page 畫布
afterdelete	刪除後	page 畫布
afteritemactived		page 畫布
afteritemselected	選擇對象後	page 畫布
afteritemunactived	取消激活後	page 畫布
afteritemunselected		page 畫布
anchor:mousedown		page 畫布
anchor:mouseenter		page 畫布
anchor:mouseleave		page 畫布
anchor:mouseup		page 畫布
beforechange		page 畫布
beforeitemactived		page 畫布
beforeitemselected		page 畫布
beforeitemunactived		page 畫布
beforeitemunselected		page 畫布
click		page 畫布
contextmenu		page 畫布
dragedge:beforeshowanchor		page 畫布
edge:mouseenter		page 畫布
edge:mouseleave		page 畫布
hoveranchor:beforeaddedge		page 畫布
hovernode:beforeshowanchor		page 畫布
keyup		page 畫布
mousedown		page 畫布
mouseenter		page 畫布
mouseleave		page 畫布
mouseup		page 畫布
node:click		page 畫布
node:mousedown		page 畫布
node:mouseenter		page 畫布
node:mouseleave		page 畫布
node:mouseup		page 畫布
statuschange		page 畫布

如何綁定事件

使用 on 方法

如何查看更多事件

上面我發現整理的事件，可

import G6Editor from "@antv/g6-editor";
let editor = new G6Editor();
// 可能沒法當即查看，可設個定時器，1秒後查看
let events = editor.getCurrentPage()._events;
console.log(events);

方法

方法有不少，我可能沒辦法將所有都列出來並解釋，在實際操做中，更多的是須要你們本身經過在控制檯打印的方式，在原型鏈中查找符合需求的方法。

保存數據模型

將畫布數據保存爲數據模型，執行該方法將返回一個包含節點數據和邊數據的對象

import G6Editor from "@antv/g6-editor";
let editor = new G6Editor();
// 可能沒法當即查看，可設個定時器，1秒後查看
editor.getCurrentPage().save();
// {nodes: [...], edges: [...]}

保存爲圖片

將畫布數據數據保存爲圖片，執行該方法將返回一個canvas

import G6Editor from "@antv/g6-editor";
let editor = new G6Editor();
// 可能沒法當即查看，可設個定時器，1秒後查看
editor.getCurrentPage().saveImage();

讀取數據

讀取數據模型，並展現在畫板中，入參是一個包含節點數據和邊數據的對象

import G6Editor from "@antv/g6-editor";
let editor = new G6Editor();
let dataModel = {...}
editor.getCurrentPage().read(dataModel);

命令

內置命令

內置命令列表

共26個，按字母排序

命令	備註	適用頁面
add	新增元素
addGroup	組合
appendChild	添加子節點	腦圖
append	添加相鄰節點	腦圖
autoZoom	自適應尺寸	全部
clear	清空畫布	全部
collapse	收縮
collapseExpand	摺疊/展開
common
copy	複製
copyAdjacent
delete	刪除
expand	展開
move	移動
moveMindNode	移動腦圖節點
multiSelect	多選
paste	粘貼
pasteHere
redo	重作
resetZoom	實際尺寸
selectAll	全選
toBack	下降層級
toFront	提高層級
unGroup	取消組合
undo	撤銷
update	更新
zoomIn	放大
zoomOut	縮小
zoomTo

內置命令的源碼對應位置

源碼文件：g6Editor.js

源碼對應位置：將 g6Editor.js 格式化後，檢索關鍵詞 registerCommand("，以下圖：

重載內置命令

註冊自定義命令

應用場景

我想經過點擊工具欄中的保存圖標來保存數據模型

<i data-command="save" class="command fa fa-floppy-o" title="保存"></i>

方案一

使用 editor.Command.registerCommand() 方法註冊自定義命令save，在其正向命令中，添加本身須要的處理邏輯。

Command.registerCommand("save", {
  // 命令是否進入隊列，進入隊列可執行撤銷/重作，默認是 true
  queue: false,
  // 命令是否可用
  enable(eidtor) {
    return true;
  },
  // 正向命令
  execute(editor) {
    ...
  },
  // 反向命令
  back(editor) {
    ...
  },
  // 快捷鍵：Ctrl + Shirt + S
  shortcutCodes: [["ctrlKey", "shiftKey", "s"]]
});

方案二

固然咱們有另一種方式，即給保存圖標添加點擊事件，在方法中執行本身須要的處理邏輯。

注意

註冊的自定義命令中，即使你設置了快捷鍵，但仍是默認不啓用的。

若是須要啓用，須要按以下設置進行開啓。

因爲我本人使用的 Flow 流程圖，因此在 Flow 中設置開啓，若是你使用的是 MindMap 腦圖，則可能在 new G6Editor.MindMap({}) 中設置開啓。

const flow = new G6Editor.Flow({
  graph: {
    container: "page"
  },
  shortcut: {
    // 開啓保存快捷鍵
    save: true
  }
});

快捷鍵

經過快捷鍵，可快速執行一些命令，默認狀況下，含快捷鍵的內置命令有：

下表中的"Mac快捷鍵" 和"適用頁面"，摘自官方文檔，本人未驗證

源碼文件：g6Editor.js

源碼對應位置：將 g6Editor.js 格式化後，檢索關鍵詞 shortcutCodes: [

官方文檔PDF中的快捷鍵表格，存在錯誤，由於在源碼檢索 copy/paste 等命令並未發現其有快捷鍵

共有10個，按字母排序

命令	Win 快捷鍵	Mac 快捷鍵	備註	適⽤⻚⾯
append	Enter	Enter	添加相鄰節點	思惟導圖
appendChild	Tab	Tab	添加⼦節點	思惟導圖
collapseExpand	Ctrl + /	⌘/	摺疊/展開	思惟導圖
delete	Delete	Delete	刪除	全部頁面
redo	Ctrl + Shift + Z	⇧⌘Z	重作	全部頁面
resetZoom	Ctrl + 0	⌘0	實際尺⼨	全部頁面
selectAll	Ctrl+A	⌘A	全選	全部頁面
undo	Ctrl + Z	⌘Z	撤銷	全部頁面
zoomIn	Ctrl + =	⌘=	放大	全部頁面
zoomOut	Ctrl + -	⌘-	縮小	全部頁面

命令	Win 快捷鍵	Mac 快捷鍵	備註	適⽤⻚⾯
clear			清空畫布	全部頁面
selectAll	Ctrl+A	⌘A	全選	全部頁面
undo	Ctrl + Z	⌘Z	撤銷	全部頁面
redo	Ctrl + Shift + Z	⇧⌘Z	重作	全部頁面
delete	Delete	Delete	刪除	全部頁面
zoomIn	Ctrl + =	⌘=	放大	全部頁面
zoomOut	Ctrl + -	⌘-	縮小	全部頁面
autoZoom			⾃適應尺⼨	全部頁面
resetZoom	Ctrl + 0	⌘0	實際尺⼨	全部頁面
toFront			提高層級	全部頁面
toBack			降低層級	全部頁面
copy	Ctrl + C	⌘C	複製	流程圖
paste	Ctrl + V	⌘V	粘貼	流程圖
multiSelect			多選模式	流程圖
addGroup	Ctrl + G	⌘G	組合	流程圖
unGroup	Ctrl + Shift + G	⇧⌘G	取消組合	流程圖
append	Enter	Enter	添加相鄰節點	思惟導圖
appendChild	Tab	Tab	添加⼦節點	思惟導圖
collapseExpand	Ctrl + /	⌘/	摺疊/展開	思惟導圖

源碼位置：

邊

內置邊

內置邊列表

common	直線，不帶箭頭
flow-base	直線，帶箭頭
flow-polyline	流程圖折線
flow-polyline-round	流程圖圓角折線
flow-smooth	流程圖曲線
diagram-base	直線，帶箭頭。 與 flow-base 的區別未知。
page-base	僅在源碼中發現其被註冊爲內置邊，未實際操做，效果未知。
mind-placeholder-edge	弧線，無錨點，線位於節點底部，更適用於思惟導圖。
mind-edge	弧線，更適用於思惟導圖腦圖。
koni-base	拖拽target目標節點時，邊會圍繞source源節點，自動調整爲最近的錨點。 直線，帶箭頭，更適用於⽹絡圖/拓撲圖。

內置邊的源碼對應位置

源碼文件：g6Editor.js

源碼對應位置：將 g6Editor.js 格式化後，檢索關鍵詞 registerCommand("，以下圖：

重載內置邊

註冊自定義邊