feat(editor): add gfx pointer extension (#12006)

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit

- **New Features**
  - Introduced a new pointer graphics module with tools and quick tool integration for edgeless surfaces.
  - Added a quick tool button for pointer interactions in edgeless mode.
  - Exposed new extension points for pointer graphics and effects.

- **Improvements**
  - Integrated pointer graphics as a dependency into related packages.
  - Enhanced toolbar context to support additional surface alignment modes.
  - Added conditional clipboard configuration registrations for edgeless contexts across multiple block types.

- **Removals**
  - Removed legacy tool and effect definitions and related quick tool exports from edgeless components.
  - Streamlined extension arrays and removed unused exports for a cleaner codebase.
  - Deleted obsolete utility functions and component registrations.

- **Chores**
  - Updated workspace and TypeScript project references to include the new pointer graphics module.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

blocksuite/affine/gfx/pointer/src/tools/pan-tool.ts

@@ -0,0 +1,87 @@
+import { on } from '@blocksuite/affine-shared/utils';
+import type { PointerEventState } from '@blocksuite/std';
+import { BaseTool, MouseButton } from '@blocksuite/std/gfx';
+import { Signal } from '@preact/signals-core';
+
+export type PanToolOption = {
+  panning: boolean;
+};
+
+export class PanTool extends BaseTool<PanToolOption> {
+  static override toolName = 'pan';
+
+  private _lastPoint: [number, number] | null = null;
+
+  readonly panning$ = new Signal<boolean>(false);
+
+  override get allowDragWithRightButton(): boolean {
+    return true;
+  }
+
+  override dragEnd(_: PointerEventState): void {
+    this._lastPoint = null;
+    this.panning$.value = false;
+  }
+
+  override dragMove(e: PointerEventState): void {
+    if (!this._lastPoint) return;
+
+    const { viewport } = this.gfx;
+    const { zoom } = viewport;
+
+    const [lastX, lastY] = this._lastPoint;
+    const deltaX = lastX - e.x;
+    const deltaY = lastY - e.y;
+
+    this._lastPoint = [e.x, e.y];
+
+    viewport.applyDeltaCenter(deltaX / zoom, deltaY / zoom);
+  }
+
+  override dragStart(e: PointerEventState): void {
+    this._lastPoint = [e.x, e.y];
+    this.panning$.value = true;
+  }
+
+  override mounted(): void {
+    this.addHook('pointerDown', evt => {
+      const shouldPanWithMiddle = evt.raw.button === MouseButton.MIDDLE;
+
+      if (!shouldPanWithMiddle) {
+        return;
+      }
+
+      evt.raw.preventDefault();
+
+      const selection = this.gfx.selection.surfaceSelections;
+      const currentTool = this.controller.currentToolOption$.peek();
+      const restoreToPrevious = () => {
+        this.controller.setTool(currentTool);
+        this.gfx.selection.set(selection);
+      };
+
+      this.controller.setTool('pan', {
+        panning: true,
+      });
+
+      const dispose = on(document, 'pointerup', evt => {
+        if (evt.button === MouseButton.MIDDLE) {
+          restoreToPrevious();
+          dispose();
+        }
+      });
+
+      return false;
+    });
+  }
+}
+
+declare module '@blocksuite/std/gfx' {
+  interface GfxToolsMap {
+    pan: PanTool;
+  }
+
+  interface GfxToolsOption {
+    pan: PanToolOption;
+  }
+}