reimplement Shortcuts register

packages/app/src/cores/shortcuts/index.js

@@ -1,71 +1,94 @@
 import Core from "evite/src/core"
 
 export default class ShortcutsCore extends Core {
-    shortcuts = {}
+    shortcutsRegister = []
 
     publicMethods = {
         shortcuts: this
     }
 
-    initialize() {
+    handleEvent = (event, shortcut, fn) => {
-        document.addEventListener("keydown", this.handleEvent)
+        if (typeof shortcut !== "object") {
-    }
+            throw new Error("Shortcut must be an object")
+        }
 
-    handleEvent = (event) => {
+        // check the event key pressed
-        // FIXME: event.key sometimes is not defined
+        if (event.key !== shortcut.key) {
-        //event.key = event.key.toLowerCase()
+            return
+        }
 
-        const shortcut = this.shortcuts[event.key]
+        if (typeof shortcut.ctrl === "boolean" && event.ctrlKey !== shortcut.ctrl) {
+            return
+        }
 
-        if (shortcut) {
+        if (typeof shortcut.shift === "boolean" && event.shiftKey !== shortcut.shift) {
-            if (typeof shortcut.ctrl === "boolean" && event.ctrlKey !== shortcut.ctrl) {
+            return
-                return
+        }
-            }
 
-            if (typeof shortcut.shift === "boolean" && event.shiftKey !== shortcut.shift) {
+        if (typeof shortcut.alt === "boolean" && event.altKey !== shortcut.alt) {
-                return
+            return
-            }
+        }
 
-            if (typeof shortcut.alt === "boolean" && event.altKey !== shortcut.alt) {
+        if (typeof shortcut.meta === "boolean" && event.metaKey !== shortcut.meta) {
-                return
+            return
-            }
+        }
 
-            if (typeof shortcut.meta === "boolean" && event.metaKey !== shortcut.meta) {
+        if (shortcut.preventDefault) {
-                return
+            event.preventDefault()
-            }
+        }
 
-            if (shortcut.preventDefault) {
+        if (typeof fn === "function") {
-                event.preventDefault()
+            fn()
-            }
-
-            if (typeof shortcut.fn === "function") {
-                shortcut.fn()
-            }
         }
     }
 
-    register = (keybind = {}, fn) => {
+    register = (shortcut, fn) => {
-        if (typeof keybind === "string") {
+        if (!shortcut) {
-            keybind = {
+            throw new Error("`shortcut` is required")
-                key: keybind,
-            }
         }
 
-
+        if (typeof shortcut !== "object") {
-        this.shortcuts[keybind.key] = {
+            throw new Error("Shortcut must be an object")
-            ...keybind,
-            fn,
-        }
-    }
-
-    remove = (array) => {
-        if (typeof array === "string") {
-            array = [array]
         }
 
-        array.forEach(key => {
+        if (!fn) {
-            delete this.shortcuts[key]
+            throw new Error("`fn` is required")
+        }
+
+        const handler = (event) => this.handleEvent(event, shortcut, fn)
+
+        this.shortcutsRegister.push({
+            id: shortcut.id,
+            handler: handler
         })
+
+        return document.addEventListener("keydown", handler)
+    }
+
+    remove = (id) => {
+        if (!id) {
+            throw new Error("`id` is required")
+        }
+
+        if (typeof id !== "string") {
+            throw new Error("`id` must be a string")
+        }
+
+        // search the event handler
+        const register = this.shortcutsRegister.find((handler) => handler.id === id)
+
+        if (!register) {
+            console.warn(`Shortcut with id "${id}" not found`)
+            return false
+        }
+
+        console.log(register)
+
+        // remove the event handler
+        document.removeEventListener("keydown", register.handler)
+
+        // remove the event handler from the list
+        this.shortcutsRegister = this.shortcutsRegister.filter((handler) => handler.id !== id)
     }
 
     window = {