G6-Editor 编辑器入门使用教程

一、前言

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