3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-12 23:56:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

🎉 Add resize observer as rx stream.

Browse source
This commit is contained in:
Andrey Antukh 2021-05-12 10:24:00 +02:00 • committed by Andrés Moya
parent 4b7f82a9d9
commit a86c4a8309
4 changed files with 50 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

23
frontend/src/app/main/ui/components/editable_select.cljs
View file

@ -44,17 +44,18 @@
(fn [node] (fn [node]
;; There is a problem when changing the state in this callback that ;; There is a problem when changing the state in this callback that
;; produces the dropdown to close in the same event ;; produces the dropdown to close in the same event
(timers/schedule (when node
#(when-let [bounds (when node (dom/get-bounding-rect node))] (timers/schedule
(let [{window-height :height} (dom/get-window-size) #(when-let [bounds (when node (dom/get-bounding-rect node))]
{:keys [left top height]} bounds (let [{window-height :height} (dom/get-window-size)
bottom (when (< (- window-height top) 300) (- window-height top)) {:keys [left top height]} bounds
top (when (>= (- window-height top) 300) (+ top height))] bottom (when (< (- window-height top) 300) (- window-height top))
(swap! state top (when (>= (- window-height top) 300) (+ top height))]
assoc (swap! state
:left left assoc
:top top :left left
:bottom bottom)))))] :top top
:bottom bottom))))))]
(mf/use-effect (mf/use-effect
(mf/deps value) (mf/deps value)

23
frontend/src/app/main/ui/dashboard/grid.cljs
View file

@ -26,6 +26,7 @@
[app.util.router :as rt] [app.util.router :as rt]
[app.util.time :as dt] [app.util.time :as dt]
[app.util.timers :as ts] [app.util.timers :as ts]
[app.util.webapi :as wapi]
[beicon.core :as rx] [beicon.core :as rx]
[cuerdas.core :as str] [cuerdas.core :as str]
[rumext.alpha :as mf])) [rumext.alpha :as mf]))
@ -255,17 +256,19 @@
(mf/use-effect (mf/use-effect
(fn [] (fn []
(let [node (mf/ref-val rowref) (let [node (mf/ref-val rowref)
obs (new js/ResizeObserver mnt? (volatile! true)
(fn [entries x] sub (->> (wapi/observe-resize node)
(ts/raf #(let [row (first entries) (rx/observe-on :af)
row-rect (.-contentRect ^js row) (rx/subs (fn [entries]
row-width (.-width ^js row-rect)] (let [row (first entries)
(reset! width row-width)))))] row-rect (.-contentRect ^js row)
row-width (.-width ^js row-rect)]
(.observe ^js obs node) (when @mnt?
(reset! width row-width))))))]
(fn [] (fn []
(.disconnect ^js obs))))) (vreset! mnt? false)
(rx/dispose! sub)))))
[:div.grid-row.no-wrap {:ref rowref} [:div.grid-row.no-wrap {:ref rowref}
(when dragging? (when dragging?

22
frontend/src/app/main/ui/workspace/shapes/text.cljs
View file

@ -21,6 +21,7 @@
[app.util.logging :as log] [app.util.logging :as log]
[app.util.object :as obj] [app.util.object :as obj]
[app.util.timers :as timers] [app.util.timers :as timers]
[app.util.webapi :as wapi]
[app.util.text-editor :as ted] [app.util.text-editor :as ted]
[okulary.core :as l] [okulary.core :as l]
[beicon.core :as rx] [beicon.core :as rx]
@ -62,6 +63,7 @@
(true? (obj/get props "edition?")) (true? (obj/get props "edition?"))
(update-with-current-editor-state)) (update-with-current-editor-state))
mnt (mf/use-ref true)
paragraph-ref (mf/use-state nil) paragraph-ref (mf/use-state nil)
handle-resize-text handle-resize-text
@ -83,20 +85,24 @@
(mf/deps handle-resize-text) (mf/deps handle-resize-text)
(fn [node] (fn [node]
(when node (when node
(let [obs-ref (atom nil)] (timers/schedule
(timers/schedule #(when (mf/ref-val mnt)
(fn [] (when-let [ps-node (dom/query node ".paragraph-set")]
(when-let [ps-node (dom/query node ".paragraph-set")] (reset! paragraph-ref ps-node)))))))]
(reset! paragraph-ref ps-node))))))))]
(mf/use-effect (mf/use-effect
(mf/deps @paragraph-ref handle-resize-text grow-type) (mf/deps @paragraph-ref handle-resize-text grow-type)
(fn [] (fn []
(when-let [paragraph-node @paragraph-ref] (when-let [paragraph-node @paragraph-ref]
(let [observer (js/ResizeObserver. handle-resize-text)] (let [sub (->> (wapi/observe-resize paragraph-node)
(rx/observe-on :af)
(rx/subs handle-resize-text))]
(log/debug :msg "Attach resize observer" :shape-id id :shape-name name) (log/debug :msg "Attach resize observer" :shape-id id :shape-name name)
(.observe observer paragraph-node) (fn []
#(.disconnect observer))))) (rx/dispose! sub))))))
(mf/use-effect
(fn [] #(mf/set-ref-val! mnt false)))
[:& text/text-shape {:ref text-ref-cb :shape shape :grow-type (:grow-type shape)}])) [:& text/text-shape {:ref text-ref-cb :shape shape :grow-type (:grow-type shape)}]))

11
frontend/src/app/util/webapi.cljs
View file

@ -131,3 +131,14 @@
:else :else
(ex/raise :type :not-supported (ex/raise :type :not-supported
:hint "seems like the current browset does not support fullscreen api."))) :hint "seems like the current browset does not support fullscreen api.")))
(defn observe-resize
[node]
(rx/create
(fn [subs]
(let [obs (js/ResizeObserver.
(fn [entries x]
(rx/push! subs entries)))]
(.observe ^js obs node)
(fn []
(.disconnect ^js obs))))))