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

💄 Minor cosmetic changes on resize and thumbnail render

Browse source
This commit is contained in:
Andrey Antukh 2022-08-09 13:30:07 +02:00
parent 8d06227d1e
commit 756b6d4fbd
2 changed files with 28 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -8,6 +8,7 @@
(:require (:require
[app.common.geom.point :as gpt] [app.common.geom.point :as gpt]
[app.common.logging :as log] [app.common.logging :as log]
[app.common.spec :as us]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.hooks :as hooks] [app.main.ui.hooks :as hooks]
[app.util.dom :as dom] [app.util.dom :as dom]
@ -73,43 +74,38 @@
(defn use-resize-observer (defn use-resize-observer
[callback] [callback]
(assert (some? callback)) (us/assert! (some? callback) "the `callback` is mandatory")
(let [prev-val-ref (mf/use-ref nil) (let [prev-val-ref (mf/use-ref nil)
current-observer-ref (mf/use-ref nil) observer-ref (mf/use-ref nil)
callback (hooks/use-ref-callback callback)
callback-ref (hooks/use-update-var {:callback callback})
;; We use the ref as a callback when the dom node is ready (or change) ;; We use the ref as a callback when the dom node is ready (or change)
node-ref node-ref (mf/use-fn
(mf/use-callback (fn [^js node]
(fn [^js node] (when (some? node)
(when (some? node) (let [^js observer (mf/ref-val observer-ref)
(let [^js current-observer (mf/ref-val current-observer-ref) ^js prev-val (mf/ref-val prev-val-ref)]
^js prev-val (mf/ref-val prev-val-ref)]
(when (and (not= prev-val node) (some? current-observer)) (when (and (not= prev-val node) (some? observer))
(log/debug :action "disconnect" :js/prev-val prev-val :js/node node) (log/debug :action "disconnect" :js/prev-val prev-val :js/node node)
(.disconnect current-observer) (.disconnect observer)
(mf/set-ref-val! current-observer-ref nil)) (mf/set-ref-val! observer-ref nil))
(when (and (not= prev-val node) (some? node)) (when (and (not= prev-val node) (some? node))
(let [^js observer (let [^js observer (js/ResizeObserver.
(js/ResizeObserver. #(callback last-resize-type (dom/get-client-size node)))]
#(let [callback (get @callback-ref :callback)] (mf/set-ref-val! observer-ref observer)
(callback last-resize-type (dom/get-client-size node))))] (log/debug :action "observe" :js/node node :js/observer observer)
(mf/set-ref-val! current-observer-ref observer) (.observe observer node))))
(log/debug :action "observe" :js/node node :js/observer observer)
(.observe observer node))))
(mf/set-ref-val! prev-val-ref node))))] (mf/set-ref-val! prev-val-ref node))))]
(mf/with-effect []
;; On dismount we need to disconnect the current observer
(fn []
(when-let [observer (mf/ref-val observer-ref)]
(log/debug :action "disconnect")
(.disconnect ^js observer))))
(mf/use-effect
(fn []
;; On dismount we need to disconnect the current observer
(fn []
(let [current-observer (mf/ref-val current-observer-ref)]
(when (some? current-observer)
(log/debug :action "disconnect")
(.disconnect current-observer))))))
node-ref)) node-ref))

2
frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs
View file

@ -79,7 +79,7 @@
shape-bb-ref (hooks/use-update-var shape-bb) shape-bb-ref (hooks/use-update-var shape-bb)
updates-str (mf/use-memo #(rx/subject)) updates-str (mf/use-memo #(rx/subject))
thumbnail-data-ref (mf/use-memo (mf/deps page-id id) #(refs/thumbnail-frame-data page-id id)) thumbnail-data-ref (mf/use-memo (mf/deps page-id id) #(refs/thumbnail-frame-data page-id id))
thumbnail-data (mf/deref thumbnail-data-ref) thumbnail-data (mf/deref thumbnail-data-ref)