luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor(editor): add zoom threshold for dom rendering fallback (#10322)

Browse Source
This commit is contained in:
doodlewind
2025-02-20 11:45:19 +00:00
parent 1516903c77
commit 64cc99354e
1 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
blocksuite/affine/shared/src/viewport-renderer/viewport-renderer.ts
View File

@@ -25,6 +25,9 @@ interface Tile {
zoom: number; zoom: number;
} }
// With high enough zoom, fallback to DOM rendering
const zoomThreshold = 1;
export class ViewportTurboRendererExtension extends LifeCycleWatcher { export class ViewportTurboRendererExtension extends LifeCycleWatcher {
state: 'monitoring' | 'paused' = 'paused'; state: 'monitoring' | 'paused' = 'paused';
disposables = new DisposableGroup(); disposables = new DisposableGroup();
@@ -64,7 +67,10 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
debounceOptions debounceOptions
); );
this.disposables.add( this.disposables.add(
this.std.store.slots.blockUpdated.on(debouncedLayoutUpdate) this.std.store.slots.blockUpdated.on(() => {
this.clearTile();
debouncedLayoutUpdate();
})
); );
document.fonts.load('15px Inter').then(() => { document.fonts.load('15px Inter').then(() => {
@@ -74,10 +80,7 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
} }
override unmounted() { override unmounted() {
if (this.tile) { this.clearTile();
this.tile.bitmap.close();
this.tile = null;
}
if (this.debugPane) { if (this.debugPane) {
this.debugPane.dispose(); this.debugPane.dispose();
this.debugPane = null; this.debugPane = null;
@@ -94,7 +97,9 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
async refresh(force = false) { async refresh(force = false) {
if (this.state === 'paused' && !force) return; if (this.state === 'paused' && !force) return;
if (this.canUseBitmapCache()) { if (this.viewport.zoom > zoomThreshold) {
this.clearCanvas();
} else if (this.canUseBitmapCache()) {
this.drawCachedBitmap(this.layoutCache!); this.drawCachedBitmap(this.layoutCache!);
} else { } else {
// Unneeded most of the time, the DOM query is debounced after block update // Unneeded most of the time, the DOM query is debounced after block update
@@ -112,6 +117,13 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
this.layoutCache = layout; this.layoutCache = layout;
} }
private clearTile() {
if (this.tile) {
this.tile.bitmap.close();
this.tile = null;
}
}
private async paintLayout(layout: ViewportLayout): Promise<void> { private async paintLayout(layout: ViewportLayout): Promise<void> {
return new Promise(resolve => { return new Promise(resolve => {
if (!this.worker) return; if (!this.worker) return;
@@ -158,12 +170,18 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
); );
} }
private clearCanvas() {
const ctx = this.canvas.getContext('2d');
if (!ctx) return;
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
private drawCachedBitmap(layout: ViewportLayout) { private drawCachedBitmap(layout: ViewportLayout) {
const bitmap = this.tile!.bitmap; const bitmap = this.tile!.bitmap;
const ctx = this.canvas.getContext('2d'); const ctx = this.canvas.getContext('2d');
if (!ctx) return; if (!ctx) return;
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); this.clearCanvas();
const layoutViewCoord = this.viewport.toViewCoord( const layoutViewCoord = this.viewport.toViewCoord(
layout.rect.x, layout.rect.x,
layout.rect.y layout.rect.y