diff --git a/frontend/src/app/main/data/workspace/thumbnails.cljs b/frontend/src/app/main/data/workspace/thumbnails.cljs index ee67b4bf49..78740ac677 100644 --- a/frontend/src/app/main/data/workspace/thumbnails.cljs +++ b/frontend/src/app/main/data/workspace/thumbnails.cljs @@ -15,6 +15,7 @@ [app.main.repo :as rp] [app.main.store :as st] [app.util.dom :as dom] + [app.util.timers :as ts] [app.util.webapi :as wapi] [beicon.core :as rx] [potok.core :as ptk])) @@ -31,7 +32,6 @@ (defn thumbnail-canvas-blob-stream [object-id] ;; Look for the thumbnail canvas to send the data to the backend - (let [node (dom/query (dm/fmt "canvas.thumbnail-canvas[data-object-id='%'][data-ready='true']" object-id)) stopper (->> st/stream (rx/filter (ptk/type? :app.main.data.workspace/finalize-page)) @@ -40,10 +40,11 @@ ;; Success: we generate the blob (async call) (rx/create (fn [subs] - (.toBlob node (fn [blob] - (rx/push! subs blob) - (rx/end! subs)) - "image/png"))) + (ts/raf + #(.toBlob node (fn [blob] + (rx/push! subs blob) + (rx/end! subs)) + "image/png")))) ;; Not found, we retry after delay (->> (rx/timer 250) 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 8b96a5607e..4bb5c98649 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 @@ -25,18 +25,23 @@ (defn- draw-thumbnail-canvas! [canvas-node img-node] - (try - (when (and (some? canvas-node) (some? img-node)) - (let [canvas-context (.getContext canvas-node "2d") - canvas-width (.-width canvas-node) - canvas-height (.-height canvas-node)] - (.clearRect canvas-context 0 0 canvas-width canvas-height) - (.drawImage canvas-context img-node 0 0 canvas-width canvas-height) - (dom/set-property! canvas-node "data-ready" "true") - true)) - (catch :default err - (.error js/console err) - false))) + (ts/raf + (fn [] + (try + (when (and (some? canvas-node) (some? img-node)) + (let [canvas-context (.getContext canvas-node "2d") + canvas-width (.-width canvas-node) + canvas-height (.-height canvas-node)] + (.clearRect canvas-context 0 0 canvas-width canvas-height) + (.drawImage canvas-context img-node 0 0 canvas-width canvas-height) + + ;; Set a true on the next animation frame, we make sure the drawImage is completed + (ts/raf + #(dom/set-data! canvas-node "ready" "true")) + true)) + (catch :default err + (.error js/console err) + false))))) (defn- remove-image-loading "Remove the changes related to change a url for its embed value. This is necessary @@ -98,19 +103,18 @@ (mf/use-callback (mf/deps @show-frame-thumbnail) (fn [] - (ts/raf - #(let [canvas-node (mf/ref-val frame-canvas-ref) - img-node (mf/ref-val frame-image-ref)] - (when (draw-thumbnail-canvas! canvas-node img-node) - (reset! image-url nil) - (when @show-frame-thumbnail - (reset! show-frame-thumbnail false)) - ;; If we don't have the thumbnail data saved (normally the first load) we update the data - ;; when available - (when (not @thumbnail-data-ref) - (st/emit! (dwt/update-thumbnail page-id id) )) + (let [canvas-node (mf/ref-val frame-canvas-ref) + img-node (mf/ref-val frame-image-ref)] + (when (draw-thumbnail-canvas! canvas-node img-node) + (reset! image-url nil) + (when @show-frame-thumbnail + (reset! show-frame-thumbnail false)) + ;; If we don't have the thumbnail data saved (normally the first load) we update the data + ;; when available + (when (not @thumbnail-data-ref) + (st/emit! (dwt/update-thumbnail page-id id) )) - (reset! render-frame? false)))))) + (reset! render-frame? false))))) generate-thumbnail (mf/use-callback @@ -118,8 +122,6 @@ (try ;; When starting generating the canvas we mark it as not ready so its not send to back until ;; we have time to update it - (let [canvas-node (mf/ref-val frame-canvas-ref)] - (dom/set-property! canvas-node "data-ready" "false")) (let [node @node-ref] (if (dom/has-children? node) ;; The frame-content need to have children in order to generate the thumbnail @@ -161,6 +163,9 @@ on-update-frame (mf/use-callback (fn [] + (let [canvas-node (mf/ref-val frame-canvas-ref)] + (when (not= "false" (dom/get-data canvas-node "ready")) + (dom/set-data! canvas-node "ready" "false"))) (when (not @disable-ref?) (reset! render-frame? true) (reset! regenerate-thumbnail true)))) diff --git a/frontend/src/app/util/dom.cljs b/frontend/src/app/util/dom.cljs index b0a1488a35..0307321c58 100644 --- a/frontend/src/app/util/dom.cljs +++ b/frontend/src/app/util/dom.cljs @@ -478,7 +478,11 @@ (defn get-data [^js node ^string attr] (when (some? node) - (.getAttribute node (str "data-" attr)))) + (.getAttribute node (dm/str "data-" attr)))) + +(defn set-data! [^js node ^string attr value] + (when (some? node) + (.setAttribute node (dm/str "data-" attr) (dm/str value)))) (defn set-attribute! [^js node ^string attr value] (when (some? node)