一、引用
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>