move collapsed to doc and auto expand on select

src/renderer/components.cljs

@@ -68,14 +68,16 @@
    [icon (if active? active-icon inactive-icon) {:fixed-width true}]])
 
 (defn toggle-collapsed-button
-  [collapsed? action]
+  [el-k collapsed?]
   [toggle-icon-button {:active? collapsed?
                        :active-icon "chevron-right"
                        :active-text "expand"
                        :class "small"
                        :inactive-icon "chevron-down"
                        :inactive-text "collapse"
-                       :action action}])
+                       :action #(rf/dispatch (if collapsed?
+                                               [:document/expand-el el-k]
+                                               [:document/collapse-el el-k]))}])
 
 
 (defn radio-icon-button

src/renderer/document/db.cljs

@@ -5,6 +5,7 @@
 (def document
   [:map
    [:hovered-keys [:set uuid?]]
+   [:collapsed-keys [:set uuid?]]
    [:ignored-keys [:set uuid?]]
    [:fill string?]
    [:stroke string?]
@@ -16,6 +17,7 @@
 
 (def default-document
   {:hovered-keys #{}
+   :collapsed-keys #{}
    :ignored-keys #{}
    :fill "white"
    :stroke "black"

src/renderer/document/events.cljs

@@ -37,6 +37,18 @@
  (fn [db [_ ks]]
    (assoc db :hovered-keys ks)))
 
+(rf/reg-event-db
+ :document/collapse-el
+ active-document-path
+ (fn [db [_ el-k]]
+   (update db :collapsed-keys conj el-k)))
+
+(rf/reg-event-db
+ :document/expand-el
+ active-document-path
+ (fn [db [_ el-k]]
+   (update db :collapsed-keys disj el-k)))
+
 (rf/reg-event-db
  :document/set-filter
  active-document-path
@@ -46,8 +58,8 @@
 (rf/reg-event-db
  :document/set-temp-element
  active-document-path
- (fn [db [_ ks]]
-   (assoc db :temp-element ks)))
+ (fn [db [_ el]]
+   (assoc db :temp-element el)))
 
 (rf/reg-event-db
  :document/swap-colors

src/renderer/document/handlers.cljs

@@ -14,3 +14,7 @@
          (update :document-tabs #(filterv (complement #{key}) %))
          (assoc :active-document active-document)
          (update :documents dissoc key)))))
+
+(defn expand-el
+  [{:keys [active-document] :as db} el-k]
+  (update-in db [:documents active-document :collapsed-keys] disj el-k))

src/renderer/document/subs.cljs

@@ -65,6 +65,11 @@
  :<- [:document/active]
  :-> :hovered-keys)
 
+(rf/reg-sub
+ :document/collapsed-keys
+ :<- [:document/active]
+ :-> :collapsed-keys)
+
 (rf/reg-sub
  :document/ignored-keys
  :<- [:document/active]

src/renderer/element/events.cljs

@@ -46,20 +46,6 @@
        (h/set-prop el-k k v)
        (history.h/finalize "Set " (name k) " to " v))))
 
