一、前言
G6-Editor 是 AntV 官方提供的、专注于图可视化编辑器的类库,也是市面上完成度较高的图可视化编辑器。然而令人诟病的是其文档对新手极度不友好,我一度怀疑此文档只有他们自己开发人员才能看得懂,回首学习的过程里如同是漆黑中前行,苦不堪言。为了让后来者不重蹈覆辙,我愿化为萤火用微弱的光点指引前行的道路。
目标
1、组件使用
2、自定义节点
3、数据关联
4、自定义命令
开发环境
这里使用的框架是Vue,UI使用Element-ui,以及主角G6-Editor,建议clone文章最下面的github项目结合阅读。
二、进入实战
Editor 是整个编辑器的主控类,其主要职责是将编辑器的各个组件协同起来。
用法:
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
co