🎉 Add resize observer as rx stream.

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)

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?

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)}]))
 

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))))))