diff --git a/frontend/src/app/main/ui/components/editable_select.cljs b/frontend/src/app/main/ui/components/editable_select.cljs index e9de807d7..27fe4d897 100644 --- a/frontend/src/app/main/ui/components/editable_select.cljs +++ b/frontend/src/app/main/ui/components/editable_select.cljs @@ -44,17 +44,18 @@ (fn [node] ;; There is a problem when changing the state in this callback that ;; produces the dropdown to close in the same event - (timers/schedule - #(when-let [bounds (when node (dom/get-bounding-rect node))] - (let [{window-height :height} (dom/get-window-size) - {:keys [left top height]} bounds - bottom (when (< (- window-height top) 300) (- window-height top)) - top (when (>= (- window-height top) 300) (+ top height))] - (swap! state - assoc - :left left - :top top - :bottom bottom)))))] + (when node + (timers/schedule + #(when-let [bounds (when node (dom/get-bounding-rect node))] + (let [{window-height :height} (dom/get-window-size) + {:keys [left top height]} bounds + bottom (when (< (- window-height top) 300) (- window-height top)) + top (when (>= (- window-height top) 300) (+ top height))] + (swap! state + assoc + :left left + :top top + :bottom bottom))))))] (mf/use-effect (mf/deps value) diff --git a/frontend/src/app/main/ui/dashboard/grid.cljs b/frontend/src/app/main/ui/dashboard/grid.cljs index df35fe7cf..b6a8b10d2 100644 --- a/frontend/src/app/main/ui/dashboard/grid.cljs +++ b/frontend/src/app/main/ui/dashboard/grid.cljs @@ -26,6 +26,7 @@ [app.util.router :as rt] [app.util.time :as dt] [app.util.timers :as ts] + [app.util.webapi :as wapi] [beicon.core :as rx] [cuerdas.core :as str] [rumext.alpha :as mf])) @@ -255,17 +256,19 @@ (mf/use-effect (fn [] - (let [node (mf/ref-val rowref) - obs (new js/ResizeObserver - (fn [entries x] - (ts/raf #(let [row (first entries) - row-rect (.-contentRect ^js row) - row-width (.-width ^js row-rect)] - (reset! width row-width)))))] - - (.observe ^js obs node) + (let [node (mf/ref-val rowref) + mnt? (volatile! true) + sub (->> (wapi/observe-resize node) + (rx/observe-on :af) + (rx/subs (fn [entries] + (let [row (first entries) + row-rect (.-contentRect ^js row) + row-width (.-width ^js row-rect)] + (when @mnt? + (reset! width row-width))))))] (fn [] - (.disconnect ^js obs))))) + (vreset! mnt? false) + (rx/dispose! sub))))) [:div.grid-row.no-wrap {:ref rowref} (when dragging? diff --git a/frontend/src/app/main/ui/workspace/shapes/text.cljs b/frontend/src/app/main/ui/workspace/shapes/text.cljs index 084da1e56..9e4a3efbe 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text.cljs @@ -21,6 +21,7 @@ [app.util.logging :as log] [app.util.object :as obj] [app.util.timers :as timers] + [app.util.webapi :as wapi] [app.util.text-editor :as ted] [okulary.core :as l] [beicon.core :as rx] @@ -62,6 +63,7 @@ (true? (obj/get props "edition?")) (update-with-current-editor-state)) + mnt (mf/use-ref true) paragraph-ref (mf/use-state nil) handle-resize-text @@ -83,20 +85,24 @@ (mf/deps handle-resize-text) (fn [node] (when node - (let [obs-ref (atom nil)] - (timers/schedule - (fn [] - (when-let [ps-node (dom/query node ".paragraph-set")] - (reset! paragraph-ref ps-node))))))))] + (timers/schedule + #(when (mf/ref-val mnt) + (when-let [ps-node (dom/query node ".paragraph-set")] + (reset! paragraph-ref ps-node)))))))] (mf/use-effect (mf/deps @paragraph-ref handle-resize-text grow-type) (fn [] (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) - (.observe observer paragraph-node) - #(.disconnect observer))))) + (fn [] + (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)}])) diff --git a/frontend/src/app/util/webapi.cljs b/frontend/src/app/util/webapi.cljs index 9664de3a8..0da4d753a 100644 --- a/frontend/src/app/util/webapi.cljs +++ b/frontend/src/app/util/webapi.cljs @@ -131,3 +131,14 @@ :else (ex/raise :type :not-supported :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))))))