Add basic support for redo functionality

src/components/whiteboard/toolbar/TheToolbar.vue

@@ -6,7 +6,8 @@ import DrawTool from './tools/DrawTool.vue'
 import EraserTool from './tools/EraserTool.vue'
 import MoveTool from './tools/MoveTool.vue'
 import SelectTool from './tools/SelectTool.vue'
-import UndoTool from './tools/UndoTool.vue'
+import UndoButton from './tools/UndoButton.vue'
+import RedoButton from './tools/RedoButton.vue'
 
 // const logger = Logger.get('Toolbar')
 const tools = ref([
@@ -38,7 +39,8 @@ function toggleActive(idx: number) {
         @click="toggleActive(idx)"
       />
       <ColorPicker />
-      <UndoTool />
+      <UndoButton />
+      <RedoButton />
     </div>
   </div>
 </template>

src/components/whiteboard/toolbar/tools/RedoButton.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { useHistoryStore } from '@/store/HistoryStore'
+import ToolButton from './ToolButton.vue'
+import HistoryService from '@/services/history/HistoryService'
+
+const historyStore = useHistoryStore()
+
+function handleUndoClick() {
+  HistoryService.redo()
+}
+</script>
+
+<template>
+  <ToolButton
+    id="redo-button"
+    name="Redo"
+    :is-active="false"
+    :is-disabled="!historyStore.isRedoPossible"
+    @click="handleUndoClick"
+  >
+    <FontAwesomeIcon :icon="['fas', 'arrow-rotate-right']" />
+  </ToolButton>
+</template>
+
+<style lang="scss">
+#redo-button {
+  order: 4;
+}
+</style>

src/services/history/HistoryService.ts

@@ -22,16 +22,42 @@ class HistoryService {
     }
   }
 
+  public redo() {
+    const historyStore = useHistoryStore()
+    const revertedEvent = historyStore.unpopEvent()
+    if (!revertedEvent) return
+
+    switch (revertedEvent.type) {
+      case HistoryEventType.SHAPE_DRAWN:
+        this.redoShapeDrawnEvent(revertedEvent)
+        break
+      case HistoryEventType.SHAPE_DELETED:
+        this.redoShapeDeletedEvent(revertedEvent)
+        break
+    }
+  }
+
   private undoShapeDrawnEvent(event: ShapeDrawnEvent) {
     const canvasStore = useCanvasStore()
     const drawnShapeId = event.shape.id
     canvasStore.removeDrawnShapeById(drawnShapeId, true, false)
   }
 
+  private redoShapeDrawnEvent(event: ShapeDrawnEvent) {
+    const canvasStore = useCanvasStore()
+    canvasStore.addDrawnShape(event.shape, true, false)
+  }
+
   private undoShapeDeletedEvent(event: ShapeDeletedEvent) {
     const canvasStore = useCanvasStore()
     canvasStore.addDrawnShape(event.shape, true, false)
   }
+
+  private redoShapeDeletedEvent(event: ShapeDeletedEvent) {
+    const canvasStore = useCanvasStore()
+    const deletedShapeId = event.shape.id
+    canvasStore.removeDrawnShapeById(deletedShapeId, true, false)
+  }
 }
 
 export default new HistoryService()

src/store/HistoryStore.ts

@@ -25,21 +25,34 @@ export const useHistoryStore = defineStore('history', () => {
   const isUndoPossible = computed(() => {
     return undoBuffer.value.length > 0
   })
+  const isRedoPossible = computed(() => {
+    return redoBuffer.value.length > 0
+  })
 
   function pushEvent(event: HistoryEvent) {
     redoBuffer.value.length = 0 /* clears the array */
     undoBuffer.value.push(event)
   }
 
-  function popEvent(): HistoryEvent {
-    const event = undoBuffer.value.pop()!
+  function popEvent(): HistoryEvent | undefined {
+    const event = undoBuffer.value.pop()
+    if (!event) return
     redoBuffer.value.push(event)
     return event
   }
 
+  function unpopEvent(): HistoryEvent | undefined {
+    const event = redoBuffer.value.pop()
+    if (!event) return
+    undoBuffer.value.push(event)
+    return event
+  }
+
   return {
     isUndoPossible,
+    isRedoPossible,
     pushEvent,
-    popEvent
+    popEvent,
+    unpopEvent
   }
 })