dataease/frontend/src/components/canvas/store/snapshot.js

import store from '@/store/index'
import { deepCopy } from '@/components/canvas/utils/utils'

export default {
  state: {
    snapshotData: [{}], // 编辑器快照数据
    snapshotStyleData: [{}], // 样式改变也记录快照
    snapshotIndex: -1, // 快照索引
    changeTimes: -1, // 修改次数
    lastSaveSnapshotIndex: 0, // 最后保存是snapshotIndex的索引
    styleChangeTimes: 0, // 组件样式修改次数
    doSnapshotIndex: -1 // snapshot undo redo 时的索引记录
  },
  mutations: {
    undo(state) {
      store.commit('setCurComponent', { component: null, index: null })
      if (state.snapshotIndex > 0) {
        state.snapshotIndex--
        state.doSnapshotIndex = state.snapshotIndex
        store.commit('setComponentData', deepCopy(state.snapshotData[state.snapshotIndex]))
        store.commit('setCanvasStyle', deepCopy(state.snapshotStyleData[state.snapshotIndex]))
      }
    },

    redo(state) {
      store.commit('setCurComponent', { component: null, index: null })
      if (state.snapshotIndex < state.snapshotData.length - 1) {
        state.snapshotIndex++
        state.doSnapshotIndex = state.snapshotIndex
        store.commit('setComponentData', deepCopy(state.snapshotData[state.snapshotIndex]))
        store.commit('setCanvasStyle', deepCopy(state.snapshotStyleData[state.snapshotIndex]))
      }
    },

    recordSnapshot(state) {
      state.changeTimes++
      state.styleChangeTimes++
      // 添加新的快照
      state.snapshotData[++state.snapshotIndex] = deepCopy(state.componentData)
      state.snapshotStyleData[state.snapshotIndex] = deepCopy(state.canvasStyleData)
      // 在 undo 过程中，添加新的快照时，要将它后面的快照清理掉
      if (state.snapshotIndex < state.snapshotData.length - 1) {
        state.snapshotData = state.snapshotData.slice(0, state.snapshotIndex + 1)
        state.snapshotStyleData = state.snapshotStyleData.slice(0, state.snapshotIndex + 1)
      }
    },
    refreshSnapshot(state) {
      // 刷新快照
      state.snapshotData = [deepCopy(state.componentData)]
      state.snapshotStyleData = [deepCopy(state.canvasStyleData)]
      state.snapshotIndex = 0
      state.changeTimes = -1
      state.lastSaveSnapshotIndex = 0
    },
    refreshSaveStatus(state) {
      state.changeTimes = 0
      state.lastSaveSnapshotIndex = deepCopy(state.snapshotIndex)
    },
    recordStyleChange(state) {
      state.styleChangeTimes++
    }
  }
}