github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-14 20:43:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

🐛 Update component thumbnails to match current shape

Browse Source
This commit is contained in:
Elena Torro 2026-05-11 16:22:22 +02:00
parent 086ed83847
commit 847d55bfb4
3 changed files with 50 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
frontend/src/app/main/data/workspace/thumbnails.cljs
View File

@ -96,12 +96,14 @@
ptk/UpdateEvent
(update [_ state]
(update state :thumbnails
(fn [thumbs]
(if-let [uri (get thumbs object-id)]
(do (vreset! pending uri)
(dissoc thumbs object-id))
thumbs))))
(-> state
(update :thumbnails
(fn [thumbs]
(if-let [uri (get thumbs object-id)]
(do (vreset! pending uri)
(dissoc thumbs object-id))
thumbs)))
(update :thumbnails-meta dissoc object-id)))
ptk/WatchEvent
(watch [_ _ _]
@ -124,10 +126,13 @@
(ptk/reify ::assoc-thumbnail
ptk/UpdateEvent
(update [_ state]
(let [prev-uri (dm/get-in state [:thumbnails object-id])]
(let [prev-uri (dm/get-in state [:thumbnails object-id])
now (.now js/Date)]
(some->> prev-uri (vreset! prev-uri*))
(l/trc :hint "assoc thumbnail" :object-id object-id :uri uri)
(update state :thumbnails assoc object-id uri)))
(-> state
(update :thumbnails assoc object-id uri)
(update :thumbnails-meta assoc object-id {:rendered-at now}))))
ptk/EffectEvent
(effect [_ _ _]

6
frontend/src/app/main/refs.cljs
View File

@ -588,6 +588,12 @@
(cf/resolve-media)))
st/state))
(defn workspace-thumbnail-rendered-at
[object-id]
(l/derived
#(dm/get-in % [:thumbnails-meta object-id :rendered-at])
st/state))
(def workspace-text-modifier
(l/derived :workspace-text-modifier st/state))

40
frontend/src/app/main/ui/workspace/sidebar/assets/common.cljs
View File

@ -324,14 +324,35 @@
current-page-id (mf/deref refs/current-page-id)
thumbnail-requested? (mf/use-ref false)
thumbnail-uri*
object-id
(mf/with-memo [file-id page-id root-id]
(let [object-id (thc/fmt-object-id file-id page-id root-id "component")]
(refs/workspace-thumbnail-by-id object-id)))
(thc/fmt-object-id file-id page-id root-id "component"))
thumbnail-uri*
(mf/with-memo [object-id]
(refs/workspace-thumbnail-by-id object-id))
thumbnail-uri
(mf/deref thumbnail-uri*)
rendered-at*
(mf/with-memo [object-id]
(refs/workspace-thumbnail-rendered-at object-id))
rendered-at
(mf/deref rendered-at*)
modified-at
(some-> (:modified-at component) (.getTime))
;; Stale if there's no in-session render record
;; or the component was modified after the last render
stale?
(and (some? thumbnail-uri)
(or (nil? rendered-at)
(and (some? modified-at)
(> modified-at rendered-at))))
on-error
(mf/use-fn
(mf/deps @retry)
@ -340,20 +361,21 @@
(inc retry))))]
;; Lazy WASM thumbnail rendering: when the component becomes
;; visible, has no cached thumbnail, and lives on the current page
;; trigger a render. Ref is used to avoid triggering multiple renders
;; while the component is still not rendered and the thumbnail URI
;; is not available.
;; visible and either has no cached thumbnail or the cached one is
;; stale relative to the last recorded edit, trigger a render. Ref
;; is used to avoid triggering multiple renders while the previous
;; render is in flight.
(mf/use-effect
(mf/deps is-hidden thumbnail-uri wasm? current-page-id file-id page-id)
(mf/deps is-hidden thumbnail-uri stale? wasm? current-page-id file-id page-id)
(fn []
(if (some? thumbnail-uri)
(if (and (some? thumbnail-uri) (not stale?))
(mf/set-ref-val! thumbnail-requested? false)
(when (and wasm? (not is-hidden) (not (mf/ref-val thumbnail-requested?)) (= page-id current-page-id))
(mf/set-ref-val! thumbnail-requested? true)
(st/emit! (dwt.wasm/render-thumbnail file-id page-id root-id))))))
(if (and (some? thumbnail-uri)
(not stale?)
(or (contains? cf/flags :component-thumbnails)
wasm?))
[:& component-svg-thumbnail