mirror of
https://github.com/penpot/penpot.git
synced 2025-03-11 23:31:21 -05:00
✨ Use thumbnails instead of svgs for the list of components on swap
This commit is contained in:
Pablo Alba
Andrés Moya
parent
fac72a5874
commit
b4d78d2fd7
4 changed files with 40 additions and 34 deletions
|
|
@ -2669,7 +2669,7 @@
|
|||
align-items: center;
|
||||
margin-bottom: 0.5rem;
|
||||
cursor: pointer;
|
||||
svg {
|
||||
svg, img {
|
||||
background-color: $color-canvas;
|
||||
border-radius: $br4;
|
||||
border: 2px solid transparent;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,10 @@
|
|||
[app.common.spec :as us]
|
||||
[app.main.data.modal :as modal]
|
||||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.thumbnails :as dwt]
|
||||
[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.ui.components.context-menu :refer [context-menu]]
|
||||
[app.main.ui.components.context-menu-a11y :refer [context-menu-a11y]]
|
||||
|
|
@ -257,3 +260,32 @@
|
|||
(rename
|
||||
(:id 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)}])))
|
||||
|
|
|
|||
|
|
@ -17,10 +17,8 @@
|
|||
[app.main.data.workspace :as dw]
|
||||
[app.main.data.workspace.libraries :as dwl]
|
||||
[app.main.data.workspace.media :as dwm]
|
||||
[app.main.data.workspace.thumbnails :as dwt]
|
||||
[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.ui.components.editable-label :refer [editable-label]]
|
||||
[app.main.ui.components.file-uploader :refer [file-uploader]]
|
||||
|
|
@ -54,23 +52,6 @@
|
|||
component)]
|
||||
[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
|
||||
;; until we can queue and handle thumbnail batching properly.
|
||||
|
|
@ -79,16 +60,6 @@
|
|||
(tm/schedule-on-idle
|
||||
#(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/wrap-props false}
|
||||
|
|
@ -183,7 +154,7 @@
|
|||
(when (and (some? root-shape)
|
||||
(some? container))
|
||||
[:*
|
||||
[:& component-item-thumbnail {:file-id file-id
|
||||
[:& cmm/component-item-thumbnail {:file-id file-id
|
||||
:root-shape root-shape
|
||||
:component component
|
||||
:container container}]
|
||||
|
|
@ -225,7 +196,7 @@
|
|||
(some? container))
|
||||
[:*
|
||||
(when visible?
|
||||
[:& component-item-thumbnail {:file-id file-id
|
||||
[:& cmm/component-item-thumbnail {:file-id file-id
|
||||
:root-shape root-shape
|
||||
:component component
|
||||
:container container}])
|
||||
|
|
|
|||
|
|
@ -24,6 +24,7 @@
|
|||
[app.main.ui.components.title-bar :refer [title-bar]]
|
||||
[app.main.ui.context :as ctx]
|
||||
[app.main.ui.icons :as i]
|
||||
[app.main.ui.workspace.sidebar.assets.common :as cmm]
|
||||
[app.util.dom :as dom]
|
||||
[app.util.i18n :as i18n :refer [tr]]
|
||||
[app.util.keyboard :as kbd]
|
||||
|
|
@ -280,8 +281,10 @@
|
|||
:on-click #(when-not loop?
|
||||
(st/emit!
|
||||
(dwl/component-swap shape (:file-id filters) (:id item))))}
|
||||
[:& component-svg {:root-shape root-shape
|
||||
:objects (:objects container)}]
|
||||
[:& cmm/component-item-thumbnail {:file-id (:file-id item)
|
||||
:root-shape root-shape
|
||||
:component item
|
||||
:container container}]
|
||||
[:span.component-name
|
||||
{:class (stl/css-case :selected (= (:id item) (:component-id shape)))}
|
||||
(:name item)]])
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue