Improve keyboard navigation

- Double click to edit
- Esc to cancel editing
- Press any key to start editing

src/bean/ui/events.cljs

@@ -42,6 +42,12 @@
  (fn update-cell [db [_ address content]]
    (update-in db [:sheet] #(grid/update-cell-content address % content))))
 
+(rf/reg-event-fx
+ ::handle-global-kbd
+ (fn handle-global-kbd [{:keys [db]} [_ e]]
+   (when-let [[r c] (:start (get-in db [:ui :grid :selection]))]
+     {:fx [[:dispatch [::edit-cell [r c]]]]})))
+
 (rf/reg-event-db
  ::paste-addressed-cells
  (fn paste-addressed-cells [db [_ addressed-cells]]

src/bean/ui/main.cljs

@@ -14,6 +14,7 @@
   (rf/dispatch [::events/reload-bindings]))
 
 (defn init []
+  (.addEventListener js/window "keydown" (fn [e] (sheet/handle-kbd e)))
   (.addEventListener js/window "paste" (fn [e] (sheet/handle-paste e)))
   (.addEventListener js/window "copy" (fn [e] (sheet/handle-copy e))))
 

src/bean/ui/views/sheet.cljs

@@ -123,10 +123,17 @@
      #(grid-selection-end (i->area %) pixi-app)
      pixi-app)))
 
+(def last-click (atom {:time 0 :rc []}))
+(defn- cell-double-click [rc sheet]
+  (edit-cell rc sheet))
+
 (defn- cell-pointer-down [rc grid-g sheet row-heights col-widths pixi-app]
   (submit-cell-input)
   (rf/dispatch [::events/clear-edit-cell])
-  (edit-cell rc sheet)
+  (when (and (< (- (js/Date.now) (:time @last-click)) 300)
+             (= (:rc @last-click) rc))
+    (cell-double-click rc sheet))
+  (reset! last-click {:time (js/Date.now) :rc rc})
   (grid-selection-start
    (util/merged-or-self rc sheet)
    grid-g row-heights col-widths pixi-app))
@@ -137,17 +144,19 @@
 
 ;; TODO: use the reframe keyboard library here
 (defn- handle-cell-navigation [e [r c] sheet]
-  (let [[mr mc] (get-in sheet [:grid r c :style :merged-until])
-        move-to-cell (cond
-                       (and (= (.-keyCode e) 13) (.-shiftKey e)) [(dec r) c]
-                       (and (= (.-keyCode e) 9) (.-shiftKey e)) [r (dec c)]
-                       (= (.-keyCode e) 13) [(if mr (inc mr) (inc r)) c]
-                       (= (.-keyCode e) 9) [r (if mc (inc mc) (inc c))])
-        [move-to-r move-to-c] move-to-cell]
-    (when (and (nat-int? move-to-r) (nat-int? move-to-c))
-      (.preventDefault e)
-      (submit-cell-input)
-      (edit-cell move-to-cell sheet))))
+  (if (= (.-keyCode e) 27)
+    (rf/dispatch [::events/clear-edit-cell])
+    (let [[mr mc] (get-in sheet [:grid r c :style :merged-until])
+          move-to-cell (cond
+                         (and (= (.-keyCode e) 13) (.-shiftKey e)) [(dec r) c]
+                         (and (= (.-keyCode e) 9) (.-shiftKey e)) [r (dec c)]
+                         (= (.-keyCode e) 13) [(if mr (inc mr) (inc r)) c]
+                         (= (.-keyCode e) 9) [r (if mc (inc mc) (inc c))])
+          [move-to-r move-to-c] move-to-cell]
+      (when (and (nat-int? move-to-r) (nat-int? move-to-c))
+        (.preventDefault e)
+        (submit-cell-input)
+        (edit-cell move-to-cell sheet)))))
 
 (defn- center-text! [bitmap-text x y h w]
   (let [text-h (.-height bitmap-text)
@@ -835,6 +844,19 @@
     [canvas pixi-app*]
     [cell-input pixi-app*]]])
 
+(defn- editing-text? []
+  (let [focused-element (.-activeElement js/document)
+        tag-name (and focused-element (.-tagName focused-element))]
+    (or (= (.toLowerCase tag-name) "span")
+        (= (.toLowerCase tag-name) "textarea"))))
+
+(defn ctrl-or-meta? [e]
+  (or (.-ctrlKey e) (.-metaKey e)))
+
+(defn handle-kbd [e]
+  (when (and (not (editing-text?)) (not (ctrl-or-meta? e)))
+    (rf/dispatch [::events/handle-global-kbd e])))
+
 (defn handle-paste [e]
   (.preventDefault e)
   (if-let [pasted-table (paste/parse-table e)]