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

Closes: BS-2650

blocksuite/affine/blocks/frame/package.json

@@ -13,6 +13,7 @@
     "@blocksuite/affine-block-surface": "workspace:*",
     "@blocksuite/affine-components": "workspace:*",
     "@blocksuite/affine-ext-loader": "workspace:*",
+    "@blocksuite/affine-gfx-pointer": "workspace:*",
     "@blocksuite/affine-model": "workspace:*",
     "@blocksuite/affine-shared": "workspace:*",
     "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",

blocksuite/affine/blocks/frame/src/edgeless-toolbar/frame-dense-menu.ts

@@ -1,29 +1,30 @@
+import { DefaultTool } from '@blocksuite/affine-block-surface';
 import { menu } from '@blocksuite/affine-components/context-menu';
 import type { DenseMenuBuilder } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { FrameIcon } from '@blocksuite/icons/lit';
 
 import { EdgelessFrameManagerIdentifier } from '../frame-manager.js';
+import { FrameTool } from '../frame-tool';
 import { FrameConfig } from './config.js';
 
 export const buildFrameDenseMenu: DenseMenuBuilder = (edgeless, gfx) =>
   menu.subMenu({
     name: 'Frame',
     prefix: FrameIcon({ width: '20px', height: '20px' }),
-    select: () => gfx.tool.setTool({ type: 'frame' }),
+    select: () => gfx.tool.setTool(FrameTool),
     isSelected: gfx.tool.currentToolName$.peek() === 'frame',
     options: {
       items: [
         menu.action({
           name: 'Custom',
-          select: () => gfx.tool.setTool({ type: 'frame' }),
+          select: () => gfx.tool.setTool(FrameTool),
         }),
         ...FrameConfig.map(config =>
           menu.action({
             name: `Slide ${config.name}`,
             select: () => {
               const frame = edgeless.std.get(EdgelessFrameManagerIdentifier);
-              // @ts-expect-error FIXME: resolve after gfx tool refactor
-              gfx.tool.setTool('default');
+              gfx.tool.setTool(DefaultTool);
               frame.createFrameOnViewportCenter(config.wh);
             },
           })

blocksuite/affine/blocks/frame/src/edgeless-toolbar/frame-menu.ts

@@ -1,9 +1,10 @@
+import { DefaultTool } from '@blocksuite/affine-block-surface';
 import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
-import type { GfxToolsFullOptionValue } from '@blocksuite/std/gfx';
 import { css, html, LitElement } from 'lit';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { EdgelessFrameManagerIdentifier } from '../frame-manager.js';
+import { FrameTool } from '../frame-tool';
 import { FrameConfig } from './config.js';
 
 export class EdgelessFrameMenu extends EdgelessToolbarToolMixin(LitElement) {
@@ -65,7 +66,7 @@ export class EdgelessFrameMenu extends EdgelessToolbarToolMixin(LitElement) {
     }
   `;
 
-  override type: GfxToolsFullOptionValue['type'] = 'frame';
+  override type = FrameTool;
 
   get frameManager() {
     return this.edgeless.std.get(EdgelessFrameManagerIdentifier);
@@ -84,8 +85,7 @@ export class EdgelessFrameMenu extends EdgelessToolbarToolMixin(LitElement) {
             (item, index) => html`
               <div
                 @click=${() => {
-                  // @ts-expect-error FIXME: resolve after gfx tool refactor
-                  gfx.tool.setTool('default');
+                  gfx.tool.setTool(DefaultTool);
                   frameManager.createFrameOnViewportCenter(item.wh);
                 }}
                 class="frame-add-button ${index}"

blocksuite/affine/blocks/frame/src/edgeless-toolbar/frame-tool-button.ts

@@ -1,8 +1,9 @@
 import { QuickToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { FrameIcon } from '@blocksuite/icons/lit';
-import type { GfxToolsFullOptionValue } from '@blocksuite/std/gfx';
 import { css, html, LitElement } from 'lit';
 
+import { FrameTool } from '../frame-tool';
+
 export class EdgelessFrameToolButton extends QuickToolMixin(LitElement) {
   static override styles = css`
     :host {
@@ -10,7 +11,7 @@ export class EdgelessFrameToolButton extends QuickToolMixin(LitElement) {
     }
   `;
 
-  override type: GfxToolsFullOptionValue['type'] = 'frame';
+  override type = FrameTool;
 
   private _toggleFrameMenu() {
     if (this.tryDisposePopper()) return;
@@ -20,7 +21,7 @@ export class EdgelessFrameToolButton extends QuickToolMixin(LitElement) {
   }
 
   override render() {
-    const type = this.edgelessTool?.type;
+    const type = this.edgelessTool?.toolType?.toolName;
     return html`
       <edgeless-tool-icon-button
         class="edgeless-frame-button"
@@ -37,7 +38,7 @@ export class EdgelessFrameToolButton extends QuickToolMixin(LitElement) {
         @click=${() => {
           // don't update tool before toggling menu
           this._toggleFrameMenu();
-          this.setEdgelessTool({ type: 'frame' });
+          this.setEdgelessTool(FrameTool);
         }}
       >
         ${FrameIcon()}

blocksuite/affine/blocks/frame/src/edgeless-toolbar/presentation-toolbar.ts

@@ -1,5 +1,9 @@
-import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
+import {
+  DefaultTool,
+  EdgelessLegacySlotIdentifier,
+} from '@blocksuite/affine-block-surface';
 import { toast } from '@blocksuite/affine-components/toast';
+import { PanTool } from '@blocksuite/affine-gfx-pointer';
 import type { FrameBlockModel } from '@blocksuite/affine-model';
 import {
   EditPropsStore,
@@ -16,7 +20,7 @@ import {
   StopAiIcon,
 } from '@blocksuite/icons/lit';
 import type { BlockComponent } from '@blocksuite/std';
-import type { GfxToolsFullOptionValue } from '@blocksuite/std/gfx';
+import type { ToolOptions } from '@blocksuite/std/gfx';
 import { effect } from '@preact/signals-core';
 import { cssVar } from '@toeverything/theme';
 import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
@@ -27,6 +31,7 @@ import {
   isFrameBlock,
   type NavigatorMode,
 } from '../frame-manager';
+import { PresentTool } from '../present-tool';
 
 export class PresentationToolbar extends EdgelessToolbarToolMixin(
   SignalWatcher(LitElement)
@@ -114,7 +119,7 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
 
   private _timer?: ReturnType<typeof setTimeout>;
 
-  override type: GfxToolsFullOptionValue['type'] = 'frameNavigator';
+  override type = PresentTool;
 
   private get _cachedPresentHideToolbar() {
     return !!this.edgeless.std
@@ -151,7 +156,7 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
 
   private _bindHotKey() {
     const handleKeyIfFrameNavigator = (action: () => void) => () => {
-      if (this.edgelessTool.type === 'frameNavigator') {
+      if (this.edgelessTool.toolType === PresentTool) {
         action();
       }
     };
@@ -171,11 +176,11 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
   private _exitPresentation() {
     // When exit presentation mode, we need to set the tool to default or pan
     // And exit fullscreen
-    const tool = this.edgeless.doc.readonly
-      ? { type: 'pan', panning: false }
-      : { type: 'default' };
-    // @ts-expect-error FIXME: resolve after gfx tool refactor
-    this.setEdgelessTool(tool);
+    if (this.edgeless.doc.readonly) {
+      this.setEdgelessTool(PanTool, { panning: false });
+    } else {
+      this.setEdgelessTool(DefaultTool);
+    }
 
     if (document.fullscreenElement) {
       document.exitFullscreen().catch(console.error);
@@ -261,9 +266,11 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
         const currentTool = this.gfx.tool.currentToolOption$.value;
         const selection = this.gfx.selection;
 
-        if (currentTool?.type === 'frameNavigator') {
+        if (currentTool?.toolType === PresentTool) {
           this._cachedIndex = this._currentFrameIndex;
-          this._navigatorMode = currentTool.mode ?? this._navigatorMode;
+          this._navigatorMode =
+            (currentTool.options as ToolOptions<PresentTool>)?.mode ??
+            this._navigatorMode;
           if (isFrameBlock(selection.selectedElements[0])) {
             this._cachedIndex = this._frames.findIndex(
               frame => frame.id === selection.selectedElements[0].id
@@ -306,14 +313,14 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
         // When exit fullscreen, we need to clear the timer
         clearTimeout(this._timer);
         if (
-          this.edgelessTool.type === 'frameNavigator' &&
+          this.edgelessTool.toolType === PresentTool &&
           this._fullScreenMode
         ) {
-          const tool = this.edgeless.doc.readonly
-            ? { type: 'pan', panning: false }
-            : { type: 'default' };
-          // @ts-expect-error FIXME: resolve after gfx tool refactor
-          this.setEdgelessTool(tool);
+          if (this.edgeless.doc.readonly) {
+            this.setEdgelessTool(PanTool, { panning: false });
+          } else {
+            this.setEdgelessTool(DefaultTool);
+          }
         }
       }
 
@@ -425,7 +432,7 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin(
   protected override updated(changedProperties: PropertyValues) {
     if (
       changedProperties.has('_currentFrameIndex') &&
-      this.edgelessTool.type === 'frameNavigator'
+      this.edgelessTool.toolType === PresentTool
     ) {
       this._moveToCurrentFrame();
     }

blocksuite/affine/blocks/frame/src/frame-tool.ts

@@ -1,4 +1,7 @@
-import { OverlayIdentifier } from '@blocksuite/affine-block-surface';
+import {
+  DefaultTool,
+  OverlayIdentifier,
+} from '@blocksuite/affine-block-surface';
 import type { FrameBlockModel } from '@blocksuite/affine-model';
 import {
   EditPropsStore,
@@ -39,8 +42,7 @@ export class FrameTool extends BaseTool {
     if (this._frame) {
       const frame = this._frame;
       frame.pop('xywh');
-      // @ts-expect-error TODO: refactor gfx tool
-      this.gfx.tool.setTool('default');
+      this.gfx.tool.setTool(DefaultTool);
       this.gfx.selection.set({
         elements: [frame.id],
         editing: false,

blocksuite/affine/blocks/frame/src/index.ts

@@ -1,5 +1,5 @@
 import type { FrameTool } from './frame-tool';
-import type { PresentTool, PresentToolOption } from './preset-tool';
+import type { PresentTool, PresentToolOption } from './present-tool';
 
 export * from './edgeless-clipboard-config';
 export * from './edgeless-toolbar';
@@ -9,7 +9,7 @@ export * from './frame-manager';
 export * from './frame-spec';
 export * from './frame-tool';
 export * from './frame-toolbar';
-export * from './preset-tool';
+export * from './present-tool';
 
 declare module '@blocksuite/std/gfx' {
   interface GfxToolsMap {

blocksuite/affine/blocks/frame/src/present/navigator-bg-widget.ts

@@ -9,6 +9,8 @@ import { css, html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
 import { literal, unsafeStatic } from 'lit/static-html.js';
 
+import { PresentTool } from '../present-tool';
+
 export const EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET =
   'edgeless-navigator-black-background';
 export class EdgelessNavigatorBlackBackgroundWidget extends WidgetComponent<RootBlockModel> {
@@ -59,7 +61,7 @@ export class EdgelessNavigatorBlackBackgroundWidget extends WidgetComponent<Root
 
           this.show =
             blackBackground &&
-            this.gfx.tool.currentToolOption$.peek().type === 'frameNavigator';
+            this.gfx.tool.currentToolOption$.peek().toolType === PresentTool;
         }
       })
     );

blocksuite/affine/blocks/frame/src/present/present-button.ts

@@ -3,9 +3,10 @@ import {
   QuickToolMixin,
 } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { PresentationIcon } from '@blocksuite/icons/lit';
-import type { GfxToolsFullOptionValue } from '@blocksuite/std/gfx';
 import { css, html, LitElement } from 'lit';
 
+import { PresentTool } from '../present-tool';
+
 export class EdgelessPresentButton extends QuickToolMixin(
   EdgelessToolbarToolMixin(LitElement)
 ) {
@@ -19,7 +20,7 @@ export class EdgelessPresentButton extends QuickToolMixin(
     }
   `;
 
-  override type: GfxToolsFullOptionValue['type'] = 'frameNavigator';
+  override type = PresentTool;
 
   override render() {
     return html`<edgeless-tool-icon-button
@@ -29,9 +30,7 @@ export class EdgelessPresentButton extends QuickToolMixin(
     .iconContainerPadding=${6}
     .iconSize=${'24px'}
     @click=${() => {
-      this.setEdgelessTool({
-        type: 'frameNavigator',
-      });
+      this.setEdgelessTool(PresentTool);
     }}
   >
     ${PresentationIcon()}

blocksuite/affine/blocks/frame/src/view.ts

@@ -11,7 +11,7 @@ import { FrameBlockSpec } from './frame-spec';
 import { FrameTool } from './frame-tool';
 import { frameToolbarExtension } from './frame-toolbar';
 import { edgelessNavigatorBgWidget } from './present/navigator-bg-widget';
-import { PresentTool } from './preset-tool';
+import { PresentTool } from './present-tool';
 
 export class FrameViewExtension extends ViewExtensionProvider {
   override name = 'affine-frame-block';

blocksuite/affine/blocks/frame/tsconfig.json

@@ -10,6 +10,7 @@
     { "path": "../surface" },
     { "path": "../../components" },
     { "path": "../../ext-loader" },
+    { "path": "../../gfx/pointer" },
     { "path": "../../model" },
     { "path": "../../shared" },
     { "path": "../../widgets/edgeless-toolbar" },