github/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2026-05-26 02:13:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #9524 from penpot/elenatorro-fix-blur-on-page-transition

Browse Source 
🐛 Fix blur on page transition
This commit is contained in:
Alejandro Alonso 2026-05-12 10:10:49 +02:00 committed by GitHub
commit f044104db1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs
View File

@ -84,15 +84,17 @@
;; - If the user clicks again during the transition, keep showing the original (A) snapshot ;; - If the user clicks again during the transition, keep showing the original (A) snapshot
(if (and (features/active-feature? @st/state "render-wasm/v1") (if (and (features/active-feature? @st/state "render-wasm/v1")
(not= id current-page-id)) (not= id current-page-id))
(do (-> (if @wasm.api/page-transition?
(-> (wasm.api/apply-canvas-blur) (p/resolved nil)
(p/finally (wasm.api/capture-canvas-snapshot-url))
(fn [] (p/finally
;; NOTE: it seems we need two RAF so the blur is actually applied and visible (fn []
;; in the canvas :( (wasm.api/apply-canvas-blur)
(timers/raf ;; NOTE: it seems we need two RAF so the blur is actually applied and visible
(fn [] ;; in the canvas :(
(timers/raf navigate-fn))))))) (timers/raf
(fn []
(timers/raf navigate-fn))))))
(navigate-fn))))) (navigate-fn)))))
on-delete on-delete

1
frontend/src/app/main/ui/workspace/viewport_wasm.cljs
View File

@ -420,7 +420,6 @@
(vreset! unmounted? true) (vreset! unmounted? true)
(when-let [timeout-id @timeout-id-ref] (when-let [timeout-id @timeout-id-ref]
(js/clearTimeout timeout-id)) (js/clearTimeout timeout-id))
(wasm.api/end-page-transition!)
(wasm.api/clear-canvas))))) (wasm.api/clear-canvas)))))
(mf/with-effect [show-text-editor? workspace-editor-state edition] (mf/with-effect [show-text-editor? workspace-editor-state edition]

52
frontend/src/app/render_wasm/api.cljs
View File

@ -81,25 +81,8 @@
(defonce transition-tiles-handler* (atom nil)) (defonce transition-tiles-handler* (atom nil))
(defonce snapshot-tiles-handler* (atom nil)) (defonce snapshot-tiles-handler* (atom nil))
(def ^:private transition-blur-css "blur(4px)")
(def ^:private snapshot-capture-debounce-ms 250) (def ^:private snapshot-capture-debounce-ms 250)
(defn- set-transition-blur!
[]
(when-let [canvas ^js wasm/canvas]
(dom/set-style! canvas "filter" transition-blur-css))
(when-let [nodes (.querySelectorAll ^js ug/document ".blurrable")]
(doseq [^js node (array-seq nodes)]
(dom/set-style! node "filter" transition-blur-css))))
(defn- clear-transition-blur!
[]
(when-let [canvas ^js wasm/canvas]
(dom/set-style! canvas "filter" ""))
(when-let [nodes (.querySelectorAll ^js ug/document ".blurrable")]
(doseq [^js node (array-seq nodes)]
(dom/set-style! node "filter" ""))))
(defn set-transition-image-from-background! (defn set-transition-image-from-background!
"Sets `transition-image-url*` to a data URL representing a solid background color." "Sets `transition-image-url*` to a data URL representing a solid background color."
[background] [background]
@ -121,8 +104,7 @@
(when-let [prev @transition-tiles-handler*] (when-let [prev @transition-tiles-handler*]
(.removeEventListener ^js ug/document "penpot:wasm:tiles-complete" prev)) (.removeEventListener ^js ug/document "penpot:wasm:tiles-complete" prev))
(reset! transition-tiles-handler* nil) (reset! transition-tiles-handler* nil)
(reset! transition-image-url* nil) (reset! transition-image-url* nil))
(clear-transition-blur!))
(defn- set-transition-tiles-complete-handler! (defn- set-transition-tiles-complete-handler!
"Installs a tiles-complete handler bound to the current transition epoch. "Installs a tiles-complete handler bound to the current transition epoch.
@ -2161,33 +2143,15 @@
(let [already? @page-transition? (let [already? @page-transition?
epoch (begin-page-transition!)] epoch (begin-page-transition!)]
(set-transition-tiles-complete-handler! epoch end-page-transition!) (set-transition-tiles-complete-handler! epoch end-page-transition!)
;; Two-phase transition:
;; - Apply CSS blur to the live canvas immediately (no async wait), so the user
;; sees the transition right away.
;; - In parallel, capture a `blob:` snapshot URL; once ready, switch the overlay
;; to that fixed image (and guard with `epoch` to avoid stale async updates).
(set-transition-blur!)
;; Lock the snapshot for the whole transition: if the user clicks to another page ;; Lock the snapshot for the whole transition: if the user clicks to another page
;; while the transition is active, keep showing the original page snapshot until ;; while the transition is active, keep showing the original page snapshot until
;; the final target page finishes rendering. ;; the final target page finishes rendering. The caller (sitemap on-click) is
(if already? ;; responsible for ensuring `wasm/canvas-snapshot-url` was freshly captured
(p/resolved nil) ;; before invoking us.
(do (when-not already?
;; If we already have a snapshot URL, use it immediately. (when-let [url wasm/canvas-snapshot-url]
(when-let [url wasm/canvas-snapshot-url] (when (string? url)
(when (string? url) (reset! transition-image-url* url))))))
(reset! transition-image-url* url)))
;; Capture a fresh snapshot asynchronously and update the overlay as soon
;; as it is ready (guarded by `epoch` to avoid stale async updates).
(-> (capture-canvas-snapshot-url)
(p/then (fn [url]
(when (and (string? url)
@page-transition?
(= epoch @transition-epoch*))
(reset! transition-image-url* url))
url))
(p/catch (fn [_] nil)))))))
(defn render-shape-pixels (defn render-shape-pixels
[shape-id scale] [shape-id scale]