0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-03-12 07:41:43 -05:00

Use thumbnails instead of svgs for the list of components on swap

This commit is contained in:
Pablo Alba 2023-10-09 16:29:53 +02:00 committed by Andrés Moya
parent fac72a5874
commit b4d78d2fd7
4 changed files with 40 additions and 34 deletions

View file

@ -2669,7 +2669,7 @@
align-items: center; align-items: center;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
cursor: pointer; cursor: pointer;
svg { svg, img {
background-color: $color-canvas; background-color: $color-canvas;
border-radius: $br4; border-radius: $br4;
border: 2px solid transparent; border: 2px solid transparent;

View file

@ -13,7 +13,10 @@
[app.common.spec :as us] [app.common.spec :as us]
[app.main.data.modal :as modal] [app.main.data.modal :as modal]
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.data.workspace.thumbnails :as dwt]
[app.main.data.workspace.undo :as dwu] [app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs]
[app.main.render :refer [component-svg]]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.context-menu :refer [context-menu]] [app.main.ui.components.context-menu :refer [context-menu]]
[app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]] [app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]]
@ -257,3 +260,32 @@
(rename (rename
(:id target-asset) (:id target-asset)
(cph/merge-path-item prefix (:name target-asset)))))))) (cph/merge-path-item prefix (:name target-asset))))))))
(defn- get-component-thumbnail-uri
"Returns the component thumbnail uri"
[file-id component]
(let [page-id (:main-instance-page component)
root-id (:main-instance-id component)
object-id (dwt/fmt-object-id file-id page-id root-id)]
(if (= file-id (:id @refs/workspace-file))
(mf/deref (refs/workspace-thumbnail-by-id object-id))
(let [thumbnails (dm/get-in @refs/workspace-libraries [file-id :thumbnails (dm/str object-id)])]
thumbnails))))
(mf/defc component-item-thumbnail
"Component that renders the thumbnail image or the original SVG."
{::mf/wrap-props false}
[{:keys [file-id root-shape component container]}]
(let [retry (mf/use-state 0)
thumbnail-uri (get-component-thumbnail-uri file-id component)]
(if (some? thumbnail-uri)
[:img {:src thumbnail-uri
:on-error (fn []
(when (@retry < 3)
(inc retry)))
:loading "lazy"
:decoding "async"
:class (dom/classnames (css :thumbnail) true)}]
[:& component-svg {:root-shape root-shape
:objects (:objects container)}])))

View file

@ -17,10 +17,8 @@
[app.main.data.workspace :as dw] [app.main.data.workspace :as dw]
[app.main.data.workspace.libraries :as dwl] [app.main.data.workspace.libraries :as dwl]
[app.main.data.workspace.media :as dwm] [app.main.data.workspace.media :as dwm]
[app.main.data.workspace.thumbnails :as dwt]
[app.main.data.workspace.undo :as dwu] [app.main.data.workspace.undo :as dwu]
[app.main.refs :as refs] [app.main.refs :as refs]
[app.main.render :refer [component-svg]]
[app.main.store :as st] [app.main.store :as st]
[app.main.ui.components.editable-label :refer [editable-label]] [app.main.ui.components.editable-label :refer [editable-label]]
[app.main.ui.components.file-uploader :refer [file-uploader]] [app.main.ui.components.file-uploader :refer [file-uploader]]
@ -54,23 +52,6 @@
component)] component)]
[root-shape container]))) [root-shape container])))
(defn- get-component-thumbnail-uri
"Returns the component thumbnail uri"
[file-id component]
(let [page-id (:main-instance-page component)
root-id (:main-instance-id component)
object-id (dwt/fmt-object-id file-id page-id root-id)]
(if (= file-id (:id @refs/workspace-file))
(mf/deref (refs/workspace-thumbnail-by-id object-id))
(let [thumbnails (dm/get-in @refs/workspace-libraries [file-id :thumbnails (dm/str object-id)])]
thumbnails))))
(mf/defc component-item-thumbnail
"Component that renders the thumbnail image or the original SVG."
{::mf/wrap-props false}
[{:keys [file-id root-shape component container]}]
(let [retry (mf/use-state 0)
thumbnail-uri (get-component-thumbnail-uri file-id component)]
;; NOTE: We don't schedule the thumbnail generation on idle right now ;; NOTE: We don't schedule the thumbnail generation on idle right now
;; until we can queue and handle thumbnail batching properly. ;; until we can queue and handle thumbnail batching properly.
@ -79,16 +60,6 @@
(tm/schedule-on-idle (tm/schedule-on-idle
#(st/emit! (dwl/update-component-thumbnail (:id component) file-id))))) #(st/emit! (dwl/update-component-thumbnail (:id component) file-id)))))
(if (some? thumbnail-uri)
[:img {:src thumbnail-uri
:on-error (fn []
(when (@retry < 3)
(inc retry)))
:loading "lazy"
:decoding "async"
:class (dom/classnames (css :thumbnail) true)}]
[:& component-svg {:root-shape root-shape
:objects (:objects container)}])))
(mf/defc components-item (mf/defc components-item
{::mf/wrap-props false} {::mf/wrap-props false}
@ -183,7 +154,7 @@
(when (and (some? root-shape) (when (and (some? root-shape)
(some? container)) (some? container))
[:* [:*
[:& component-item-thumbnail {:file-id file-id [:& cmm/component-item-thumbnail {:file-id file-id
:root-shape root-shape :root-shape root-shape
:component component :component component
:container container}] :container container}]
@ -225,7 +196,7 @@
(some? container)) (some? container))
[:* [:*
(when visible? (when visible?
[:& component-item-thumbnail {:file-id file-id [:& cmm/component-item-thumbnail {:file-id file-id
:root-shape root-shape :root-shape root-shape
:component component :component component
:container container}]) :container container}])

View file

@ -24,6 +24,7 @@
[app.main.ui.components.title-bar :refer [title-bar]] [app.main.ui.components.title-bar :refer [title-bar]]
[app.main.ui.context :as ctx] [app.main.ui.context :as ctx]
[app.main.ui.icons :as i] [app.main.ui.icons :as i]
[app.main.ui.workspace.sidebar.assets.common :as cmm]
[app.util.dom :as dom] [app.util.dom :as dom]
[app.util.i18n :as i18n :refer [tr]] [app.util.i18n :as i18n :refer [tr]]
[app.util.keyboard :as kbd] [app.util.keyboard :as kbd]
@ -280,8 +281,10 @@
:on-click #(when-not loop? :on-click #(when-not loop?
(st/emit! (st/emit!
(dwl/component-swap shape (:file-id filters) (:id item))))} (dwl/component-swap shape (:file-id filters) (:id item))))}
[:& component-svg {:root-shape root-shape [:& cmm/component-item-thumbnail {:file-id (:file-id item)
:objects (:objects container)}] :root-shape root-shape
:component item
:container container}]
[:span.component-name [:span.component-name
{:class (stl/css-case :selected (= (:id item) (:component-id shape)))} {:class (stl/css-case :selected (= (:id item) (:component-id shape)))}
(:name item)]]) (:name item)]])