diff --git a/frontend/resources/styles/main/partials/sidebar-element-options.scss b/frontend/resources/styles/main/partials/sidebar-element-options.scss index e251a36f3..cf88ddefd 100644 --- a/frontend/resources/styles/main/partials/sidebar-element-options.scss +++ b/frontend/resources/styles/main/partials/sidebar-element-options.scss @@ -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; diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs index c7cbce2c7..f7710e491 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs @@ -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)}]))) diff --git a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs index 9b23f760d..cb02f3d0c 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/assets/components.cljs @@ -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}]) diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs index f213c10ea..d556be1eb 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/component.cljs @@ -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)]])