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 {
-  GfxControllerIdentifier,
-  type Viewport,
-} from '@blocksuite/block-std/gfx';
+import { 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
-    .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);
+  debugPane.addButton({ title: 'Invalidate' }).on('click', () => {
+    renderer.invalidate();
   });
 }

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(
-      () => this.updateLayoutCache(),
-      500,
+    const debouncedRefresh = debounce(
+      () => {
+        this.refresh().catch(console.error);
+      },
+      1000, // During this period, fallback to DOM
       debounceOptions
     );
     this.disposables.add(
       this.std.store.slots.blockUpdated.on(() => {
-        this.clearTile();
-        debouncedLayoutUpdate();
+        this.invalidate();
+        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();
       }
-
-      await this.paintLayout(this.layoutCache!);
-      this.drawCachedBitmap(this.layoutCache!);
+      const layout = this.layoutCache!;
+      await this.paintLayout(layout);
+      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();