From b8452f56a88b6373671de85d6ebe4e3a2359a7ee Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Fri, 14 Mar 2025 05:26:58 +0000 Subject: [PATCH] feat(editor): block painter extension (#10847) --- .../src/turbo/paragraph-painter.worker.ts | 18 ++++++---- .../gfx/turbo-renderer/src/extension/index.ts | 19 ++++++++++ .../affine/gfx/turbo-renderer/src/index.ts | 1 + .../src/painter/painter.worker.ts | 35 ++++++++++--------- .../utils/turbo-painter-entry.worker.ts | 6 ++-- .../extensions/turbo-painter-entry.worker.ts | 6 ++-- 6 files changed, 54 insertions(+), 31 deletions(-) create mode 100644 blocksuite/affine/gfx/turbo-renderer/src/extension/index.ts diff --git a/blocksuite/affine/blocks/block-paragraph/src/turbo/paragraph-painter.worker.ts b/blocksuite/affine/blocks/block-paragraph/src/turbo/paragraph-painter.worker.ts index 4bed352a0..bc7aa91a3 100644 --- a/blocksuite/affine/blocks/block-paragraph/src/turbo/paragraph-painter.worker.ts +++ b/blocksuite/affine/blocks/block-paragraph/src/turbo/paragraph-painter.worker.ts @@ -1,8 +1,9 @@ -import type { - BlockLayout, - BlockLayoutPainter, - TextRect, - WorkerToHostMessage, +import { + type BlockLayout, + type BlockLayoutPainter, + BlockLayoutPainterExtension, + type TextRect, + type WorkerToHostMessage, } from '@blocksuite/affine-gfx-turbo-renderer'; interface SentenceLayout { @@ -39,7 +40,7 @@ function isParagraphLayout(layout: BlockLayout): layout is ParagraphLayout { return layout.type === 'affine:paragraph'; } -export class ParagraphLayoutPainter implements BlockLayoutPainter { +class ParagraphLayoutPainter implements BlockLayoutPainter { private static readonly supportFontFace = typeof FontFace !== 'undefined' && typeof self !== 'undefined' && @@ -114,3 +115,8 @@ export class ParagraphLayoutPainter implements BlockLayoutPainter { }); } } + +export const ParagraphLayoutPainterExtension = BlockLayoutPainterExtension( + 'affine:paragraph', + ParagraphLayoutPainter +); diff --git a/blocksuite/affine/gfx/turbo-renderer/src/extension/index.ts b/blocksuite/affine/gfx/turbo-renderer/src/extension/index.ts new file mode 100644 index 000000000..e38a5881c --- /dev/null +++ b/blocksuite/affine/gfx/turbo-renderer/src/extension/index.ts @@ -0,0 +1,19 @@ +import { createIdentifier } from '@blocksuite/global/di'; +import type { ExtensionType } from '@blocksuite/store'; + +import type { BlockLayoutPainter } from '../types'; + +export const BlockPainterProvider = createIdentifier( + 'block-painter-provider' +); + +export const BlockLayoutPainterExtension = ( + type: string, + painter: new () => BlockLayoutPainter +): ExtensionType => { + return { + setup: di => { + di.addImpl(BlockPainterProvider(type), painter); + }, + }; +}; diff --git a/blocksuite/affine/gfx/turbo-renderer/src/index.ts b/blocksuite/affine/gfx/turbo-renderer/src/index.ts index 5d088a41d..c26a98080 100644 --- a/blocksuite/affine/gfx/turbo-renderer/src/index.ts +++ b/blocksuite/affine/gfx/turbo-renderer/src/index.ts @@ -1,3 +1,4 @@ +export * from './extension'; export * from './layout/block-layout-provider'; export * from './painter/painter.worker'; export * from './text-utils'; diff --git a/blocksuite/affine/gfx/turbo-renderer/src/painter/painter.worker.ts b/blocksuite/affine/gfx/turbo-renderer/src/painter/painter.worker.ts index f3a8cd18b..6388780fa 100644 --- a/blocksuite/affine/gfx/turbo-renderer/src/painter/painter.worker.ts +++ b/blocksuite/affine/gfx/turbo-renderer/src/painter/painter.worker.ts @@ -1,3 +1,7 @@ +import { Container, type ServiceProvider } from '@blocksuite/global/di'; +import type { ExtensionType } from '@blocksuite/store'; + +import { BlockPainterProvider } from '../extension'; import type { BlockLayoutPainter, HostToWorkerMessage, @@ -5,28 +9,25 @@ import type { WorkerToHostMessage, } from '../types'; -class BlockPainterRegistry { - private readonly painters = new Map(); - - register(type: string, painter: BlockLayoutPainter) { - this.painters.set(type, painter); - } - - getPainter(type: string): BlockLayoutPainter | undefined { - return this.painters.get(type); - } -} - export class ViewportLayoutPainter { private readonly canvas: OffscreenCanvas = new OffscreenCanvas(0, 0); private ctx: OffscreenCanvasRenderingContext2D | null = null; private zoom = 1; - public readonly registry = new BlockPainterRegistry(); + public provider: ServiceProvider; - constructor(painters: Record) { - Object.entries(painters).forEach(([type, painter]) => { - this.registry.register(type, painter); + getPainter(type: string): BlockLayoutPainter | undefined { + return this.provider.get(BlockPainterProvider(type)); + } + + constructor(extensions: ExtensionType[]) { + const container = new Container(); + + extensions.forEach(extension => { + extension.setup(container); }); + + this.provider = container.provider(); + self.onmessage = this.handler; } @@ -60,7 +61,7 @@ export class ViewportLayoutPainter { ctx.scale(this.zoom, this.zoom); layout.blocks.forEach(blockLayout => { - const painter = this.registry.getPainter(blockLayout.type); + const painter = this.getPainter(blockLayout.type); if (!painter) return; painter.paint(ctx, blockLayout, layout.rect.x, layout.rect.y); }); diff --git a/blocksuite/integration-test/src/__tests__/utils/turbo-painter-entry.worker.ts b/blocksuite/integration-test/src/__tests__/utils/turbo-painter-entry.worker.ts index 93dcba993..58bc63fb1 100644 --- a/blocksuite/integration-test/src/__tests__/utils/turbo-painter-entry.worker.ts +++ b/blocksuite/integration-test/src/__tests__/utils/turbo-painter-entry.worker.ts @@ -1,6 +1,4 @@ -import { ParagraphLayoutPainter } from '@blocksuite/affine-block-paragraph/turbo-painter'; +import { ParagraphLayoutPainterExtension } from '@blocksuite/affine-block-paragraph/turbo-painter'; import { ViewportLayoutPainter } from '@blocksuite/affine-gfx-turbo-renderer/painter'; -new ViewportLayoutPainter({ - 'affine:paragraph': new ParagraphLayoutPainter(), -}); +new ViewportLayoutPainter([ParagraphLayoutPainterExtension]); diff --git a/packages/frontend/core/src/blocksuite/extensions/turbo-painter-entry.worker.ts b/packages/frontend/core/src/blocksuite/extensions/turbo-painter-entry.worker.ts index f160f6608..00369b590 100644 --- a/packages/frontend/core/src/blocksuite/extensions/turbo-painter-entry.worker.ts +++ b/packages/frontend/core/src/blocksuite/extensions/turbo-painter-entry.worker.ts @@ -1,6 +1,4 @@ -import { ParagraphLayoutPainter } from '@blocksuite/affine/blocks/paragraph'; +import { ParagraphLayoutPainterExtension } from '@blocksuite/affine/blocks/paragraph'; import { ViewportLayoutPainter } from '@blocksuite/affine/gfx/turbo-renderer'; -new ViewportLayoutPainter({ - 'affine:paragraph': new ParagraphLayoutPainter(), -}); +new ViewportLayoutPainter([ParagraphLayoutPainterExtension]);