From 5a07599fc781cb080944bdf51798f64452e3585c Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Tue, 17 May 2022 12:26:47 +0200 Subject: [PATCH] :bug: Fix problem with thumbnail re-rendering --- .../app/main/ui/workspace/shapes/frame.cljs | 15 +++++++++---- .../shapes/frame/thumbnail_render.cljs | 21 +++++++++---------- frontend/src/app/util/dom.cljs | 5 +++-- 3 files changed, 24 insertions(+), 17 deletions(-) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index a2b71dee7..782600633 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs index 2aaceb8c8..002926e8d 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/thumbnail_render.cljs +++ b/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?) diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index e6fe6cbec..dc25d62b3 100644 --- a/frontend/src/app/util/dom.cljs +++ b/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]