From 5a1106fb88b6c9a1123ad0e03846c0fcf03c77f2 Mon Sep 17 00:00:00 2001
From: Saul-Mirone <Saul-Mirone@outlook.com>
Date: Fri, 4 Apr 2025 13:09:45 +0000
Subject: [PATCH] refactor(editor): extract brush element renderer (#11460)

---
 .../src/edgeless/edgeless-builtin-spec.ts     |  6 +++++
 .../src/renderer/elements/index.ts            |  7 ------
 .../brush/src/element-renderer.ts}            | 25 ++++++++++++-------
 blocksuite/affine/gfx/brush/src/index.ts      |  1 +
 4 files changed, 23 insertions(+), 16 deletions(-)
 rename blocksuite/affine/{blocks/block-surface/src/renderer/elements/brush/index.ts => gfx/brush/src/element-renderer.ts} (59%)

diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts
index aa3613559a..2aed57a44e 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-builtin-spec.ts
+++ b/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();
diff --git a/blocksuite/affine/blocks/block-surface/src/renderer/elements/index.ts b/blocksuite/affine/blocks/block-surface/src/renderer/elements/index.ts
index a5794675e5..5a0c9c8452 100644
--- a/blocksuite/affine/blocks/block-surface/src/renderer/elements/index.ts
+++ b/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,
diff --git a/blocksuite/affine/blocks/block-surface/src/renderer/elements/brush/index.ts b/blocksuite/affine/gfx/brush/src/element-renderer.ts
similarity index 59%
rename from blocksuite/affine/blocks/block-surface/src/renderer/elements/brush/index.ts
rename to blocksuite/affine/gfx/brush/src/element-renderer.ts
index 7565b4a78a..95c00a543a 100644
--- a/blocksuite/affine/blocks/block-surface/src/renderer/elements/brush/index.ts
+++ b/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
+);
diff --git a/blocksuite/affine/gfx/brush/src/index.ts b/blocksuite/affine/gfx/brush/src/index.ts
index 12c4d1f16e..99826d345f 100644
--- a/blocksuite/affine/gfx/brush/src/index.ts
+++ b/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';