fix(editor): support worker renderer zoom (#9943)

blocksuite/playground/examples/renderer/animator.ts

@@ -23,14 +23,14 @@ export class SwitchModeAnimator {
 
   async switchMode() {
     this.initOverlay();
-    const beginLayout = this.renderer.getHostLayout();
+    const beginLayout = this.renderer.hostLayout;
 
     await this.renderer.render(false);
     document.body.append(this.overlay);
     this.editor.mode = this.editor.mode === 'page' ? 'edgeless' : 'page';
     await wait();
 
-    const endLayout = this.renderer.getHostLayout();
+    const endLayout = this.renderer.hostLayout;
 
     this.overlay.style.display = 'inherit';
     await this.animate(

blocksuite/playground/examples/renderer/canvas-renderer.ts

@@ -1,3 +1,4 @@
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 
 import { getSentenceRects, segmentSentences } from './text-utils.js';
@@ -26,16 +27,21 @@ export class CanvasRenderer {
     this.worker.postMessage({ type: 'init', data: { width, height, dpr } });
   }
 
-  getHostRect() {
-    const hostRect = this.editorContainer.host!.getBoundingClientRect();
-    return hostRect;
+  get hostRect() {
+    return this.editorContainer.host!.getBoundingClientRect();
   }
 
-  getHostLayout() {
+  get hostZoom() {
+    return this.editorContainer.std.get(GfxControllerIdentifier).viewport.zoom;
+  }
+
+  get hostLayout() {
     const paragraphBlocks = this.editorContainer.host!.querySelectorAll(
       '.affine-paragraph-rich-text-wrapper [data-v-text="true"]'
     );
 
+    const zoom = this.hostZoom;
+
     const paragraphs: ParagraphLayout[] = Array.from(paragraphBlocks).map(p => {
       const sentences = segmentSentences(p.textContent || '');
       const sentenceLayouts = sentences.map(sentence => {
@@ -45,18 +51,20 @@ export class CanvasRenderer {
           rects,
         };
       });
+
       return {
         sentences: sentenceLayouts,
+        scale: zoom,
       };
     });
 
-    const hostRect = this.getHostRect();
+    const hostRect = this.hostRect;
     const editorContainerRect = this.editorContainer.getBoundingClientRect();
     return { paragraphs, hostRect, editorContainerRect };
   }
 
   public async render(toScreen = true): Promise<void> {
-    const { paragraphs, hostRect, editorContainerRect } = this.getHostLayout();
+    const { paragraphs, hostRect, editorContainerRect } = this.hostLayout;
     this.initWorkerSize(hostRect.width, hostRect.height);
 
     return new Promise(resolve => {

blocksuite/playground/examples/renderer/canvas.worker.ts

@@ -42,10 +42,12 @@ class CanvasWorkerManager {
     const { canvas, ctx } = this;
     if (!canvas || !ctx) return;
 
-    ctx.font = '15px Inter';
-    const baselineY = getBaseline();
-
     paragraphs.forEach(paragraph => {
+      const scale = paragraph.scale ?? 1;
+      const fontSize = 15 * scale;
+      ctx.font = `${fontSize}px Inter`;
+      const baselineY = getBaseline() * scale;
+
       paragraph.sentences.forEach(sentence => {
         ctx.strokeStyle = 'yellow';
         sentence.rects.forEach(textRect => {

blocksuite/playground/examples/renderer/types.ts

@@ -5,6 +5,7 @@ export interface SentenceLayout {
 
 export interface ParagraphLayout {
   sentences: SentenceLayout[];
+  scale: number;
 }
 
 export interface TextRect {