traffic-laser/src/hook/useHistory.ts

import { History } from 'stateshot'
import {reactive, Ref, ref} from "vue";

export const useHistory = <T>(initialState: T) => {
  const history = new History<T>({ initialState })
  const value = ref({...initialState}) as Ref<T>
  const state = ref({
    hasUndo: false,
    hasRedo: false
  })
  const setHistoryState = () => {
    state.value.hasUndo = history.hasUndo
    state.value.hasRedo = history.hasRedo
  }

  const undo = () => {
    history.undo()
    setHistoryState()
    value.value = history.get()
  }

  const redo = () => {
    history.redo()
    setHistoryState()
    value.value = history.get()
  }

  const push = () => {
    const pushStateStr = JSON.stringify(value.value)
    if (pushStateStr !== JSON.stringify(history.get())) {
      history.pushSync(JSON.parse(pushStateStr))
      setHistoryState()
    }
  }

  return reactive({
    push,
    redo,
    undo,
    value,
    state
  })
}