antv/x6的2.x版本在vue3中使用history插件实现撤销恢复

一、引用

import { Graph, Shape } from '@antv/x6'
import { History } from '@antv/x6-plugin-history'
//其他插件....

二、初始化画布和插件

const graphContainer = ref()
let graph = ref()
const canUndo = ref(true)
const canRedo = ref(false)
const history = new History({
    enabled:true
});
graph.value = new Graph({
	container: graphContainer.value,
	grid: true,
	background: false, //背景透明
	snapline: false, //对齐线
	// 鼠标缩放
	mousewheel: {
	    enabled: true,
	    zoomAtMousePosition: true,
	    modifiers: 'ctrl',
	    minScale: 0.5,
	    maxScale: 3,
	},
	// 配置连线规则
	connecting: {
	    router: 'manhattan', // 算法路由 manhattan orth  metro
	    // 边渲染到画布后的样式
	    connector: {
	        name: 'rounded',
	        args: {
	            radius: 8,
	        },
	    },
	    anchor: 'center',
	    connectionPoint: 'anchor',
	    allowBlank: false, //是否允许连接到画布空白位置的点
	    allowMulti: true, //是否允许在相同的起始节点和终止之间创建多条边
	    allowLoop: true, //是否允许创建循环连线，即边的起始节点和终止节点为同一节点
	    highlight: true, //拖动边时，是否高亮显示所有可用的节点
	    snap: true, //自动吸附
	    highlighting: {
	        magnetAdsorbed: {
	            name: "stroke",
	            args: {
	                attrs: {
	                    fill: "#5F95FF",
	                    stroke: "#5F95FF",
	                },
	            },
	        },
	    },
	},
	panning: {
	    enabled: false,
	},
	grid: {
	    type: "dot",
	    size: 10, // 网格大小 10px
	    visible: true, // 渲染网格背景
	    args: {
	        color: "#a0a0a0", // 网格线/点颜色
	        thickness: 2, // 网格线宽度/网格点大小
	    }
	}
})
//使用插件
graph.value.use(history)
	
//监听命令
graph.value.on('history:change', (e) => {
	canUndo.value = history.canUndo()
	canRedo.value = history.canRedo()
})

三、撤销恢复事件方法

//撤销
const Undo = () =>{
    history.undo()
}
//恢复
const Redo = () =>{
    history.redo()
}

<span class="mx-2 cursor-pointer">
    <el-tooltip content="撤销" placement="bottom">
        <component :is="Back" size="24" @click="Undo"></component>
    </el-tooltip>
</span>
<span class="mx-2 cursor-pointer">
    <el-tooltip content="恢复" placement="bottom">
        <component :is="Next" size="24" @click="Redo"></component>
    </el-tooltip>
</span>