refactor(editor): remove gfx tool global type (#12116)

Closes: BS-2650

blocksuite/affine/gfx/brush/src/toolbar/components/eraser/eraser-tool-button.ts

@@ -1,8 +1,9 @@
+import { DefaultTool } from '@blocksuite/affine-block-surface';
 import { ThemeProvider } from '@blocksuite/affine-shared/services';
 import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
-import type { GfxToolsFullOptionValue } from '@blocksuite/std/gfx';
 import { css, html, LitElement } from 'lit';
 
+import { EraserTool } from '../../../eraser-tool';
 import { EdgelessEraserDarkIcon, EdgelessEraserLightIcon } from './icons.js';
 
 export class EdgelessEraserToolButton extends EdgelessToolbarToolMixin(
@@ -33,16 +34,15 @@ export class EdgelessEraserToolButton extends EdgelessToolbarToolMixin(
 
   override enableActiveBackground = true;
 
-  override type: GfxToolsFullOptionValue['type'] = 'eraser';
+  override type = EraserTool;
 
   override firstUpdated() {
     this.disposables.add(
       this.edgeless.bindHotKey(
         {
           Escape: () => {
-            if (this.edgelessTool.type === 'eraser') {
-              // @ts-expect-error FIXME: resolve after gfx tool refactor
-              this.setEdgelessTool({ type: 'default' });
+            if (this.edgelessTool.toolType === EraserTool) {
+              this.setEdgelessTool(DefaultTool);
             }
           },
         },
@@ -52,7 +52,7 @@ export class EdgelessEraserToolButton extends EdgelessToolbarToolMixin(
   }
 
   override render() {
-    const type = this.edgelessTool?.type;
+    const type = this.edgelessTool?.toolType;
     const appTheme = this.edgeless.std.get(ThemeProvider).app$.value;
     const icon =
       appTheme === 'dark' ? EdgelessEraserDarkIcon : EdgelessEraserLightIcon;
@@ -65,8 +65,8 @@ export class EdgelessEraserToolButton extends EdgelessToolbarToolMixin(
           data-shortcut="${'E'}"
         ></affine-tooltip-content-with-shortcut>`}
         .tooltipOffset=${4}
-        .active=${type === 'eraser'}
-        @click=${() => this.setEdgelessTool({ type: 'eraser' })}
+        .active=${type === EraserTool}
+        @click=${() => this.setEdgelessTool(EraserTool)}
       >
         <div class="eraser-button">${icon}</div>
       </edgeless-toolbar-button>

blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-menu.ts

@@ -16,6 +16,8 @@ import { css, html, LitElement, type TemplateResult } from 'lit';
 import { property } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
+import { BrushTool } from '../../../brush-tool';
+import { HighlighterTool } from '../../../highlighter-tool';
 import { penInfoMap } from './consts';
 import type { Pen, PenMap } from './types';
 
@@ -80,7 +82,11 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
 
   private readonly _onPickPen = (tool: Pen) => {
     this.pen$.value = tool;
-    this.setEdgelessTool(tool);
+    if (tool === 'brush') {
+      this.setEdgelessTool(BrushTool);
+    } else {
+      this.setEdgelessTool(HighlighterTool);
+    }
   };
 
   private readonly _onPickColor = (e: ColorEvent) => {
@@ -91,7 +97,7 @@ export class EdgelessPenMenu extends EdgelessToolbarToolMixin(
     this.onChange({ color });
   };
 
-  override type: Pen[] = ['brush', 'highlighter'];
+  override type = [BrushTool, HighlighterTool];
 
   override render() {
     const {

blocksuite/affine/gfx/brush/src/toolbar/components/pen/pen-tool-button.ts

@@ -10,6 +10,8 @@ import { css, html, LitElement, nothing } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 import { when } from 'lit/directives/when.js';
 
+import { BrushTool } from '../../../brush-tool';
+import { HighlighterTool } from '../../../highlighter-tool';
 import { penIconMap, penInfoMap } from './consts';
 import type { Pen } from './types';
 
@@ -97,19 +99,19 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
 
   override enableActiveBackground = true;
 
-  override type: Pen[] = ['brush', 'highlighter'];
+  override type = [BrushTool, HighlighterTool];
 
   override firstUpdated() {
     this.disposables.add(
       this.gfx.tool.currentToolName$.subscribe(name => {
-        const tool = this.type.find(t => t === name);
+        const tool = this.type.find(t => t.toolName === name);
         if (!tool) {
           this.tryDisposePopper();
           return;
         }
 
-        if (tool !== this.pen$.peek()) {
-          this.pen$.value = tool;
+        if (tool.toolName !== this.pen$.peek()) {
+          this.pen$.value = tool.toolName as Pen;
         }
 
         if (this.active) return;
@@ -121,7 +123,17 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
 
   private _togglePenMenu() {
     if (this.tryDisposePopper()) return;
-    !this.active && this.setEdgelessTool(this.pen$.peek());
+    const setPenByType = (pen: Pen) => {
+      if (pen === 'brush') {
+        this.setEdgelessTool(BrushTool);
+      } else {
+        this.setEdgelessTool(HighlighterTool);
+      }
+    };
+    if (!this.active) {
+      const pen = this.pen$.peek();
+      setPenByType(pen);
+    }
     const menu = this.createPopper('edgeless-pen-menu', this);
     Object.assign(menu.element, {
       colors$: this.colors$,
@@ -132,7 +144,7 @@ export class EdgelessPenToolButton extends EdgelessToolbarToolMixin(
       onChange: (props: Record<string, unknown>) => {
         const pen = this.pen$.peek();
         this.edgeless.std.get(EditPropsStore).recordLastProps(pen, props);
-        this.setEdgelessTool(pen);
+        setPenByType(pen);
       },
     });
   }

blocksuite/affine/gfx/brush/src/toolbar/components/pen/types.ts

@@ -1,8 +1,3 @@
-import type { GfxToolsFullOptionValue } from '@blocksuite/std/gfx';
-
-export type Pen = Extract<
-  GfxToolsFullOptionValue['type'],
-  'brush' | 'highlighter'
->;
+export type Pen = 'brush' | 'highlighter';
 
 export type PenMap<T> = Record<Pen, T>;