diff --git a/frontend/src/app/main/data/workspace/thumbnails.cljs b/frontend/src/app/main/data/workspace/thumbnails.cljs index 60e6a039c..25791cd72 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='%']:not([data-empty])" object-id))] + (let [node (dom/query (dm/fmt "canvas.thumbnail-canvas[data-object-id='%'][data-empty='false']" object-id))] (if (some? node) (-> node (.toBlob (fn [blob] diff --git a/frontend/src/app/main/ui/workspace/shapes/frame.cljs b/frontend/src/app/main/ui/workspace/shapes/frame.cljs index bef488434..ae2766646 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame.cljs @@ -87,7 +87,7 @@ [on-load-frame-dom render-frame? thumbnail-renderer] (ftr/use-render-thumbnail page-id shape node-ref rendered? disable-thumbnail? @force-render) - on-frame-load + [on-frame-load in-memory?] (fns/use-node-store thumbnail? node-ref rendered? render-frame?)] (fdm/use-dynamic-modifiers objects @node-ref modifiers) @@ -130,5 +130,5 @@ [:g.frame-thumbnail-wrapper {:id (dm/str "thumbnail-container-" (:id shape)) ;; Hide the thumbnail when not displaying - :opacity (when (and @rendered? (not thumbnail?) (not render-frame?)) 0)} + :opacity (when (and @rendered? (not thumbnail?) (not render-frame?) (not in-memory?)) 0)} thumbnail-renderer]]])))) diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/node_store.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/node_store.cljs index 6d9730530..832795711 100644 --- a/frontend/src/app/main/ui/workspace/shapes/frame/node_store.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/frame/node_store.cljs @@ -43,4 +43,4 @@ (.appendChild @parent-ref @node-ref) (reset! in-memory? false)))) - on-frame-load)) + [on-frame-load @in-memory?])) 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 f7df70e1b..44b5c2736 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 @@ -33,7 +33,6 @@ (.clearRect canvas-context 0 0 canvas-width canvas-height) (.drawImage canvas-context img-node 0 0 canvas-width canvas-height) - (.removeAttribute canvas-node "data-empty") true)) (catch :default err (.error js/console err) @@ -87,8 +86,12 @@ prev-thumbnail-data (hooks/use-previous thumbnail-data) + ;; State to indicate to the parent that should render the frame render-frame? (mf/use-state (not thumbnail-data)) + ;; State variable to select whether we show the image thumbnail or the canvas thumbnail + show-frame-thumbnail (mf/use-state (some? thumbnail-data)) + on-image-load (mf/use-callback (fn [] @@ -98,6 +101,8 @@ (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 (normaly the first load) we update the data ;; when available (when (not @thumbnail-data-ref) @@ -210,18 +215,19 @@ @render-frame? (mf/html [:* - [:> frame/frame-thumbnail {:key (dm/str (:id shape)) - :bounds shape-bb - :shape (cond-> shape - (some? thumbnail-data) - (assoc :thumbnail thumbnail-data))}] + (when @show-frame-thumbnail + [:> frame/frame-thumbnail {:key (dm/str (:id shape)) + :bounds shape-bb + :shape (cond-> shape + (some? thumbnail-data) + (assoc :thumbnail thumbnail-data))}]) [:foreignObject {:x x :y y :width width :height height} [:canvas.thumbnail-canvas {:key (dm/str "thumbnail-canvas-" (:id shape)) :ref frame-canvas-ref :data-object-id (dm/str page-id (:id shape)) - :data-empty true + :data-empty @show-frame-thumbnail :width fixed-width :height fixed-height ;; DEBUG