Repository: penpot/penpot
File: frontend/src/app/main/ui/hooks/resize.cljs (ClojureScript)

Code before:
                     (if parsed-max-val
                       (* window-height parsed-max-val)
                       max-val)))

         set-size
         (mf/use-fn
          (mf/deps file-id key min-val max-val window-height)
          (fn [new-size]
            (let [new-size (mth/clamp new-size min-val max-val)]
              (reset! current-size* new-size)
              (swap! storage/user update-persistent-state file-id key new-size))))

         on-pointer-down
         (mf/use-fn
          (mf/deps current-size)
          (fn [event]
            (dom/capture-pointer event)
            (mf/set-ref-val! start-size-ref current-size)
            (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-fn
          (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-fn
          (mf/deps min-val max-val negate? file-id key)
          (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))]

                (set-size new-size)))))

         on-resize-window
         (mf/use-fn
          (fn []

Review comment (suggestion):
This will only work if the axis is `:y` (if you give an `:x` axis you will have a max-val depending on the window height.

This is ok for now, because currently we are not using percent max-val in any horizontal panel. But I will add, for example, a docstring to the hook explaining how a string max-val works and that it's only implemented for vertical axis. If later is needed to use this for a horizontal panel it won't be complicated to add it.

Code after:
     - `:set-size` - A function to set the size.
     - `:size` - The current size."

  ([key initial min-val max-val axis negate? resize-type]
   (use-resize-hook key initial min-val max-val axis negate? resize-type nil))

  ([key initial min-val max-val axis negate? resize-type on-change-size]
   (let [file-id        (mf/use-ctx ctx/current-file-id)

         current-size*  (mf/use-state #(get-initial-state initial file-id key))
         current-size   (deref current-size*)

         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)

        ;;  Since Penpot is not responsive designed, this value will only refer to vertical axis.
         window-height* (mf/use-state #(dom/get-window-height))
         window-height (deref window-height*)

        ;;  In case max-val is a string, we need to parse it as a double.
         max-val (mf/with-memo [max-val window-height]
                   (let [parsed-max-val (when (string? max-val) (d/parse-double max-val))]
                     (if parsed-max-val
                       (* window-height parsed-max-val)
                       max-val)))

         set-size
         (mf/use-fn
          (mf/deps file-id key min-val max-val window-height)
          (fn [new-size]
            (let [new-size (mth/clamp new-size min-val max-val)]
              (reset! current-size* new-size)
              ;; Save the new size in the local storage for this file and this specific node.
              (swap! storage/user update-persistent-state file-id key new-size))))

         on-pointer-down
         (mf/use-fn
          (mf/deps current-size)
          (fn [event]
            (dom/capture-pointer event)
            (mf/set-ref-val! start-size-ref current-size)
            (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-fn
          (fn [event]
            (dom/release-pointer event)