refactor: tool extension

packages/framework/block-std/src/gfx/controller.ts

@@ -16,11 +16,14 @@ import { LifeCycleWatcherIdentifier } from '../identifier.js';
 import { onSurfaceAdded } from '../utils/gfx.js';
 import { GfxBlockElementModel, type GfxModel } from './gfx-block-model.js';
 import { GridManager } from './grid.js';
+import { KeyboardController } from './keyboard.js';
 import { LayerManager } from './layer.js';
 import {
   GfxPrimitiveElementModel,
   type PointTestOptions,
 } from './surface/element-model.js';
+import { ToolIdentifier } from './tool/tool.js';
+import { ToolController } from './tool/tool-controller.js';
 import { Viewport } from './viewport.js';
 
 export class GfxController extends LifeCycleWatcher {
@@ -32,8 +35,12 @@ export class GfxController extends LifeCycleWatcher {
 
   readonly grid: GridManager;
 
+  readonly keyboard: KeyboardController;
+
   readonly layer: LayerManager;
 
+  readonly tool: ToolController;
+
   readonly viewport: Viewport = new Viewport();
 
   get doc() {
@@ -49,6 +56,8 @@ export class GfxController extends LifeCycleWatcher {
 
     this.grid = new GridManager();
     this.layer = new LayerManager(this.doc, null);
+    this.keyboard = new KeyboardController(std);
+    this.tool = new ToolController(std);
 
     this._disposables.add(
       onSurfaceAdded(this.doc, surface => {
@@ -63,6 +72,8 @@ export class GfxController extends LifeCycleWatcher {
     this._disposables.add(this.grid.watch({ doc: this.doc }));
     this._disposables.add(this.layer);
     this._disposables.add(this.viewport);
+    this._disposables.add(this.keyboard);
+    this._disposables.add(this.tool);
   }
 
   /**
@@ -186,6 +197,9 @@ export class GfxController extends LifeCycleWatcher {
 
   override mounted() {
     this.viewport.setViewportElm(this.std.host);
+    this.std.provider.getAll(ToolIdentifier).forEach(tool => {
+      this.tool.register(tool);
+    });
   }
 
   override unmounted() {

packages/framework/block-std/src/gfx/index.ts

@@ -38,7 +38,7 @@ export {
   type SurfaceBlockProps,
   type SurfaceMiddleware,
 } from './surface/surface-model.js';
-export { BaseTool } from './tool/tool.js';
+export { BaseTool, GfxToolExtension } from './tool/tool.js';
 
 export { ToolController } from './tool/tool-controller.js';
 export * from './viewport.js';

packages/framework/block-std/src/gfx/keyboard.ts

@@ -0,0 +1,43 @@
+import { DisposableGroup } from '@blocksuite/global/utils';
+import { Signal } from '@preact/signals-core';
+
+import type { BlockStdScope } from '../scope/block-std-scope.js';
+
+export class KeyboardController {
+  private _disposable = new DisposableGroup();
+
+  shiftKey$ = new Signal<boolean>(false);
+
+  spaceKey$ = new Signal<boolean>(false);
+
+  constructor(readonly std: BlockStdScope) {
+    this._init();
+  }
+
+  private _init() {
+    this._disposable.add(
+      this.std.event.add('keyDown', evt => {
+        const state = evt.get('keyboardState');
+
+        this.shiftKey$.value = state.raw.shiftKey && state.raw.key === 'Shift';
+        this.spaceKey$.value = state.raw.code === 'Space';
+      })
+    );
+
+    this._disposable.add(
+      this.std.event.add('keyUp', evt => {
+        const state = evt.get('keyboardState');
+
+        this.shiftKey$.value = !state.raw.shiftKey && state.raw.key === 'Shift';
+
+        if (state.raw.code === 'Space') {
+          this.spaceKey$.value = false;
+        }
+      })
+    );
+  }
+
+  dispose() {
+    this._disposable.dispose();
+  }
+}

packages/framework/block-std/src/gfx/tool/tool-controller.ts

@@ -1,8 +1,4 @@
-import {
-  type Constructor,
-  DisposableGroup,
-  type IBound,
-} from '@blocksuite/global/utils';
+import { DisposableGroup, type IBound } from '@blocksuite/global/utils';
 import { Signal } from '@preact/signals-core';
 
 import type { UIEventStateContext } from '../../event/index.js';
@@ -66,12 +62,9 @@ export class ToolController {
     };
   }
 
-  get host() {
-    return this.std.host;
-  }
-
   constructor(readonly std: BlockStdScope) {
     const { addHook } = this._initializeEvents();
+
     this[eventTarget] = {
       addHook,
     };
@@ -146,17 +139,13 @@ export class ToolController {
     });
   }
 
-  register(toolCtors: Constructor<BaseTool>[]) {
-    toolCtors.forEach(ctor => {
-      const tool = new ctor(this);
+  register(tools: BaseTool) {
+    if (this._tools.has(tools.toolName)) {
+      this._tools.get(tools.toolName)?.onunload();
+    }
 
-      if (this._tools.has(tool.name)) {
-        throw new Error(`Tool "${tool.name}" is already registered`);
-      }
-
-      this._tools.set(tool.name, tool);
-      tool.onload();
-    });
+    this._tools.set(tools.toolName, tools);
+    tools.onload();
   }
 
   use(toolName: string, options: Record<string, unknown> = {}) {

packages/framework/block-std/src/gfx/tool/tool.ts

@@ -1,19 +1,24 @@
+import { type Container, createIdentifier } from '@blocksuite/global/di';
+import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
+
 import type { UIEventStateContext } from '../../event/base.js';
+import type { ExtensionType } from '../../extension/extension.js';
 
-import {
-  eventTarget,
-  type SupportedEvents,
-  type ToolController,
-} from './tool-controller.js';
+import { type GfxController, GfxControllerIdentifier } from '../controller.js';
+import { eventTarget, type SupportedEvents } from './tool-controller.js';
 
 export abstract class BaseTool {
-  abstract readonly name: string;
+  static toolName: string = '';
 
   get active() {
-    return this.controller.currentTool$.peek() === this;
+    return this.gfx.tool.currentTool$.peek() === this;
+  }
+
+  get toolName() {
+    return (this.constructor as typeof BaseTool).toolName;
   }
 
-  constructor(readonly controller: ToolController) {}
+  constructor(readonly gfx: GfxController) {}
 
   /**
    * Called when the tool is activated.
@@ -25,7 +30,7 @@ export abstract class BaseTool {
     evtName: SupportedEvents,
     handler: (evtState: UIEventStateContext) => undefined | boolean
   ): void {
-    this.controller[eventTarget].addHook(evtName, handler);
+    this.gfx.tool[eventTarget].addHook(evtName, handler);
   }
 
   click(_: UIEventStateContext): void {}
@@ -65,3 +70,26 @@ export abstract class BaseTool {
 
   tripleClick(_: UIEventStateContext): void {}
 }
+
+export const ToolIdentifier = createIdentifier<BaseTool>('GfxTool');
+
+export function GfxToolExtension(
+  toolCtors: (typeof BaseTool)[]
+): ExtensionType {
+  return {
+    setup: (di: Container) => {
+      toolCtors.forEach(Ctor => {
+        if (!Ctor.toolName) {
+          throw new BlockSuiteError(
+            ErrorCode.ValueNotExists,
+            'The tool must have a static property `toolName`'
+          );
+        }
+
+        di.addImpl(ToolIdentifier(Ctor.toolName), Ctor, [
+          GfxControllerIdentifier,
+        ]);
+      });
+    },
+  };
+}