-(rf/reg-event-db
- :element/collapse
- (fn [db [_]]
-   (-> db
-       (h/set-prop :collapsed? true)
-       (history.h/finalize "Collapse"))))
-
-(rf/reg-event-db
- :element/expand
- (fn [db [_]]
-   (-> db
-       (h/set-prop :collapsed? false)
-       (history.h/finalize "Collapse"))))
-
 (rf/reg-event-db
  :element/lock
  (fn [db _]

src/renderer/element/handlers.cljs

@@ -6,6 +6,7 @@
    [clojure.string :as str]
    [reagent.dom.server :as dom.server]
    [renderer.attribute.hierarchy :as hierarchy]
+   [renderer.document.handlers :as document.h]
    [renderer.tools.base :as tools]
    [renderer.tools.shape.path :as path]
    [renderer.utils.bounds :as bounds]
@@ -201,16 +202,24 @@
   ([db key]
    (set-prop db key :selected? false)))
 
+(defn expand-ancestors
+  [db k]
+  (->> (element db k)
+       (ancestor-keys db)
+       (reduce document.h/expand-el db)))
+
 (defn select
-  ([db key]
-   (set-prop db key :selected? true))
-  ([db key multi?]
-   (if (element db key)
+  ([db k]
+   (-> db
+       (expand-ancestors k)
+       (set-prop k :selected? true)))
+  ([db k multi?]
+   (if (element db k)
      (if-not multi?
        (-> db
            deselect
-           (select key))
-       (toggle-prop db key :selected?))
+           (select k))
+       (toggle-prop db k :selected?))
      (deselect db))))
 
 (defn select-all
@@ -322,7 +331,8 @@
        (-> (assoc-in
             (conj (path db) (:parent el) :children)
             (vec (remove #{k} (siblings db el))))
-           (update-in (path db) dissoc k))))))
+           (update-in (path db) dissoc k)
+           (document.h/expand-el (:key el)))))))
 
 (defn update-index
   [db el f & more]

src/renderer/styles.css

@@ -412,7 +412,6 @@ pre {
     height: 100%;
   }
 
-  &[data-resize-handle-state="hover"],
   &[data-resize-handle-state="drag"] {
     &:after {
       background-color: var(--accent);

src/renderer/tree/views.cljs

@@ -66,9 +66,22 @@
     (- (* depth collapse-button-width)
        (if children? collapse-button-width 0))))
 
+(defn key-down-handler
+  [e el-k]
+  (let [ctrl? (.-ctrlKey e)]
+    (.stopPropagation e)
+    (case (.-key e)
+      "ArrowUp" (rf/dispatch [:element/select-up ctrl?])
+      "ArrowDown" (rf/dispatch [:element/select-down ctrl?])
+      "ArrowLeft" (rf/dispatch [:document/collapse-el el-k])
+      "ArrowRight" (rf/dispatch [:document/expand-el el-k])
+      nil)))
+
 (defn list-item-button
-  [{:keys [key selected? collapsed? children] :as el} depth]
+  [{:keys [key selected? children] :as el} depth]
   (let [hovered-keys @(rf/subscribe [:document/hovered-keys])
+        collapsed-keys @(rf/subscribe [:document/collapsed-keys])
+        collapsed? (contains? collapsed-keys key)
         hovered? (contains? hovered-keys key)
         multiple-selected? @(rf/subscribe [:element/multiple-selected?])]
     [:div.flex.button.list-item-button
@@ -81,6 +94,7 @@
       :ref (fn [this]
              (when (and this selected? hovered? (not multiple-selected?))
                (dom/scroll-into-view this)))
+      :on-key-down #(key-down-handler % key)
       :draggable true
       :on-drag-start #(-> (.-dataTransfer %)
                           (.setData "key" (name key)))
@@ -96,37 +110,25 @@
       :style {:padding-left (padding depth (seq children))}}
      [:div.flex.items-center.content-between.w-full
       (when (seq children)
-        [comp/toggle-collapsed-button
-         collapsed?
-         #(rf/dispatch [:element/toggle-prop key :collapsed?])])
+        [comp/toggle-collapsed-button key collapsed?])
       [:div.flex-1 [label el]]
       [item-buttons el]]]))
 
-(defn item [{:keys [collapsed? selected? children] :as el} depth elements]
-  (let [has-children? (seq children)]
+(defn item [{:keys [selected? children key] :as el} depth elements]
+  (let [has-children? (seq children)
+        collapsed-keys @(rf/subscribe [:document/collapsed-keys])
+        collapsed? (contains? collapsed-keys key)]
     [:li {:class (when selected? "level-2")}
      [list-item-button el depth]
      (when (and has-children? (not collapsed?))
        [:ul (map (fn [el] [item el (inc depth) elements])
                  (mapv (fn [key] (get elements key)) (reverse children)))])]))
 
-(defn key-down-handler
-  [e]
-  (let [ctrl? (.-ctrlKey e)]
-    (.stopPropagation e)
-    (case (.-key e)
-      "ArrowUp" (rf/dispatch [:element/select-up ctrl?])
-      "ArrowDown" (rf/dispatch [:element/select-down ctrl?])
-      "ArrowLeft" (rf/dispatch [:element/collapse])
-      "ArrowRight" (rf/dispatch [:element/expand])
-      nil)))
-
 (defn inner-sidebar []
   (let [canvas-children @(rf/subscribe [:element/canvas-children])
         elements @(rf/subscribe [:document/elements])]
     [:div.tree-sidebar.overflow-hidden
-     {:on-pointer-up #(rf/dispatch [:element/deselect-all])
-      :on-key-down key-down-handler}
+     {:on-pointer-up #(rf/dispatch [:element/deselect-all])}
      [:div.v-scroll.h-full
       {:on-pointer-leave #(rf/dispatch [:document/set-hovered-keys #{}])}
       [:ul (map (fn [el] [item el 1 elements])

src/renderer/views.cljs

@@ -135,7 +135,8 @@
         :minSize tree-min-width
         :defaultSize tree-min-width
         :onCollapse #(rf/dispatch-sync [:panel/collapse :tree])
-        :onExpand #(rf/dispatch-sync [:panel/expand :tree])}
+        :onExpand #(rf/dispatch-sync [:panel/expand :tree])
+        :class "flex flex-col"}
        (when tree?
          [:<>
           [doc/actions]