mirror of
https://github.com/penpot/penpot.git
synced 2025-03-10 14:51:37 -05:00
✨ Improve file thumbnails.
This commit is contained in:
parent
ab4171b8ec
commit
97d49e53b7
4 changed files with 38 additions and 37 deletions
|
@ -75,14 +75,14 @@
|
|||
and deleted_at is null;"]
|
||||
(db/query-one conn [sql id])))
|
||||
|
||||
;; (s/def ::retrieve-image
|
||||
;; (s/keys :req-un [::user ::us/id]))
|
||||
(s/def ::image-by-id
|
||||
(s/keys :req-un [::user ::us/id]))
|
||||
|
||||
;; (defmethod core/query :retrieve-image
|
||||
;; [params]
|
||||
;; (s/assert ::retrieve-image params)
|
||||
;; (with-open [conn (db/connection)]
|
||||
;; (retrieve-image conn params)))
|
||||
(sq/defquery ::image-by-id
|
||||
[params]
|
||||
(-> (retrieve-image db/pool (:id params))
|
||||
(p/then populate-thumbnail)
|
||||
(p/then populate-urls)))
|
||||
|
||||
;; --- Query Images by Collection (id)
|
||||
|
||||
|
|
|
@ -30,7 +30,7 @@
|
|||
:height "100%"
|
||||
:fill "#b1b2b5"}])
|
||||
|
||||
(defn- calculate-width
|
||||
(defn- calculate-dimensions
|
||||
[data]
|
||||
(let [shapes (vals (:shapes-by-id data))
|
||||
shape (geom/shapes->rect-shape shapes)]
|
||||
|
@ -51,14 +51,15 @@
|
|||
:circle [:& circle/circle-shape {:shape shape}])))
|
||||
|
||||
(mf/defc page-svg
|
||||
[{:keys [data] :as props}]
|
||||
[{:keys [data width height] :as props}]
|
||||
(let [shapes-by-id (:shapes-by-id data)
|
||||
shapes (map #(get shapes-by-id %) (:shapes data []))
|
||||
canvas (map #(get shapes-by-id %) (:canvas data []))
|
||||
{:keys [width height]} (calculate-width data)]
|
||||
[:svg {:width width
|
||||
:height height
|
||||
:view-box (str "0 0 " width " " height)
|
||||
dim (calculate-dimensions data)]
|
||||
[:svg {
|
||||
;; :width width
|
||||
;; :height height
|
||||
:view-box (str "0 0 " (:width dim) " " (:height dim))
|
||||
:version "1.1"
|
||||
:xmlnsXlink "http://www.w3.org/1999/xlink"
|
||||
:xmlns "http://www.w3.org/2000/svg"}
|
||||
|
@ -69,11 +70,11 @@
|
|||
(for [item shapes]
|
||||
[:& shape-wrapper {:shape item :key (:id item)}])]]))
|
||||
|
||||
(defn render
|
||||
[{:keys [data] :as page}]
|
||||
(try
|
||||
(-> (mf/element page-svg #js {:data data})
|
||||
(render-html))
|
||||
(catch :default e
|
||||
(js/console.log e)
|
||||
nil)))
|
||||
;; (defn render
|
||||
;; [{:keys [data] :as page}]
|
||||
;; (try
|
||||
;; (-> (mf/element page-svg #js {:data data})
|
||||
;; (render-html))
|
||||
;; (catch :default e
|
||||
;; (js/console.log e)
|
||||
;; nil)))
|
||||
|
|
|
@ -69,25 +69,25 @@
|
|||
|
||||
;; (mf/defc grid-item-thumbnail
|
||||
;; [{:keys [file] :as props}]
|
||||
;; [:div.grid-item-th
|
||||
;; [:img.img-th {:src "/images/project-placeholder.svg"}]])
|
||||
;; (let [url (mf/use-memo
|
||||
;; {:fn #(let [content (exports/render file)
|
||||
;; blob (js/Blob. #js [content] #js {:type "image/svg+xml"})]
|
||||
;; (js/URL.createObjectURL blob))
|
||||
;; :deps (mf/deps (:id file))})]
|
||||
;; (mf/use-effect
|
||||
;; {:fn (fn []
|
||||
;; #(js/URL.revokeObjectURL url))
|
||||
;; :deps (mf/deps (:id file))})
|
||||
;; [:div.grid-item-th
|
||||
;; [:img.img-th {:src url}]]))
|
||||
|
||||
;; (defn use-thumbnail
|
||||
;; [file]
|
||||
|
||||
(mf/defc grid-item-thumbnail
|
||||
[{:keys [file] :as props}]
|
||||
(let [url (mf/use-memo
|
||||
{:fn #(let [content (exports/render file)
|
||||
blob (js/Blob. #js [content] #js {:type "image/svg+xml"})]
|
||||
(js/URL.createObjectURL blob))
|
||||
:deps (mf/deps (:id file))})]
|
||||
(mf/use-effect
|
||||
{:fn (fn []
|
||||
#(js/URL.revokeObjectURL url))
|
||||
:deps (mf/deps (:id file))})
|
||||
[:div.grid-item-th
|
||||
[:img.img-th {:src url}]]))
|
||||
[:div.grid-item-th
|
||||
[:& exports/page-svg2 {:data (:data file)
|
||||
:width "290"
|
||||
:height "150"}]])
|
||||
|
||||
;; --- Grid Item
|
||||
|
||||
|
|
|
@ -57,7 +57,7 @@
|
|||
:y y
|
||||
:id (str "shape-" id)
|
||||
:preserveAspectRatio "none"
|
||||
:class (classnames :move-cursor moving?)
|
||||
:className (classnames :move-cursor moving?)
|
||||
:xlinkHref (:url image)
|
||||
:transform transform
|
||||
:width width
|
||||
|
|
Loading…
Add table
Reference in a new issue