refactor(editor): extract edgeless legacy slots (#9363)

blocksuite/blocks/src/root-block/edgeless/edgeless-root-block.ts

@@ -2,7 +2,10 @@ import type {
   SurfaceBlockComponent,
   SurfaceBlockModel,
 } from '@blocksuite/affine-block-surface';
-import { CommonUtils } from '@blocksuite/affine-block-surface';
+import {
+  CommonUtils,
+  EdgelessLegacySlotIdentifier,
+} from '@blocksuite/affine-block-surface';
 import type {
   RootBlockModel,
   ShapeElementModel,
@@ -143,7 +146,7 @@ export class EdgelessRootBlockComponent extends BlockComponent<
   }
 
   get slots() {
-    return this.service.slots;
+    return this.std.get(EdgelessLegacySlotIdentifier);
   }
 
   get surfaceBlockModel() {

blocksuite/blocks/src/root-block/edgeless/edgeless-root-service.ts

@@ -1,5 +1,6 @@
 import {
   EdgelessCRUDIdentifier,
+  EdgelessLegacySlotIdentifier,
   type ElementRenderer,
   elementRenderers,
   type SurfaceBlockModel,
@@ -7,7 +8,6 @@ import {
 } from '@blocksuite/affine-block-surface';
 import {
   type ConnectorElementModel,
-  type FrameBlockModel,
   type GroupElementModel,
   MindmapElementModel,
   RootBlockSchema,
@@ -28,7 +28,6 @@ import {
 } from '@blocksuite/block-std/gfx';
 import { BlockSuiteError, ErrorCode } from '@blocksuite/global/exceptions';
 import { Bound, getCommonBound } from '@blocksuite/global/utils';
-import { Slot } from '@blocksuite/store';
 import { effect } from '@preact/signals-core';
 
 import { getSurfaceBlock } from '../../surface-ref-block/utils.js';
@@ -59,23 +58,6 @@ export class EdgelessRootService extends RootService implements SurfaceContext {
 
   elementRenderers: Record<string, ElementRenderer> = elementRenderers;
 
-  slots = {
-    readonlyUpdated: new Slot<boolean>(),
-    navigatorSettingUpdated: new Slot<{
-      hideToolbar?: boolean;
-      blackBackground?: boolean;
-      fillScreen?: boolean;
-    }>(),
-    navigatorFrameChanged: new Slot<FrameBlockModel>(),
-    fullScreenToggled: new Slot(),
-
-    elementResizeStart: new Slot(),
-    elementResizeEnd: new Slot(),
-    toggleNoteSlicer: new Slot(),
-
-    toolbarLocked: new Slot<boolean>(),
-  };
-
   TemplateJob = TemplateJob;
 
   get blocks(): GfxBlockModel[] {
@@ -168,12 +150,14 @@ export class EdgelessRootService extends RootService implements SurfaceContext {
   private _initReadonlyListener() {
     const doc = this.doc;
 
+    const slots = this.std.get(EdgelessLegacySlotIdentifier);
+
     let readonly = doc.readonly;
     this.disposables.add(
       doc.awarenessStore.slots.update.on(() => {
         if (readonly !== doc.readonly) {
           readonly = doc.readonly;
-          this.slots.readonlyUpdated.emit(readonly);
+          slots.readonlyUpdated.emit(readonly);
         }
       })
     );

blocksuite/blocks/src/root-block/widgets/drag-handle/watchers/edgeless-watcher.ts

@@ -1,3 +1,7 @@
+import {
+  EdgelessLegacySlotIdentifier,
+  type SurfaceBlockComponent,
+} from '@blocksuite/affine-block-surface';
 import type { DndEventState } from '@blocksuite/block-std';
 import {
   GfxControllerIdentifier,
@@ -6,10 +10,6 @@ import {
 import { type IVec, Rect } from '@blocksuite/global/utils';
 import { effect } from '@preact/signals-core';
 
-import type {
-  EdgelessRootBlockComponent,
-  EdgelessRootService,
-} from '../../../edgeless/index.js';
 import {
   getSelectedRect,
   isTopLevelBlock,
@@ -64,8 +64,12 @@ export class EdgelessWatcher {
 
   private readonly _showDragHandleOnTopLevelBlocks = async () => {
     if (this.widget.mode === 'page') return;
-    const { edgelessRoot } = this;
-    await edgelessRoot.surface.updateComplete;
+
+    const surfaceModel = this.widget.doc.getBlockByFlavour('affine:surface');
+    const surface = this.widget.std.view.getBlock(
+      surfaceModel[0]!.id
+    ) as SurfaceBlockComponent;
+    await surface.updateComplete;
 
     if (!this.widget.anchorBlockId) return;
 
@@ -121,9 +125,11 @@ export class EdgelessWatcher {
       return;
     }
 
-    const { edgelessRoot } = this;
-    const editing = edgelessRoot.service.selection.editing;
-    const selectedElements = edgelessRoot.service.selection.selectedElements;
+    const { std } = this.widget;
+    const gfx = std.get(GfxControllerIdentifier);
+    const { selection } = gfx;
+    const editing = selection.editing;
+    const selectedElements = selection.selectedElements;
     if (editing || selectedElements.length !== 1) {
       this.widget.hide();
       return;
@@ -158,10 +164,6 @@ export class EdgelessWatcher {
     this.widget.dragPreview.style.opacity = altKey ? '1' : '0.5';
   };
 
-  get edgelessRoot() {
-    return this.widget.rootComponent as EdgelessRootBlockComponent;
-  }
-
   get hoverAreaRectTopLevelBlock() {
     const area = this.hoverAreaTopLevelBlock;
     if (!area) return null;
@@ -174,12 +176,11 @@ export class EdgelessWatcher {
 
     if (!edgelessElement) return null;
 
-    const { edgelessRoot } = this;
+    const { std } = this.widget;
+    const gfx = std.get(GfxControllerIdentifier);
+    const { viewport } = gfx;
     const rect = getSelectedRect([edgelessElement]);
-    let [left, top] = edgelessRoot.service.viewport.toViewCoord(
-      rect.left,
-      rect.top
-    );
+    let [left, top] = viewport.toViewCoord(rect.left, rect.top);
     const scale = this.widget.scale.peek();
     const width = rect.width * scale;
     const height = rect.height * scale;
@@ -212,26 +213,23 @@ export class EdgelessWatcher {
 
   watch() {
     const { disposables, std } = this.widget;
-    const gfxController = std.get(GfxControllerIdentifier);
-    const { viewport } = gfxController;
-    const edgelessService = std.getService(
-      'affine:page'
-    ) as EdgelessRootService;
-    const edgelessSlots = edgelessService.slots;
+    const gfx = std.get(GfxControllerIdentifier);
+    const { viewport, selection, tool } = gfx;
+    const edgelessSlots = std.get(EdgelessLegacySlotIdentifier);
 
     disposables.add(
       viewport.viewportUpdated.on(this._handleEdgelessViewPortUpdated)
     );
 
     disposables.add(
-      edgelessService.selection.slots.updated.on(() => {
+      selection.slots.updated.on(() => {
         this.checkTopLevelBlockSelection();
       })
     );
 
     disposables.add(
       effect(() => {
-        const value = gfxController.tool.currentToolOption$.value;
+        const value = tool.currentToolOption$.value;
 
         value && this._handleEdgelessToolUpdated(value);
       })

blocksuite/blocks/src/root-block/widgets/edgeless-auto-connect/edgeless-auto-connect.ts

@@ -1,3 +1,4 @@
+import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import {
   AutoConnectLeftIcon,
   AutoConnectRightIcon,
@@ -16,6 +17,7 @@ import {
   stopPropagation,
 } from '@blocksuite/affine-shared/utils';
 import { WidgetComponent } from '@blocksuite/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import { Bound } from '@blocksuite/global/utils';
 import { css, html, nothing, type TemplateResult } from 'lit';
 import { state } from 'lit/decorators.js';
@@ -426,7 +428,7 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
           justifyContent: 'center',
           alignItems: 'center',
         });
-        const components = [];
+        const components: TemplateResult[] = [];
         const count = counts[i];
         const initGap = 24 / count - 24;
         const positions = calculatePosition(
@@ -509,17 +511,19 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
   }
 
   override firstUpdated(): void {
-    const { _disposables, service } = this;
+    const { _disposables, std } = this;
+    const slots = std.get(EdgelessLegacySlotIdentifier);
+    const gfx = std.get(GfxControllerIdentifier);
 
     _disposables.add(
-      service.viewport.viewportUpdated.on(() => {
+      gfx.viewport.viewportUpdated.on(() => {
         this.requestUpdate();
       })
     );
 
     _disposables.add(
-      service.selection.slots.updated.on(() => {
-        const { selectedElements } = service.selection;
+      gfx.selection.slots.updated.on(() => {
+        const { selectedElements } = gfx.selection;
         if (
           !(selectedElements.length === 1 && isNoteBlock(selectedElements[0]))
         ) {
@@ -529,22 +533,22 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
     );
 
     _disposables.add(
-      service.uiEventDispatcher.add('dragStart', () => {
+      std.event.add('dragStart', () => {
         this._dragging = true;
       })
     );
     _disposables.add(
-      service.uiEventDispatcher.add('dragEnd', () => {
+      std.event.add('dragEnd', () => {
         this._dragging = false;
       })
     );
     _disposables.add(
-      service.slots.elementResizeStart.on(() => {
+      slots.elementResizeStart.on(() => {
         this._dragging = true;
       })
     );
     _disposables.add(
-      service.slots.elementResizeEnd.on(() => {
+      slots.elementResizeEnd.on(() => {
         this._dragging = false;
       })
     );

blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/index.ts

@@ -1,3 +1,4 @@
+import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
 import type { RootBlockModel } from '@blocksuite/affine-model';
 import { WidgetComponent } from '@blocksuite/block-std';
 import { effect } from '@preact/signals-core';
@@ -58,10 +59,8 @@ export class AffineEdgelessZoomToolbarWidget extends WidgetComponent<
   }
 
   override firstUpdated() {
-    const {
-      disposables,
-      edgeless: { slots },
-    } = this;
+    const { disposables, std } = this;
+    const slots = std.get(EdgelessLegacySlotIdentifier);
 
     disposables.add(
       slots.navigatorSettingUpdated.on(({ hideToolbar }) => {