luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

perf(editor): use clipped section for worker bitmap cache (#9957)

Browse Source 
Before (grey area as rendered canvas bitmap):

<img width="1114" alt="image" src="https://github.com/user-attachments/assets/9a209818-c388-4e55-af9b-116f24bd8027" />

After:

<img width="1103" alt="image" src="https://github.com/user-attachments/assets/1102264a-ec21-4c0c-b4b6-e82a64b1a844" />
This commit is contained in:
doodlewind
2025-02-05 11:54:03 +00:00
parent 9bc085ff1b
commit 56d604f685
4 changed files with 78 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
blocksuite/playground/examples/renderer/animator.ts
View File

@@ -2,7 +2,7 @@ import { type AffineEditorContainer } from '@blocksuite/presets';
import { CanvasRenderer } from './canvas-renderer.js'; import { CanvasRenderer } from './canvas-renderer.js';
import { editor } from './editor.js'; import { editor } from './editor.js';
import type { ParagraphLayout } from './types.js'; import type { SectionLayout } from './types.js';
async function wait(time: number = 100) { async function wait(time: number = 100) {
return new Promise(resolve => setTimeout(resolve, time)); return new Promise(resolve => setTimeout(resolve, time));
@@ -34,8 +34,8 @@ export class SwitchModeAnimator {
this.overlay.style.display = 'inherit'; this.overlay.style.display = 'inherit';
await this.animate( await this.animate(
beginLayout.paragraphs, beginLayout.section,
endLayout.paragraphs, endLayout.section,
beginLayout.hostRect, beginLayout.hostRect,
endLayout.hostRect endLayout.hostRect
); );
@@ -43,8 +43,8 @@ export class SwitchModeAnimator {
} }
async animate( async animate(
beginParagraphs: ParagraphLayout[], beginSection: SectionLayout,
endParagraphs: ParagraphLayout[], endSection: SectionLayout,
beginHostRect: DOMRect, beginHostRect: DOMRect,
endHostRect: DOMRect endHostRect: DOMRect
): Promise<void> { ): Promise<void> {
@@ -58,8 +58,8 @@ export class SwitchModeAnimator {
const progress = Math.min(elapsed / duration, 1); const progress = Math.min(elapsed / duration, 1);
this.renderer.renderTransitionFrame( this.renderer.renderTransitionFrame(
beginParagraphs, beginSection,
endParagraphs, endSection,
beginHostRect, beginHostRect,
endHostRect, endHostRect,
progress progress

79
blocksuite/playground/examples/renderer/canvas-renderer.ts
View File

@@ -2,7 +2,7 @@ import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
import type { AffineEditorContainer } from '@blocksuite/presets'; import type { AffineEditorContainer } from '@blocksuite/presets';
import { getSentenceRects, segmentSentences } from './text-utils.js'; import { getSentenceRects, segmentSentences } from './text-utils.js';
import { type ParagraphLayout } from './types.js'; import { type ParagraphLayout, type SectionLayout } from './types.js';
export class CanvasRenderer { export class CanvasRenderer {
private readonly worker: Worker; private readonly worker: Worker;
@@ -35,17 +35,34 @@ export class CanvasRenderer {
return this.editorContainer.std.get(GfxControllerIdentifier).viewport.zoom; return this.editorContainer.std.get(GfxControllerIdentifier).viewport.zoom;
} }
get hostLayout() { get hostLayout(): {
section: SectionLayout;
hostRect: DOMRect;
editorContainerRect: DOMRect;
} {
const paragraphBlocks = this.editorContainer.host!.querySelectorAll( const paragraphBlocks = this.editorContainer.host!.querySelectorAll(
'.affine-paragraph-rich-text-wrapper [data-v-text="true"]' '.affine-paragraph-rich-text-wrapper [data-v-text="true"]'
); );
const zoom = this.hostZoom; const zoom = this.hostZoom;
const hostRect = this.hostRect;
const editorContainerRect = this.editorContainer.getBoundingClientRect();
let sectionMinX = Infinity;
let sectionMinY = Infinity;
let sectionMaxX = -Infinity;
let sectionMaxY = -Infinity;
const paragraphs: ParagraphLayout[] = Array.from(paragraphBlocks).map(p => { const paragraphs: ParagraphLayout[] = Array.from(paragraphBlocks).map(p => {
const sentences = segmentSentences(p.textContent || ''); const sentences = segmentSentences(p.textContent || '');
const sentenceLayouts = sentences.map(sentence => { const sentenceLayouts = sentences.map(sentence => {
const rects = getSentenceRects(p, 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.width);
sectionMaxY = Math.max(sectionMaxY, rect.y + rect.height);
});
return { return {
text: sentence, text: sentence,
rects, rects,
@@ -58,14 +75,22 @@ export class CanvasRenderer {
}; };
}); });
const hostRect = this.hostRect; const section: SectionLayout = {
const editorContainerRect = this.editorContainer.getBoundingClientRect(); paragraphs,
return { paragraphs, hostRect, editorContainerRect }; rect: {
x: sectionMinX,
y: sectionMinY,
width: sectionMaxX - sectionMinX,
height: sectionMaxY - sectionMinY,
},
};
return { section, hostRect, editorContainerRect };
} }
public async render(toScreen = true): Promise<void> { public async render(toScreen = true): Promise<void> {
const { paragraphs, hostRect, editorContainerRect } = this.hostLayout; const { section, editorContainerRect } = this.hostLayout;
this.initWorkerSize(hostRect.width, hostRect.height); this.initWorkerSize(section.rect.width, section.rect.height);
return new Promise(resolve => { return new Promise(resolve => {
if (!this.worker) return; if (!this.worker) return;
@@ -73,8 +98,7 @@ export class CanvasRenderer {
this.worker.postMessage({ this.worker.postMessage({
type: 'draw', type: 'draw',
data: { data: {
paragraphs, section,
hostRect,
}, },
}); });
@@ -94,8 +118,8 @@ export class CanvasRenderer {
const ctx = this.canvas.getContext('2d'); const ctx = this.canvas.getContext('2d');
const bitmapCanvas = new OffscreenCanvas( const bitmapCanvas = new OffscreenCanvas(
hostRect.width * window.devicePixelRatio, section.rect.width * window.devicePixelRatio,
hostRect.height * window.devicePixelRatio section.rect.height * window.devicePixelRatio
); );
const bitmapCtx = bitmapCanvas.getContext('bitmaprenderer'); const bitmapCtx = bitmapCanvas.getContext('bitmaprenderer');
bitmapCtx?.transferFromImageBitmap(bitmap); bitmapCtx?.transferFromImageBitmap(bitmap);
@@ -107,10 +131,10 @@ export class CanvasRenderer {
ctx?.drawImage( ctx?.drawImage(
bitmapCanvas, bitmapCanvas,
(hostRect.x - editorContainerRect.x) * window.devicePixelRatio, (section.rect.x - editorContainerRect.x) * window.devicePixelRatio,
(hostRect.y - editorContainerRect.y) * window.devicePixelRatio, (section.rect.y - editorContainerRect.y) * window.devicePixelRatio,
hostRect.width * window.devicePixelRatio, section.rect.width * window.devicePixelRatio,
hostRect.height * window.devicePixelRatio section.rect.height * window.devicePixelRatio
); );
resolve(); resolve();
@@ -120,8 +144,8 @@ export class CanvasRenderer {
} }
public renderTransitionFrame( public renderTransitionFrame(
beginParagraphs: ParagraphLayout[], beginSection: SectionLayout,
endParagraphs: ParagraphLayout[], endSection: SectionLayout,
beginHostRect: DOMRect, beginHostRect: DOMRect,
endHostRect: DOMRect, endHostRect: DOMRect,
progress: number progress: number
@@ -185,18 +209,23 @@ export class CanvasRenderer {
// Draw paragraph rects // Draw paragraph rects
const maxParagraphs = Math.max( const maxParagraphs = Math.max(
beginParagraphs.length, beginSection.paragraphs.length,
endParagraphs.length endSection.paragraphs.length
); );
for (let i = 0; i < maxParagraphs; i++) { for (let i = 0; i < maxParagraphs; i++) {
const beginRect = const beginRect =
i < beginParagraphs.length i < beginSection.paragraphs.length
? getParagraphRect(beginParagraphs[i]) ? getParagraphRect(beginSection.paragraphs[i])
: getParagraphRect(endParagraphs[endParagraphs.length - 1]); : getParagraphRect(
endSection.paragraphs[endSection.paragraphs.length - 1]
);
const endRect = const endRect =
i < endParagraphs.length i < endSection.paragraphs.length
? getParagraphRect(endParagraphs[i]) ? getParagraphRect(endSection.paragraphs[i])
: getParagraphRect(beginParagraphs[beginParagraphs.length - 1]); : getParagraphRect(
beginSection.paragraphs[beginSection.paragraphs.length - 1]
);
const currentRect = interpolateRect(beginRect, endRect, progress); const currentRect = interpolateRect(beginRect, endRect, progress);
ctx.fillStyle = '#efefef'; ctx.fillStyle = '#efefef';

14
blocksuite/playground/examples/renderer/canvas.worker.ts
View File

@@ -1,4 +1,4 @@
import { type ParagraphLayout } from './types.js'; import { type SectionLayout } from './types.js';
const meta = { const meta = {
emSize: 2048, emSize: 2048,
@@ -38,14 +38,14 @@ class CanvasWorkerManager {
this.ctx.fillRect(0, 0, width, height); this.ctx.fillRect(0, 0, width, height);
} }
draw(paragraphs: ParagraphLayout[], hostRect: DOMRect) { draw(section: SectionLayout) {
const { canvas, ctx } = this; const { canvas, ctx } = this;
if (!canvas || !ctx) return; if (!canvas || !ctx) return;
// Track rendered positions to avoid duplicate rendering across all paragraphs and sentences // Track rendered positions to avoid duplicate rendering across all paragraphs and sentences
const renderedPositions = new Set<string>(); const renderedPositions = new Set<string>();
paragraphs.forEach(paragraph => { section.paragraphs.forEach(paragraph => {
const scale = paragraph.scale ?? 1; const scale = paragraph.scale ?? 1;
const fontSize = 15 * scale; const fontSize = 15 * scale;
ctx.font = `${fontSize}px Inter`; ctx.font = `${fontSize}px Inter`;
@@ -54,8 +54,8 @@ class CanvasWorkerManager {
paragraph.sentences.forEach(sentence => { paragraph.sentences.forEach(sentence => {
ctx.strokeStyle = 'yellow'; ctx.strokeStyle = 'yellow';
sentence.rects.forEach(textRect => { sentence.rects.forEach(textRect => {
const x = textRect.rect.left - hostRect.left; const x = textRect.rect.left - section.rect.x;
const y = textRect.rect.top - hostRect.top; const y = textRect.rect.top - section.rect.y;
const posKey = `${x},${y}`; const posKey = `${x},${y}`;
// Only render if we haven't rendered at this position before // Only render if we haven't rendered at this position before
@@ -87,8 +87,8 @@ self.onmessage = async (e: MessageEvent) => {
} }
case 'draw': { case 'draw': {
await font.load(); await font.load();
const { paragraphs, hostRect } = data; const { section } = data;
manager.draw(paragraphs, hostRect); manager.draw(section);
break; break;
} }
} }

10
blocksuite/playground/examples/renderer/types.ts
View File

@@ -12,3 +12,13 @@ export interface TextRect {
rect: DOMRect; rect: DOMRect;
text: string; text: string;
} }
export interface SectionLayout {
paragraphs: ParagraphLayout[];
rect: {
x: number;
y: number;
width: number;
height: number;
};
}