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