Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-03 21:09:00 -05:00
Code Issues Activity

🐛 Improved thumbnails rendering

Browse source
This commit is contained in:
alonso.torres 2022-06-10 09:49:40 +02:00
parent b4e218c13a
commit a37233be1e
4 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/app/main/data/workspace/thumbnails.cljs
View file

@ -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]

4
frontend/src/app/main/ui/workspace/shapes/frame.cljs
View file

@ -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]]]))))

2
frontend/src/app/main/ui/workspace/shapes/frame/node_store.cljs
View file

@ -43,4 +43,4 @@
(.appendChild @parent-ref @node-ref)
(reset! in-memory? false))))
on-frame-load))
[on-frame-load @in-memory?]))

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

@ -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