diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index b2b9a8c97..22991ac90 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/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))}]]])))) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs index 531113297..3624c041e 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs +++ b/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)) - (utils/start-transform! node shapes)) + (let [is-prev-val? (d/not-empty? @prev-modifiers) + is-cur-val? (d/not-empty? modifiers)] - (when (d/not-empty? modifiers) - (utils/update-transform! node shapes transforms modifiers)) + (when (and (not is-prev-val?) is-cur-val?) + (utils/start-transform! node shapes)) - (when (and (d/not-empty? @prev-modifiers) (empty? modifiers)) - (utils/remove-transform! node @prev-shapes)) + (when is-cur-val? + (utils/update-transform! node shapes transforms modifiers)) - (reset! prev-modifiers modifiers) - (reset! prev-transforms transforms) - (reset! prev-shapes shapes))))) + (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)))))) 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 aea3696a0..d0b987033 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 @@ -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)] - (st/emit! (dw/update-thumbnail id thumb-data)) - (reset! image-url nil)))))) + 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)))) 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))))))) diff --git a/frontend/src/app/main/ui/workspace/viewport/utils.cljs b/frontend/src/app/main/ui/workspace/viewport/utils.cljs index 2abbbb41d..69a53474f 100644 --- a/frontend/src/app/main/ui/workspace/viewport/utils.cljs +++ b/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