🐛 Fix scroll so it's not hidden against palette

frontend/src/app/main/ui/components/color_bullet_new.scss

@@ -87,6 +87,7 @@
   @include inspectValue;
   color: var(--palette-text-color);
   height: $s-16;
+  text-align: center;
 }
 
 .no-text {

frontend/src/app/main/ui/hooks/resize.cljs

@@ -24,62 +24,72 @@
   (set! last-resize-type type))
 
 (defn use-resize-hook
-  [key initial min-val max-val axis negate? resize-type]
+  ([key initial min-val max-val axis negate? resize-type]
+   (use-resize-hook key initial min-val max-val axis negate? resize-type nil))
 
-  (let [current-file-id (mf/use-ctx ctx/current-file-id)
-        size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial))
-        parent-ref (mf/use-ref nil)
+  ([key initial min-val max-val axis negate? resize-type on-change-size]
+   (let [current-file-id (mf/use-ctx ctx/current-file-id)
+         size-state (mf/use-state (or (get-in @storage [::saved-resize current-file-id key]) initial))
+         parent-ref (mf/use-ref nil)
 
-        dragging-ref (mf/use-ref false)
-        start-size-ref (mf/use-ref nil)
-        start-ref (mf/use-ref nil)
+         dragging-ref (mf/use-ref false)
+         start-size-ref (mf/use-ref nil)
+         start-ref (mf/use-ref nil)
 
-        on-pointer-down
-        (mf/use-callback
-         (mf/deps @size-state)
-         (fn [event]
-           (dom/capture-pointer event)
-           (mf/set-ref-val! start-size-ref @size-state)
-           (mf/set-ref-val! dragging-ref true)
-           (mf/set-ref-val! start-ref (dom/get-client-position event))
-           (set! last-resize-type resize-type)))
+         on-pointer-down
+         (mf/use-callback
+          (mf/deps @size-state)
+          (fn [event]
+            (dom/capture-pointer event)
+            (mf/set-ref-val! start-size-ref @size-state)
+            (mf/set-ref-val! dragging-ref true)
+            (mf/set-ref-val! start-ref (dom/get-client-position event))
+            (set! last-resize-type resize-type)))
 
-        on-lost-pointer-capture
-        (mf/use-callback
-         (fn [event]
-           (dom/release-pointer event)
-           (mf/set-ref-val! start-size-ref nil)
-           (mf/set-ref-val! dragging-ref false)
-           (mf/set-ref-val! start-ref nil)
-           (set! last-resize-type nil)))
+         on-lost-pointer-capture
+         (mf/use-callback
+          (fn [event]
+            (dom/release-pointer event)
+            (mf/set-ref-val! start-size-ref nil)
+            (mf/set-ref-val! dragging-ref false)
+            (mf/set-ref-val! start-ref nil)
+            (set! last-resize-type nil)))
 
-        on-pointer-move
-        (mf/use-callback
-         (mf/deps min-val max-val negate?)
-         (fn [event]
-           (when (mf/ref-val dragging-ref)
-             (let [start (mf/ref-val start-ref)
-                   pos (dom/get-client-position event)
-                   delta (-> (gpt/to-vec start pos)
-                             (cond-> negate? gpt/negate)
-                             (get axis))
-                   start-size (mf/ref-val start-size-ref)
-                   new-size (-> (+ start-size delta) (max min-val) (min max-val))]
-               (reset! size-state new-size)
-               (swap! storage assoc-in [::saved-resize current-file-id key] new-size)))))
+         on-pointer-move
+         (mf/use-callback
+          (mf/deps min-val max-val negate?)
+          (fn [event]
+            (when (mf/ref-val dragging-ref)
+              (let [start (mf/ref-val start-ref)
+                    pos (dom/get-client-position event)
+                    delta (-> (gpt/to-vec start pos)
+                              (cond-> negate? gpt/negate)
+                              (get axis))
+                    start-size (mf/ref-val start-size-ref)
+                    new-size (-> (+ start-size delta) (max min-val) (min max-val))]
+                (reset! size-state new-size)
+                (swap! storage assoc-in [::saved-resize current-file-id key] new-size)
+                (when on-change-size (on-change-size new-size))))))
 
-        set-size
-        (mf/use-callback
-         (fn [new-size]
-           (let [new-size (mth/clamp new-size min-val max-val)]
-             (reset! size-state new-size)
-             (swap! storage assoc-in [::saved-resize current-file-id key] new-size))))]
-    {:on-pointer-down on-pointer-down
-     :on-lost-pointer-capture on-lost-pointer-capture
-     :on-pointer-move on-pointer-move
-     :parent-ref parent-ref
-     :set-size set-size
-     :size @size-state}))
+         set-size
+         (mf/use-callback
+          (mf/deps on-change-size)
+          (fn [new-size]
+            (let [new-size (mth/clamp new-size min-val max-val)]
+              (reset! size-state new-size)
+              (swap! storage assoc-in [::saved-resize current-file-id key] new-size)
+              (when on-change-size (on-change-size new-size)))))]
+
+     (mf/use-effect
+      (fn []
+        (when on-change-size (on-change-size @size-state))))
+
+     {:on-pointer-down on-pointer-down
+      :on-lost-pointer-capture on-lost-pointer-capture
+      :on-pointer-move on-pointer-move
+      :parent-ref parent-ref
+      :set-size set-size
+      :size @size-state})))
 
 (defn use-resize-observer
   [callback]

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

@@ -61,7 +61,8 @@
 (mf/defc workspace-content
   {::mf/wrap-props false}
   [{:keys [file layout page-id wglobal]}]
-  (let [selected (mf/deref refs/selected-shapes)
+  (let [palete-size (mf/use-state nil)
+        selected (mf/deref refs/selected-shapes)
 
         {:keys [vport] :as wlocal} (mf/deref refs/workspace-local)
         {:keys [options-mode]} wglobal
@@ -78,11 +79,17 @@
            (when (and vport (not= size vport))
              (st/emit! (dw/update-viewport-size resize-type size)))))
 
+        on-resize-palette
+        (mf/use-fn
+         (fn [size]
+           (reset! palete-size size)))
+
         node-ref (use-resize-observer on-resize)]
     [:*
      (if new-css-system
        (when (not hide-ui?)
-         [:& palette {:layout layout}])
+         [:& palette {:layout layout
+                      :on-change-palette-size on-resize-palette}])
        [:*
         (when (and colorpalette? (not hide-ui?))
           [:& colorpalette])
@@ -107,7 +114,10 @@
                      :wlocal wlocal
                      :wglobal wglobal
                      :selected selected
-                     :layout layout}]]]
+                     :layout layout
+                     :palete-size
+                     (when (and (or colorpalette? textpalette?) (not hide-ui?))
+                       @palete-size)}]]]
 
      (when-not hide-ui?
        [:*

frontend/src/app/main/ui/workspace/palette.cljs

@@ -46,7 +46,7 @@
          "paddingRight" "calc(var(--s-4) * 70)"}))
 
 (mf/defc palette
-  [{:keys [layout]}]
+  [{:keys [layout on-change-palette-size]}]
   (let [color-palette?       (:colorpalette layout)
         text-palette?        (:textpalette layout)
         workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
@@ -57,10 +57,11 @@
         on-select            (mf/use-fn #(reset! selected %))
         rulers?              (mf/deref refs/rules?)
         {:keys [on-pointer-down on-lost-pointer-capture on-pointer-move parent-ref size]}
-        (r/use-resize-hook :palette 72 54 80 :y true :bottom)
+        (r/use-resize-hook :palette 72 54 80 :y true :bottom on-change-palette-size)
 
         vport (mf/deref viewport)
         vport-width (:width vport)
+
         on-resize
         (mf/use-callback
          (fn [_]
@@ -98,10 +99,11 @@
 
         any-palette? (or color-palette? text-palette?)
 
-        size-classname (cond
-                         (<= size 64) (css :small-palette)
-                         (<= size 72) (css :mid-palette)
-                         (<= size 80) (css :big-palette))]
+        size-classname
+        (cond
+          (<= size 64) (css :small-palette)
+          (<= size 72) (css :mid-palette)
+          (<= size 80) (css :big-palette))]
 
     (mf/with-effect []
       (let [key1 (events/listen js/window "resize" on-resize)]

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

@@ -69,7 +69,7 @@
    selected))
 
 (mf/defc viewport
-  [{:keys [selected wglobal wlocal layout file] :as props}]
+  [{:keys [selected wglobal wlocal layout file palete-size] :as props}]
   (let [;; When adding data from workspace-local revisit `app.main.ui.workspace` to check
         ;; that the new parameter is sent
         {:keys [edit-path
@@ -535,7 +535,8 @@
        [:& scroll-bars/viewport-scrollbars
         {:objects base-objects
          :zoom zoom
-         :vbox vbox}]
+         :vbox vbox
+         :bottom-padding (when palete-size (+ palete-size 8))}]
 
        (when-not hide-ui?
          [:& rules/rules

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

@@ -28,7 +28,7 @@
 
 (mf/defc viewport-scrollbars
   {::mf/wrap [mf/memo]}
-  [{:keys [objects zoom vbox]}]
+  [{:keys [objects zoom vbox bottom-padding]}]
 
   (let [v-scrolling?              (mf/use-state false)
         h-scrolling?              (mf/use-state false)
@@ -56,6 +56,11 @@
                                         (cfh/get-immediate-children)
                                         (gsh/shapes->rect)))
 
+        ;; Padding for bottom palette
+        vbox                     (cond-> vbox
+                                   (some? bottom-padding)
+                                   (update :height - (/ bottom-padding zoom)))
+
         inv-zoom                 (/ 1 zoom)
         vbox-height              (- (:height vbox) (* inv-zoom scroll-height))
         vbox-width               (- (:width vbox) (* inv-zoom scroll-width))
@@ -65,6 +70,7 @@
                                      (max 0)
                                      (* vbox-height)
                                      (/ (:height base-objects-rect)))
+
         ;; left space hidden because of the scroll
         left-offset              (-> (- vbox-x (:x base-objects-rect))
                                      (max 0)