Merge pull request #2844 from penpot/alotor-fix-transparent-thumbnails

🐛 Fix problem with transparent frame thumbnails

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]
+         (ts/raf
+          #(.toBlob node (fn [blob]
                            (rx/push! subs blob)
                            (rx/end! subs))
-                  "image/png")))
+                    "image/png"))))
 
       ;; Not found, we retry after delay
       (->> (rx/timer 250)

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

@@ -25,6 +25,8 @@
 
 (defn- draw-thumbnail-canvas!
   [canvas-node img-node]
+  (ts/raf
+   (fn []
      (try
        (when (and (some? canvas-node) (some? img-node))
          (let [canvas-context (.getContext canvas-node "2d")
@@ -32,11 +34,14 @@
                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")
+
+           ;; 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)))
+         false)))))
 
 (defn- remove-image-loading
   "Remove the changes related to change a url for its embed value. This is necessary
@@ -98,8 +103,7 @@
         (mf/use-callback
          (mf/deps @show-frame-thumbnail)
          (fn []
-           (ts/raf
-            #(let [canvas-node (mf/ref-val frame-canvas-ref)
+           (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)
@@ -110,7 +114,7 @@
                (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))))

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)