refactor(editor): extract brush element renderer (#11460)

blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts

@@ -5,6 +5,7 @@ import {
 } from '@blocksuite/affine-block-frame';
 import { ConnectionOverlay } from '@blocksuite/affine-block-surface';
 import {
+  BrushElementRendererExtension,
   BrushTool,
   EraserTool,
   HighlighterTool,
@@ -52,6 +53,10 @@ export const EdgelessToolExtension: ExtensionType[] = [
   HighlighterTool,
 ];
 
+export const EdgelessElementRendererExtension: ExtensionType[] = [
+  BrushElementRendererExtension,
+];
+
 export const EdgelessEditExtensions: ExtensionType[] = [
   ElementTransformManager,
   ConnectorFilter,
@@ -74,4 +79,5 @@ export const EdgelessBuiltInSpecs: ExtensionType[] = [
   EdgelessToolExtension,
   EdgelessBuiltInManager,
   EdgelessEditExtensions,
+  EdgelessElementRendererExtension,
 ].flat();

blocksuite/affine/blocks/block-surface/src/renderer/elements/index.ts

@@ -7,7 +7,6 @@ import type {
 import { ElementRendererExtension } from '../../extensions/element-renderer.js';
 import type { RoughCanvas } from '../../index.js';
 import type { CanvasRenderer } from '../canvas-renderer.js';
-import { brush } from './brush/index.js';
 import { connector } from './connector/index.js';
 import { group } from './group/index.js';
 import { highlighter } from './highlighter/index.js';
@@ -29,11 +28,6 @@ export type ElementRenderer<
   viewportBound: IBound
 ) => void;
 
-export const BrushElementRendererExtension = ElementRendererExtension(
-  'brush',
-  brush
-);
-
 export const HighlighterElementRendererExtension = ElementRendererExtension(
   'highlighter',
   highlighter
@@ -65,7 +59,6 @@ export const MindmapElementRendererExtension = ElementRendererExtension(
 );
 
 export const elementRendererExtensions = [
-  BrushElementRendererExtension,
   HighlighterElementRendererExtension,
   ConnectorElementRendererExtension,
   GroupElementRendererExtension,

blocksuite/affine/gfx/brush/src/element-renderer.ts

@@ -1,13 +1,15 @@
+import {
+  type ElementRenderer,
+  ElementRendererExtension,
+} from '@blocksuite/affine-block-surface';
 import { type BrushElementModel, DefaultTheme } from '@blocksuite/affine-model';
 
-import type { CanvasRenderer } from '../../canvas-renderer.js';
-
-export function brush(
-  model: BrushElementModel,
-  ctx: CanvasRenderingContext2D,
-  matrix: DOMMatrix,
-  renderer: CanvasRenderer
-) {
+export const brush: ElementRenderer<BrushElementModel> = (
+  model,
+  ctx,
+  matrix,
+  renderer
+) => {
   const { rotate } = model;
   const [, , w, h] = model.deserializedXYWH;
   const cx = w / 2;
@@ -22,4 +24,9 @@ export function brush(
   ctx.fillStyle = color;
 
   ctx.fill(new Path2D(model.commands));
-}
+};
+
+export const BrushElementRendererExtension = ElementRendererExtension(
+  'brush',
+  brush
+);

blocksuite/affine/gfx/brush/src/index.ts

@@ -1,4 +1,5 @@
 export * from './brush-tool';
+export * from './element-renderer';
 export * from './eraser-tool';
 export * from './highlighter-tool';
 export * from './toolbar/configs';