refactor(editor): invalidate support in turbo renderer (#10368)

refactor(editor): invalidate support in turbo renderer

- Added `invalidate()` method to clear cache and canvas
- Simplified debug pane controls to single invalidate button
- Replaced layout update with refresh debounce on block updates
- Improved cache handling and bitmap drawing flow

refactor: refresh after invalidate

blocksuite/affine/shared/src/viewport-renderer/dom-utils.ts

@@ -1,7 +1,4 @@
-import {
+import { type Viewport } from '@blocksuite/block-std/gfx';
-  GfxControllerIdentifier,
-  type Viewport,
-} from '@blocksuite/block-std/gfx';
 import { Pane } from 'tweakpane';
 
 import { getSentenceRects, segmentSentences } from './text-utils.js';
@@ -109,22 +106,7 @@ export function initTweakpane(
     .on('change', ({ value }) => {
       renderer.state = value ? 'paused' : 'monitoring';
     });
-
+  debugPane.addButton({ title: 'Invalidate' }).on('click', () => {
-  debugPane
+    renderer.invalidate();
-    .addBinding({ keepDOM: true }, 'keepDOM', {
-      label: 'Keep DOM',
-    })
-    .on('change', ({ value }) => {
-      const container = viewportElement.querySelector('gfx-viewport')!;
-      (container as HTMLElement).style.display = value ? 'block' : 'none';
-    });
-
-  debugPane.addButton({ title: 'Fit Viewport' }).on('click', () => {
-    const gfx = renderer.std.get(GfxControllerIdentifier);
-    gfx.fitToScreen();
-  });
-
-  debugPane.addButton({ title: 'Force Refresh' }).on('click', () => {
-    renderer.refresh(true).catch(console.error);
   });
 }

blocksuite/affine/shared/src/viewport-renderer/viewport-renderer.ts

@@ -67,15 +67,17 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
     });
 
     const debounceOptions = { leading: false, trailing: true };
-    const debouncedLayoutUpdate = debounce(
+    const debouncedRefresh = debounce(
-      () => this.updateLayoutCache(),
+      () => {
-      500,
+        this.refresh().catch(console.error);
+      },
+      1000, // During this period, fallback to DOM
       debounceOptions
     );
     this.disposables.add(
       this.std.store.slots.blockUpdated.on(() => {
-        this.clearTile();
+        this.invalidate();
-        debouncedLayoutUpdate();
+        debouncedRefresh();
       })
     );
   }
@@ -103,21 +105,30 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
     } else if (this.canUseBitmapCache()) {
       this.drawCachedBitmap(this.layoutCache!);
     } else {
-      // Unneeded most of the time, the DOM query is debounced after block update
       if (!this.layoutCache) {
         this.updateLayoutCache();
       }
-
+      const layout = this.layoutCache!;
-      await this.paintLayout(this.layoutCache!);
+      await this.paintLayout(layout);
-      this.drawCachedBitmap(this.layoutCache!);
+      this.drawCachedBitmap(layout);
     }
   }
 
+  invalidate() {
+    this.clearCache();
+    this.clearCanvas();
+  }
+
   private updateLayoutCache() {
     const layout = getViewportLayout(this.std.host, this.viewport);
     this.layoutCache = layout;
   }
 
+  private clearCache() {
+    this.layoutCache = null;
+    this.clearTile();
+  }
+
   private clearTile() {
     if (this.tile) {
       this.tile.bitmap.close();

blocksuite/integration-test/src/__tests__/utils/renderer-entry.ts

@@ -1,4 +1,7 @@
-import { ViewportTurboRendererExtension } from '@blocksuite/affine-shared/viewport-renderer';
+import {
+  ViewportTurboRendererExtension,
+  ViewportTurboRendererIdentifier,
+} from '@blocksuite/affine-shared/viewport-renderer';
 
 import { addSampleNotes } from './doc-generator.js';
 import { setupEditor } from './setup.js';
@@ -7,6 +10,9 @@ async function init() {
   setupEditor('edgeless', [ViewportTurboRendererExtension]);
   addSampleNotes(doc, 100);
   doc.load();
+
+  const renderer = editor.std.get(ViewportTurboRendererIdentifier);
+  window.renderer = renderer;
 }
 
 init();

blocksuite/integration-test/src/__tests__/utils/setup.ts

@@ -9,6 +9,7 @@ import { effects } from '../../effects.js';
 blocksEffects();
 effects();
 
+import type { ViewportTurboRendererExtension } from '@blocksuite/affine-shared/viewport-renderer';
 import {
   CommunityCanvasTextFonts,
   type DocMode,
@@ -136,5 +137,6 @@ declare global {
     doc: Store;
     job: Transformer;
     collection: TestWorkspace;
+    renderer: ViewportTurboRendererExtension;
   }
 }