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

Closes: BS-2650

blocksuite/affine/blocks/root/src/edgeless/clipboard/clipboard.ts

@@ -2,6 +2,7 @@ import { addAttachments } from '@blocksuite/affine-block-attachment';
 import { EdgelessFrameManagerIdentifier } from '@blocksuite/affine-block-frame';
 import { addImages } from '@blocksuite/affine-block-image';
 import {
+  DefaultTool,
   EdgelessCRUDIdentifier,
   ExportManager,
   getSurfaceComponent,
@@ -608,7 +609,7 @@ export class EdgelessClipboardController extends PageClipboard {
       elements: [noteId],
       editing: false,
     });
-    this.gfx.tool.setTool('default');
+    this.gfx.tool.setTool(DefaultTool);
   }
 
   copy() {

blocksuite/affine/blocks/root/src/edgeless/components/rects/edgeless-dragging-area-rect.ts

@@ -1,7 +1,7 @@
 import {
   DefaultModeDragType,
   DefaultTool,
-} from '@blocksuite/affine-gfx-pointer';
+} from '@blocksuite/affine-block-surface';
 import type { RootBlockModel } from '@blocksuite/affine-model';
 import { WidgetComponent } from '@blocksuite/std';
 import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
@@ -41,6 +41,7 @@ export class EdgelessDraggingAreaRectWidget extends WidgetComponent<RootBlockMod
     if (
       rect.w === 0 ||
       rect.h === 0 ||
+      !tool ||
       !(tool instanceof DefaultTool) ||
       tool.dragType !== DefaultModeDragType.Selecting
     )

blocksuite/affine/blocks/root/src/edgeless/configs/toolbar/misc.ts

@@ -3,6 +3,7 @@ import {
   EdgelessCRUDIdentifier,
   getSurfaceComponent,
 } from '@blocksuite/affine-block-surface';
