refactor(editor): query methods in edgeless api (#9407)

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

@@ -1,3 +1,4 @@
+import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
 import type { RootBlockModel } from '@blocksuite/affine-model';
 import { DocModeProvider } from '@blocksuite/affine-shared/services';
 import {
@@ -7,6 +8,7 @@ import {
   getScrollContainer,
   isInsideEdgelessEditor,
   isInsidePageEditor,
+  isTopLevelBlock,
   matchFlavours,
 } from '@blocksuite/affine-shared/utils';
 import {
@@ -22,9 +24,7 @@ import { html } from 'lit';
 import { query, state } from 'lit/decorators.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import { isTopLevelBlock } from '../../../root-block/edgeless/utils/query.js';
 import { autoScroll } from '../../../root-block/text-selection/utils.js';
-import type { EdgelessRootService } from '../../edgeless/index.js';
 import type { DragPreview } from './components/drag-preview.js';
 import type { DropIndicator } from './components/drop-indicator.js';
 import type { AFFINE_DRAG_HANDLE_WIDGET } from './consts.js';
@@ -196,8 +196,8 @@ export class AffineDragHandleWidget extends WidgetComponent<RootBlockModel> {
       if (!this.anchorBlockId.value) return null;
       if (this.mode === 'page') return null;
 
-      const service = this.std.getService('affine:page') as EdgelessRootService;
-      const edgelessElement = service.getElementById(this.anchorBlockId.value);
+      const crud = this.std.get(EdgelessCRUDIdentifier);
+      const edgelessElement = crud.getElementById(this.anchorBlockId.value);
       return isTopLevelBlock(edgelessElement) ? edgelessElement : null;
     }
   );

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

@@ -2,6 +2,10 @@ import {
   EdgelessLegacySlotIdentifier,
   type SurfaceBlockComponent,
 } from '@blocksuite/affine-block-surface';
+import {
+  getSelectedRect,
+  isTopLevelBlock,
+} from '@blocksuite/affine-shared/utils';
 import type { DndEventState } from '@blocksuite/block-std';
 import {
   GfxControllerIdentifier,
@@ -10,10 +14,6 @@ import {
 import { type IVec, Rect } from '@blocksuite/global/utils';
 import { effect } from '@preact/signals-core';
 
-import {
-  getSelectedRect,
-  isTopLevelBlock,
-} from '../../../edgeless/utils/query.js';
 import {
   DRAG_HANDLE_CONTAINER_OFFSET_LEFT_TOP_LEVEL,
   DRAG_HANDLE_CONTAINER_WIDTH_TOP_LEVEL,

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

@@ -194,7 +194,7 @@ export class EdgelessAutoConnectWidget extends WidgetComponent<
 
       note.children.forEach(model => {
         if (matchFlavours(model, ['affine:surface-ref'])) {
-          const reference = service.getElementById(model.reference);
+          const reference = service.crud.getElementById(model.reference);
 
           if (!isAutoConnectElement(reference)) return;
 

blocksuite/blocks/src/root-block/widgets/edgeless-remote-selection/index.ts

@@ -1,28 +1,26 @@
+import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface';
 import { RemoteCursor } from '@blocksuite/affine-components/icons';
 import type { RootBlockModel } from '@blocksuite/affine-model';
-import { requestThrottledConnectedFrame } from '@blocksuite/affine-shared/utils';
+import {
+  getSelectedRect,
+  isTopLevelBlock,
+  requestThrottledConnectedFrame,
+} from '@blocksuite/affine-shared/utils';
 import { WidgetComponent } from '@blocksuite/block-std';
-import { assertExists, pickValues } from '@blocksuite/global/utils';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+import { pickValues } from '@blocksuite/global/utils';
 import type { UserInfo } from '@blocksuite/store';
-import { css, html } from 'lit';
+import { css, html, nothing } from 'lit';
 import { state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 
-import type { EdgelessRootBlockComponent } from '../../../root-block/edgeless/edgeless-root-block.js';
-import {
-  getSelectedRect,
-  isTopLevelBlock,
-} from '../../../root-block/edgeless/utils/query.js';
 import { RemoteColorManager } from '../../../root-block/remote-color-manager/remote-color-manager.js';
 
 export const AFFINE_EDGELESS_REMOTE_SELECTION_WIDGET =
   'affine-edgeless-remote-selection-widget';
 
-export class EdgelessRemoteSelectionWidget extends WidgetComponent<
-  RootBlockModel,
-  EdgelessRootBlockComponent
-> {
+export class EdgelessRemoteSelectionWidget extends WidgetComponent<RootBlockModel> {
   static override styles = css`
     :host {
       pointer-events: none;
@@ -109,7 +107,7 @@ export class EdgelessRemoteSelectionWidget extends WidgetComponent<
   };
 
   private readonly _updateRemoteRects = () => {
-    const { selection, block } = this;
+    const { selection } = this;
     const remoteSelectionsMap = selection.remoteSurfaceSelectionsMap;
     const remoteRects: EdgelessRemoteSelectionWidget['_remoteRects'] =
       new Map();
@@ -119,7 +117,7 @@ export class EdgelessRemoteSelectionWidget extends WidgetComponent<
         if (selection.elements.length === 0) return;
 
         const elements = selection.elements
-          .map(id => block.service.getElementById(id))
+          .map(id => this.crud.getElementById(id))
           .filter(element => element) as BlockSuite.EdgelessModel[];
         const rect = getSelectedRect(elements);
 
@@ -151,7 +149,7 @@ export class EdgelessRemoteSelectionWidget extends WidgetComponent<
   };
 
   private readonly _updateTransform = requestThrottledConnectedFrame(() => {
-    const { translateX, translateY, zoom } = this.edgeless.service.viewport;
+    const { translateX, translateY, zoom } = this.gfx.viewport;
 
     this.style.setProperty('--v-zoom', `${zoom}`);
 
@@ -161,24 +159,28 @@ export class EdgelessRemoteSelectionWidget extends WidgetComponent<
     );
   }, this);
 
-  get edgeless() {
-    return this.block;
+  get gfx() {
+    return this.std.get(GfxControllerIdentifier);
+  }
+
+  get crud() {
+    return this.std.get(EdgelessCRUDIdentifier);
   }
 
   get selection() {
-    return this.edgeless.service.selection;
+    return this.gfx.selection;
   }
 
   get surface() {
-    return this.edgeless.surface;
+    return this.gfx.surface;
   }
 
   override connectedCallback() {
     super.connectedCallback();
 
-    const { _disposables, doc, edgeless } = this;
+    const { _disposables, doc } = this;
 
-    pickValues(edgeless.service.surface, [
+    pickValues(this.surface!, [
       'elementAdded',
       'elementRemoved',
       'elementUpdated',
@@ -196,7 +198,7 @@ export class EdgelessRemoteSelectionWidget extends WidgetComponent<
     );
 
     _disposables.add(
-      edgeless.service.viewport.viewportUpdated.on(() => {
+      this.gfx.viewport.viewportUpdated.on(() => {
         this._updateTransform();
       })
     );
@@ -209,7 +211,7 @@ export class EdgelessRemoteSelectionWidget extends WidgetComponent<
 
   override render() {
     const { _remoteRects, _remoteCursors, _remoteColorManager } = this;
-    assertExists(_remoteColorManager);
+    if (!_remoteColorManager) return nothing;
 
     const rects = repeat(
       _remoteRects.entries(),

blocksuite/blocks/src/root-block/widgets/element-toolbar/lock-button.ts

@@ -54,7 +54,7 @@ export class EdgelessLockButton extends SignalWatcher(
 
     // release other elements from their groups and group with top element
     otherElements.forEach(element => {
-      // eslint-disable-next-line
+      // oxlint-disable-next-line unicorn/prefer-dom-node-remove
       element.group?.removeChild(element);
       topElement.group?.addChild(element);
     });
@@ -72,7 +72,7 @@ export class EdgelessLockButton extends SignalWatcher(
     const groupId = service.createGroup([topElement, ...otherElements]);
 
     if (groupId) {
-      const group = service.getElementById(groupId);
+      const group = service.crud.getElementById(groupId);
       if (group) {
         group.lock();
         this.edgeless.gfx.selection.set({

blocksuite/blocks/src/root-block/widgets/surface-ref-toolbar/utils.ts

@@ -1,9 +1,9 @@
 import type { CanvasRenderer } from '@blocksuite/affine-block-surface';
+import { isTopLevelBlock } from '@blocksuite/affine-shared/utils';
 import type { EditorHost } from '@blocksuite/block-std';
 import { assertExists, Bound } from '@blocksuite/global/utils';
 
 import { ExportManager } from '../../../_common/export-manager/export-manager.js';
-import { isTopLevelBlock } from '../../../root-block/edgeless/utils/query.js';
 import type { SurfaceRefBlockComponent } from '../../../surface-ref-block/surface-ref-block.js';
 
 export const edgelessToBlob = async (