🐛 Fix problem with thumbnail refresh

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

@@ -117,6 +117,7 @@
          thumb-renderer
 
          [:g.frame-thumbnail
-          [:> frame/frame-thumbnail {:shape (cond-> shape
+          [:> frame/frame-thumbnail {:key (dm/str (:id shape))
+                                     :shape (cond-> shape
                                               (some? thumbnail-data)
                                               (assoc :thumbnail thumbnail-data))}]]]))))

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

@@ -38,15 +38,18 @@
     (mf/use-layout-effect
      (mf/deps transforms)
      (fn []
-       (when (and (empty? @prev-modifiers) (d/not-empty? modifiers))
+       (let [is-prev-val? (d/not-empty? @prev-modifiers)
+             is-cur-val? (d/not-empty? modifiers)]
+
+         (when (and (not is-prev-val?) is-cur-val?)
            (utils/start-transform! node shapes))
 
-       (when (d/not-empty? modifiers)
+         (when is-cur-val?
            (utils/update-transform! node shapes transforms modifiers))
 
-       (when (and (d/not-empty? @prev-modifiers) (empty? modifiers))
+         (when (and is-prev-val? (not is-cur-val?))
            (utils/remove-transform! node @prev-shapes))
 
          (reset! prev-modifiers modifiers)
          (reset! prev-transforms transforms)
-       (reset! prev-shapes shapes)))))
+         (reset! prev-shapes shapes))))))

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

@@ -48,11 +48,10 @@
         (mf/use-callback
          (fn []
            (let [canvas-node (mf/ref-val frame-canvas-ref)
-                 img-node    (mf/ref-val frame-image-ref)]
-             (ts/raf
-              #(let [thumb-data  (draw-thumbnail-canvas canvas-node img-node)]
+                 img-node    (mf/ref-val frame-image-ref)
+                 thumb-data  (draw-thumbnail-canvas canvas-node img-node)]
              (st/emit! (dw/update-thumbnail id thumb-data))
-                 (reset! image-url nil))))))
+             (reset! image-url nil))))
 
         on-change
         (mf/use-callback
@@ -70,7 +69,6 @@
                            (dom/set-property! "height" height)
                            (dom/set-property! "fill" "none")
                            (obj/set! "innerHTML" frame-html))
-
                        img-src  (-> svg-node dom/node->xml dom/svg->data-uri)]
                    (reset! image-url img-src)))))))
 

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

@@ -91,7 +91,7 @@
     (cond
       frame?
       [thumb-node
-       (dom/query shape-node ".frame-background")
+       (dom/get-parent (dom/query shape-node ".frame-background"))
        (dom/query shape-node ".frame-clip")]
 
       ;; For groups we don't want to transform the whole group but only