+import { ConnectorTool } from '@blocksuite/affine-gfx-connector';
 import {
   createGroupCommand,
   createGroupFromSelectedCommand,
@@ -196,9 +197,9 @@ export const builtinMiscToolbarConfig = {
           const point = ctx.gfx.viewport.toViewCoordFromClientCoord([x, y]);
 
           ctx.store.captureSync();
-          ctx.gfx.tool.setTool('connector', { mode: DEFAULT_CONNECTOR_MODE });
+          ctx.gfx.tool.setTool(ConnectorTool, { mode: DEFAULT_CONNECTOR_MODE });
 
-          const ctc = ctx.gfx.tool.get('connector');
+          const ctc = ctx.gfx.tool.get(ConnectorTool);
           ctc.quickConnect(point, models[0]);
         };
 

blocksuite/affine/blocks/root/src/edgeless/edgeless-keyboard.ts

@@ -1,8 +1,17 @@
 import { insertLinkByQuickSearchCommand } from '@blocksuite/affine-block-bookmark';
 import { EdgelessTextBlockComponent } from '@blocksuite/affine-block-edgeless-text';
-import { isNoteBlock } from '@blocksuite/affine-block-surface';
+import { FrameTool } from '@blocksuite/affine-block-frame';
+import { DefaultTool, isNoteBlock } from '@blocksuite/affine-block-surface';
 import { toast } from '@blocksuite/affine-components/toast';
-import { mountConnectorLabelEditor } from '@blocksuite/affine-gfx-connector';
+import {
+  BrushTool,
+  EraserTool,
+  HighlighterTool,
+} from '@blocksuite/affine-gfx-brush';
+import {
+  ConnectorTool,
+  mountConnectorLabelEditor,
+} from '@blocksuite/affine-gfx-connector';
 import {
   createGroupFromSelectedCommand,
   ungroupCommand,
@@ -12,7 +21,10 @@ import {
   isElementOutsideViewport,
   isSingleMindMapNode,
 } from '@blocksuite/affine-gfx-mindmap';
+import { NoteTool } from '@blocksuite/affine-gfx-note';
+import { PanTool } from '@blocksuite/affine-gfx-pointer';
 import { mountShapeTextEditor, ShapeTool } from '@blocksuite/affine-gfx-shape';
+import { TextTool } from '@blocksuite/affine-gfx-text';
 import {
   ConnectorElementModel,
   ConnectorMode,
@@ -33,11 +45,12 @@ import { IS_MAC } from '@blocksuite/global/env';
 import { Bound, getCommonBound } from '@blocksuite/global/gfx';
 import { SurfaceSelection, TextSelection } from '@blocksuite/std';
 import {
+  type BaseTool,
   GfxBlockElementModel,
   type GfxPrimitiveElementModel,
-  type GfxToolsMap,
-  type GfxToolsOption,
   isGfxGroupCompatibleModel,
+  type ToolOptions,
+  type ToolType,
 } from '@blocksuite/std/gfx';
 
 import { PageKeyboardManager } from '../keyboard/keyboard-manager.js';
@@ -61,38 +74,38 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
     this.rootComponent.bindHotKey(
       {
         v: () => {
-          this._setEdgelessTool('default');
+          this._setEdgelessTool(DefaultTool);
         },
         t: () => {
-          this._setEdgelessTool('text');
+          this._setEdgelessTool(TextTool);
         },
         c: () => {
           const mode = ConnectorMode.Curve;
           rootComponent.std.get(EditPropsStore).recordLastProps('connector', {
             mode,
           });
-          this._setEdgelessTool('connector', { mode });
+          this._setEdgelessTool(ConnectorTool, { mode });
         },
         h: () => {
-          this._setEdgelessTool('pan', {
+          this._setEdgelessTool(PanTool, {
             panning: false,
           });
         },
         n: () => {
-          this._setEdgelessTool('affine:note', {
+          this._setEdgelessTool(NoteTool, {
             childFlavour: DEFAULT_NOTE_CHILD_FLAVOUR,
             childType: DEFAULT_NOTE_CHILD_TYPE,
             tip: DEFAULT_NOTE_TIP,
           });
         },
         p: () => {
-          this._setEdgelessTool('brush');
+          this._setEdgelessTool(BrushTool);
         },
         'Shift-p': () => {
-          this._setEdgelessTool('highlighter');
+          this._setEdgelessTool(HighlighterTool);
         },
         e: () => {
-          this._setEdgelessTool('eraser');
+          this._setEdgelessTool(EraserTool);
         },
         k: () => {
           if (this.rootComponent.service.locked) return;
@@ -128,7 +141,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
               });
             rootComponent.surface.fitToViewport(Bound.deserialize(frame.xywh));
           } else if (!this.rootComponent.service.selection.editing) {
-            this._setEdgelessTool('frame');
+            this._setEdgelessTool(FrameTool);
           }
         },
         '-': () => {
@@ -184,7 +197,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
           }
           const { shapeName } = controller.activatedOption;
           const nextShapeName = getNextShapeType(shapeName);
-          this._setEdgelessTool('shape', {
+          this._setEdgelessTool(ShapeTool, {
             shapeName: nextShapeName,
           });
 
@@ -633,11 +646,9 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
     });
   }
 
-  private _setEdgelessTool<K extends keyof GfxToolsMap>(
-    toolName: K,
-    ...options: K extends keyof GfxToolsOption
-      ? [option: GfxToolsOption[K], ignoreActiveState?: boolean]
-      : [option: void, ignoreActiveState?: boolean]
+  private _setEdgelessTool<T extends BaseTool>(
+    toolType: ToolType<T>,
+    ...options: [options?: ToolOptions<T>, ignoreActiveState?: boolean]
   ) {
     const ignoreActiveState =
       typeof options === 'boolean'
@@ -651,9 +662,8 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
       return;
     }
 
-    this.rootComponent.gfx.tool.setTool<K>(
-      toolName,
-      // @ts-expect-error FIXME: ts error
+    this.rootComponent.gfx.tool.setTool(
+      toolType,
       options[0] !== undefined && typeof options[0] !== 'boolean'
         ? options[0]
         : undefined
@@ -678,8 +688,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
     const revertToPrevTool = (ev: KeyboardEvent) => {
       if (ev.code === 'Space') {
         this._setEdgelessTool(
-          // @ts-expect-error FIXME: ts error
-          currentTool.toolName,
+          (currentTool as DefaultTool).constructor as typeof DefaultTool,
           currentTool?.activatedOption
         );
         selection.set(currentSel);
@@ -694,7 +703,7 @@ export class EdgelessPageKeyboardManager extends PageKeyboardManager {
       ) {
         return;
       }
-      this._setEdgelessTool('pan', { panning: false });
+      this._setEdgelessTool(PanTool, { panning: false });
 
       edgeless.dispatcher.disposables.addFromEvent(
         document,

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

@@ -1,14 +1,14 @@
 import { NoteConfigExtension } from '@blocksuite/affine-block-note';
-import type {
-  SurfaceBlockComponent,
-  SurfaceBlockModel,
-} from '@blocksuite/affine-block-surface';
 import {
+  DefaultTool,
   EdgelessLegacySlotIdentifier,
   getBgGridGap,
   normalizeWheelDeltaY,
+  type SurfaceBlockComponent,
+  type SurfaceBlockModel,
 } from '@blocksuite/affine-block-surface';
 import { isSingleMindMapNode } from '@blocksuite/affine-gfx-mindmap';
+import { PanTool } from '@blocksuite/affine-gfx-pointer';
 import { mountShapeTextEditor } from '@blocksuite/affine-gfx-shape';
 import {
   NoteBlockModel,
@@ -468,9 +468,9 @@ export class EdgelessRootBlockComponent extends BlockComponent<
     this._initPinchEvent();
 
     if (this.doc.readonly) {
-      this.gfx.tool.setTool('pan', { panning: true });
+      this.gfx.tool.setTool(PanTool, { panning: true });
     } else {
-      this.gfx.tool.setTool('default');
+      this.gfx.tool.setTool(DefaultTool);
     }
 
     this.gfx.viewport.elementReady.next(this.gfxViewportElm);

blocksuite/affine/blocks/root/src/edgeless/utils/query.ts

@@ -1,4 +1,5 @@
 import type { CanvasElementWithText } from '@blocksuite/affine-block-surface';
+import type { PanTool } from '@blocksuite/affine-gfx-pointer';
 import {
   type AttachmentBlockModel,
   type BookmarkBlockModel,
@@ -26,7 +27,7 @@ import { Bound } from '@blocksuite/global/gfx';
 import type {
   GfxModel,
   GfxPrimitiveElementModel,
-  GfxToolsFullOptionValue,
+  ToolOptionWithType,
 } from '@blocksuite/std/gfx';
 import type { BlockModel } from '@blocksuite/store';
 
@@ -191,15 +192,17 @@ export function isConnectable(
 }
 
 // https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
-export function getCursorMode(edgelessTool: GfxToolsFullOptionValue | null) {
+export function getCursorMode(edgelessTool: ToolOptionWithType) {
   if (!edgelessTool) {
     return 'default';
   }
-  switch (edgelessTool.type) {
+  switch (edgelessTool.toolType?.toolName) {
     case 'default':
       return 'default';
     case 'pan':
-      return edgelessTool.panning ? 'grabbing' : 'grab';
+      return (edgelessTool as ToolOptionWithType<PanTool>).options?.panning
+        ? 'grabbing'
+        : 'grab';
     case 'brush':
     case 'highlighter':
       return drawingCursor;