3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-19 14:27:21 +02:00
Code Issues Projects Releases Packages Wiki Activity

⚡ Add efficiency improvements to use-resize-hook

Browse source
This commit is contained in:
Andrey Antukh 2024-09-04 14:23:30 +02:00
parent 9619fcbc1f
commit b2c0bed84c
1 changed files with 35 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

59
frontend/src/app/main/ui/hooks/resize.cljs
View file

@ -6,6 +6,7 @@
(ns app.main.ui.hooks.resize (ns app.main.ui.hooks.resize
(:require (:require
[app.common.data :as d]
[app.common.data.macros :as dm] [app.common.data.macros :as dm]
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.logging :as log] [app.common.logging :as log]
@ -20,6 +21,15 @@
(def last-resize-type nil) (def last-resize-type nil)
(defn- get-initial-state
[initial file-id key]
(let [saved (dm/get-in @storage [::state file-id key])]
(d/nilv saved initial)))
(defn- update-persistent-state
[data file-id key size]
(update-in data [::state file-id] assoc key size))
(defn set-resize-type! [type] (defn set-resize-type! [type]
(set! last-resize-type type)) (set! last-resize-type type))
@ -28,26 +38,28 @@
(use-resize-hook key initial min-val max-val axis negate? resize-type nil)) (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] ([key initial min-val max-val axis negate? resize-type on-change-size]
(let [current-file-id (mf/use-ctx ctx/current-file-id) (let [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) 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-size-ref (mf/use-ref nil)
start-ref (mf/use-ref nil) start-ref (mf/use-ref nil)
on-pointer-down on-pointer-down
(mf/use-callback (mf/use-fn
(mf/deps @size-state) (mf/deps current-size)
(fn [event] (fn [event]
(dom/capture-pointer event) (dom/capture-pointer event)
(mf/set-ref-val! start-size-ref @size-state) (mf/set-ref-val! start-size-ref current-size)
(mf/set-ref-val! dragging-ref true) (mf/set-ref-val! dragging-ref true)
(mf/set-ref-val! start-ref (dom/get-client-position event)) (mf/set-ref-val! start-ref (dom/get-client-position event))
(set! last-resize-type resize-type))) (set! last-resize-type resize-type)))
on-lost-pointer-capture on-lost-pointer-capture
(mf/use-callback (mf/use-fn
(fn [event] (fn [event]
(dom/release-pointer event) (dom/release-pointer event)
(mf/set-ref-val! start-size-ref nil) (mf/set-ref-val! start-size-ref nil)
@ -56,40 +68,39 @@
(set! last-resize-type nil))) (set! last-resize-type nil)))
on-pointer-move on-pointer-move
(mf/use-callback (mf/use-fn
(mf/deps min-val max-val negate?) (mf/deps min-val max-val negate? file-id key)
(fn [event] (fn [event]
(when (mf/ref-val dragging-ref) (when (mf/ref-val dragging-ref)
(let [start (mf/ref-val start-ref) (let [start (mf/ref-val start-ref)
pos (dom/get-client-position event) pos (dom/get-client-position event)
delta (-> (gpt/to-vec start pos) delta (-> (gpt/to-vec start pos)
(cond-> negate? gpt/negate) (cond-> negate? gpt/negate)
(get axis)) (get axis))
start-size (mf/ref-val start-size-ref) start-size (mf/ref-val start-size-ref)
new-size (-> (+ start-size delta) (max min-val) (min max-val))] new-size (-> (+ start-size delta) (max min-val) (min max-val))]
(reset! size-state new-size) (reset! current-size* new-size)
(swap! storage assoc-in [::saved-resize current-file-id key] new-size) (swap! storage update-persistent-state file-id key new-size)))))
(when on-change-size (on-change-size new-size))))))
set-size set-size
(mf/use-callback (mf/use-fn
(mf/deps on-change-size) (mf/deps on-change-size file-id key)
(fn [new-size] (fn [new-size]
(let [new-size (mth/clamp new-size min-val max-val)] (let [new-size (mth/clamp new-size min-val max-val)]
(reset! size-state new-size) (reset! current-size* new-size)
(swap! storage assoc-in [::saved-resize current-file-id key] new-size) (swap! storage update-persistent-state file-id key new-size))))]
(when on-change-size (on-change-size new-size)))))]
(mf/use-effect (mf/with-effect [on-change-size current-size]
(fn [] (when on-change-size
(when on-change-size (on-change-size @size-state)))) (on-change-size current-size)))
{:on-pointer-down on-pointer-down {:on-pointer-down on-pointer-down
:on-lost-pointer-capture on-lost-pointer-capture :on-lost-pointer-capture on-lost-pointer-capture
:on-pointer-move on-pointer-move :on-pointer-move on-pointer-move
:parent-ref parent-ref :parent-ref parent-ref
:set-size set-size :set-size set-size
:size @size-state}))) :size current-size})))
(defn use-resize-observer (defn use-resize-observer
[callback] [callback]