这是我参与更文挑战的第 3 天，活动详情查看：更文挑战
本期我们开始搭建一个简单的图形编辑器。
图形编辑和预览是组态软件必要的一部分，一个好的编辑器可以大幅减少自动化工程师的工作量。
开发环境配置
本项目前端部分使用 Vue.js 3.x + TypeScript + Vite，绘图引擎部分使用蚂蚁可视化团队的 X6。
这里先简单介绍一下 X6：
X6 是图编辑引擎，特点是节点、边、等元素的定制能力非常强，经常用来构建流程图、ER 图、DAG 图、脑图等应用。
下图是 X6 的一个简单示例，以点线两种基本元件组成。
这正与组态软件绘图模块的核心组成不谋而合。
想看 le5le 搭建图形编辑器的同学，可以关注 alsmile。核心库也是一个很优秀的绘图引擎。
使用上面提到的技术栈组合，最低支持的浏览器到 Edge。如果有对 IE11 的兼容需求，建议使用 Vue.js 2.x 版本
绘图引擎 X6 支持 IE11，但需要进行特殊配置。具体可参考：怎么兼容 IE
基础环境搭建这部分的实现比较简单，可以查看搭建第一个 Vite 项目 和 X6 快速上手
X6 画布配置
这里给出一套完整的配置信息，想用的同学直接复制过去就好。
const graph = new Graph({
panning: true, //画布拖拽
grid: true, //背景网格
keyboard: true, //键盘事件
background: false, //背景图片、背景颜色
clipboard: true, // 剪贴板能力，开启后支持复制粘贴，并支持跨画布的复制粘贴
history: true, //历史操作记录能力，开启后支持撤销和重做
selecting: true, //点选/框选能力
snapline: true, //对齐线，辅助节点排版
mousewheel: true //滚轮缩放
})
更详细的配置信息，可参考官方文档基础教程部分。
X6 功能实现代码片段
键盘快捷键
X6 自带了一个 Keyboard 配置，可以在创建画布时通过以下配置启用。
const graph = new Graph({
keyboard: true,
})
// 等同于
const graph = new Graph({
keyboard: {
enabled: true,
},
})
也可以在创建画布后，调用 graph.enableKeyboard() 和 graph.disableKeyboard() 来启用和禁用键盘事件。
if (graph.isKeyboardEnabled()) {
graph.disableKeyboard()
} else {
graph.enableKeyboard()
}
全选（Ctrl+A）
graph.bindKey('ctrl+a', () => {
const cells = graph.getCells(); // 先获取画布内全部节点和连线
graph.select(cells); // 选中他们
})
复制（Ctrl+C）
前提条件：启用 clipboard 配置
graph.bindKey('ctrl+c', () => {
const cells = graph.getSelectedCells();
graph.copy(cells)
})
剪切（Ctrl+X）
前提条件：启用 clipboard 配置
graph.bindKey('ctrl+c', () => {
const cells = graph.getSelectedCells();
graph.copy(cells)
})
粘贴（Ctrl+V）
前提条件：启用 clipboard 配置
graph.bindKey('ctrl+v', () => {
graph.paste();
})
撤销（Ctrl+Z）
前提条件：启用 history 配置
graph.bindKey('ctrl+z', () => {
if(graph.canUndo()){
graph.undo();
}
})
重做（Ctrl+Y）
前提条件：启用 history 配置
graph.bindKey('ctrl+y', () => {
if(graph.canRedo()){
graph.redo();
}
})
删除（Delete）
graph.bindKey('delete', () => {
const cells = graph.getSelectedCells(); //先获取选中的节点和连线
if (cells.length) {
graph.removeCells(cells); //删掉选中的这些
graph.resetSelection(); //清空选中节点列表，其实可能没必要
}
})
