enhance item tree arrow handling

Author: sprocketc

src/renderer/core.cljs

@@ -35,6 +35,7 @@
    [renderer.timeline.events]
    [renderer.timeline.subs]
    [renderer.tool.core]
+   [renderer.tree.events]
    [renderer.utils.dom :as dom]
    [renderer.utils.error :as error]
    [renderer.utils.keyboard :as keyb]

src/renderer/element/events.cljs

@@ -18,20 +18,6 @@
        (h/select el-k multi?)
        (history.h/finalize "Select element"))))
 
-(rf/reg-event-db
- ::select-up
- (fn [db [_ multi?]]
-   (-> db
-       (h/select-up multi?)
-       (history.h/finalize "Select up"))))
-
-(rf/reg-event-db
- ::select-down
- (fn [db [_ multi?]]
-   (-> db
-       (h/select-down multi?)
-       (history.h/finalize "Select down"))))
-
 (rf/reg-event-db
  ::toggle-prop
  (fn [db [_ key prop]]

src/renderer/element/handlers.cljs

@@ -292,24 +292,6 @@
   [db]
   (mapv :key (top-selected-sorted db)))
 
-(defn select-up
-  ([db multi?]
-   (select-up db (last (top-selected-sorted-keys db)) multi?))
-  ([db k multi?]
-   (let [i (index db k)]
-     (select db (if (= i (dec (count (siblings db k))))
-                  (:parent (element db k))
-                  (get (siblings db k) (inc i))) multi?))))
-
-(defn select-down
-  ([db multi?]
-   (select-down db (first (top-selected-sorted-keys db)) multi?))
-  ([db k multi?]
-   (let [i (index db k)]
-     (select db (if (zero? i)
-                  (:parent (element db k))
-                  (get (siblings db k) (dec i))) multi?))))
-
 (defn invert-selection
   [db]
   (reduce (fn [db {:keys [key tag]}]

src/renderer/tree/events.cljs

@@ -0,0 +1,24 @@
+(ns renderer.tree.events
+  (:require
+   [re-frame.core :as rf]))
+
+(rf/reg-fx
+ ::focus
+ (fn [[k direction]]
+   (let [list-elements (.from js/Array (.querySelectorAll js/document ".tree-sidebar .list-item-button"))
+         current-el (first (.querySelectorAll js/document (str ".tree-sidebar [data-id='" (name k) "']")))
+         i (.indexOf list-elements current-el)
+         element (get list-elements (case direction
+                                      :up (if (zero? i) (dec (count list-elements)) (dec i))
+                                      :down (if (< i (dec (count list-elements))) (inc i) 0)))]
+     (.focus element))))
+
+(rf/reg-event-fx
+ ::select-up
+ (fn [_ [_ k]]
+   {::focus [k :up]}))
+
+(rf/reg-event-fx
+ ::select-down
+ (fn [_ [_ k]]
+   {::focus [k :down]}))

src/renderer/tree/views.cljs

@@ -9,6 +9,7 @@
    [renderer.element.events :as-alias element.e]
    [renderer.element.subs :as-alias element.s]
    [renderer.frame.events :as-alias frame.e]
+   [renderer.tree.events :as-alias e]
    [renderer.utils.dom :as dom]
    [renderer.utils.keyboard :as keyb]))
 
@@ -73,26 +74,29 @@
        (if children? collapse-button-width 0))))
 
 (defn key-down-handler
-  [e el-k]
-  (let [ctrl? (.-ctrlKey e)]
-    (case (.-key e)
-      "ArrowUp"
-      (do (.stopPropagation e)
-          (rf/dispatch [::element.e/select-up ctrl?]))
+  [e k]
+  (case (.-key e)
+    "ArrowUp"
+    (do (.stopPropagation e)
+        (rf/dispatch [::e/select-up k]))
+
+    "ArrowDown"
+    (do (.stopPropagation e)
+        (rf/dispatch [::e/select-down k]))
 
-      "ArrowDown"
-      (do (.stopPropagation e)
-          (rf/dispatch [::element.e/select-down ctrl?]))
+    "ArrowLeft"
+    (do (.stopPropagation e)
+        (rf/dispatch [::document.e/collapse-el k]))
 
-      "ArrowLeft"
-      (do (.stopPropagation e)
-          (rf/dispatch [::document.e/collapse-el el-k]))
+    "ArrowRight"
+    (do (.stopPropagation e)
+        (rf/dispatch [::document.e/expand-el k]))
 
-      "ArrowRight"
-      (do (.stopPropagation e)
-          (rf/dispatch [::document.e/expand-el el-k]))
+    "Enter"
+    (do (.stopPropagation e)
+        (rf/dispatch [::element.e/select k (.-ctrlKey e)]))
 
-      nil)))
+    nil))
 
 (defn list-item-button
   [{:keys [key selected? children] :as el} depth hovered? collapsed?]
@@ -101,6 +105,7 @@
      {:class [(when selected? "selected")
               (when hovered? "hovered")]
       :tab-index 0
+      :data-id key
       :role "menuitem"
       :on-double-click #(rf/dispatch [::frame.e/pan-to-element key])
       :on-pointer-enter #(rf/dispatch [::document.e/set-hovered-keys #{key}])