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=>{}); // 图数据变动后