From 6630899d6e186817c7e8a47e979c92ca532cff93 Mon Sep 17 00:00:00 2001 From: "alonso.torres" Date: Mon, 7 Mar 2022 12:36:21 +0100 Subject: [PATCH] :bug: Fix problems with viewer performance --- .../styles/main/partials/viewer-thumbnails.scss | 5 ----- frontend/src/app/main/render.cljs | 10 ++++++++-- frontend/src/app/main/ui/viewer/handoff/render.cljs | 5 +++-- frontend/src/app/main/ui/viewer/thumbnails.cljs | 11 ++++++----- 4 files changed, 17 insertions(+), 14 deletions(-) diff --git a/frontend/resources/styles/main/partials/viewer-thumbnails.scss b/frontend/resources/styles/main/partials/viewer-thumbnails.scss index 8ccc4fcf1..22477cb82 100644 --- a/frontend/resources/styles/main/partials/viewer-thumbnails.scss +++ b/frontend/resources/styles/main/partials/viewer-thumbnails.scss @@ -185,8 +185,3 @@ grid-column: 1 / span 1; z-index: 11; } - -.thumbnail-close.invisible { - visibility: hidden; - pointer-events: none; -} diff --git a/frontend/src/app/main/render.cljs b/frontend/src/app/main/render.cljs index fa0864282..cd0b45f33 100644 --- a/frontend/src/app/main/render.cljs +++ b/frontend/src/app/main/render.cljs @@ -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)]} diff --git a/frontend/src/app/main/ui/viewer/handoff/render.cljs b/frontend/src/app/main/ui/viewer/handoff/render.cljs index 7aa9c7568..5fb32104b 100644 --- a/frontend/src/app/main/ui/viewer/handoff/render.cljs +++ b/frontend/src/app/main/ui/viewer/handoff/render.cljs @@ -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)) diff --git a/frontend/src/app/main/ui/viewer/thumbnails.cljs b/frontend/src/app/main/ui/viewer/thumbnails.cljs index a38e8b16c..6473c5ac3 100644 --- a/frontend/src/app/main/ui/viewer/thumbnails.cljs +++ b/frontend/src/app/main/ui/viewer/thumbnails.cljs @@ -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)