Keyboard service ⌨️

src/components/whiteboard/toolbar/TheToolbar.vue

@@ -34,8 +34,8 @@ function toggleActive(idx: number) {
         v-for="(tool, idx) in tools"
         :key="idx"
         :is="tool.component"
-        :is-active="tool.isActive"
-        :is-disabled="tool.isDisabled"
+        :isActive="tool.isActive"
+        :isDisabled="tool.isDisabled"
         @click="toggleActive(idx)"
       />
       <ColorPicker />

src/services/canvas/CanvasService.ts

@@ -4,8 +4,17 @@ import HistoryService from '../history/HistoryService'
 import ShapeDrawnEvent from '@/store/history/event/ShapeDrawn'
 import ShapeDeletedEvent from '@/store/history/event/ShapeDeleted'
 import ShapeUpdatedEvent from '@/store/history/event/ShapeUpdated'
+import { useToolbarStore } from '@/store/ToolbarStore'
+import KeyboardService from '../keyboard/KeyboardService'
 
 export default class CanvasService {
+  constructor() {
+    const canvasKeyboard = KeyboardService.get('canvas')
+    canvasKeyboard.registerCallback(['Delete'], () =>
+      this.deleteSelectedShapes()
+    )
+  }
+
   public getShapeById(id: string) {
     const canvasStore = useCanvasStore()
     return canvasStore.getShapeById(id)
@@ -51,4 +60,13 @@ export default class CanvasService {
     const canvasStore = useCanvasStore()
     canvasStore.currentlyDrawnShape = shape
   }
+
+  private deleteSelectedShapes() {
+    const toolbarStore = useToolbarStore()
+    HistoryService.startAggregating()
+    toolbarStore.foreachSelectedShape((shape) => {
+      this.removeShapeById(shape.id)
+    })
+    HistoryService.stopAggregating()
+  }
 }

src/services/history/HistoryService.ts

@@ -1,11 +1,21 @@
 import { useHistoryStore } from '@/store/history/HistoryStore'
 import type IHistoryEvent from './IHistoryEvent'
 import AggregateEvent from '@/store/history/event/AggregateEvent'
+import KeyboardService from '../keyboard/KeyboardService'
 
 class HistoryService {
   private aggregating = false
   private aggragateBuffer: Array<IHistoryEvent> = []
 
+  constructor() {
+    const canvasKeyboard = KeyboardService.get('canvas')
+    canvasKeyboard.registerCallback(['Control', 'z'], () => this.undo())
+    canvasKeyboard.registerCallback(['Control', 'Shift', 'Z'], () =>
+      this.redo()
+    )
+    canvasKeyboard.registerCallback(['Control', 'y'], () => this.redo())
+  }
+
   public undo() {
     const historyStore = useHistoryStore()
     const lastEvent = historyStore.popEvent()

src/services/keyboard/KeyMap.ts

@@ -0,0 +1,53 @@
+import { InvalidArguments } from '@/utils/exceptions/InvalidArguments'
+
+export type KeyCallback = () => void
+type KeyTree = Map<string, KeyTree> | KeyCallback
+
+export default class KeyMap {
+  private keyTreeRoot: KeyTree = new Map<string, KeyTree>()
+
+  public get(keySequence: string[]) {
+    return this.getLeaf(keySequence, this.keyTreeRoot)
+  }
+
+  public set(keySequence: string[], callback: KeyCallback) {
+    if (keySequence.length < 1) return
+    this.keyTreeRoot = this.setLeaf(keySequence, this.keyTreeRoot, callback)
+  }
+
+  private getLeaf(keySequence: string[], keyTree: KeyTree): KeyCallback | null {
+    if (keySequence.length < 1) {
+      /* Reached bottom of sequence */
+      if (keyTree instanceof Map) return null
+      return keyTree
+    }
+
+    if (!(keyTree instanceof Map)) {
+      /* Reached bottom of the tree */
+      return null
+    }
+
+    const firstKey = keySequence[0]
+    if (!keyTree.has(firstKey)) return null
+    return this.getLeaf(keySequence.slice(1), keyTree.get(firstKey)!)
+  }
+
+  private setLeaf(
+    keySequence: string[],
+    keyTree: KeyTree,
+    leaf: KeyCallback
+  ): KeyTree {
+    if (keySequence.length < 1)
+      /* Reached bottom of the sequence */
+      return leaf
+
+    if (!(keyTree instanceof Map))
+      /* Reached bottom of the tree */
+      throw new InvalidArguments('KeyMap.set - conflicting shortcuts')
+
+    const firstKey = keySequence[0]
+    const recSequence = keySequence.slice(1)
+    const recTree = keyTree.has(firstKey) ? keyTree.get(firstKey)! : new Map()
+    return keyTree.set(firstKey, this.setLeaf(recSequence, recTree, leaf))
+  }
+}

src/services/keyboard/KeyboardService.ts

@@ -0,0 +1,65 @@
+import Logger, { type ILogger } from 'js-logger'
+import KeyMap, { type KeyCallback } from './KeyMap'
+
+type KeyboardServiceMap = Map<string, KeyboardService>
+
+class KeyboardService {
+  private logger: ILogger
+  private keyTree: KeyMap = new KeyMap()
+
+  constructor(keyspace: string) {
+    this.logger = Logger.get(`KeyboardService[${keyspace}]`)
+  }
+
+  public registerCallback(keySequence: string[], callback: KeyCallback) {
+    this.keyTree.set(keySequence, callback)
+  }
+
+  public handleClick(keySequence: string[]) {
+    const callback = this.keyTree.get(keySequence)
+    if (callback) callback()
+  }
+}
+
+class GlobalKeyboardService {
+  private logger = Logger.get('KeyboardService')
+  private keyspaces: KeyboardServiceMap = new Map<string, KeyboardService>()
+  private selectedKeyspace: string | null = null
+
+  constructor() {
+    const clickHandler = (event: KeyboardEvent) => this.handleClick(event)
+    window.removeEventListener('keydown', clickHandler)
+    window.addEventListener('keydown', clickHandler)
+  }
+
+  public get(keyspace: string) {
+    if (this.keyspaces.has(keyspace)) return this.keyspaces.get(keyspace)!
+
+    const newKeyboardService = new KeyboardService(keyspace)
+    this.keyspaces.set(keyspace, newKeyboardService)
+    this.logger.debug(`New keyspace added: ${keyspace}`)
+
+    return newKeyboardService
+  }
+
+  public activateKeyspace(keyspace: string | null) {
+    const previousKeyspace = this.selectedKeyspace
+    this.selectedKeyspace = keyspace
+    this.logger.debug(`Activated keyspace ${keyspace}`)
+    return previousKeyspace
+  }
+
+  public handleClick(event: KeyboardEvent) {
+    const keySequence: Array<string> = []
+    /* For now support only combinations with ctrl and ctrl + shift */
+    if (event.ctrlKey && event.key != 'Control') keySequence.push('Control')
+    if (event.shiftKey && event.key != 'Shift') keySequence.push('Shift')
+    keySequence.push(event.key)
+
+    if (!this.selectedKeyspace) return
+    const service = this.get(this.selectedKeyspace)
+    service.handleClick(keySequence)
+  }
+}
+
+export default new GlobalKeyboardService()

src/views/TheBoard.vue

@@ -12,6 +12,7 @@ import TheSidebar from '@/components/whiteboard/sidebar/TheSidebar.vue'
 import { useSidebarStore } from '@/store/SidebarStore'
 import PageLoader from '@/components/loading/PageLoader.vue'
 import TheMagic from '@/components/whiteboard/magic/TheMagic.vue'
+import KeyboardService from '@/services/keyboard/KeyboardService'
 
 const logger = Logger.get('MainWhiteboard.vue')
 
@@ -47,6 +48,7 @@ watch(
 function handleCanvasReady() {
   initState.canvasReady = true
   logger.debug('Canvas ready indication received!')
+  KeyboardService.activateKeyspace('canvas')
 }
 
 function handleMagicReady() {