G6文檔

這個項目採用的是G6（阿里開源），因爲如今已經沒有維護了，致使不少的配置，參數，方法示例demo等都是本身摸索的，大概介紹下本案例中使用到的以及一些後續維護可能會用到的。

Editor 該類是整個編輯器的主控類，其主要職責是將編輯器的各個組件協同起來。

//實例化：
import G6Editor from '@antv/g6-editor'
const editor = new G6Editor()
//實例方法：
add // 能夠理解爲vue的添加組件
editor.add(this.flow)
save // 保存數據（Object類型，裏面存放nodes以及edges，對應節點和連線）
let data = this.flow.save()
read // 讀取數據
this.data && this.flow.read(this.data)
getGraph // 獲取流圖示例
this.graph = this.flow.getGraph()
getCurrentPage // 獲取當前頁面
this.page = editor.getCurrentPage()
hideGrid // 背景以網格的形式呈現
this.page.hideGrid()
on // 事件監聽
this.page.on('afteritemselected', e => { //處理數據 })
Destory // 銷燬（至關於vue的destoryed生命週期）
this.page.destory()

Flow 繼承自Editor的page，專用於構建有向流程圖編輯器。
實例化：

new Editor.flow()

配置項
主要介紹下配置項，也是項目中用到最多的。
Graph G6圖的配置項，語雀上能夠搜到。
Align 文本對齊。
Grid 網格線的配置
Shortcut 快捷鍵的配置

this.flow = new G6Editor.Flow({
    graph: { container: this.$refs.flow },
    align: { grid: true },// 網格對齊
    grid: { cell: 10 },// 網孔尺寸
    shortcut: {
        zoomIn: true, // 開啓放大快捷鍵
        zoomOut: true // 開啓視口縮小快捷鍵
    }
})

節點的配置項

this.graph.node({ 
    id: 'node1', // id 必須惟一 
    color: '#333', // 顏色
    size: 10 || [10, 10], // 尺寸 || [寬, 高] 
    shape: 'circle', // 所用圖形 
    style: { // 關鍵形樣式（優先級高於color） 
        fill: 'red', 
        stroke: 'blue' 
    },
    label: '文本標籤' || { // 文本標籤 || 文本圖形配置 
        text: '文本標籤', 
        fill: 'green' 
    },
    parent: 'group1', // 所屬組 
    index: 1, // 渲染層級 
})

線的配置項

this.graph.edge({ id: 'edge1', // id 必須惟一 
    source: 'node1', // 源節點 id 
    target: 'node2', // 目標節點 id 
    controlPoints: [{ // 控制點 
        x: 10, y: 10 
    }], 
    sourceAnchor: 0, // 源節點錨點 
    targetAnchor: 2, // 目標節點錨點 
    shape: 'line', // 所用圖形 
    style: { // 關鍵形樣式（優先級高於color） 
        fill: 'red', 
        stroke: 'blue' 
    },
    label: '文本標籤' || { // 文本標籤 || 文本圖形配置 
    text: '文本標籤', 
    fill: 'green'
    },
    labelRectStyle: { // 文本矩形底的樣式 
        fill: 'blue' 
    },
    parent: 'group1', // 所屬組 
    index: 1, // 渲染層級 
}),

狀態改變觸發的事件

flow.on('beforeitemselected', e=>{}); // 選中前 
flow.on('afteritemselected', e=>{}); // 選中後 
flow.on('beforeitemunselected', e=>{}); // 取消選中前 
flow.on('afteritemunselected', e=>{}); // 取消選中後

數據改變觸發的事件

flow.on('beforechange', e=>{}); // 圖數據變動前 
flow.on('afterchange', e=>{}); // 圖數據變動後