From 8609308cb4319685937a8a7eb8fe810b7ea21090 Mon Sep 17 00:00:00 2001
From: "alonso.torres" <alonso.torres@kaleidos.net>
Date: Sat, 10 Dec 2022 00:08:01 +0100
Subject: [PATCH] :bug: Fix problems with empty thumbnails

---
 frontend/src/app/main/data/workspace/thumbnails.cljs       | 6 ++++--
 frontend/src/app/main/ui/shapes/custom_stroke.cljs         | 2 +-
 .../main/ui/workspace/shapes/frame/thumbnail_render.cljs   | 7 +++++--
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/frontend/src/app/main/data/workspace/thumbnails.cljs b/frontend/src/app/main/data/workspace/thumbnails.cljs
index 27cc69fb7..63c290f77 100644
--- a/frontend/src/app/main/data/workspace/thumbnails.cljs
+++ b/frontend/src/app/main/data/workspace/thumbnails.cljs
@@ -34,7 +34,7 @@
    (fn [subs]
      ;; We look in the DOM a canvas that 1) matches the id and 2) that it's not empty
      ;; will be empty on first rendering before drawing the thumbnail and we don't want to store that
-     (let [node (dom/query (dm/fmt "canvas.thumbnail-canvas[data-object-id='%'][data-empty='false']" object-id))]
+     (let [node (dom/query (dm/fmt "canvas.thumbnail-canvas[data-object-id='%'][data-ready='true']" object-id))]
        (if (some? node)
          (.toBlob node (fn [blob]
                          (rx/push! subs blob)
@@ -79,7 +79,9 @@
                    (let [params {:file-id file-id :object-id object-id :data data}]
                      (rx/merge
                       ;; Update the local copy of the thumbnails so we don't need to request it again
-                      (rx/of #(update % :workspace-thumbnails assoc object-id data))
+                      (if (some? data)
+                        (rx/of #(update % :workspace-thumbnails assoc object-id data))
+                        (rx/empty))
                       (->> (rp/cmd! :upsert-file-object-thumbnail params)
                            (rx/ignore))))
 
diff --git a/frontend/src/app/main/ui/shapes/custom_stroke.cljs b/frontend/src/app/main/ui/shapes/custom_stroke.cljs
index 373be8100..2c0be8a8b 100644
--- a/frontend/src/app/main/ui/shapes/custom_stroke.cljs
+++ b/frontend/src/app/main/ui/shapes/custom_stroke.cljs
@@ -431,7 +431,7 @@
         stroke-id (dm/fmt "strokes-%" (:id shape))
         stroke-props (-> (obj/create)
                          (obj/set! "id" stroke-id)
-                         (obj/set! "class" "strokes")
+                         (obj/set! "className" "strokes")
                          (cond->
                           ;; There is a blur
                           (and (:blur shape) (not (cph/frame-shape? shape)) (-> shape :blur :hidden not))
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 5f13ae5fb..6e60fb6b6 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
@@ -32,6 +32,7 @@
             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)
@@ -95,11 +96,13 @@
 
         on-image-load
         (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
@@ -129,12 +132,13 @@
                      (dom/set-property! "fill" "none")
                      (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))))
 
         on-change-frame
         (mf/use-callback
          (fn []
-           (when (and (some? @node-ref) @regenerate-thumbnail)
+           (when (and (some? @node-ref) @rendered? @regenerate-thumbnail)
              (let [loading-images? (some? (dom/query @node-ref "[data-loading='true']"))
                    loading-fonts? (some? (dom/query (dm/str "#frame-container-" (:id shape) " > style[data-loading='true']")))]
                (when (and (not loading-images?) (not loading-fonts?))
@@ -237,7 +241,6 @@
          {:key (dm/str "thumbnail-canvas-" (:id shape))
           :ref frame-canvas-ref
           :data-object-id (dm/str page-id (:id shape))
-          :data-empty @show-frame-thumbnail
           :width fixed-width
           :height fixed-height
           ;; DEBUG