♻️ Refactor keyboard events to replace a deprecated parameter

frontend/src/app/main/data/workspace/path/helpers.cljs

@@ -18,9 +18,6 @@
    [app.util.path.subpaths :as ups]
    [potok.core :as ptk]))
 
-;; CONSTANTS
-(defonce enter-keycode 13)
-
 (defn end-path-event? [{:keys [type shift] :as event}]
   (or (= (ptk/type event) ::common/finish-path)
       (= (ptk/type event) :esc-pressed)

frontend/src/app/main/streams.cljs

@@ -11,8 +11,8 @@
    [app.main.store :as st]
    [app.main.refs :as refs]
    [app.common.geom.point :as gpt]
-   [app.util.globals :as globals])
+   [app.util.globals :as globals]
-  (:import goog.events.KeyCodes))
+   [app.util.keyboard :as kbd]))
 
 ;; --- User Events
 
@@ -113,8 +113,7 @@
         ob  (->> (rx/merge
                   (->> st/stream
                        (rx/filter keyboard-event?)
-                       (rx/filter #(let [key (:key %)]
+                       (rx/filter kbd/altKey?)
-                                     (= key KeyCodes.ALT)))
                        (rx/map #(= :down (:type %))))
                   ;; Fix a situation caused by using `ctrl+alt` kind of shortcuts,
                   ;; that makes keyboard-alt stream registring the key pressed but
@@ -130,10 +129,7 @@
         ob  (->> (rx/merge
                   (->> st/stream
                        (rx/filter keyboard-event?)
-                       (rx/filter #(let [key (:key %)]
+                       (rx/filter kbd/ctrlKey?)
-                                     (or
-                                      (= key KeyCodes.CTRL)
-                                      (= key KeyCodes.META))))
                        (rx/map #(= :down (:type %))))
                   ;; Fix a situation caused by using `ctrl+alt` kind of shortcuts,
                   ;; that makes keyboard-alt stream registring the key pressed but

frontend/src/app/main/ui/components/dropdown.cljs

@@ -3,10 +3,10 @@
    [rumext.alpha :as mf]
    [app.common.uuid :as uuid]
    [app.util.dom :as dom]
+   [app.util.keyboard :as kbd]
    [goog.events :as events]
    [goog.object :as gobj])
-  (:import goog.events.EventType
+  (:import goog.events.EventType))
-           goog.events.KeyCodes))
 
 (mf/defc dropdown'
   {::mf/wrap-props false}
@@ -27,7 +27,7 @@
 
         on-keyup
         (fn [event]
-          (when (= (.-keyCode event) 27) ; ESC
+          (when (kbd/esc? event)
             (on-close)))
 
         on-mount

frontend/src/app/main/ui/viewer/thumbnails.cljs

@@ -24,8 +24,7 @@
    [app.common.math :as mth]
    [app.util.router :as rt]
    [app.main.data.viewer :as vd])
-  (:import goog.events.EventType
+  (:import goog.events.EventType))
-           goog.events.KeyCodes))
 
 (mf/defc thumbnails-content
   [{:keys [children expanded? total] :as props}]

frontend/src/app/main/ui/workspace/shapes/text/editor.cljs

@@ -18,6 +18,7 @@
    [app.main.ui.cursors :as cur]
    [app.main.ui.shapes.text.styles :as sts]
    [app.util.dom :as dom]
+   [app.util.keyboard :as kbd]
    [app.util.object :as obj]
    [app.util.text-editor :as ted]
    [cuerdas.core :as str]
@@ -25,8 +26,7 @@
    [okulary.core :as l]
    [rumext.alpha :as mf])
   (:import
-   goog.events.EventType
+   goog.events.EventType))
-   goog.events.KeyCodes))
 
 ;; --- Text Editor Rendering
 
@@ -84,7 +84,7 @@
         on-key-up
         (fn [event]
           (dom/stop-propagation event)
-          (when (= (.-keyCode event) 27) ; ESC
+          (when (kbd/esc? event)
             (do
               (st/emit! :interrupt)
               (st/emit! dw/clear-edition-mode))))

frontend/src/app/main/ui/workspace/viewport/actions.cljs

@@ -24,8 +24,7 @@
    [beicon.core :as rx]
    [cuerdas.core :as str]
    [rumext.alpha :as mf])
-  (:import goog.events.WheelEvent
+  (:import goog.events.WheelEvent))
-           goog.events.KeyCodes))
 
 (defn on-mouse-down
   [{:keys [id blocked hidden type]} drawing-tool text-editing? edition edit-path selected]
@@ -263,8 +262,7 @@
  (mf/use-callback
   (fn [event]
     (let [bevent  (.getBrowserEvent ^js event)
-          key     (.-keyCode ^js event)
+          key     (.-key ^js event)
-          key     (.normalizeKeyCode KeyCodes key)
           ctrl?   (kbd/ctrl? event)
           shift?  (kbd/shift? event)
           alt?    (kbd/alt? event)
@@ -284,8 +282,7 @@
 (defn on-key-up []
  (mf/use-callback
   (fn [event]
-    (let [key    (.-keyCode event)
+    (let [key    (.-key event)
-          key    (.normalizeKeyCode KeyCodes key)
           ctrl?  (kbd/ctrl? event)
           shift? (kbd/shift? event)
           alt?   (kbd/alt? event)

frontend/src/app/util/keyboard.cljs

@@ -6,10 +6,10 @@
 
 (ns app.util.keyboard)
 
-(defn is-keycode?
+(defn is-key?
-  [keycode]
+  [key]
   (fn [e]
-    (= (.-keyCode e) keycode)))
+    (= (.-key e) key)))
 
 (defn ^boolean alt?
   [event]
@@ -27,8 +27,11 @@
   [event]
   (.-shiftKey event))
 
-(def esc? (is-keycode? 27))
+(def esc? (is-key? "Escape"))
-(def enter? (is-keycode? 13))
+(def enter? (is-key? "Enter"))
-(def space? (is-keycode? 32))
+(def space? (is-key? " "))
-(def up-arrow? (is-keycode? 38))
+(def up-arrow? (is-key? "ArrowUp"))
-(def down-arrow? (is-keycode? 40))
+(def down-arrow? (is-key? "ArrowDown"))
+(def altKey? (is-key? "Alt"))
+(def ctrlKey? (or (is-key? "Control")
+                  (is-key? "Meta")))