refactor(editor): reduce getService (#10100)

blocksuite/affine/block-database/src/detail-panel/block-renderer.ts

@@ -76,10 +76,6 @@ export class BlockRenderer
     return this.host?.doc.getBlock(this.rowId)?.model;
   }
 
-  get service() {
-    return this.host.std.getService('affine:database');
-  }
-
   override connectedCallback() {
     super.connectedCallback();
     if (this.model && this.model.text) {

blocksuite/affine/block-database/src/properties/title/text.ts

@@ -123,10 +123,6 @@ abstract class BaseTextCell extends BaseCellRenderer<Text> {
     return this.host?.std.get(DefaultInlineManagerExtension.identifier);
   }
 
-  get service() {
-    return this.host?.std.getService('affine:database');
-  }
-
   get topContenteditableElement() {
     const databaseBlock =
       this.closest<DatabaseBlockComponent>('affine-database');

blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts

@@ -40,10 +40,6 @@ export function toEdgelessEmbedBlock<
       return Bound.deserialize(this.model.xywh);
     }
 
-    get rootService() {
-      return this.std.getService('affine:page');
-    }
-
     _handleClick(_: MouseEvent): void {
       return;
     }

blocksuite/affine/block-embed/src/embed-linked-doc-block/embed-edgeless-linked-doc-block.ts

@@ -36,12 +36,6 @@ export class EmbedEdgelessLinkedDocBlockComponent extends toEdgelessEmbedBlock(
     bound.w = EMBED_CARD_WIDTH[style];
     bound.h = EMBED_CARD_HEIGHT[style];
 
-    const edgelessService = this.rootService;
-
-    if (!edgelessService) {
-      return;
-    }
-
     const { addBlock } = this.std.get(EdgelessCRUDIdentifier);
     const surface = this.gfx.surface ?? undefined;
     const newId = addBlock(
@@ -67,10 +61,6 @@ export class EmbedEdgelessLinkedDocBlockComponent extends toEdgelessEmbedBlock(
     doc.deleteBlock(this.model);
   };
 
-  get rootService() {
-    return this.std.getService('affine:page');
-  }
-
   protected override _handleClick(evt: MouseEvent): void {
     if (isNewTabTrigger(evt)) {
       this.open({ openMode: 'open-in-new-tab', event: evt });

blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-edgeless-synced-doc-block.ts

@@ -123,16 +123,11 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
   override convertToCard = (aliasInfo?: AliasInfo) => {
     const { id, doc, caption, xywh } = this.model;
 
-    const edgelessService = this.rootService;
     const style = 'vertical';
     const bound = Bound.deserialize(xywh);
     bound.w = EMBED_CARD_WIDTH[style];
     bound.h = EMBED_CARD_HEIGHT[style];
 
-    if (!edgelessService) {
-      return;
-    }
-
     const { addBlock } = this.std.get(EdgelessCRUDIdentifier);
     const surface = this.gfx.surface ?? undefined;
     const newId = addBlock(
@@ -159,10 +154,6 @@ export class EmbedEdgelessSyncedDocBlockComponent extends toEdgelessEmbedBlock(
     doc.deleteBlock(this.model);
   };
 
-  get rootService() {
-    return this.std.getService('affine:page');
-  }
-
   override renderGfxBlock() {
     const { style, xywh } = this.model;
     const bound = Bound.deserialize(xywh);

blocksuite/affine/block-embed/src/embed-synced-doc-block/embed-synced-doc-block.ts

@@ -351,10 +351,6 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
       .title(pageId, { params, referenced: true });
   });
 
-  private get _rootService() {
-    return this.std.getService('affine:page');
-  }
-
   get blockState() {
     return {
       isLoading: this._loading,
@@ -504,8 +500,8 @@ export class EmbedSyncedDocBlockComponent extends EmbedBlockComponent<EmbedSynce
       })
     );
 
-    if (this._rootService && !this.linkedMode) {
-      const docMode = this._rootService.std.get(DocModeProvider);
+    if (!this.linkedMode) {
+      const docMode = this.std.get(DocModeProvider);
       this.syncedDocMode = docMode.getPrimaryMode(this.model.pageId);
       this._isEmptySyncedDoc = isEmptyDoc(this.syncedDoc, this.editorMode);
       this.disposables.add(

blocksuite/affine/block-note/src/note-edgeless-block.ts

@@ -34,10 +34,6 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent(
     return this.gfx.viewport.zoom;
   }
 
-  get rootService() {
-    return this.std.getService('affine:page');
-  }
-
   private _collapsedContent() {
     if (!this._isShowCollapsedContent) {
       return nothing;

blocksuite/affine/block-surface/src/commands/reassociate-connectors.ts

@@ -1,5 +1,7 @@
 import type { Command } from '@blocksuite/block-std';
 
+import { SurfaceBlockService } from '../surface-service';
+
 /**
  * Re-associate bindings for block that have been converted.
  *
@@ -11,7 +13,7 @@ export const reassociateConnectorsCommand: Command<{
   newId: string;
 }> = (ctx, next) => {
   const { oldId, newId } = ctx;
-  const service = ctx.std.getService('affine:surface');
+  const service = ctx.std.get(SurfaceBlockService);
   if (!oldId || !newId || !service) {
     next();
     return;

blocksuite/affine/block-surface/src/extensions/crud-extension.ts

@@ -2,8 +2,10 @@ import type { SurfaceElementModelMap } from '@blocksuite/affine-model';
 import { EditPropsStore } from '@blocksuite/affine-shared/services';
 import { type BlockStdScope, StdIdentifier } from '@blocksuite/block-std';
 import {
+  GfxBlockElementModel,
   GfxControllerIdentifier,
   type GfxModel,
+  isGfxGroupCompatibleModel,
 } from '@blocksuite/block-std/gfx';
 import { type Container, createIdentifier } from '@blocksuite/global/di';
 import { type BlockModel, Extension } from '@blocksuite/store';
@@ -155,4 +157,25 @@ export class EdgelessCRUDExtension extends Extension {
     }
     return this._surface.getElementsByType(type);
   }
+
+  removeElement(id: string | GfxModel) {
+    id = typeof id === 'string' ? id : id.id;
+
+    const el = this.getElementById(id);
+    if (isGfxGroupCompatibleModel(el)) {
+      el.childIds.forEach(childId => {
+        this.removeElement(childId);
+      });
+    }
+
+    if (el instanceof GfxBlockElementModel) {
+      this.std.store.deleteBlock(el);
+      return;
+    }
+
+    if (this._surface?.hasElementById(id)) {
+      this._surface.deleteElement(id);
+      return;
+    }
+  }
 }

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

@@ -13,7 +13,10 @@ import { query } from 'lit/decorators.js';
 
 import { ConnectorElementModel } from './element-model/index.js';
 import { CanvasRenderer } from './renderer/canvas-renderer.js';
-import type { ElementRenderer } from './renderer/elements/index.js';
+import {
+  type ElementRenderer,
+  elementRenderers,
+} from './renderer/elements/index.js';
 import { OverlayIdentifier } from './renderer/overlay.js';
 import type { SurfaceBlockModel } from './surface-model.js';
 import type { SurfaceBlockService } from './surface-service.js';
@@ -126,10 +129,6 @@ export class SurfaceBlockComponent extends BlockComponent<
     this._renderer?.refresh();
   };
 
-  private get _edgelessService() {
-    return this.std.getService('affine:page') as unknown as SurfaceContext;
-  }
-
   private get _gfx() {
     return this.std.get(GfxControllerIdentifier);
   }
@@ -179,12 +178,12 @@ export class SurfaceBlockComponent extends BlockComponent<
             property,
             themeService.edgelessTheme
           ),
-        selectedElements: () => this._edgelessService.selection.selectedIds,
+        selectedElements: () => gfx.selection.selectedIds,
       },
       onStackingCanvasCreated(canvas) {
         canvas.className = 'indexable-canvas';
       },
-      elementRenderers: this._edgelessService.elementRenderers,
+      elementRenderers,
       surfaceModel: this.model,
     });
 
@@ -205,7 +204,7 @@ export class SurfaceBlockComponent extends BlockComponent<
       })
     );
     this._disposables.add(
-      this._edgelessService.selection.slots.updated.on(() => {
+      gfx.selection.slots.updated.on(() => {
         this._renderer.refresh();
       })
     );

blocksuite/blocks/src/_specs/preset/mobile-patch.ts

@@ -1,4 +1,5 @@
 import type { CodeBlockConfig } from '@blocksuite/affine-block-code';
+import { ParagraphBlockService } from '@blocksuite/affine-block-paragraph';
 import {
   type ReferenceNodeConfig,
   ReferenceNodeConfigIdentifier,
@@ -100,7 +101,7 @@ export class MobileSpecsPatches extends LifeCycleWatcher {
   override mounted() {
     // remove slash placeholder for mobile: `type / ...`
     {
-      const paragraphService = this.std.getService('affine:paragraph');
+      const paragraphService = this.std.get(ParagraphBlockService);
       if (!paragraphService) return;
 
       paragraphService.placeholderGenerator = model => {

blocksuite/blocks/src/root-block/edgeless/components/frame/frame-preview.ts

@@ -5,6 +5,7 @@ import {
   type EditorHost,
   ShadowlessElement,
 } from '@blocksuite/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import {
   Bound,
   debounce,
@@ -19,7 +20,6 @@ import { styleMap } from 'lit/directives/style-map.js';
 
 import { SpecProvider } from '../../../../_specs/index.js';
 import type { EdgelessRootPreviewBlockComponent } from '../../edgeless-root-preview-block.js';
-import type { EdgelessRootService } from '../../edgeless-root-service.js';
 
 const DEFAULT_PREVIEW_CONTAINER_WIDTH = 280;
 const DEFAULT_PREVIEW_CONTAINER_HEIGHT = 166;
@@ -144,12 +144,9 @@ export class FramePreview extends WithDisposable(ShadowlessElement) {
 
     if (!previewEditorHost) return;
 
-    const edgelessService = previewEditorHost.std.getService(
-      'affine:page'
-    ) as EdgelessRootService;
-
+    const { viewport } = previewEditorHost.std.get(GfxControllerIdentifier);
     const frameBound = Bound.deserialize(this.frame.xywh);
-    edgelessService.viewport.setViewportByBound(frameBound);
+    viewport.setViewportByBound(frameBound);
   }
 
   private _renderSurfaceContent() {

blocksuite/blocks/src/root-block/widgets/ai-panel/ai-panel.ts

@@ -1,5 +1,6 @@
 import type { AIError } from '@blocksuite/affine-components/ai-item';
 import {
+  DocModeProvider,
   NotificationProvider,
   ThemeProvider,
 } from '@blocksuite/affine-shared/services';
@@ -8,6 +9,7 @@ import {
   stopPropagation,
 } from '@blocksuite/affine-shared/utils';
 import { WidgetComponent } from '@blocksuite/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import { assertExists } from '@blocksuite/global/utils';
 import type { BaseSelection } from '@blocksuite/store';
 import {
@@ -24,8 +26,6 @@ import { css, html, nothing, type PropertyValues } from 'lit';
 import { property, query } from 'lit/decorators.js';
 import { choose } from 'lit/directives/choose.js';
 
-import type { EdgelessRootService } from '../../edgeless/edgeless-root-service.js';
-import { PageRootService } from '../../page/page-root-service.js';
 import { AFFINE_FORMAT_BAR_WIDGET } from '../format-bar/format-bar.js';
 import {
   AFFINE_VIEWPORT_OVERLAY_WIDGET,
@@ -363,12 +363,13 @@ export class AffineAIPanelWidget extends WidgetComponent {
   ): Partial<ComputePositionConfig> {
     let rootBoundary: Rect | undefined;
     {
-      const rootService = this.host.std.getService('affine:page');
-      if (rootService instanceof PageRootService) {
+      const docModeProvider = this.host.std.get(DocModeProvider);
+      if (docModeProvider.getEditorMode() === 'page') {
         rootBoundary = undefined;
       } else {
+        const gfx = this.host.std.get(GfxControllerIdentifier);
         // TODO circular dependency: instanceof EdgelessRootService
-        const viewport = (rootService as EdgelessRootService).viewport;
+        const viewport = gfx.viewport;
         rootBoundary = {
           x: viewport.left,
           y: viewport.top,

blocksuite/playground/apps/_common/components/starter-debug-menu.ts

@@ -19,6 +19,7 @@ import './left-side-panel.js';
 import { NotionHtmlAdapter } from '@blocksuite/affine-shared/adapters';
 import type { AffineTextAttributes } from '@blocksuite/affine-shared/types';
 import { ShadowlessElement } from '@blocksuite/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
 import {
   ColorScheme,
   ColorVariables,
@@ -28,7 +29,6 @@ import {
   type DocMode,
   DocModeProvider,
   download,
-  EdgelessRootService,
   ExportManager,
   FontFamilyVariables,
   HtmlAdapterFactoryIdentifier,
@@ -210,10 +210,6 @@ export class StarterDebugMenu extends ShadowlessElement {
     this.editor.mode = value;
   }
 
-  get rootService() {
-    return this.editor.std?.getService('affine:page');
-  }
-
   private _addNote() {
     const rootModel = this.doc.root;
     if (!rootModel) return;
@@ -544,18 +540,8 @@ export class StarterDebugMenu extends ShadowlessElement {
 
   private _present() {
     if (!this.editor.std || !this.editor.host) return;
-    const rootService = this.editor.std.getService('affine:page');
-    if (!(rootService instanceof EdgelessRootService)) {
-      toast(
-        this.editor.host,
-        'The presentation mode is only available on edgeless mode.',
-        3000
-      );
-      return;
-    }
-
-    const edgelessRootService = rootService as EdgelessRootService;
-    edgelessRootService?.gfx.tool.setTool('frameNavigator', {
+    const gfx = this.editor.std.get(GfxControllerIdentifier);
+    gfx.tool.setTool('frameNavigator', {
       mode: 'fit',
     });
   }

blocksuite/tests-legacy/utils/actions/edgeless.ts

@@ -1016,7 +1016,7 @@ export async function deleteAllConnectors(page: Page) {
     const container = document.querySelector('affine-edgeless-root');
     if (!container) throw new Error('container not found');
     container.service.crud.getElementsByType('connector').forEach(c => {
-      container.service.removeElement(c.id);
+      container.service.crud.removeElement(c.id);
     });
   });
 }