antv-x6在vue3中使用：Undo撤消和Redo还原

最新推荐文章于 2025-04-10 16:48:47 发布

<每天一点>

最新推荐文章于 2025-04-10 16:48:47 发布

阅读量3.8k

点赞数

分类专栏： antV-X6 vue3 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_44213308/article/details/112269182

版权

antV-X6 同时被 2 个专栏收录

15 篇文章

订阅专栏

3 篇文章

订阅专栏

本文介绍了一个基于Vue3和AntV X6库的图形编辑器实现，重点展示了如何利用X6的撤销与重做历史记录功能。通过具体代码示例，展示了如何设置和监听这些功能的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、效果

2、vue3 demo

<template>
  <div class="x6-graph-wrap">
    <h1>Default Settings</h1>
    <div class="x6-graph-tools">
      <a-button-group>
        <a-button @click="onUndo" :disabled="!canUndo" >
          Undo 撤消
        </a-button>
        <a-button @click="onRedo" :disabled="!canRedo">
          Redo 还原
        </a-button>
      </a-button-group>
    </div>
    <div ref="container" class="x6-graph" />
  </div>
</template>

<script lang="ts">
import { Graph } from '@antv/x6'
import { defineComponent, ref} from 'vue' // reactive

export default defineComponent({
  name: "index",
  setup() {
    const canUndo = ref(true)
    const canRedo = ref(false)
    // eslint-disable-next-line
    const history = ref(undefined as any)

    const init: (any) => void =(that)=>{
      const graph = new Graph({
        container: (that.$refs.container) as HTMLDivElement,
        width: 800,
        height: 600,
        grid: true,
        history: true,
      })
      history.value = graph.history

      graph.history.on('change', () => {
        canUndo.value = graph.history.canUndo()
        canRedo.value = graph.history.canRedo()
      })

      const source = graph.addNode({
        x: 120,
        y: 120,
        width: 100,
        height: 40,
        attrs: {
          label: {
            text: 'Hello',
          },
          body: {
            strokeWidth: 1,
          },
        },
      })

      const target = graph.addNode({
        x: 300,
        y: 320,
        width: 100,
        height: 40,
        attrs: {
          label: {
            text: 'World',
          },
          body: {
            strokeWidth: 1,
          },
        },
      })

      graph.addEdge({ source, target, arrts: { line: { strokeWidth: 1 } } })
    }

    const onUndo: () => void = ()=> {
      history.value.undo()
    }
    const onRedo: () => void =()=> {
      history.value.redo()
    }

    return {
      canUndo,
      canRedo,
      history,
      init,
      onUndo,
      onRedo
    }
  },
  mounted()  {
    /* eslint-disable */
    const that = this as any
    this.$nextTick(function () {
      that.init(that)
    })
  },
})
</script>

<style scoped>

</style>