Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-16 13:57:02 +08:00
Code Issues 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;
}
// With high enough zoom, fallback to DOM rendering
const zoomThreshold = 1;
export class ViewportTurboRendererExtension extends LifeCycleWatcher {
state: 'monitoring' | 'paused' = 'paused';
disposables = new DisposableGroup();
@@ -64,7 +67,10 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
debounceOptions
);
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(() => {
@@ -74,10 +80,7 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
}
override unmounted() {
if (this.tile) {
this.tile.bitmap.close();
this.tile = null;
}
this.clearTile();
if (this.debugPane) {
this.debugPane.dispose();
this.debugPane = null;
@@ -94,7 +97,9 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
async refresh(force = false) {
if (this.state === 'paused' && !force) return;
if (this.canUseBitmapCache()) {
if (this.viewport.zoom > zoomThreshold) {
this.clearCanvas();
} else if (this.canUseBitmapCache()) {
this.drawCachedBitmap(this.layoutCache!);
} else {
// 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;
}
private clearTile() {
if (this.tile) {
this.tile.bitmap.close();
this.tile = null;
}
}
private async paintLayout(layout: ViewportLayout): Promise<void> {
return new Promise(resolve => {
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) {
const bitmap = this.tile!.bitmap;
const ctx = this.canvas.getContext('2d');
if (!ctx) return;
ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.clearCanvas();
const layoutViewCoord = this.viewport.toViewCoord(
layout.rect.x,
layout.rect.y