feat(editor): gfx shape package (#11060)

blocksuite/affine/blocks/block-surface/src/consts.ts

@@ -16,3 +16,9 @@ export interface IModelCoord {
   x: number;
   y: number;
 }
+
+export const EXCLUDING_MOUSE_OUT_CLASS_LIST = [
+  'affine-note-mask',
+  'edgeless-block-portal-note',
+  'affine-block-children-container',
+];

blocksuite/affine/blocks/block-surface/src/index.ts

@@ -1,6 +1,6 @@
 // oxlint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="./effects.ts" />
-export { type IModelCoord, ZOOM_MAX, ZOOM_MIN, ZOOM_STEP } from './consts.js';
+export * from './consts.js';
 export { GRID_GAP_MAX, GRID_GAP_MIN } from './consts.js';
 export {
   SurfaceElementModel,
@@ -29,6 +29,7 @@ export {
 export { fitContent } from './renderer/elements/shape/utils.js';
 export * from './renderer/elements/type.js';
 export { Overlay, OverlayIdentifier } from './renderer/overlay.js';
+export { ToolOverlay } from './renderer/tool-overlay.js';
 export { MindMapView } from './view/mindmap.js';
 import {
   getCursorByCoord,

blocksuite/affine/blocks/block-surface/src/renderer/tool-overlay.ts

@@ -0,0 +1,42 @@
+import type { GfxController } from '@blocksuite/block-std/gfx';
+import { DisposableGroup } from '@blocksuite/global/disposable';
+import { noop } from '@blocksuite/global/utils';
+
+import type { RoughCanvas } from '../utils/rough/canvas';
+import { Overlay } from './overlay';
+
+export class ToolOverlay extends Overlay {
+  protected disposables = new DisposableGroup();
+
+  globalAlpha: number;
+
+  x: number;
+
+  y: number;
+
+  constructor(gfx: GfxController) {
+    super(gfx);
+    this.x = 0;
+    this.y = 0;
+    this.globalAlpha = 0;
+    this.gfx = gfx;
+    this.disposables.add(
+      this.gfx.viewport.viewportUpdated.subscribe(() => {
+        // when viewport is updated, we should keep the overlay in the same position
+        // to get last mouse position and convert it to model coordinates
+        const pos = this.gfx.tool.lastMousePos$.value;
+        const [x, y] = this.gfx.viewport.toModelCoord(pos.x, pos.y);
+        this.x = x;
+        this.y = y;
+      })
+    );
+  }
+
+  override dispose(): void {
+    this.disposables.dispose();
+  }
+
+  render(ctx: CanvasRenderingContext2D, rc: RoughCanvas): void {
+    noop([ctx, rc]);
+  }
+}