refactor(editor): allow force refresh in worker renderer (#10289)

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

@@ -1,8 +1,12 @@
-import type { Viewport } from '@blocksuite/block-std/gfx';
+import {
+  GfxControllerIdentifier,
+  type Viewport,
+} from '@blocksuite/block-std/gfx';
 import { Pane } from 'tweakpane';
 
 import { getSentenceRects, segmentSentences } from './text-utils.js';
 import type { ParagraphLayout, SectionLayout } from './types.js';
+import type { ViewportTurboRendererExtension } from './viewport-renderer.js';
 
 export function syncCanvasSize(canvas: HTMLCanvasElement, host: HTMLElement) {
   const hostRect = host.getBoundingClientRect();
@@ -87,23 +91,40 @@ export function getSectionLayout(
 }
 
 export function initTweakpane(
-  viewportElement: HTMLElement,
-  onStateChange: (value: boolean) => void
+  renderer: ViewportTurboRendererExtension,
+  viewportElement: HTMLElement
 ) {
   const debugPane = new Pane({ container: viewportElement });
   const paneElement = debugPane.element;
   paneElement.style.position = 'absolute';
   paneElement.style.top = '10px';
-  paneElement.style.left = '10px';
+  paneElement.style.right = '10px';
   paneElement.style.width = '250px';
   debugPane.title = 'Viewport Turbo Renderer';
 
-  const params = { enabled: true };
   debugPane
-    .addBinding(params, 'enabled', {
-      label: 'Enable',
+    .addBinding({ paused: true }, 'paused', {
+      label: 'Paused',
     })
     .on('change', ({ value }) => {
-      onStateChange(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);
+  });
 }

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

@@ -49,18 +49,15 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
     const viewportElement = document.querySelector('.affine-edgeless-viewport');
     if (viewportElement) {
       viewportElement.append(this.canvas);
-      initTweakpane(viewportElement as HTMLElement, (value: boolean) => {
-        this.state = value ? 'monitoring' : 'paused';
-        this.canvas.style.display = value ? 'block' : 'none';
-      });
+      initTweakpane(this, viewportElement as HTMLElement);
     }
     syncCanvasSize(this.canvas, this.std.host);
     this.viewport.viewportUpdated.on(() => {
       this.refresh().catch(console.error);
     });
 
     document.fonts.load('15px Inter').then(() => {
-      this.state = 'monitoring';
+      // this.state = 'monitoring';
       this.refresh().catch(console.error);
     });
   }
@@ -82,7 +79,9 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
     return this.std.get(GfxControllerIdentifier).viewport;
   }
 
-  private async refresh() {
+  async refresh(force = false) {
+    if (this.state === 'paused' && !force) return;
+
     await nextTick(); // Improves stability during zooming
 
     if (this.canUseCache()) {
@@ -140,8 +139,6 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
   }
 
   private drawCachedBitmap(section: SectionLayout) {
-    if (this.state === 'paused') return;
-
     const bitmap = this.tile!.bitmap;
     const ctx = this.canvas.getContext('2d');
     if (!ctx) return;

blocksuite/presets/src/__tests__/utils/renderer-entry.ts

@@ -5,7 +5,7 @@ import { setupEditor } from './setup.js';
 
 async function init() {
   setupEditor('edgeless', [ViewportTurboRendererExtension]);
-  addSampleNotes(doc, 1);
+  addSampleNotes(doc, 100);
   doc.load();
 }