前言: 由于业务越来越复杂，为了方便用户配置好整套算子流，缩短用户的配置时间，优化用户体验，算子流画布支持复制粘贴功能，同时为了避免误操作影响算子流的配置，画布也需要同步支持撤销功能

实现基础：画布的复制功能基于 @antv/x6-plugin-clipboard 库实现

创建一个画布，配置好基本信息

引入复制插件

import { Clipboard } from '@antv/x6-plugin-clipboard'

为画布注入复制功能

方法注入完毕后调用 this.graph.copy(cells) 即可完成算子节点复制

绑定快捷键 ctrl+c 复制

画布右键复制，定义一个list列表，在通过Vue.extend()将节点挂载至vue实例，并且将graph对象通过props对象传递

在组件实例编写copy方法

此处this.copy调用的是组件内的方法

复制成功调用 localStorage.setItem('aicenterv2_pro_copeId', this.currentGoing);将复制的算子节点信息保存，用于之后粘贴复制的提示以及区分算子流和组合

插件同复制一样，上方已经注册好,直接通过this.graph.paste()

绑定快捷键粘贴

右击画布粘贴，此处实现方式更复制一样

快捷键粘贴和右键粘贴区别主要在于快捷键粘贴的位置直接取复制的算子节点之前的位置进行展示，右键的粘贴位置需要同步取画布右键点击的位置展示，实现思路，在调用pasteNode

方法后会调用this.ctrlvCallback 节点进行位置以及连线的处理。

右键粘贴

快捷键粘贴

粘贴异常处理

撤销功能继续 @antv/x6-plugin-histor 历史记录实现

引入插件，并且注册历史纪录功能。再次需要注意的是，算子的移动，删除，选中都会记录在历史记录，所以我们需要用到合并，暂时关闭，打开历史记录功能来去除不必要的步骤

npm install @antv/x6-plugin-history --save

graph.use(
  new History({
    enabled: true,
  }),
)

例如：鼠标左建选中连线的操作，不希望被记录在内，因为此操作并无实际业务需求

先通过 this.graph.disableHistory(); 关闭历史记录功能，此时其他功能正常，算子选中效果依旧会展示。界面更新之后在调用this.graph.enableHistory();重新打开历史记录功能

或者在做一些复杂的操作，中间会有许多过程，用户只希望看到前后结果，例如多个算子或者算子流的粘贴复制，里面包含了算子的复制以及连线的生产，以及位置移动等，我们需要将其合并我们就需要用到，例如刚进入画布时的很多初始化工作等

我们可以先调用 this.graph.startBatch(type)开启历史记录合成。此后的所有可被记录操作都会合并在一起。操作结束后调用 this.graph.startBatch(type);

参数 type 为自己定义的语义化参数（必填）

目前画布粘贴复制撤销功能的就只总结到这后续有时间会继续详细讲解具体某个方法的使用跟实现

详解智算画布算子粘贴复制功能与画布的撤销

关于作者