refactor(editor): use model coord system in worker renderer (#9969)

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

@@ -2,7 +2,11 @@ import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import type { AffineEditorContainer } from '@blocksuite/presets';
 
 import { getSentenceRects, segmentSentences } from './text-utils.js';
-import { type ParagraphLayout, type SectionLayout } from './types.js';
+import {
+  type ParagraphLayout,
+  type SectionLayout,
+  type ViewportState,
+} from './types.js';
 
 export class CanvasRenderer {
   private readonly worker: Worker;
@@ -24,29 +28,40 @@ export class CanvasRenderer {
 
   private initWorkerSize(width: number, height: number) {
     const dpr = window.devicePixelRatio;
-    this.worker.postMessage({ type: 'init', data: { width, height, dpr } });
+    const viewport = this.editorContainer.std.get(
+      GfxControllerIdentifier
+    ).viewport;
+    const viewportState: ViewportState = {
+      zoom: viewport.zoom,
+      viewScale: viewport.viewScale,
+      viewportX: viewport.viewportX,
+      viewportY: viewport.viewportY,
+    };
+    this.worker.postMessage({
+      type: 'init',
+      data: { width, height, dpr, viewport: viewportState },
+    });
+  }
+
+  get viewport() {
+    return this.editorContainer.std.get(GfxControllerIdentifier).viewport;
   }
 
   get hostRect() {
     return this.editorContainer.host!.getBoundingClientRect();
   }
 
-  get hostZoom() {
-    return this.editorContainer.std.get(GfxControllerIdentifier).viewport.zoom;
-  }
-
   get hostLayout(): {
     section: SectionLayout;
     hostRect: DOMRect;
-    editorContainerRect: DOMRect;
   } {
     const paragraphBlocks = this.editorContainer.host!.querySelectorAll(
       '.affine-paragraph-rich-text-wrapper [data-v-text="true"]'
     );
 
-    const zoom = this.hostZoom;
+    const { viewport } = this;
+    const zoom = this.viewport.zoom;
     const hostRect = this.hostRect;
-    const editorContainerRect = this.editorContainer.getBoundingClientRect();
 
     let sectionMinX = Infinity;
     let sectionMinY = Infinity;
@@ -60,37 +75,55 @@ export class CanvasRenderer {
         rects.forEach(({ rect }) => {
           sectionMinX = Math.min(sectionMinX, rect.x);
           sectionMinY = Math.min(sectionMinY, rect.y);
-          sectionMaxX = Math.max(sectionMaxX, rect.x + rect.width);
-          sectionMaxY = Math.max(sectionMaxY, rect.y + rect.height);
+          sectionMaxX = Math.max(sectionMaxX, rect.x + rect.w);
+          sectionMaxY = Math.max(sectionMaxY, rect.y + rect.h);
         });
         return {
           text: sentence,
-          rects,
+          rects: rects.map(rect => {
+            const [x, y] = viewport.toModelCoordFromClientCoord([
+              rect.rect.x,
+              rect.rect.y,
+            ]);
+            return {
+              ...rect,
+              rect: {
+                x,
+                y,
+                w: rect.rect.w / zoom / viewport.viewScale,
+                h: rect.rect.h / zoom / viewport.viewScale,
+              },
+            };
+          }),
         };
       });
 
       return {
         sentences: sentenceLayouts,
-        scale: zoom,
+        zoom,
       };
     });
 
+    const sectionModelCoord = viewport.toModelCoordFromClientCoord([
+      sectionMinX,
+      sectionMinY,
+    ]);
     const section: SectionLayout = {
       paragraphs,
       rect: {
-        x: sectionMinX,
-        y: sectionMinY,
-        width: sectionMaxX - sectionMinX,
-        height: sectionMaxY - sectionMinY,
+        x: sectionModelCoord[0],
+        y: sectionModelCoord[1],
+        w: (sectionMaxX - sectionMinX) / zoom / viewport.viewScale,
+        h: (sectionMaxY - sectionMinY) / zoom / viewport.viewScale,
       },
     };
 
-    return { section, hostRect, editorContainerRect };
+    return { section, hostRect };
   }
 
   public async render(toScreen = true): Promise<void> {
-    const { section, editorContainerRect } = this.hostLayout;
-    this.initWorkerSize(section.rect.width, section.rect.height);
+    const { section } = this.hostLayout;
+    this.initWorkerSize(section.rect.w, section.rect.h);
 
     return new Promise(resolve => {
       if (!this.worker) return;
@@ -105,12 +138,10 @@ export class CanvasRenderer {
       this.worker.onmessage = (e: MessageEvent) => {
         const { type, bitmap } = e.data;
         if (type === 'render') {
-          this.canvas.style.width = editorContainerRect.width + 'px';
-          this.canvas.style.height = editorContainerRect.height + 'px';
-          this.canvas.width =
-            editorContainerRect.width * window.devicePixelRatio;
-          this.canvas.height =
-            editorContainerRect.height * window.devicePixelRatio;
+          this.canvas.style.width = this.hostRect.width + 'px';
+          this.canvas.style.height = this.hostRect.height + 'px';
+          this.canvas.width = this.hostRect.width * window.devicePixelRatio;
+          this.canvas.height = this.hostRect.height * window.devicePixelRatio;
 
           if (!this.targetContainer.querySelector('canvas')) {
             this.targetContainer.append(this.canvas);
@@ -118,8 +149,8 @@ export class CanvasRenderer {
 
           const ctx = this.canvas.getContext('2d');
           const bitmapCanvas = new OffscreenCanvas(
-            section.rect.width * window.devicePixelRatio,
-            section.rect.height * window.devicePixelRatio
+            section.rect.w * window.devicePixelRatio * this.viewport.zoom,
+            section.rect.h * window.devicePixelRatio * this.viewport.zoom
           );
           const bitmapCtx = bitmapCanvas.getContext('bitmaprenderer');
           bitmapCtx?.transferFromImageBitmap(bitmap);
@@ -129,12 +160,17 @@ export class CanvasRenderer {
             return;
           }
 
+          const sectionViewCoord = this.viewport.toViewCoord(
+            section.rect.x,
+            section.rect.y
+          );
+
           ctx?.drawImage(
             bitmapCanvas,
-            (section.rect.x - editorContainerRect.x) * window.devicePixelRatio,
-            (section.rect.y - editorContainerRect.y) * window.devicePixelRatio,
-            section.rect.width * window.devicePixelRatio,
-            section.rect.height * window.devicePixelRatio
+            sectionViewCoord[0] * window.devicePixelRatio,
+            sectionViewCoord[1] * window.devicePixelRatio,
+            section.rect.w * window.devicePixelRatio * this.viewport.zoom,
+            section.rect.h * window.devicePixelRatio * this.viewport.zoom
           );
 
           resolve();
@@ -143,103 +179,6 @@ export class CanvasRenderer {
     });
   }
 
-  public renderTransitionFrame(
-    beginSection: SectionLayout,
-    endSection: SectionLayout,
-    beginHostRect: DOMRect,
-    endHostRect: DOMRect,
-    progress: number
-  ) {
-    const editorContainerRect = this.editorContainer.getBoundingClientRect();
-    const dpr = window.devicePixelRatio;
-
-    if (!this.targetContainer.querySelector('canvas')) {
-      this.targetContainer.append(this.canvas);
-    }
-
-    const ctx = this.canvas.getContext('2d')!;
-    ctx.scale(dpr, dpr);
-    ctx.clearRect(0, 0, this.canvas.width / dpr, this.canvas.height / dpr);
-
-    const getParagraphRect = (paragraph: ParagraphLayout): DOMRect => {
-      let minX = Infinity;
-      let minY = Infinity;
-      let maxX = -Infinity;
-      let maxY = -Infinity;
-      paragraph.sentences.forEach(sentence => {
-        sentence.rects.forEach(({ rect }) => {
-          minX = Math.min(minX, rect.x);
-          minY = Math.min(minY, rect.y);
-          maxX = Math.max(maxX, rect.x + rect.width);
-          maxY = Math.max(maxY, rect.y + rect.height);
-        });
-      });
-
-      return new DOMRect(minX, minY, maxX - minX, maxY - minY);
-    };
-
-    // Helper function to interpolate between two rects
-    const interpolateRect = (
-      rect1: DOMRect,
-      rect2: DOMRect,
-      t: number
-    ): DOMRect => {
-      return new DOMRect(
-        rect1.x + (rect2.x - rect1.x) * t,
-        rect1.y + (rect2.y - rect1.y) * t,
-        rect1.width + (rect2.width - rect1.width) * t,
-        rect1.height + (rect2.height - rect1.height) * t
-      );
-    };
-
-    // Draw host rect
-    const currentHostRect = interpolateRect(
-      beginHostRect,
-      endHostRect,
-      progress
-    );
-    ctx.strokeStyle = 'white';
-    ctx.lineWidth = 1;
-    ctx.strokeRect(
-      currentHostRect.x - editorContainerRect.x,
-      currentHostRect.y - editorContainerRect.y,
-      currentHostRect.width,
-      currentHostRect.height
-    );
-
-    // Draw paragraph rects
-    const maxParagraphs = Math.max(
-      beginSection.paragraphs.length,
-      endSection.paragraphs.length
-    );
-
-    for (let i = 0; i < maxParagraphs; i++) {
-      const beginRect =
-        i < beginSection.paragraphs.length
-          ? getParagraphRect(beginSection.paragraphs[i])
-          : getParagraphRect(
-              endSection.paragraphs[endSection.paragraphs.length - 1]
-            );
-      const endRect =
-        i < endSection.paragraphs.length
-          ? getParagraphRect(endSection.paragraphs[i])
-          : getParagraphRect(
-              beginSection.paragraphs[beginSection.paragraphs.length - 1]
-            );
-
-      const currentRect = interpolateRect(beginRect, endRect, progress);
-      ctx.fillStyle = '#efefef';
-      ctx.fillRect(
-        currentRect.x - editorContainerRect.x,
-        currentRect.y - editorContainerRect.y,
-        currentRect.width,
-        currentRect.height
-      );
-    }
-
-    ctx.scale(1 / dpr, 1 / dpr);
-  }
-
   public destroy() {
     this.worker.terminate();
   }