From 7b1dfb7ee8d0319eb0cc507ca614a985e05b9aba Mon Sep 17 00:00:00 2001 From: doodlewind <7312949+doodlewind@users.noreply.github.com> Date: Thu, 20 Feb 2025 10:01:13 +0000 Subject: [PATCH] refactor(editor): reduce dom query per refresh (#10319) --- .../shared/src/viewport-renderer/dom-utils.ts | 40 ++++----- .../src/viewport-renderer/painter.worker.ts | 41 ++++----- .../shared/src/viewport-renderer/types.ts | 2 +- .../viewport-renderer/viewport-renderer.ts | 86 ++++++++++++------- 4 files changed, 92 insertions(+), 77 deletions(-) diff --git a/blocksuite/affine/shared/src/viewport-renderer/dom-utils.ts b/blocksuite/affine/shared/src/viewport-renderer/dom-utils.ts index 0e2a8e96c..d443e4e4f 100644 --- a/blocksuite/affine/shared/src/viewport-renderer/dom-utils.ts +++ b/blocksuite/affine/shared/src/viewport-renderer/dom-utils.ts @@ -5,7 +5,7 @@ import { import { Pane } from 'tweakpane'; import { getSentenceRects, segmentSentences } from './text-utils.js'; -import type { ParagraphLayout, SectionLayout } from './types.js'; +import type { ParagraphLayout, ViewportLayout } from './types.js'; import type { ViewportTurboRendererExtension } from './viewport-renderer.js'; export function syncCanvasSize(canvas: HTMLCanvasElement, host: HTMLElement) { @@ -21,30 +21,30 @@ export function syncCanvasSize(canvas: HTMLCanvasElement, host: HTMLElement) { canvas.style.pointerEvents = 'none'; } -export function getSectionLayout( +export function getViewportLayout( host: HTMLElement, viewport: Viewport -): SectionLayout { +): ViewportLayout { const paragraphBlocks = host.querySelectorAll( '.affine-paragraph-rich-text-wrapper [data-v-text="true"]' ); const zoom = viewport.zoom; - let sectionMinX = Infinity; - let sectionMinY = Infinity; - let sectionMaxX = -Infinity; - let sectionMaxY = -Infinity; + let layoutMinX = Infinity; + let layoutMinY = Infinity; + let layoutMaxX = -Infinity; + let layoutMaxY = -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); + layoutMinX = Math.min(layoutMinX, rect.x); + layoutMinY = Math.min(layoutMinY, rect.y); + layoutMaxX = Math.max(layoutMaxX, rect.x + rect.w); + layoutMaxY = Math.max(layoutMaxY, rect.y + rect.h); }); return { text: sentence, @@ -72,22 +72,22 @@ export function getSectionLayout( }; }); - const sectionModelCoord = viewport.toModelCoordFromClientCoord([ - sectionMinX, - sectionMinY, + const layoutModelCoord = viewport.toModelCoordFromClientCoord([ + layoutMinX, + layoutMinY, ]); - const w = (sectionMaxX - sectionMinX) / zoom / viewport.viewScale; - const h = (sectionMaxY - sectionMinY) / zoom / viewport.viewScale; - const section: SectionLayout = { + const w = (layoutMaxX - layoutMinX) / zoom / viewport.viewScale; + const h = (layoutMaxY - layoutMinY) / zoom / viewport.viewScale; + const layout: ViewportLayout = { paragraphs, rect: { - x: sectionModelCoord[0], - y: sectionModelCoord[1], + x: layoutModelCoord[0], + y: layoutModelCoord[1], w: Math.max(w, 0), h: Math.max(h, 0), }, }; - return section; + return layout; } export function initTweakpane( diff --git a/blocksuite/affine/shared/src/viewport-renderer/painter.worker.ts b/blocksuite/affine/shared/src/viewport-renderer/painter.worker.ts index 602e7830c..a2cb78f61 100644 --- a/blocksuite/affine/shared/src/viewport-renderer/painter.worker.ts +++ b/blocksuite/affine/shared/src/viewport-renderer/painter.worker.ts @@ -1,9 +1,9 @@ -import { type SectionLayout } from './types.js'; +import { type ViewportLayout } from './types.js'; type WorkerMessagePaint = { - type: 'paintSection'; + type: 'paintLayout'; data: { - section: SectionLayout; + layout: ViewportLayout; width: number; height: number; dpr: number; @@ -38,20 +38,15 @@ function getBaseline() { return y; } -/** Section painter in worker */ -class SectionPainter { +/** Layout painter in worker */ +class LayoutPainter { private readonly canvas: OffscreenCanvas = new OffscreenCanvas(0, 0); private ctx: OffscreenCanvasRenderingContext2D | null = null; private zoom = 1; - setSize( - sectionRectW: number, - sectionRectH: number, - dpr: number, - zoom: number - ) { - const width = sectionRectW * dpr * zoom; - const height = sectionRectH * dpr * zoom; + setSize(layoutRectW: number, layoutRectH: number, dpr: number, zoom: number) { + const width = layoutRectW * dpr * zoom; + const height = layoutRectH * dpr * zoom; this.canvas.width = width; this.canvas.height = height; @@ -68,11 +63,11 @@ class SectionPainter { this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); } - paint(section: SectionLayout) { + paint(layout: ViewportLayout) { const { canvas, ctx } = this; if (!canvas || !ctx) return; - if (section.rect.w === 0 || section.rect.h === 0) { - console.warn('empty section rect'); + if (layout.rect.w === 0 || layout.rect.h === 0) { + console.warn('empty layout rect'); return; } @@ -83,7 +78,7 @@ class SectionPainter { // Track rendered positions to avoid duplicate rendering across all paragraphs and sentences const renderedPositions = new Set(); - section.paragraphs.forEach(paragraph => { + layout.paragraphs.forEach(paragraph => { const fontSize = 15; ctx.font = `300 ${fontSize}px Inter`; const baselineY = getBaseline(); @@ -91,8 +86,8 @@ class SectionPainter { 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 x = textRect.rect.x - layout.rect.x; + const y = textRect.rect.y - layout.rect.y; const posKey = `${x},${y}`; // Only render if we haven't rendered at this position before @@ -112,7 +107,7 @@ class SectionPainter { } } -const painter = new SectionPainter(); +const painter = new LayoutPainter(); let fontLoaded = false; font @@ -131,10 +126,10 @@ self.onmessage = async (e: MessageEvent) => { } switch (type) { - case 'paintSection': { - const { section, width, height, dpr, zoom } = data; + case 'paintLayout': { + const { layout, width, height, dpr, zoom } = data; painter.setSize(width, height, dpr, zoom); - painter.paint(section); + painter.paint(layout); break; } } diff --git a/blocksuite/affine/shared/src/viewport-renderer/types.ts b/blocksuite/affine/shared/src/viewport-renderer/types.ts index 8483555a5..1754e1b63 100644 --- a/blocksuite/affine/shared/src/viewport-renderer/types.ts +++ b/blocksuite/affine/shared/src/viewport-renderer/types.ts @@ -23,7 +23,7 @@ export interface ParagraphLayout { zoom: number; } -export interface SectionLayout { +export interface ViewportLayout { paragraphs: ParagraphLayout[]; rect: Rect; } diff --git a/blocksuite/affine/shared/src/viewport-renderer/viewport-renderer.ts b/blocksuite/affine/shared/src/viewport-renderer/viewport-renderer.ts index 1b7a9b7bd..842ce2558 100644 --- a/blocksuite/affine/shared/src/viewport-renderer/viewport-renderer.ts +++ b/blocksuite/affine/shared/src/viewport-renderer/viewport-renderer.ts @@ -6,15 +6,15 @@ import { } from '@blocksuite/block-std'; import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx'; import { type Container, type ServiceIdentifier } from '@blocksuite/global/di'; -import { nextTick } from '@blocksuite/global/utils'; +import { debounce, DisposableGroup } from '@blocksuite/global/utils'; import { type Pane } from 'tweakpane'; import { - getSectionLayout, + getViewportLayout, initTweakpane, syncCanvasSize, } from './dom-utils.js'; -import { type SectionLayout } from './types.js'; +import { type ViewportLayout } from './types.js'; export const ViewportTurboRendererIdentifier = LifeCycleWatcherIdentifier( 'ViewportTurboRenderer' @@ -22,10 +22,12 @@ export const ViewportTurboRendererIdentifier = LifeCycleWatcherIdentifier( interface Tile { bitmap: ImageBitmap; + zoom: number; } export class ViewportTurboRendererExtension extends LifeCycleWatcher { state: 'monitoring' | 'paused' = 'paused'; + disposables = new DisposableGroup(); static override setup(di: Container) { di.addImpl(ViewportTurboRendererIdentifier, this, [StdIdentifier]); @@ -33,8 +35,7 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher { public readonly canvas: HTMLCanvasElement = document.createElement('canvas'); private readonly worker: Worker; - private lastZoom: number | null = null; - private lastSection: SectionLayout | null = null; + private layoutCache: ViewportLayout | null = null; private tile: Tile | null = null; private debugPane: Pane | null = null; @@ -56,6 +57,16 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher { this.refresh().catch(console.error); }); + const debounceOptions = { leading: false, trailing: true }; + const debouncedLayoutUpdate = debounce( + () => this.updateLayoutCache(), + 500, + debounceOptions + ); + this.disposables.add( + this.std.store.slots.blockUpdated.on(debouncedLayoutUpdate) + ); + document.fonts.load('15px Inter').then(() => { // this.state = 'monitoring'; this.refresh().catch(console.error); @@ -73,6 +84,7 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher { } this.worker.terminate(); this.canvas.remove(); + this.disposables.dispose(); } get viewport() { @@ -82,30 +94,35 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher { async refresh(force = false) { if (this.state === 'paused' && !force) return; - await nextTick(); // Improves stability during zooming - - if (this.canUseCache()) { - this.drawCachedBitmap(this.lastSection!); + if (this.canUseBitmapCache()) { + this.drawCachedBitmap(this.layoutCache!); } else { - const section = getSectionLayout(this.std.host, this.viewport); - await this.paintSection(section); - this.lastSection = section; - this.lastZoom = this.viewport.zoom; - this.drawCachedBitmap(section); + // Unneeded most of the time, the DOM query is debounced after block update + if (!this.layoutCache) { + this.updateLayoutCache(); + } + + await this.paintLayout(this.layoutCache!); + this.drawCachedBitmap(this.layoutCache!); } } - private async paintSection(section: SectionLayout): Promise { + private updateLayoutCache() { + const layout = getViewportLayout(this.std.host, this.viewport); + this.layoutCache = layout; + } + + private async paintLayout(layout: ViewportLayout): Promise { return new Promise(resolve => { if (!this.worker) return; const dpr = window.devicePixelRatio; this.worker.postMessage({ - type: 'paintSection', + type: 'paintLayout', data: { - section, - width: section.rect.w, - height: section.rect.h, + layout, + width: layout.rect.w, + height: layout.rect.h, dpr, zoom: this.viewport.zoom, }, @@ -113,7 +130,7 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher { this.worker.onmessage = (e: MessageEvent) => { if (e.data.type === 'bitmapPainted') { - this.handlePaintedBitmap(e.data.bitmap, section, resolve); + this.handlePaintedBitmap(e.data.bitmap, layout, resolve); } }; }); @@ -121,40 +138,43 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher { private handlePaintedBitmap( bitmap: ImageBitmap, - section: SectionLayout, + layout: ViewportLayout, resolve: () => void ) { if (this.tile) { this.tile.bitmap.close(); } - this.tile = { bitmap }; - this.drawCachedBitmap(section); + this.tile = { + bitmap, + zoom: this.viewport.zoom, + }; + this.drawCachedBitmap(layout); resolve(); } - private canUseCache(): boolean { + private canUseBitmapCache(): boolean { return ( - !!this.lastSection && !!this.tile && this.viewport.zoom === this.lastZoom + !!this.layoutCache && !!this.tile && this.viewport.zoom === this.tile.zoom ); } - private drawCachedBitmap(section: SectionLayout) { + private drawCachedBitmap(layout: ViewportLayout) { const bitmap = this.tile!.bitmap; const ctx = this.canvas.getContext('2d'); if (!ctx) return; ctx.clearRect(0, 0, this.canvas.width, this.canvas.height); - const sectionViewCoord = this.viewport.toViewCoord( - section.rect.x, - section.rect.y + const layoutViewCoord = this.viewport.toViewCoord( + layout.rect.x, + layout.rect.y ); ctx.drawImage( bitmap, - sectionViewCoord[0] * window.devicePixelRatio, - sectionViewCoord[1] * window.devicePixelRatio, - section.rect.w * window.devicePixelRatio * this.viewport.zoom, - section.rect.h * window.devicePixelRatio * this.viewport.zoom + layoutViewCoord[0] * window.devicePixelRatio, + layoutViewCoord[1] * window.devicePixelRatio, + layout.rect.w * window.devicePixelRatio * this.viewport.zoom, + layout.rect.h * window.devicePixelRatio * this.viewport.zoom ); } }