Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-02-09 08:38:15 -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] (fn [subs]
;; We look in the DOM a canvas that 1) matches the id and 2) that it's not empty ;; 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 ;; 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) (if (some? node)
(-> node (-> node
(.toBlob (fn [blob] (.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] [on-load-frame-dom render-frame? thumbnail-renderer]
(ftr/use-render-thumbnail page-id shape node-ref rendered? disable-thumbnail? @force-render) (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?)] (fns/use-node-store thumbnail? node-ref rendered? render-frame?)]
(fdm/use-dynamic-modifiers objects @node-ref modifiers) (fdm/use-dynamic-modifiers objects @node-ref modifiers)
@ -130,5 +130,5 @@
[:g.frame-thumbnail-wrapper [:g.frame-thumbnail-wrapper
{:id (dm/str "thumbnail-container-" (:id shape)) {:id (dm/str "thumbnail-container-" (:id shape))
;; Hide the thumbnail when not displaying ;; 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]]])))) 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) (.appendChild @parent-ref @node-ref)
(reset! in-memory? false)))) (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) (.clearRect canvas-context 0 0 canvas-width canvas-height)
(.drawImage canvas-context img-node 0 0 canvas-width canvas-height) (.drawImage canvas-context img-node 0 0 canvas-width canvas-height)
(.removeAttribute canvas-node "data-empty")
true)) true))
(catch :default err (catch :default err
(.error js/console err) (.error js/console err)
@ -87,8 +86,12 @@
prev-thumbnail-data (hooks/use-previous thumbnail-data) 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)) 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 on-image-load
(mf/use-callback (mf/use-callback
(fn [] (fn []
@ -98,6 +101,8 @@
(when (draw-thumbnail-canvas! canvas-node img-node) (when (draw-thumbnail-canvas! canvas-node img-node)
(reset! image-url nil) (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 ;; If we don't have the thumbnail data saved (normaly the first load) we update the data
;; when available ;; when available
(when (not @thumbnail-data-ref) (when (not @thumbnail-data-ref)
@ -210,18 +215,19 @@
@render-frame? @render-frame?
(mf/html (mf/html
[:* [:*
[:> frame/frame-thumbnail {:key (dm/str (:id shape)) (when @show-frame-thumbnail
:bounds shape-bb [:> frame/frame-thumbnail {:key (dm/str (:id shape))
:shape (cond-> shape :bounds shape-bb
(some? thumbnail-data) :shape (cond-> shape
(assoc :thumbnail thumbnail-data))}] (some? thumbnail-data)
(assoc :thumbnail thumbnail-data))}])
[:foreignObject {:x x :y y :width width :height height} [:foreignObject {:x x :y y :width width :height height}
[:canvas.thumbnail-canvas [:canvas.thumbnail-canvas
{:key (dm/str "thumbnail-canvas-" (:id shape)) {:key (dm/str "thumbnail-canvas-" (:id shape))
:ref frame-canvas-ref :ref frame-canvas-ref
:data-object-id (dm/str page-id (:id shape)) :data-object-id (dm/str page-id (:id shape))
:data-empty true :data-empty @show-frame-thumbnail
:width fixed-width :width fixed-width
:height fixed-height :height fixed-height
;; DEBUG ;; DEBUG