From 8afc50c730b655ed2ed79ed940cd9590202d23c4 Mon Sep 17 00:00:00 2001
From: Yifeng Wang <doodlewind@toeverything.info>
Date: Wed, 5 Feb 2025 12:16:06 +0800
Subject: [PATCH] fix(editor): support worker renderer zoom (#9943)

---
 .../playground/examples/renderer/animator.ts  |  4 ++--
 .../examples/renderer/canvas-renderer.ts      | 20 +++++++++++++------
 .../examples/renderer/canvas.worker.ts        |  8 +++++---
 .../playground/examples/renderer/types.ts     |  1 +
 4 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/blocksuite/playground/examples/renderer/animator.ts b/blocksuite/playground/examples/renderer/animator.ts
index 299ee2ab78..fe77a33298 100644
--- a/blocksuite/playground/examples/renderer/animator.ts
+++ b/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(
diff --git a/blocksuite/playground/examples/renderer/canvas-renderer.ts b/blocksuite/playground/examples/renderer/canvas-renderer.ts
index 831b506476..fad504e141 100644
--- a/blocksuite/playground/examples/renderer/canvas-renderer.ts
+++ b/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 => {
diff --git a/blocksuite/playground/examples/renderer/canvas.worker.ts b/blocksuite/playground/examples/renderer/canvas.worker.ts
index 7fe2ceb066..ab92f84fd4 100644
--- a/blocksuite/playground/examples/renderer/canvas.worker.ts
+++ b/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 => {
diff --git a/blocksuite/playground/examples/renderer/types.ts b/blocksuite/playground/examples/renderer/types.ts
index 19ccacfdfe..85b4505cc3 100644
--- a/blocksuite/playground/examples/renderer/types.ts
+++ b/blocksuite/playground/examples/renderer/types.ts
@@ -5,6 +5,7 @@ export interface SentenceLayout {
 
 export interface ParagraphLayout {
   sentences: SentenceLayout[];
+  scale: number;
 }
 
 export interface TextRect {