🐛 Fix problem with thumbnail re-rendering

frontend/src/app/main/ui/workspace/shapes/frame.cljs

@@ -10,6 +10,7 @@
    [app.common.data.macros :as dm]
    [app.common.uuid :as uuid]
    [app.main.data.workspace.thumbnails :as dwt]
+   [app.main.fonts :as fonts]
    [app.main.refs :as refs]
    [app.main.ui.context :as ctx]
    [app.main.ui.hooks :as hooks]
@@ -27,19 +28,17 @@
   [shape-wrapper]
   (let [frame-shape (frame/frame-shape shape-wrapper)]
     (mf/fnc frame-shape-inner
-      {::mf/wrap [#(mf/memo' % (mf/check-props ["shape" "fonts"]))]
+      {::mf/wrap [#(mf/memo' % (mf/check-props ["shape"]))]
        ::mf/wrap-props false
        ::mf/forward-ref true}
       [props ref]
 
       (let [shape         (unchecked-get props "shape")
-            fonts         (unchecked-get props "fonts")
             childs-ref    (mf/use-memo (mf/deps (:id shape)) #(refs/children-objects (:id shape)))
             childs        (mf/deref childs-ref)]
 
         [:& (mf/provider embed/context) {:value true}
          [:& shape-container {:shape shape :ref ref}
-          [:& ff/fontfaces-style {:fonts fonts}]
           [:& frame-shape {:shape shape :childs childs} ]]]))))
 
 (defn check-props
@@ -90,13 +89,20 @@
             disable-thumbnail? (d/not-empty? (dm/get-in modifiers [(:id shape) :modifiers]))
 
             [on-load-frame-dom thumb-renderer]
-            (ftr/use-render-thumbnail page-id shape node-ref rendered? thumbnail? disable-thumbnail?)
+            (ftr/use-render-thumbnail page-id shape node-ref rendered? thumbnail-data-ref disable-thumbnail?)
 
             on-frame-load
             (fns/use-node-store thumbnail? node-ref rendered?)]
 
         (fdm/use-dynamic-modifiers objects @node-ref modifiers)
 
+        (mf/use-effect
+         (mf/deps fonts)
+         (fn []
+           (->> (rx/from fonts)
+                (rx/merge-map fonts/fetch-font-css)
+                (rx/ignore))))
+
         (mf/use-effect
          (fn []
            ;; When a change in the data is received a "force-render" event is emited
@@ -121,6 +127,7 @@
 
         [:& (mf/provider ctx/render-ctx) {:value render-id}
          [:g.frame-container {:key "frame-container" :ref on-frame-load}
+          [:& ff/fontfaces-style {:fonts fonts}]
           [:g.frame-thumbnail-wrapper {:id (dm/str "thumbnail-container-" (:id shape))}
            [:> frame/frame-thumbnail {:key (dm/str (:id shape))
                                       :shape (cond-> shape

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

@@ -43,7 +43,7 @@
 
 (defn use-render-thumbnail
   "Hook that will create the thumbnail thata"
-  [page-id {:keys [id x y width height] :as shape} node-ref rendered? thumbnail? disable?]
+  [page-id {:keys [id x y width height] :as shape} node-ref rendered? thumbnail-data-ref disable?]
 
   (let [frame-canvas-ref (mf/use-ref nil)
         frame-image-ref (mf/use-ref nil)
@@ -58,8 +58,6 @@
 
         shape-ref (hooks/use-update-var shape)
 
-        thumbnail-ref? (mf/use-var thumbnail?)
-
         updates-str (mf/use-memo #(rx/subject))
 
         on-image-load
@@ -77,8 +75,12 @@
         (fn []
           (when (and (some? @node-ref) (not @disable-ref?))
             (let [node @node-ref
+
                   frame-html (dom/node->xml node)
                   {:keys [x y width height]} @shape-ref
+
+                  style-str (or (-> node dom/get-parent (dom/query "style") dom/node->xml) "")
+
                   svg-node
                   (-> (dom/make-node "http://www.w3.org/2000/svg" "svg")
                       (dom/set-property! "version" "1.1")
@@ -86,7 +88,7 @@
                       (dom/set-property! "width" width)
                       (dom/set-property! "height" height)
                       (dom/set-property! "fill" "none")
-                      (obj/set! "innerHTML" frame-html))
+                      (obj/set! "innerHTML" (dm/str style-str frame-html)))
                   img-src  (-> svg-node dom/node->xml dom/svg->data-uri)]
               (reset! image-url img-src))))
 
@@ -94,7 +96,9 @@
         (mf/use-callback
          (fn [node]
            (when (and (some? node) (nil? @observer-ref))
-             (rx/push! updates-str :update)
+             (when-not (some? @thumbnail-data-ref)
+               (rx/push! updates-str :update))
+
              (let [observer (js/MutationObserver. (partial rx/push! updates-str))]
                (.observe observer node #js {:childList true :attributes true :characterData true :subtree true})
                (reset! observer-ref observer)))))]
@@ -102,7 +106,7 @@
     (mf/use-effect
      (fn []
        (let [subid (->> updates-str
-                        (rx/debounce 200)
+                        (rx/debounce 400)
                         (rx/subs on-update-frame))]
          #(rx/dispose! subid))))
 
@@ -111,11 +115,6 @@
      (fn []
        (reset! disable-ref? disable?)))
 
-    (mf/use-effect
-     (mf/deps thumbnail?)
-     (fn []
-       (reset! thumbnail-ref? thumbnail?)))
-
     (mf/use-effect
      (fn []
        #(when (and (some? @node-ref) @rendered?)

frontend/src/app/util/dom.cljs

@@ -335,8 +335,9 @@
 
 (defn node->xml
   [node]
-  (->  (js/XMLSerializer.)
-       (.serializeToString node)))
+  (when (some? node)
+    (->  (js/XMLSerializer.)
+         (.serializeToString node))))
 
 (defn svg->data-uri
   [svg]