mirror of
https://github.com/penpot/penpot.git
synced 2025-05-20 03:06:11 +02:00
✨ Move the dashboard grid thumbnails to backend cache
This commit is contained in:
Andrey Antukh
Alonso Torres
parent
b91c42e186
commit
c876534c85
9 changed files with 167 additions and 82 deletions
|
|
@ -27,8 +27,6 @@
|
|||
[app.util.timers :as ts]
|
||||
[app.util.webapi :as wapi]
|
||||
[beicon.core :as rx]
|
||||
[cuerdas.core :as str]
|
||||
[promesa.core :as p]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(log/set-level! :warn)
|
||||
|
|
@ -38,57 +36,15 @@
|
|||
(def ^:const CACHE-NAME "penpot")
|
||||
(def ^:const CACHE-URL "https://penpot.app/cache/")
|
||||
|
||||
|
||||
(defn use-thumbnail-cache
|
||||
"Creates some hooks to handle the files thumbnails cache"
|
||||
[file]
|
||||
|
||||
(let [cache-url (str CACHE-URL (:id file) "/" (:revn file) ".svg")
|
||||
get-thumbnail
|
||||
(mf/use-callback
|
||||
(mf/deps cache-url)
|
||||
(fn []
|
||||
(p/let [response (.match js/caches cache-url)]
|
||||
(when (some? response)
|
||||
(p/let [blob (.blob response)
|
||||
svg-content (.text blob)
|
||||
headers (.-headers response)
|
||||
fonts-header (or (.get headers "X-PENPOT-FONTS") "")
|
||||
fonts (into #{}
|
||||
(remove #(= "" %))
|
||||
(str/split fonts-header ","))]
|
||||
{:svg svg-content
|
||||
:fonts fonts})))))
|
||||
|
||||
cache-thumbnail
|
||||
(mf/use-callback
|
||||
(mf/deps cache-url)
|
||||
(fn [{:keys [svg fonts]}]
|
||||
(p/let [cache (.open js/caches CACHE-NAME)
|
||||
blob (js/Blob. #js [svg] #js {:type "image/svg"})
|
||||
fonts (str/join "," fonts)
|
||||
headers (js/Headers. #js {"X-PENPOT-FONTS" fonts})
|
||||
response (js/Response. blob #js {:headers headers})]
|
||||
(.put cache cache-url response))))]
|
||||
|
||||
(mf/use-callback
|
||||
(mf/deps (:id file) (:revn file))
|
||||
(fn []
|
||||
(->> (rx/from (get-thumbnail))
|
||||
(rx/merge-map
|
||||
(fn [thumb-data]
|
||||
(log/debug :msg "retrieve thumbnail" :file (:id file) :revn (:revn file)
|
||||
:cache (if (some? thumb-data) :hit :miss))
|
||||
|
||||
(if (some? thumb-data)
|
||||
(rx/of thumb-data)
|
||||
(->> (wrk/ask! {:cmd :thumbnails/generate
|
||||
:file-id (:id file)})
|
||||
(rx/tap cache-thumbnail)))))
|
||||
|
||||
;; If we have a problem we delegate to the thumbnail generation
|
||||
(rx/catch #(wrk/ask! {:cmd :thumbnails/generate
|
||||
:file-id (:id file)})))))))
|
||||
(mf/use-fn
|
||||
(mf/deps (:id file) (:revn file))
|
||||
(fn []
|
||||
(wrk/ask! {:cmd :thumbnails/generate
|
||||
:revn (:revn file)
|
||||
:file-id (:id file)}))))
|
||||
|
||||
(mf/defc grid-item-thumbnail
|
||||
{::mf/wrap [mf/memo]}
|
||||
|
|
@ -100,10 +56,10 @@
|
|||
(mf/deps file)
|
||||
(fn []
|
||||
(->> (generate)
|
||||
(rx/subs (fn [{:keys [svg fonts]}]
|
||||
(rx/subs (fn [{:keys [data fonts] :as params}]
|
||||
(run! fonts/ensure-loaded! fonts)
|
||||
(when-let [node (mf/ref-val container)]
|
||||
(dom/set-html! node svg)))))))
|
||||
(dom/set-html! node data)))))))
|
||||
|
||||
[:div.grid-item-th {:style {:background-color (get-in file [:data :options :background])}
|
||||
:ref container}
|
||||
|
|
|
|||
|
|
@ -29,7 +29,6 @@
|
|||
:version (:full @cf/version)
|
||||
:public-uri (str cf/public-uri))
|
||||
|
||||
|
||||
(defn- parse-params
|
||||
[loc]
|
||||
(let [href (unchecked-get loc "href")]
|
||||
|
|
|
|||
|
|
@ -16,6 +16,10 @@
|
|||
[beicon.core :as rx]
|
||||
[rumext.alpha :as mf]))
|
||||
|
||||
(defn- not-found?
|
||||
[{:keys [type]}]
|
||||
(= :not-found type))
|
||||
|
||||
(defn- handle-response
|
||||
[response]
|
||||
(cond
|
||||
|
|
@ -29,30 +33,70 @@
|
|||
(rx/throw {:type :unexpected
|
||||
:code (:error response)})))
|
||||
|
||||
(defn- request-thumbnail
|
||||
[file-id]
|
||||
(let [uri (u/join (cfg/get-public-uri) "api/rpc/query/file-data-for-thumbnail")
|
||||
(defn- request-data-for-thumbnail
|
||||
[file-id revn]
|
||||
(let [path "api/rpc/query/file-data-for-thumbnail"
|
||||
params {:file-id file-id
|
||||
:revn revn
|
||||
:strip-frames-with-thumbnails true}
|
||||
request {:method :get
|
||||
:uri uri
|
||||
:uri (u/join (cfg/get-public-uri) path)
|
||||
:credentials "include"
|
||||
:query params}]
|
||||
(->> (http/send! request)
|
||||
(rx/map http/conditional-decode-transit)
|
||||
(rx/mapcat handle-response))))
|
||||
|
||||
(defn render-frame
|
||||
[data]
|
||||
(defn- request-thumbnail
|
||||
[file-id revn]
|
||||
(let [path "api/rpc/query/file-thumbnail"
|
||||
params {:file-id file-id
|
||||
:revn revn}
|
||||
request {:method :get
|
||||
:uri (u/join (cfg/get-public-uri) path)
|
||||
:credentials "include"
|
||||
:query params}]
|
||||
(->> (http/send! request)
|
||||
(rx/map http/conditional-decode-transit)
|
||||
(rx/mapcat handle-response))))
|
||||
|
||||
(defn- render-thumbnail
|
||||
[{:keys [data file-id revn] :as params}]
|
||||
(let [elem (if-let [frame (:thumbnail-frame data)]
|
||||
(mf/element render/frame-svg #js {:objects (:objects data) :frame frame})
|
||||
(mf/element render/page-svg #js {:data data :width "290" :height "150" :thumbnails? true}))]
|
||||
(rds/renderToStaticMarkup elem)))
|
||||
{:data (rds/renderToStaticMarkup elem)
|
||||
:fonts @fonts/loaded
|
||||
:file-id file-id
|
||||
:revn revn}))
|
||||
|
||||
(defn- persist-thumbnail
|
||||
[{:keys [file-id data revn fonts]}]
|
||||
(let [path "api/rpc/mutation/upsert-file-thumbnail"
|
||||
params {:file-id file-id
|
||||
:revn revn
|
||||
:props {:fonts fonts}
|
||||
:data data}
|
||||
request {:method :post
|
||||
:uri (u/join (cfg/get-public-uri) path)
|
||||
:credentials "include"
|
||||
:body (http/transit-data params)}]
|
||||
(->> (http/send! request)
|
||||
(rx/map http/conditional-decode-transit)
|
||||
(rx/mapcat handle-response)
|
||||
(rx/map (constantly params)))))
|
||||
|
||||
(defmethod impl/handler :thumbnails/generate
|
||||
[{:keys [file-id] :as message}]
|
||||
(->> (request-thumbnail file-id)
|
||||
(rx/map
|
||||
(fn [data]
|
||||
{:svg (render-frame data)
|
||||
:fonts @fonts/loaded}))))
|
||||
[{:keys [file-id revn] :as message}]
|
||||
(letfn [(on-result [{:keys [data props]}]
|
||||
{:data data
|
||||
:fonts (:fonts props)})
|
||||
|
||||
(on-cache-miss [_]
|
||||
(->> (request-data-for-thumbnail file-id revn)
|
||||
(rx/map render-thumbnail)
|
||||
(rx/mapcat persist-thumbnail)))]
|
||||
|
||||
(->> (request-thumbnail file-id revn)
|
||||
(rx/catch not-found? on-cache-miss)
|
||||
(rx/map on-result))))
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue