refactor(editor): move worker renderer to affine shared (#10081)

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

@@ -0,0 +1,2 @@
+export * from './types.js';
+export * from './viewport-renderer.js';

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

@@ -0,0 +1,124 @@
+import { type SectionLayout } from './types.js';
+
+type WorkerMessageInit = {
+  type: 'initSection';
+  data: {
+    width: number;
+    height: number;
+    dpr: number;
+    zoom: number;
+  };
+};
+
+type WorkerMessagePaint = {
+  type: 'paintSection';
+  data: {
+    section: SectionLayout;
+  };
+};
+
+type WorkerMessage = WorkerMessageInit | WorkerMessagePaint;
+
+const meta = {
+  emSize: 2048,
+  hHeadAscent: 1984,
+  hHeadDescent: -494,
+};
+
+const font = new FontFace(
+  'Inter',
+  `url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwYZ8UA3.woff2)`
+);
+// @ts-expect-error worker env
+self.fonts && self.fonts.add(font);
+font.load().catch(console.error);
+
+function getBaseline() {
+  const fontSize = 15;
+  const lineHeight = 1.2 * fontSize;
+
+  const A = fontSize * (meta.hHeadAscent / meta.emSize); // ascent
+  const D = fontSize * (meta.hHeadDescent / meta.emSize); // descent
+  const AD = A + Math.abs(D); // ascent + descent
+  const L = lineHeight - AD; // leading
+  const y = A + L / 2;
+  return y;
+}
+
+/** Section painter in worker */
+class SectionPainter {
+  private canvas: OffscreenCanvas | null = null;
+  private ctx: OffscreenCanvasRenderingContext2D | null = null;
+  private zoom = 1;
+
+  init(modelWidth: number, modelHeight: number, dpr: number, zoom: number) {
+    const width = modelWidth * dpr * zoom;
+    const height = modelHeight * dpr * zoom;
+    this.canvas = new OffscreenCanvas(width, height);
+    this.ctx = this.canvas.getContext('2d')!;
+    this.ctx.scale(dpr, dpr);
+    this.ctx.fillStyle = 'lightgrey';
+    this.ctx.fillRect(0, 0, width, height);
+    this.zoom = zoom;
+  }
+
+  paint(section: SectionLayout) {
+    const { canvas, ctx } = this;
+    if (!canvas || !ctx) return;
+    if (section.rect.w === 0 || section.rect.h === 0) {
+      console.warn('empty section rect');
+      return;
+    }
+
+    ctx.scale(this.zoom, this.zoom);
+
+    // Track rendered positions to avoid duplicate rendering across all paragraphs and sentences
+    const renderedPositions = new Set<string>();
+
+    section.paragraphs.forEach(paragraph => {
+      const fontSize = 15;
+      ctx.font = `300 ${fontSize}px Inter`;
+      const baselineY = getBaseline();
+
+      paragraph.sentences.forEach(sentence => {
+        ctx.strokeStyle = 'yellow';
+        sentence.rects.forEach(textRect => {
+          const x = textRect.rect.x - section.rect.x;
+          const y = textRect.rect.y - section.rect.y;
+
+          const posKey = `${x},${y}`;
+          // Only render if we haven't rendered at this position before
+          if (renderedPositions.has(posKey)) return;
+
+          ctx.strokeRect(x, y, textRect.rect.w, textRect.rect.h);
+          ctx.fillStyle = 'black';
+          ctx.fillText(textRect.text, x, y + baselineY);
+
+          renderedPositions.add(posKey);
+        });
+      });
+    });
+
+    const bitmap = canvas.transferToImageBitmap();
+    self.postMessage({ type: 'bitmapPainted', bitmap }, { transfer: [bitmap] });
+  }
+}
+
+const painter = new SectionPainter();
+
+self.onmessage = async (e: MessageEvent<WorkerMessage>) => {
+  const { type, data } = e.data;
+  switch (type) {
+    case 'initSection': {
+      const { width, height, dpr, zoom } = data;
+      painter.init(width, height, dpr, zoom);
+      break;
+    }
+    case 'paintSection': {
+      await font.load();
+      const { section } = data;
+      painter.paint(section);
+      break;
+    }
+  }
+};

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

@@ -0,0 +1,135 @@
+import type { TextRect } from './types.js';
+
+interface WordSegment {
+  text: string;
+  start: number;
+  end: number;
+}
+
+const CJK_REGEX = /[\u4E00-\u9FFF\u3400-\u4DBF\uF900-\uFAFF]/u;
+
+function hasCJK(text: string): boolean {
+  return CJK_REGEX.test(text);
+}
+
+function getWordSegments(text: string): WordSegment[] {
+  const granularity = hasCJK(text) ? 'grapheme' : 'word';
+  const segmenter = new Intl.Segmenter(undefined, { granularity });
+  return Array.from(segmenter.segment(text)).map(({ segment, index }) => ({
+    text: segment,
+    start: index,
+    end: index + segment.length,
+  }));
+}
+
+function getRangeRects(range: Range, fullText: string): TextRect[] {
+  const rects = Array.from(range.getClientRects());
+  const textRects: TextRect[] = [];
+
+  if (rects.length === 0) return textRects;
+
+  // If there's only one rect, use the full text
+  if (rects.length === 1) {
+    const rect = rects[0];
+    textRects.push({
+      rect: {
+        x: rect.x,
+        y: rect.y,
+        w: rect.width,
+        h: rect.height,
+      },
+      text: fullText,
+    });
+    return textRects;
+  }
+
+  const segments = getWordSegments(fullText);
+
+  // Calculate the total width and average width per character
+  const totalWidth = Math.floor(
+    rects.reduce((sum, rect) => sum + rect.width, 0)
+  );
+  const charWidthEstimate = totalWidth / fullText.length;
+
+  let currentRect = 0;
+  let currentSegments: WordSegment[] = [];
+  let currentWidth = 0;
+
+  segments.forEach(segment => {
+    const segmentWidth = segment.text.length * charWidthEstimate;
+    if (
+      currentWidth + segmentWidth > rects[currentRect]?.width &&
+      currentSegments.length > 0
+    ) {
+      const rect = rects[currentRect];
+      textRects.push({
+        rect: {
+          x: rect.x,
+          y: rect.y,
+          w: rect.width,
+          h: rect.height,
+        },
+        text: currentSegments.map(seg => seg.text).join(''),
+      });
+
+      currentRect++;
+      currentSegments = [segment];
+      currentWidth = segmentWidth;
+    } else {
+      currentSegments.push(segment);
+      currentWidth += segmentWidth;
+    }
+  });
+
+  // Handle remaining segments if any
+  if (currentSegments.length > 0) {
+    const rect = rects[Math.min(currentRect, rects.length - 1)];
+    textRects.push({
+      rect: {
+        x: rect.x,
+        y: rect.y,
+        w: rect.width,
+        h: rect.height,
+      },
+      text: currentSegments.map(seg => seg.text).join(''),
+    });
+  }
+
+  return textRects;
+}
+
+export function getSentenceRects(
+  element: Element,
+  sentence: string
+): TextRect[] {
+  const textNode = Array.from(element.childNodes).find(
+    node => node.nodeType === Node.TEXT_NODE
+  );
+
+  if (!textNode) return [];
+
+  const text = textNode.textContent || '';
+  let rects: TextRect[] = [];
+  let startIndex = 0;
+
+  // Find all occurrences of the sentence and ensure we capture complete words
+  while ((startIndex = text.indexOf(sentence, startIndex)) !== -1) {
+    const range = document.createRange();
+    let endIndex = startIndex + sentence.length;
+
+    range.setStart(textNode, startIndex);
+    range.setEnd(textNode, endIndex);
+
+    rects = rects.concat(
+      getRangeRects(range, text.slice(startIndex, endIndex))
+    );
+    startIndex = endIndex;
+  }
+
+  return rects;
+}
+
+export function segmentSentences(text: string): string[] {
+  const segmenter = new Intl.Segmenter(undefined, { granularity: 'sentence' });
+  return Array.from(segmenter.segment(text)).map(({ segment }) => segment);
+}

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

@@ -0,0 +1,34 @@
+export interface Rect {
+  x: number;
+  y: number;
+  w: number;
+  h: number;
+}
+
+// We can't use viewport instance here because it can't be reused in worker
+export interface ViewportState {
+  zoom: number;
+  viewScale: number;
+  viewportX: number;
+  viewportY: number;
+}
+
+export interface SentenceLayout {
+  text: string;
+  rects: TextRect[];
+}
+
+export interface ParagraphLayout {
+  sentences: SentenceLayout[];
+  zoom: number;
+}
+
+export interface SectionLayout {
+  paragraphs: ParagraphLayout[];
+  rect: Rect;
+}
+
+export interface TextRect {
+  rect: Rect;
+  text: string;
+}

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

@@ -0,0 +1,230 @@
+import type { EditorHost } from '@blocksuite/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+
+import { getSentenceRects, segmentSentences } from './text-utils.js';
+import { type ParagraphLayout, type SectionLayout } from './types.js';
+
+export class ViewportTurboRenderer {
+  public readonly canvas: HTMLCanvasElement = document.createElement('canvas');
+  private readonly worker: Worker;
+  private readonly targetContainer: HTMLElement;
+  private host!: EditorHost;
+  private lastZoom: number | null = null;
+  private lastSection: SectionLayout | null = null;
+  private lastBitmap: ImageBitmap | null = null;
+
+  constructor(targetContainer: HTMLElement) {
+    this.targetContainer = targetContainer;
+
+    this.worker = new Worker(new URL('./painter.worker.ts', import.meta.url), {
+      type: 'module',
+    });
+
+    if (!this.targetContainer.querySelector('canvas')) {
+      this.targetContainer.append(this.canvas);
+    }
+  }
+
+  setHost(host: EditorHost) {
+    this.host = host;
+  }
+
+  get viewport() {
+    return this.host.std.get(GfxControllerIdentifier).viewport;
+  }
+
+  getHostRect() {
+    return this.host.getBoundingClientRect();
+  }
+
+  getHostLayout() {
+    const paragraphBlocks = this.host.querySelectorAll(
+      '.affine-paragraph-rich-text-wrapper [data-v-text="true"]'
+    );
+
+    const { viewport } = this;
+    const zoom = this.viewport.zoom;
+    const hostRect = this.getHostRect();
+
+    let sectionMinX = Infinity;
+    let sectionMinY = Infinity;
+    let sectionMaxX = -Infinity;
+    let sectionMaxY = -Infinity;
+
+    const paragraphs: ParagraphLayout[] = Array.from(paragraphBlocks).map(p => {
+      const sentences = segmentSentences(p.textContent || '');
+      const sentenceLayouts = sentences.map(sentence => {
+        const rects = getSentenceRects(p, sentence);
+        rects.forEach(({ rect }) => {
+          sectionMinX = Math.min(sectionMinX, rect.x);
+          sectionMinY = Math.min(sectionMinY, rect.y);
+          sectionMaxX = Math.max(sectionMaxX, rect.x + rect.w);
+          sectionMaxY = Math.max(sectionMaxY, rect.y + rect.h);
+        });
+        return {
+          text: sentence,
+          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,
+        zoom,
+      };
+    });
+
+    if (paragraphs.length === 0) return null;
+
+    const sectionModelCoord = viewport.toModelCoordFromClientCoord([
+      sectionMinX,
+      sectionMinY,
+    ]);
+    const w = (sectionMaxX - sectionMinX) / zoom / viewport.viewScale;
+    const h = (sectionMaxY - sectionMinY) / zoom / viewport.viewScale;
+    const section: SectionLayout = {
+      paragraphs,
+      rect: {
+        x: sectionModelCoord[0],
+        y: sectionModelCoord[1],
+        w: Math.max(w, 0),
+        h: Math.max(h, 0),
+      },
+    };
+
+    return { section, hostRect };
+  }
+
+  private initSectionRenderer(width: number, height: number) {
+    const dpr = window.devicePixelRatio;
+    this.worker.postMessage({
+      type: 'initSection',
+      data: { width, height, dpr, zoom: this.viewport.zoom },
+    });
+  }
+
+  private async renderSection(section: SectionLayout): Promise<void> {
+    return new Promise(resolve => {
+      if (!this.worker) return;
+
+      this.worker.postMessage({
+        type: 'paintSection',
+        data: { section },
+      });
+
+      this.worker.onmessage = (e: MessageEvent) => {
+        if (e.data.type === 'bitmapPainted') {
+          this.handlePaintedBitmap(e.data.bitmap, section, resolve);
+        }
+      };
+    });
+  }
+
+  private handlePaintedBitmap(
+    bitmap: ImageBitmap,
+    section: SectionLayout,
+    resolve: () => void
+  ) {
+    const tempCanvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+    const tempCtx = tempCanvas.getContext('2d')!;
+    tempCtx.drawImage(bitmap, 0, 0);
+    const bitmapCopy = tempCanvas.transferToImageBitmap();
+
+    this.updateCacheState(section, bitmapCopy);
+    this.drawBitmap(bitmap, section);
+    resolve();
+  }
+
+  private syncCanvasSize() {
+    const hostRect = this.getHostRect();
+    const dpr = window.devicePixelRatio;
+    this.canvas.style.width = `${hostRect.width}px`;
+    this.canvas.style.height = `${hostRect.height}px`;
+    this.canvas.width = hostRect.width * dpr;
+    this.canvas.height = hostRect.height * dpr;
+  }
+
+  private updateCacheState(section: SectionLayout, bitmapCopy: ImageBitmap) {
+    this.lastZoom = this.viewport.zoom;
+    this.lastSection = section;
+    if (this.lastBitmap) {
+      this.lastBitmap.close();
+    }
+    this.lastBitmap = bitmapCopy;
+  }
+
+  private canUseCache(currentZoom: number): boolean {
+    return (
+      this.lastZoom === currentZoom && !!this.lastSection && !!this.lastBitmap
+    );
+  }
+
+  private drawBitmap(bitmap: ImageBitmap, section: SectionLayout) {
+    const ctx = this.canvas.getContext('2d');
+    if (!ctx) return;
+
+    ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    const bitmapCanvas = new OffscreenCanvas(
+      section.rect.w * window.devicePixelRatio * this.viewport.zoom,
+      section.rect.h * window.devicePixelRatio * this.viewport.zoom
+    );
+    const bitmapCtx = bitmapCanvas.getContext('bitmaprenderer');
+    if (!bitmapCtx) return;
+
+    const tempCanvas = new OffscreenCanvas(bitmap.width, bitmap.height);
+    const tempCtx = tempCanvas.getContext('2d')!;
+    tempCtx.drawImage(bitmap, 0, 0);
+    const bitmapCopy = tempCanvas.transferToImageBitmap();
+
+    bitmapCtx.transferFromImageBitmap(bitmapCopy);
+
+    const sectionViewCoord = this.viewport.toViewCoord(
+      section.rect.x,
+      section.rect.y
+    );
+
+    ctx.drawImage(
+      bitmapCanvas,
+      sectionViewCoord[0] * window.devicePixelRatio,
+      sectionViewCoord[1] * window.devicePixelRatio,
+      section.rect.w * window.devicePixelRatio * this.viewport.zoom,
+      section.rect.h * window.devicePixelRatio * this.viewport.zoom
+    );
+  }
+
+  public async render(): Promise<void> {
+    const hostLayout = this.getHostLayout();
+    if (!hostLayout) return;
+
+    const { section } = hostLayout;
+    const currentZoom = this.viewport.zoom;
+
+    if (this.canUseCache(currentZoom)) {
+      this.drawBitmap(this.lastBitmap!, this.lastSection!);
+    } else {
+      this.syncCanvasSize();
+      this.initSectionRenderer(section.rect.w, section.rect.h);
+      await this.renderSection(section);
+    }
+  }
+
+  public destroy() {
+    if (this.lastBitmap) {
+      this.lastBitmap.close();
+    }
+    this.worker.terminate();
+  }
+}