Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-07-30 00:29:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(editor): turbo renderer stale frame lag on zooming (#10376)

Browse Source 
Before:

https://github.com/user-attachments/assets/593e91a3-042e-4619-93a0-dca21fa942aa

After:

https://github.com/user-attachments/assets/779d7582-f7b2-4135-a97a-d1f65c7cb467

This is only a bug fix that ensures correct baseline rendering result. There'll be more optimizations specific for zooming TBD.
This commit is contained in:
doodlewind
2025-02-24 03:49:04 +00:00
parent 5fe4b2b3e4
commit 67889d9364
1 changed files with 10 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files
blocksuite/affine/shared/src/viewport-renderer/viewport-renderer.ts
+10 -19
View File
@@ -66,13 +66,12 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
); );
}); });
const debounceOptions = { leading: false, trailing: true };
const debouncedRefresh = debounce( const debouncedRefresh = debounce(
() => { () => {
this.refresh().catch(console.error); this.refresh().catch(console.error);
}, },
1000, // During this period, fallback to DOM 1000, // During this period, fallback to DOM
debounceOptions { leading: false, trailing: true }
); );
this.disposables.add( this.disposables.add(
this.std.store.slots.blockUpdated.on(() => { this.std.store.slots.blockUpdated.on(() => {
@@ -97,11 +96,12 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
return this.std.get(GfxControllerIdentifier).viewport; return this.std.get(GfxControllerIdentifier).viewport;
} }
async refresh(force = false) { async refresh() {
if (this.state === 'paused' && !force) return; if (this.state === 'paused') return;
this.clearCanvas();
if (this.viewport.zoom > zoomThreshold) { if (this.viewport.zoom > zoomThreshold) {
this.clearCanvas(); return;
} else if (this.canUseBitmapCache()) { } else if (this.canUseBitmapCache()) {
this.drawCachedBitmap(this.layoutCache!); this.drawCachedBitmap(this.layoutCache!);
} else { } else {
@@ -115,8 +115,9 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
} }
invalidate() { invalidate() {
this.clearCache(); this.layoutCache = null;
this.clearCanvas(); this.clearTile();
this.clearCanvas(); // Should clear immediately after content updates
} }
private updateLayoutCache() { private updateLayoutCache() {
@@ -124,11 +125,6 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
this.layoutCache = layout; this.layoutCache = layout;
} }
private clearCache() {
this.layoutCache = null;
this.clearTile();
}
private clearTile() { private clearTile() {
if (this.tile) { if (this.tile) {
this.tile.bitmap.close(); this.tile.bitmap.close();
@@ -154,17 +150,13 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
this.worker.onmessage = (e: MessageEvent) => { this.worker.onmessage = (e: MessageEvent) => {
if (e.data.type === 'bitmapPainted') { if (e.data.type === 'bitmapPainted') {
this.handlePaintedBitmap(e.data.bitmap, layout, resolve); this.handlePaintedBitmap(e.data.bitmap, resolve);
} }
}; };
}); });
} }
private handlePaintedBitmap( private handlePaintedBitmap(bitmap: ImageBitmap, resolve: () => void) {
bitmap: ImageBitmap,
layout: ViewportLayout,
resolve: () => void
) {
if (this.tile) { if (this.tile) {
this.tile.bitmap.close(); this.tile.bitmap.close();
} }
@@ -172,7 +164,6 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
bitmap, bitmap,
zoom: this.viewport.zoom, zoom: this.viewport.zoom,
}; };
this.drawCachedBitmap(layout);
resolve(); resolve();
} }