✨ Improve thumbnail generation

frontend/src/app/main/data/workspace/thumbnails.cljs

@@ -64,28 +64,30 @@
      (watch [_ state _]
        (let [object-id   (dm/str page-id frame-id)
              file-id     (or file-id (:current-file-id state))
-             blob-result (thumbnail-stream object-id)]
+             blob-result (thumbnail-stream object-id)
+             params {:file-id file-id :object-id object-id :data nil}]
 
-         (->> blob-result
-              (rx/merge-map
-               (fn [blob]
-                 (if (some? blob)
-                   (wapi/read-file-as-data-url blob)
-                   (rx/of nil))))
+         (rx/concat
+          ;; Delete the thumbnail first so if we interrupt we can regenerate after
+          (rp/cmd! :upsert-file-object-thumbnail params)
+          (->> blob-result
+               (rx/merge-map
+                (fn [blob]
+                  (if (some? blob)
+                    (wapi/read-file-as-data-url blob)
+                    (rx/of nil))))
 
-              (rx/merge-map
-               (fn [data]
-                 (if (some? file-id)
-                   (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
-                      (if (some? data)
-                        (rx/of #(update % :workspace-thumbnails assoc object-id data))
-                        (rx/empty))
-                      (->> (rp/cmd! :upsert-file-object-thumbnail params)
-                           (rx/ignore))))
+               (rx/merge-map
+                (fn [data]
+                  (if (some? file-id)
+                    (let [params (assoc params :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))
+                       (->> (rp/cmd! :upsert-file-object-thumbnail params)
+                            (rx/ignore))))
 
-                   (rx/empty))))))))))
+                    (rx/empty)))))))))))
 
 (defn- extract-frame-changes
   "Process a changes set in a commit to extract the frames that are changing"

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

@@ -232,7 +232,7 @@
            (dom/remove-attribute! (dom/get-parent shape-node) "display")))
 
        (doseq [{:keys [frame shape]} add-children]
-         (let [frame-node (get-shape-node node frame)
+         (let [frame-node (get-shape-node frame)
                shape-node (get-shape-node shape)
 
                use-node

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

@@ -149,6 +149,7 @@
         (mf/use-callback
          (fn []
            (when (not @disable-ref?)
+             (reset! render-frame? true)
              (reset! regenerate-thumbnail true))))
 
         on-load-frame-dom
@@ -168,12 +169,6 @@
        (when (and (some? prev-thumbnail-data) (nil? thumbnail-data))
          (rx/push! updates-str :update))))
 
-    (mf/use-effect
-     (mf/deps @render-frame? thumbnail-data)
-     (fn []
-       (when (and (some? thumbnail-data) @render-frame?)
-         (reset! render-frame? false))))
-
     (mf/use-effect
      (mf/deps force-render)
      (fn []

frontend/src/app/main/ui/workspace/viewport/hooks.cljs

@@ -278,8 +278,9 @@
                 (> zoom 1.3)
 
                 ;; Zoom >= 25% will show frames hovering
+                ;; Also, if we're moving a shape over the frame we need to remove the thumbnail
                 (and
-                 (>= zoom 0.25)
+                 (or (= :move transform) (>= zoom 0.25))
                  (or (contains? hover-ids? id) (contains? @last-hover-ids id)))
 
                 ;; Otherwise, if it's a selected frame