Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-25 07:58:49 -05:00
Code Issues Activity

🐛 Fix problems with viewer performance

Browse source
This commit is contained in:
alonso.torres 2022-03-07 12:36:21 +01:00
parent 0cfd5095a7
commit 6630899d6e
4 changed files with 17 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/resources/styles/main/partials/viewer-thumbnails.scss
View file

@ -185,8 +185,3 @@
grid-column: 1 / span 1;
z-index: 11;
}
.thumbnail-close.invisible {
visibility: hidden;
pointer-events: none;
}

10
frontend/src/app/main/render.cljs
View file

@ -217,7 +217,7 @@
(mf/defc frame-svg
{::mf/wrap [mf/memo]}
[{:keys [objects frame zoom] :or {zoom 1} :as props}]
[{:keys [objects frame zoom show-thumbnails?] :or {zoom 1} :as props}]
(let [frame-id (:id frame)
include-metadata? (mf/use-ctx export/include-metadata-ctx)
@ -253,7 +253,13 @@
:xmlns "http://www.w3.org/2000/svg"
:xmlnsXlink "http://www.w3.org/1999/xlink"
:xmlns:penpot (when include-metadata? "https://penpot.app/xmlns")}
[:& wrapper {:shape frame :view-box vbox}]]))
(if (or (not show-thumbnails?) (nil? (:thumbnail frame)))
[:& wrapper {:shape frame :view-box vbox}]
;; Render the frame thumbnail
(let [frame (gsh/transform-shape frame)]
[:> shape-container {:shape frame}
[:& frame/frame-thumbnail {:shape frame}]]))]))
(mf/defc component-svg
{::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]}

5
frontend/src/app/main/ui/viewer/handoff/render.cljs
View file

@ -80,8 +80,9 @@
(let [shape-container (shape-container-factory objects)
frame-shape (frame/frame-shape shape-container)
frame-wrapper (shape-wrapper-factory frame-shape)]
(mf/fnc frame-container
{::mf/wrap-props false}
(mf/fnc frame-container
{::mf/wrap-props false
::mf/wrap [mf/memo]}
[props]
(let [shape (unchecked-get props "shape")
childs (mapv #(get objects %) (:shapes shape))

11
frontend/src/app/main/ui/viewer/thumbnails.cljs
View file

@ -72,12 +72,13 @@
[:span.btn-close {:on-click on-close} i/close]]])
(mf/defc thumbnail-item
{::mf/wrap [mf/memo #(mf/deferred % ts/idle-then-raf)]}
{::mf/wrap [mf/memo
#(mf/deferred % ts/idle-then-raf)]}
[{:keys [selected? frame on-click index objects]}]
[:div.thumbnail-item {:on-click #(on-click % index)}
[:div.thumbnail-preview
{:class (dom/classnames :selected selected?)}
[:& render/frame-svg {:frame frame :objects objects}]]
[:& render/frame-svg {:frame frame :objects objects :show-thumbnails? true}]]
[:div.thumbnail-info
[:span.name {:title (:name frame)} (:name frame)]]])
@ -101,9 +102,9 @@
(on-close))))]
[:section.viewer-thumbnails
{:class (dom/classnames :expanded @expanded?
:invisible (not show?))
{;; This is better as an inline-style so it won't make a reflow of every frame inside
:style {:display (when (not show?) "none")}
:class (dom/classnames :expanded @expanded?)
:ref container}
[:& thumbnails-summary {:on-toggle-expand #(swap! expanded? not)