feat: history for MapStore (#78)

src/Kernel/HistoryManager.ts

@@ -19,6 +19,7 @@ export class HistoryManager {
   private _undoStack: Array<Step> = []
   private _redoStack: Array<Step> = []
 
+  private _timerId?: NodeJS.Timeout
   private _merging = false
   private _currentStep: Step = []
 
@@ -34,6 +35,14 @@ export class HistoryManager {
     return this._redoStack.length > 0
   }
 
+  clear() {
+    clearTimeout(this._timerId)
+    this._merging = false
+    this._currentStep = []
+    this._undoStack = []
+    this._redoStack = []
+  }
+
   exec(command: Command) {
     if (this._redoStack.length > 0) {
       this._redoStack = []
@@ -42,7 +51,7 @@ export class HistoryManager {
     if (!this._merging) {
       this._merging = true
       this._currentStep.push(command)
-      setTimeout(() => {
+      this._timerId = setTimeout(() => {
         this._undoStack.push(this._currentStep)
         this.events.update.emit('exec')
         this._merging = false

src/Kernel/Store/MapStore.ts

@@ -1,6 +1,8 @@
 import { EventManager } from '@Kernel/EventManager'
 import type { FullType, OriginMap, StoreType } from './_Store'
 import { isStoreType } from './_Store'
+import { Command } from '@Kernel/HistoryManager'
+import { history } from '@Kernel/index'
 
 export class MapStore {
   private _store: { [key: string]: FullType } = Object.create(null)
@@ -9,24 +11,42 @@ export class MapStore {
     update: new EventManager<{ key: string; from: FullType; to: FullType }>(),
   }
 
-  get(key: string): FullType {
-    return this._store[key]
-  }
-
-  set(key: string, value: FullType) {
+  private _set(key: string, value: FullType) {
     const from = this._store[key]
     const to = value
     this._store[key] = value
     this.events.update.emit({ key, from, to })
   }
 
-  delete(key: string) {
+  private _delete(key: string) {
     const from = this._store[key]
     const to = undefined
     delete this._store[key]
     this.events.update.emit({ key, from, to })
   }
 
+  get(key: string): FullType {
+    return this._store[key]
+  }
+
+  set(key: string, value: FullType) {
+    const oldValue = this.get(key)
+    const command = new Command(
+      () => this._set(key, value),
+      () => this._set(key, oldValue)
+    )
+    history.exec(command)
+  }
+
+  delete(key: string) {
+    const oldValue = this.get(key)
+    const command = new Command(
+      () => this._delete(key),
+      () => this._set(key, oldValue)
+    )
+    history.exec(command)
+  }
+
   toPlain(): OriginMap {
     const result = Object.create(null)
     for (const [key, value] of Object.entries(this._store)) {

src/Kernel/index.ts

@@ -18,14 +18,14 @@ interface RichTextStateChange {
 
 export type SlideMode = 'edit' | 'start' | 'current'
 
+export const history = new HistoryManager()
+
 export const slideManager = new SlideManager([
   new Slide([new TextBoxBlock(330, 120, TEXT_BOX_DEFAULT_WIDTH, TEXT_BOX_DEFAULT_HEIGHT, 'center')]),
 ])
 
 export const richTextObserver = new EventManager<RichTextStateChange>()
 
-export const history = new HistoryManager()
-
 export const selectionManager = new SelectionManager()
 
 export const slideShowMode = new EventManager<SlideMode>()

src/UserInterface/Present/Present.vue

@@ -4,8 +4,8 @@ import SlideList from '../SlideList/SlideList.vue'
 import SlideContainer from '../Slide/SlideContainer.vue'
 import StatusBar from '../StatusBar/StatusBar.vue'
 import Show from '../Show/Show.vue'
-import { type SlideMode, slideShowMode } from '@Kernel/index'
-import { ref } from 'vue'
+import { type SlideMode, slideShowMode, history } from '@Kernel/index'
+import { ref, onMounted } from 'vue'
 
 const currentMode = ref<SlideMode>('edit')
 slideShowMode.on(async (mode) => {
@@ -21,6 +21,10 @@ document.addEventListener('fullscreenchange', () => {
     currentMode.value = 'edit'
   }
 })
+
+onMounted(() => {
+  history.clear()
+})
 </script>
 
 <template>

src/UserInterface/ToolBar/components/Home/UndoRedo.vue

@@ -3,9 +3,14 @@ import { ref } from 'vue'
 import { history } from '@Kernel/index'
 import { Undo, Redo } from '@icon-park/vue-next'
 import ButtonGroup from '../ButtonGroup.vue'
+import { onMounted } from 'vue'
 
 const canUndo = ref(false)
 const canRedo = ref(false)
+onMounted(() => {
+  canUndo.value = history.canUndo
+  canRedo.value = history.canRedo
+})
 history.events.update.on(() => {
   canUndo.value = history.canUndo
   canRedo.value = history.canRedo
@@ -16,10 +21,10 @@ history.events.update.on(() => {
   <ButtonGroup :name="$t('ToolBar.home.undo')">
     <div class="flex flex-col">
       <button class="menu-btn" @click="history.undo" :disabled="!canUndo">
-        <undo theme="outline" size="20" :strokeWidth="2" />
+        <Undo theme="outline" size="20" :strokeWidth="2" />
       </button>
       <button class="menu-btn" @click="history.redo" :disabled="!canRedo">
-        <redo theme="outline" size="20" :strokeWidth="2" />
+        <Redo theme="outline" size="20" :strokeWidth="2" />
       </button>
     </div>
   </ButtonGroup>