enhance resizable panels

src/renderer/menubar/views.cljs

@@ -228,6 +228,16 @@
                       :action [:focus-selection :fill]}]}
             {:key :divider-1
              :type :separator}
+            {:key :toggle-tree
+             :type :checkbox
+             :label "Element tree"
+             :checked? [:panel/visible? :tree]
+             :action [:panel/toggle :tree]}
+            {:key :toggle-props
+             :type :checkbox
+             :label "Properties"
+             :checked? [:panel/visible? :properties]
+             :action [:panel/toggle :properties]}
             {:key :toggle-xml
              :label "XML view"
              :type :checkbox
@@ -238,6 +248,16 @@
              :type :checkbox
              :checked? [:panel/visible? :history]
              :action [:panel/toggle :history]}
+            {:key :toggle-command-history
+             :type :checkbox
+             :label "Command history"
+             :checked? [:panel/visible? :repl-history]
+             :action [:panel/toggle :repl-history]}
+            {:key :toggle-timeline-panel
+             :type :checkbox
+             :label "Timeline editor"
+             :checked? [:panel/visible? :timeline]
+             :action [:panel/toggle :timeline]}
             {:key :divider-2
              :type :separator}
             {:key :toggle-grid

src/renderer/reepl/core.cljs

@@ -69,7 +69,7 @@
        mode]))
 
 (defn repl-input
-  [state submit panel-ref cm-opts]
+  [state submit cm-opts]
   {:pre [(every? (comp not nil?)
                  (map cm-opts
                       [:on-up
@@ -80,7 +80,7 @@
   (let [{:keys [_pos _count _text]} @state
         repl-history? @(rf/subscribe [:panel/visible? :repl-history])]
     [:div.toolbar {:style {:padding-top "0" :padding-bottom "0"}}
-     [:div.flex.text-xs {:style {:margin-top "7px"}} (replumb/get-prompt)]
+     [:div.flex.text-xs.pl-1 {:style {:margin-top "7px"}} (replumb/get-prompt)]
      ^{:key (str (hash (:js-cm-opts cm-opts)))}
      [code-mirror/code-mirror (reaction (:text @state))
       (merge
@@ -100,10 +100,7 @@
        :active-text "Hide command output"
        :inactive-icon "chevron-up"
        :inactive-text "Show command output"
-       :action #(when-let [panel (.-current panel-ref)]
-                  (if (.isExpanded panel)
-                    (.collapse panel)
-                    (.expand panel)))}
+       :action #(rf/dispatch [:panel/toggle :repl-history])}
       {:style {:margin-top "0" :margin-bottom "0"}}]]))
 
 (defn set-print!
@@ -144,8 +141,7 @@
              _show-value-opts
              _js-cm-opts
              _on-cm-init]}]
-  (let [panel-ref (react/createRef)
-        state (or state (r/atom initial-state))
+  (let [state (or state (r/atom initial-state))
         {:keys
          [add-input
           add-result
@@ -183,19 +179,17 @@
                    js-cm-opts
                    on-cm-init]}]
       [:<>
-       [:> PanelResizeHandle
-        {:id "repl-resize-handle"
-         :className "resize-handle"}]
-       [:> Panel
-        {:id "repl-panel"
-         :minSize 10
-         :defaultSize 0
-         :collapsible true
-         :order 3
-         :ref panel-ref
-         :onCollapse #(rf/dispatch-sync [:panel/collapse :repl-history])
-         :onExpand #(rf/dispatch-sync [:panel/expand :repl-history])}
-        [repl-items @items (assoc show-value-opts :set-text set-text)]]
+       (when @(rf/subscribe [:panel/visible? :repl-history])
+         [:<>
+          [:> PanelResizeHandle
+           {:id "repl-resize-handle"
+            :className "resize-handle"}]
+          [:> Panel
+           {:id "repl-panel"
+            :minSize 10
+            :defaultSize 10
+            :order 3}
+           [repl-items @items (assoc show-value-opts :set-text set-text)]]])
 
        [:div.relative.whitespace-pre-wrap.font-mono
         [completion-list
@@ -208,7 +202,6 @@
           [repl-input
            (subs/current-text state)
            submit
-           panel-ref
            {:complete-word complete-word
             :on-up go-up
             :on-down go-down

src/renderer/reepl/repl_items.cljs

@@ -5,7 +5,8 @@
    [cljs.tools.reader]
    [reagent.core :as r]
    [renderer.reepl.codemirror :as codemirror]
-   [renderer.reepl.show-value :refer [show-value]]))
+   [renderer.reepl.show-value :refer [show-value]]
+   [renderer.utils.dom :as dom]))
 
 (defmulti repl-item (fn [item _opts] (:type item)))
 
@@ -40,13 +41,17 @@
 (defn repl-items [_]
   (let [ref (react/createRef)]
     (r/create-class
-     {:component-did-update
+     {:component-did-mount
       (fn [_this]
         (let [el (.-current ref)]
-          (set! (.-scrollTop el) (.-scrollHeight el))))
+          (dom/scroll-to-bottom el)))
+      :component-did-update
+      (fn [_this]
+        (let [el (.-current ref)]
+          (dom/scroll-to-bottom el)))
       :reagent-render
       (fn [items opts]
         (into
-         [:div.flex-1.border-b.border-default.h-full.overflow-auto
+         [:div.flex-1.border-b.border-default.h-full.overflow-y-auto.overflow-x-hidden.p-1
           {:ref ref}]
          (map #(repl-item % opts) items)))})))

src/renderer/timeline/views.cljs

@@ -77,7 +77,7 @@
        :on-checked-change #(rf/dispatch [:timeline/set-guide-snap %])}]]))
 
 (defn toolbar
-  [timeline-ref panel-ref]
+  [timeline-ref]
   (let [time @(rf/subscribe [:timeline/time])
         time-formatted @(rf/subscribe [:timeline/time-formatted])
         paused? @(rf/subscribe [:timeline/paused?])
@@ -117,10 +117,7 @@
        :active-text "Hide timeline"
        :inactive-icon "timeline"
        :inactive-text "Show timeline"
-       :action #(when-let [panel (.-current panel-ref)]
-                  (if (.isExpanded panel)
-                    (.collapse panel)
-                    (.expand panel)))}]]))
+       :action #(rf/dispatch [:panel/toggle :timeline])}]]))
 
 (defn register-listeners
   [timeline-ref]
@@ -169,8 +166,7 @@
 
 (defn root
   []
-  (let [timeline-ref (react/createRef)
-        panel-ref (react/createRef)]
+  (let [timeline-ref (react/createRef)]
     (ra/create-class
      {:component-did-mount
       (fn []
@@ -183,19 +179,21 @@
 
       :reagent-render
       (fn []
-        [:<>
-         [:> PanelResizeHandle
-          {:id "timeline-resize-handle"
-           :className "resize-handle"}]
-         [toolbar timeline-ref panel-ref]
-         [time-bar]
-         [:> Panel
-          {:id "timeline-panel"
-           :minSize 10
-           :defaultSize 0
-           :collapsible true
-           :order 2
-           :ref panel-ref
-           :onCollapse #(rf/dispatch-sync [:panel/collapse :timeline])
-           :onExpand #(rf/dispatch-sync [:panel/expand :timeline])}
-          [timeline timeline-ref]]])})))
+        (let [timeline? @(rf/subscribe [:panel/visible? :timeline])]
+          [:<>
+
+           [toolbar timeline-ref]
+           [time-bar]
+           (when timeline?
+             [:> PanelResizeHandle
+              {:id "timeline-resize-handle"
+               :className "resize-handle"}])
+           (if timeline?
+             [:> Panel
+              {:id "timeline-panel"
+               :minSize 10
+               :defaultSize 10
+               :order 2}
+              [timeline timeline-ref]]
+             ;; We need an invisible timeline to get the ref for our toolbar.
+             [:div.h-0 [timeline timeline-ref]])]))})))

src/renderer/utils/dom.cljs

@@ -26,3 +26,7 @@
 (defn scroll-into-view
   [el]
   (.scrollIntoView el #js {:block "nearest"}))
+
+(defn scroll-to-bottom
+  [el]
+  (set! (.-scrollTop el) (.-scrollHeight el)))

src/renderer/utils/keyboard.cljs

@@ -77,6 +77,12 @@
                  [{:keyCode (key-codes "P")
                    :ctrlKey true
                    :shiftKey true}]]
+                [[:panel/toggle :tree]
+                 [{:keyCode (key-codes "T")
+                   :ctrlKey true}]]
+                [[:panel/toggle :properties]
+                 [{:keyCode (key-codes "P")
+                   :ctrlKey true}]]
                 [[:element/stroke->path]
                  [{:keyCode (key-codes "P")
                    :ctrlKey true

src/renderer/views.cljs

@@ -105,39 +105,42 @@
 
 (defn editor
   []
-  [:> PanelGroup
-   {:direction "vertical"
-    :id "editor-group"
-    :autoSaveId "editor-group"}
-   [:> Panel {:id "editor-panel"
-              :minSize 20
-              :defaultSize 100
-              :order 1}
-    [center-top-group]]
-   [timeline/root]
-   [repl/root]])
+  (let [timeline? @(rf/subscribe [:panel/visible? :timeline])
+        repl-history? @(rf/subscribe [:panel/visible? :repl-history])]
+    [:> PanelGroup
+     ;; REVIEW: We need to rerender the group to properly resize the panels.
+     {:key (str timeline? repl-history?)
+      :direction "vertical"
+      :id "editor-group"
+      :autoSaveId "editor-group"}
+     [:> Panel {:id "editor-panel"
+                :minSize 20
+                :order 1}
+      [center-top-group]]
+     [timeline/root]
+     [repl/root]]))
 
 (defn tree-panel
   []
   (let [tree? @(rf/subscribe [:panel/visible? :tree])
         tree-min-width @(rf/subscribe [:window/tree-min-width])]
-    (when tree-min-width
-      [:> Panel
-       {:id "tree-panel"
-        :collapsible true
-        :minSize tree-min-width
-        :defaultSize tree-min-width
-        :onCollapse #(rf/dispatch-sync [:panel/collapse :tree])
-        :onExpand #(rf/dispatch-sync [:panel/expand :tree])
-        :class "flex flex-col"}
-       (when tree?
-         [:<>
-          [doc/actions]
-          [tree/root]])])))
+    (when (and tree? tree-min-width)
+      [:<>
+       [:> Panel
+        {:id "tree-panel"
+         :minSize tree-min-width
+         :defaultSize tree-min-width
+         :class "flex flex-col"}
+        [doc/actions]
+        [tree/root]]
+       [:> PanelResizeHandle
+        {:id "tree-resize-handle"
+         :className "resize-handle"}]])))
 
 (defn root
   []
-  (let [props-min-width @(rf/subscribe [:window/props-min-width])]
+  (let [props-min-width @(rf/subscribe [:window/props-min-width])
+        props? @(rf/subscribe [:panel/visible? :properties])]
     [:> Tooltip/Provider
      [:div.flex.flex-col.flex-1.h-screen
       [win/app-header]
@@ -147,9 +150,6 @@
           :id "root-group"
           :autoSaveId "root-group"}
          [tree-panel]
-         [:> PanelResizeHandle
-          {:id "tree-resize-handle"
-           :className "resize-handle"}]
          [:> Panel
           {:id "main-panel"
            :order 2}
@@ -161,23 +161,25 @@
              :autoSaveId "center-group"}
             [:> Panel
              {:id "center-panel"
+              :minSize 10
               :order 1}
              [:div.flex.h-full.flex-col
               [editor]]]
-            [:> PanelResizeHandle
-             {:id "properties-resize-handle"
-              :className "resize-handle"}]
-            (when props-min-width
-              [:> Panel
-               {:id "properties-panel"
-                :collapsible true
-                :order 2
-                :minSize props-min-width
-                :defaultSize props-min-width
-                :onCollapse #(rf/dispatch-sync [:panel/collapse :properties])
-                :onExpand #(rf/dispatch-sync [:panel/expand :properties])}
-               (when @(rf/subscribe [:panel/visible? :properties])
-                 [attr/form])])
+
+            (when (and props? props-min-width)
+              [:<>
+               [:> PanelResizeHandle
+                {:id "properties-resize-handle"
+                 :className "resize-handle"}]
+               [:> Panel
+                {:id "properties-panel"
+                 :order 2
+                 :minSize props-min-width
+                 :defaultSize props-min-width
+                 :onCollapse #(rf/dispatch-sync [:panel/collapse :properties])
+                 :onExpand #(rf/dispatch-sync [:panel/expand :properties])}
+
+                [attr/form]]])
             [toolbar.object/root]]]]]
         [home/panel])]
      [cmdk/dialog]