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

Closes: BS-2650

blocksuite/affine/gfx/shape/src/draggable/shape-draggable.ts

@@ -1,5 +1,6 @@
 import {
   CanvasElementType,
+  DefaultTool,
   EdgelessCRUDIdentifier,
 } from '@blocksuite/affine-block-surface';
 import {
@@ -137,7 +138,7 @@ export class EdgelessToolbarShapeDraggable extends EdgelessToolbarToolMixin(
 
   draggingShape: DraggableShape['name'] = 'roundedRect';
 
-  override type = 'shape' as const;
+  override type = ShapeTool;
 
   get crud() {
     return this.edgeless.std.get(EdgelessCRUDIdentifier);
@@ -169,8 +170,7 @@ export class EdgelessToolbarShapeDraggable extends EdgelessToolbarToolMixin(
           this.draggableController.states.draggingElement?.data.name;
         if (!shapeName) return;
 
-        this.setEdgelessTool({
-          type: 'shape',
+        this.setEdgelessTool(ShapeTool, {
           shapeName,
         });
         const controller = this.gfx.tool.currentTool$.peek();
@@ -206,8 +206,7 @@ export class EdgelessToolbarShapeDraggable extends EdgelessToolbarToolMixin(
         this._setShapeOverlayLock(false);
         this.readyToDrop = false;
 
-        // @ts-expect-error FIXME: resolve after gfx tool refactor
-        this.gfx.tool.setTool('default');
+        this.gfx.tool.setTool(DefaultTool);
         this.gfx.selection.set({
           elements: [id],
           editing: false,
@@ -265,7 +264,7 @@ export class EdgelessToolbarShapeDraggable extends EdgelessToolbarToolMixin(
             const clientPos = { x: x + left, y: y + top };
             this.draggableController.dragAndMoveTo(el, clientPos);
           } else {
-            this.setEdgelessTool('shape', {
+            this.setEdgelessTool(ShapeTool, {
               shapeName: this.draggingShape,
             });
           }

blocksuite/affine/gfx/shape/src/draggable/shape-menu.ts

@@ -15,12 +15,16 @@ import type { ColorEvent } from '@blocksuite/affine-shared/utils';
 import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
 import { StyleGeneralIcon, StyleScribbleIcon } from '@blocksuite/icons/lit';
 import type { BlockComponent } from '@blocksuite/std';
-import { GfxControllerIdentifier } from '@blocksuite/std/gfx';
+import {
+  GfxControllerIdentifier,
+  type ToolOptionWithType,
+} from '@blocksuite/std/gfx';
 import { computed, effect, type Signal, signal } from '@preact/signals-core';
 import { css, html, LitElement } from 'lit';
 import { property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
 
+import { ShapeTool } from '../shape-tool';
 import { ShapeComponentConfig } from '../toolbar';
 
 export class EdgelessShapeMenu extends SignalWatcher(
@@ -115,8 +119,12 @@ export class EdgelessShapeMenu extends SignalWatcher(
       effect(() => {
         const value = gfx.tool.currentToolOption$.value;
 
-        if (value && value.type === 'shape') {
-          this._shapeName$.value = value.shapeName;
+        if (value && value.toolType === ShapeTool) {
+          const shapeName = (value as ToolOptionWithType<ShapeTool>).options
+            ?.shapeName;
+          if (shapeName) {
+            this._shapeName$.value = shapeName;
+          }
         }
       })
     );

blocksuite/affine/gfx/shape/src/draggable/shape-tool-button.ts

@@ -38,7 +38,7 @@ export class EdgelessShapeToolButton extends EdgelessToolbarToolMixin(
     if (!this.popper) this._toggleMenu();
   };
 
-  override type = 'shape' as const;
+  override type = ShapeTool;
 
   private _toggleMenu() {
     this.createPopper('edgeless-shape-menu', this, {

blocksuite/affine/gfx/shape/src/draggable/shape-tool-element.ts

@@ -1,5 +1,6 @@
 import {
   CanvasElementType,
+  DefaultTool,
   EdgelessCRUDIdentifier,
 } from '@blocksuite/affine-block-surface';
 import {
@@ -109,8 +110,7 @@ export class EdgelessShapeToolElement extends WithDisposable(LitElement) {
       return;
     }
     this._dragging = false;
-    // @ts-expect-error FIXME: resolve after gfx tool refactor
-    this.gfx.tool.setTool('default');
+    this.gfx.tool.setTool(DefaultTool);
     if (this._isOutside) {
       const rect = this._shapeElement.getBoundingClientRect();
       this._backupShapeElement.style.setProperty('transition', 'none');

blocksuite/affine/gfx/shape/src/shape-tool.ts

@@ -1,5 +1,6 @@
 import {
   CanvasElementType,
+  DefaultTool,
   EXCLUDING_MOUSE_OUT_CLASS_LIST,
   type SurfaceBlockComponent,
 } from '@blocksuite/affine-block-surface';
@@ -180,8 +181,7 @@ export class ShapeTool extends BaseTool<ShapeToolOption> {
     const element = this.gfx.getElementById(id);
     if (!element) return;
 
-    // @ts-expect-error FIXME: resolve after gfx tool refactor
-    this.gfx.tool.setTool('default');
+    this.gfx.tool.setTool(DefaultTool);
     this.gfx.selection.set({
       elements: [element.id],
       editing: false,
@@ -257,8 +257,7 @@ export class ShapeTool extends BaseTool<ShapeToolOption> {
     const element = this.gfx.getElementById(id);
     if (!element) return;
 
-    // @ts-expect-error FIXME: resolve after gfx tool refactor
-    this.controller.setTool('default');
+    this.controller.setTool(DefaultTool);
     this.gfx.selection.set({
       elements: [element.id],
     });

blocksuite/affine/gfx/shape/src/text/edgeless-shape-text-editor.ts

@@ -1,4 +1,5 @@
 import {
+  DefaultTool,
   EdgelessCRUDIdentifier,
   TextUtils,
 } from '@blocksuite/affine-block-surface';
@@ -49,8 +50,7 @@ export function mountShapeTextEditor(
     return;
   }
 
-  // @ts-expect-error FIXME: resolve after gfx tool refactor
-  gfx.tool.setTool('default');
+  gfx.tool.setTool(DefaultTool);
   gfx.selection.set({
     elements: [shapeElement.id],
     editing: true,