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

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

@@ -25,18 +25,23 @@
 
 (defn- draw-thumbnail-canvas!
   [canvas-node img-node]
-  (try
+  (ts/raf
-    (when (and (some? canvas-node) (some? img-node))
+   (fn []
-      (let [canvas-context (.getContext canvas-node "2d")
+     (try
-            canvas-width   (.-width canvas-node)
+       (when (and (some? canvas-node) (some? img-node))
-            canvas-height  (.-height canvas-node)]
+         (let [canvas-context (.getContext canvas-node "2d")
-        (.clearRect canvas-context 0 0 canvas-width canvas-height)
+               canvas-width   (.-width canvas-node)
-        (.drawImage canvas-context img-node 0 0 canvas-width canvas-height)
+               canvas-height  (.-height canvas-node)]
-        (dom/set-property! canvas-node "data-ready" "true")
+           (.clearRect canvas-context 0 0 canvas-width canvas-height)
-        true))
+           (.drawImage canvas-context img-node 0 0 canvas-width canvas-height)
-    (catch :default err
+
-      (.error js/console err)
+           ;; Set a true on the next animation frame, we make sure the drawImage is completed
-      false)))
+           (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)
-            #(let [canvas-node (mf/ref-val frame-canvas-ref)
+                 img-node    (mf/ref-val frame-image-ref)]
-                   img-node    (mf/ref-val frame-image-ref)]
+             (when (draw-thumbnail-canvas! canvas-node img-node)
-               (when (draw-thumbnail-canvas! canvas-node img-node)
+               (reset! image-url nil)
-                 (reset! image-url nil)
+               (when @show-frame-thumbnail
-                 (when @show-frame-thumbnail
+                 (reset! show-frame-thumbnail false))
-                   (reset! show-frame-thumbnail false))
+               ;; If we don't have the thumbnail data saved (normally the first load) we update the data
-                 ;; If we don't have the thumbnail data saved (normally the first load) we update the data
+               ;; when available
-                 ;; when available
+               (when (not @thumbnail-data-ref)
-                 (when (not @thumbnail-data-ref)
+                 (st/emit! (dwt/update-thumbnail page-id id) ))
-                   (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)