refactor(editor): reduce getService (#10100)

This commit is contained in:
Saul-Mirone
2025-02-11 12:26:01 +00:00
parent dbf0f9dc20
commit 6b78d2dcf2
33 changed files with 189 additions and 300 deletions
@@ -1,18 +1,16 @@
import { ChatHistoryOrder } from '@affine/graphql';
import {
BlockSelection,
type BlockStdScope,
type EditorHost,
TextSelection,
} from '@blocksuite/affine/block-std';
import type {
DocMode,
EdgelessRootService,
ImageSelection,
RootService,
} from '@blocksuite/affine/blocks';
import { GfxControllerIdentifier } from '@blocksuite/affine/block-std/gfx';
import type { DocMode, ImageSelection } from '@blocksuite/affine/blocks';
import {
BlocksUtils,
DocModeProvider,
EdgelessCRUDIdentifier,
EditPropsStore,
getSelectedBlocksCommand,
NoteDisplayMode,
@@ -116,10 +114,10 @@ export async function constructRootChatBlockMessages(
return constructUserInfoWithMessages(forkMessages, userInfo);
}
function getViewportCenter(mode: DocMode, rootService: RootService) {
function getViewportCenter(mode: DocMode, std: BlockStdScope) {
const center = { x: 400, y: 50 };
if (mode === 'page') {
const viewport = rootService.std.get(EditPropsStore).getStorage('viewport');
const viewport = std.get(EditPropsStore).getStorage('viewport');
if (viewport) {
if ('xywh' in viewport) {
const bound = Bound.deserialize(viewport.xywh);
@@ -132,9 +130,9 @@ function getViewportCenter(mode: DocMode, rootService: RootService) {
}
} else {
// Else we should get latest viewport center from the edgeless root service
const edgelessService = rootService as EdgelessRootService;
center.x = edgelessService.viewport.centerX;
center.y = edgelessService.viewport.centerY;
const viewport = std.get(GfxControllerIdentifier).viewport;
center.x = viewport.centerX;
center.y = viewport.centerY;
}
return center;
@@ -310,18 +308,11 @@ const SAVE_CHAT_TO_BLOCK_ACTION: ChatAction = {
return false;
}
const rootService = host.std.getService('affine:page');
const surfaceService = host.std.getService('affine:surface');
if (!rootService || !surfaceService) return false;
const notificationService = host.std.getOptional(NotificationProvider);
const docModeService = host.std.get(DocModeProvider);
const { layer } = surfaceService;
const layer = host.std.get(GfxControllerIdentifier).layer;
const curMode = docModeService.getEditorMode() || 'page';
const viewportCenter = getViewportCenter(
curMode,
rootService as RootService
);
const viewportCenter = getViewportCenter(curMode, host.std);
const newBlockIndex = layer.generateIndex();
// If current mode is not edgeless, switch to edgeless mode first
if (curMode !== 'edgeless') {
@@ -402,11 +393,9 @@ const ADD_TO_EDGELESS_AS_NOTE = {
handler: async (host: EditorHost, content: string) => {
reportResponse('result:add-note');
const { doc } = host;
const service = host.std.getService<EdgelessRootService>('affine:page');
if (!service) return;
const elements = service.selection.selectedElements;
const gfx = host.std.get(GfxControllerIdentifier);
const elements = gfx.selection.selectedElements;
const props: { displayMode: NoteDisplayMode; xywh?: SerializedXYWH } = {
displayMode: NoteDisplayMode.EdgelessOnly,
};
@@ -423,7 +412,7 @@ const ADD_TO_EDGELESS_AS_NOTE = {
await insertFromMarkdown(host, content, doc, id, 0);
service.selection.set({
gfx.selection.set({
elements: [id],
editing: false,
});
@@ -488,10 +477,6 @@ const CREATE_AS_LINKED_DOC = {
return false;
}
const service = host.std.getService<EdgelessRootService>('affine:page');
if (!service) {
return false;
}
const docModeService = host.std.get(DocModeProvider);
const mode = docModeService.getEditorMode();
if (mode !== 'edgeless') {
@@ -506,8 +491,9 @@ const CREATE_AS_LINKED_DOC = {
const noteId = newDoc.addBlock('affine:note', {}, rootId);
await insertFromMarkdown(host, content, newDoc, noteId, 0);
const gfx = host.std.get(GfxControllerIdentifier);
// Add a linked doc card to link to the new doc
const elements = service.selection.selectedElements;
const elements = gfx.selection.selectedElements;
const width = 364;
const height = 390;
let x = 0;
@@ -523,12 +509,12 @@ const CREATE_AS_LINKED_DOC = {
// If the selected elements are not in the viewport, center the linked doc card
if (x === Number.POSITIVE_INFINITY || y === Number.POSITIVE_INFINITY) {
const viewportCenter = getViewportCenter(mode, service);
const viewportCenter = getViewportCenter(mode, host.std);
x = viewportCenter.x - width / 2;
y = viewportCenter.y - height / 2;
}
service.crud.addBlock(
host.std.get(EdgelessCRUDIdentifier).addBlock(
'affine:embed-linked-doc',
{
xywh: `[${x}, ${y}, ${width}, ${height}]`,
@@ -4,7 +4,6 @@ import { type EditorHost } from '@blocksuite/affine/block-std';
import {
type AIItemGroupConfig,
createLitPortal,
EdgelessRootService,
HoverController,
} from '@blocksuite/affine/blocks';
import { WithDisposable } from '@blocksuite/affine/global/utils';
@@ -14,7 +13,6 @@ import { property, query } from 'lit/decorators.js';
import { ref } from 'lit/directives/ref.js';
import { styleMap } from 'lit/directives/style-map.js';
import { getRootService } from '../../utils/selection-utils';
import type { ButtonSize } from './ask-ai-icon';
type toggleType = 'hover' | 'click';
@@ -27,14 +25,6 @@ export type AskAIButtonOptions = {
};
export class AskAIButton extends WithDisposable(LitElement) {
get _edgeless() {
const rootService = getRootService(this.host);
if (rootService instanceof EdgelessRootService) {
return rootService;
}
return null;
}
static override styles = css`
.ask-ai-button {
border-radius: 4px;
@@ -1,7 +1,7 @@
import { type EditorHost } from '@blocksuite/affine/block-std';
import {
type AIItemGroupConfig,
EdgelessRootService,
DocModeProvider,
scrollbarStyle,
} from '@blocksuite/affine/blocks';
import { WithDisposable } from '@blocksuite/affine/global/utils';
@@ -9,8 +9,6 @@ import { css, html, LitElement } from 'lit';
import { property } from 'lit/decorators.js';
import { styleMap } from 'lit/directives/style-map.js';
import { getRootService } from '../../utils/selection-utils';
export class AskAIPanel extends WithDisposable(LitElement) {
static override styles = css`
:host {
@@ -50,12 +48,8 @@ export class AskAIPanel extends WithDisposable(LitElement) {
@property({ attribute: false })
accessor minWidth = 330;
get _edgeless() {
const rootService = getRootService(this.host);
if (rootService instanceof EdgelessRootService) {
return rootService;
}
return null;
get _isEdgelessMode() {
return this.host.std.get(DocModeProvider).getEditorMode() === 'edgeless';
}
get _actionGroups() {
@@ -66,7 +60,7 @@ export class AskAIPanel extends WithDisposable(LitElement) {
item.showWhen
? item.showWhen(
this.host.command.chain(),
this._edgeless ? 'edgeless' : 'page',
this._isEdgelessMode ? 'edgeless' : 'page',
this.host
)
: true
@@ -74,10 +74,6 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
}
`;
private get _rootService() {
return this.host.std.getService('affine:page');
}
private get _selectionValue() {
return this.host.selection.value;
}
@@ -130,7 +126,6 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
}
private readonly _notifySuccess = (title: string) => {
if (!this._rootService) return;
const notificationService = this.host.std.getOptional(NotificationProvider);
notificationService?.notify({
title: title,
@@ -1,10 +1,10 @@
import type { EditorHost } from '@blocksuite/affine/block-std';
import { GfxControllerIdentifier } from '@blocksuite/affine/block-std/gfx';
import type {
AffineAIPanelWidget,
AIItemConfig,
EdgelessCopilotWidget,
EdgelessElementToolbarWidget,
EdgelessRootService,
MindmapElementModel,
ShapeElementModel,
} from '@blocksuite/affine/blocks';
@@ -35,17 +35,12 @@ import { AIProvider } from '../provider';
import { reportResponse } from '../utils/action-reporter';
import { getAIPanelWidget } from '../utils/ai-widgets';
import type { AIContext } from '../utils/context';
import {
getEdgelessCopilotWidget,
getService,
isMindMapRoot,
} from '../utils/edgeless';
import { getEdgelessCopilotWidget, isMindMapRoot } from '../utils/edgeless';
import { preprocessHtml } from '../utils/html';
import { fetchImageToFile } from '../utils/image';
import {
getCopilotSelectedElems,
getEdgelessRootFromEditor,
getEdgelessService,
getSurfaceElementFromEditor,
} from '../utils/selection-utils';
import { createTemplateJob } from '../utils/template-job';
@@ -222,9 +217,9 @@ function insertBelow(
) {
insertFromMarkdown(host, markdown, host.doc, parentId, index)
.then(() => {
const service = getService(host);
const gfx = host.std.get(GfxControllerIdentifier);
service.selection.set({
gfx.selection.set({
elements: [parentId],
editing: false,
});
@@ -398,9 +393,8 @@ export function responseToExpandMindmap(host: EditorHost, ctx: AIContext) {
});
setTimeout(() => {
const edgelessService = getEdgelessService(host);
edgelessService.selection.set({
const gfx = host.std.get(GfxControllerIdentifier);
gfx.selection.set({
elements: [subtree.element.id],
editing: false,
});
@@ -410,7 +404,7 @@ export function responseToExpandMindmap(host: EditorHost, ctx: AIContext) {
function responseToBrainstormMindmap(host: EditorHost, ctx: AIContext) {
const aiPanel = getAIPanelWidget(host);
const edgelessService = getEdgelessService(host);
const gfx = host.std.get(GfxControllerIdentifier);
const edgelessCopilot = getEdgelessCopilotWidget(host);
const selectionRect = edgelessCopilot.selectionModelRect;
const surface = getSurfaceBlock(host.doc);
@@ -456,13 +450,13 @@ function responseToBrainstormMindmap(host: EditorHost, ctx: AIContext) {
// This is a workaround to make sure mindmap and other microtask are done
setTimeout(() => {
edgelessService.viewport.setViewportByBound(
gfx.viewport.setViewportByBound(
mindmap.elementBound,
[20, 20, 20, 20],
true
);
edgelessService.selection.set({
gfx.selection.set({
elements: [mindmap.tree.element.id],
editing: false,
});
@@ -508,9 +502,6 @@ async function responseToCreateSlides(host: EditorHost, ctx: AIContext) {
const { contents = [], images = [] } = data;
if (contents.length === 0) return;
const service = host.std.getService<EdgelessRootService>('affine:page');
if (!service) return;
try {
for (let i = 0; i < contents.length; i++) {
const image = images[i] || [];
@@ -1,5 +1,6 @@
import { AINetworkSearchService } from '@affine/core/modules/ai-button/services/network-search';
import type { EditorHost } from '@blocksuite/affine/block-std';
import { GfxControllerIdentifier } from '@blocksuite/affine/block-std/gfx';
import {
type AffineAIPanelWidget,
type AffineAIPanelWidgetConfig,
@@ -38,7 +39,7 @@ import { AIProvider } from './provider';
import { reportResponse } from './utils/action-reporter';
import { getAIPanelWidget } from './utils/ai-widgets';
import { AIContext } from './utils/context';
import { findNoteBlockModel, getService } from './utils/edgeless';
import { findNoteBlockModel } from './utils/edgeless';
import { copyTextAnswer } from './utils/editor-actions';
import { getSelections } from './utils/selection-utils';
@@ -93,7 +94,7 @@ function createNewNote(host: EditorHost): AIItemConfig {
const newBound = new Bound(bound.x - bound.w - 20, bound.y, bound.w, 72);
const doc = host.doc;
const panel = getAIPanelWidget(host);
const service = getService(host);
const gfx = host.std.get(GfxControllerIdentifier);
doc.transact(() => {
assertExists(doc.root);
const noteBlockId = doc.addBlock(
@@ -101,7 +102,7 @@ function createNewNote(host: EditorHost): AIItemConfig {
{
xywh: newBound.serialize(),
displayMode: NoteDisplayMode.EdgelessOnly,
index: service.generateIndex(),
index: gfx.layer.generateIndex(),
},
doc.root.id
);
@@ -109,7 +110,7 @@ function createNewNote(host: EditorHost): AIItemConfig {
assertExists(panel.answer);
insertFromMarkdown(host, panel.answer, doc, noteBlockId)
.then(() => {
service.selection.set({
gfx.selection.set({
elements: [noteBlockId],
editing: false,
});
@@ -119,7 +120,7 @@ function createNewNote(host: EditorHost): AIItemConfig {
if (!newNote || !matchModels(newNote, [NoteBlockModel])) return;
const newNoteBound = Bound.deserialize(newNote.xywh);
const bounds = [bound, newNoteBound];
service.gfx.fitToScreen({
gfx.fitToScreen({
bounds,
padding: [20, 20, 20, 20],
});
@@ -16,7 +16,7 @@ import type { Bound } from '@blocksuite/affine/global/utils';
import { html } from 'lit';
import { query } from 'lit/decorators.js';
import type { MindmapService } from './mindmap-service.js';
import { MindmapService } from './mindmap-service.js';
export class MindmapSurfaceBlock extends BlockComponent<SurfaceBlockModel> {
renderer?: CanvasRenderer;
@@ -30,7 +30,7 @@ export class MindmapSurfaceBlock extends BlockComponent<SurfaceBlockModel> {
}
get mindmapService() {
return this.std.getService('affine:page') as unknown as MindmapService;
return this.std.get(MindmapService);
}
get viewport() {
@@ -4,7 +4,8 @@ import {
CanvasElementType,
ConnectorMode,
DocModeProvider,
type EdgelessRootService,
EdgelessCRUDIdentifier,
getSurfaceBlock,
NotificationProvider,
TelemetryProvider,
} from '@blocksuite/affine/blocks';
@@ -33,10 +34,6 @@ import { calcChildBound } from './utils';
export class AIChatBlockPeekView extends LitElement {
static override styles = PeekViewStyles;
private get _rootService() {
return this.host.std.getService('affine:page');
}
private get _modeService() {
return this.host.std.get(DocModeProvider);
}
@@ -172,9 +169,10 @@ export class AIChatBlockPeekView extends LitElement {
return;
}
const edgelessService = this._rootService as EdgelessRootService;
const bound = calcChildBound(this.parentModel, edgelessService);
const aiChatBlockId = edgelessService.crud.addBlock(
const bound = calcChildBound(this.parentModel, this.host.std);
const crud = this.host.std.get(EdgelessCRUDIdentifier);
const aiChatBlockId = crud.addBlock(
'affine:embed-ai-chat',
{
xywh: bound.serialize(),
@@ -193,7 +191,7 @@ export class AIChatBlockPeekView extends LitElement {
this.updateContext({ currentChatBlockId: aiChatBlockId });
// Connect the parent chat block to the AI chat block
edgelessService.crud.addElement(CanvasElementType.CONNECTOR, {
crud.addElement(CanvasElementType.CONNECTOR, {
mode: ConnectorMode.Curve,
controllers: [],
source: { id: this.parentChatBlockId },
@@ -249,7 +247,6 @@ export class AIChatBlockPeekView extends LitElement {
* Clean current chat messages and delete the newly created AI chat block
*/
cleanCurrentChatHistories = async () => {
if (!this._rootService) return;
const notificationService = this.host.std.getOptional(NotificationProvider);
if (!notificationService) return;
@@ -275,18 +272,17 @@ export class AIChatBlockPeekView extends LitElement {
}
if (currentChatBlockId) {
const edgelessService = this._rootService as EdgelessRootService;
const surface = getSurfaceBlock(doc);
const crud = this.host.std.get(EdgelessCRUDIdentifier);
const chatBlock = doc.getBlock(currentChatBlockId)?.model;
if (chatBlock) {
const connectors = edgelessService.getConnectors(
chatBlock as AIChatBlockModel
);
const connectors = surface?.getConnectors(chatBlock.id);
doc.transact(() => {
// Delete the AI chat block
edgelessService.removeElement(currentChatBlockId);
crud.removeElement(currentChatBlockId);
// Delete the connectors
connectors.forEach(connector => {
edgelessService.removeElement(connector.id);
connectors?.forEach(connector => {
crud.removeElement(connector.id);
});
});
}
@@ -1,4 +1,8 @@
import type { EdgelessRootService } from '@blocksuite/affine/blocks';
import type { BlockStdScope } from '@blocksuite/affine/block-std';
import {
EdgelessCRUDIdentifier,
getSurfaceBlock,
} from '@blocksuite/affine/blocks';
import { Bound } from '@blocksuite/affine/global/utils';
import {
@@ -19,18 +23,19 @@ import {
*/
export function calcChildBound(
parentModel: AIChatBlockModel,
service: EdgelessRootService
std: BlockStdScope
) {
const surface = getSurfaceBlock(std.store);
const crud = std.get(EdgelessCRUDIdentifier);
const parentXYWH = Bound.deserialize(parentModel.xywh);
const { x: parentX, y: parentY, w: parentWidth } = parentXYWH;
const connectors = service.getConnectors(parentModel.id);
const connectors = surface?.getConnectors(parentModel.id);
const gapX = CHAT_BLOCK_WIDTH;
const gapY = 60;
const defaultX = parentX + parentWidth + gapX;
const defaultY = parentY;
if (!connectors.length) {
if (!connectors?.length) {
return new Bound(defaultX, defaultY, CHAT_BLOCK_WIDTH, CHAT_BLOCK_HEIGHT);
} else {
// Filter out the connectors which source is the parent block
@@ -41,7 +46,7 @@ export function calcChildBound(
const targetBlocks = childConnectors
.map(connector => connector.target.id)
.filter(id => id !== undefined)
.map(id => service.crud.getElementById(id))
.map(id => crud.getElementById(id))
.filter(block => !!block);
if (targetBlocks.length) {
@@ -1,5 +1,5 @@
import type { EditorHost } from '@blocksuite/affine/block-std';
import type { EdgelessRootService } from '@blocksuite/affine/blocks';
import { GfxControllerIdentifier } from '@blocksuite/affine/block-std/gfx';
import type { BlockSnapshot } from '@blocksuite/affine/store';
import { markdownToSnapshot } from '../../_common';
@@ -13,11 +13,10 @@ import {
} from './template';
export const PPTBuilder = (host: EditorHost) => {
const service = host.std.getService<EdgelessRootService>('affine:page');
const gfx = host.std.get(GfxControllerIdentifier);
const docs: PPTDoc[] = [];
const contents: unknown[] = [];
const allImages: TemplateImage[][] = [];
if (!service) return;
const addDoc = async (block: BlockSnapshot) => {
const sections = block.children.map(v => {
@@ -62,7 +61,7 @@ export const PPTBuilder = (host: EditorHost) => {
const block = snapshot.snapshot.content[0];
for (const child of block.children) {
await addDoc(child);
service.gfx.fitToScreen();
gfx.fitToScreen();
}
} catch (e) {
console.error(e);
@@ -3,7 +3,6 @@ import type { GfxModel } from '@blocksuite/affine/block-std/gfx';
import {
AFFINE_EDGELESS_COPILOT_WIDGET,
type EdgelessCopilotWidget,
type EdgelessRootService,
matchModels,
MindmapElementModel,
NoteBlockModel,
@@ -43,14 +42,6 @@ export function isMindmapChild(ele: GfxModel) {
return ele?.group instanceof MindmapElementModel && !isMindMapRoot(ele);
}
export function getService(host: EditorHost) {
const edgelessService = host.std.getService(
'affine:page'
) as EdgelessRootService;
return edgelessService;
}
export function getEdgelessCopilotWidget(
host: EditorHost
): EdgelessCopilotWidget {
@@ -1,10 +1,12 @@
import { type EditorHost, TextSelection } from '@blocksuite/affine/block-std';
import type { GfxModel } from '@blocksuite/affine/block-std/gfx';
import {
GfxControllerIdentifier,
type GfxModel,
} from '@blocksuite/affine/block-std/gfx';
import {
BlocksUtils,
type CopilotTool,
DatabaseBlockModel,
EdgelessRootService,
type FrameBlockModel,
getBlockSelectionsCommand,
getImageSelectionsCommand,
@@ -22,11 +24,7 @@ import {
} from '@blocksuite/affine/store';
import { getContentFromSlice } from '../../_common';
import { getEdgelessCopilotWidget, getService } from './edgeless';
export const getRootService = (host: EditorHost) => {
return host.std.getService('affine:page');
};
import { getEdgelessCopilotWidget } from './edgeless';
export function getEdgelessRootFromEditor(editor: EditorHost) {
const edgelessRoot = editor.getElementsByTagName('affine-edgeless-root')[0];
@@ -36,14 +34,6 @@ export function getEdgelessRootFromEditor(editor: EditorHost) {
}
return edgelessRoot;
}
export function getEdgelessService(editor: EditorHost) {
const rootService = editor.std.getService('affine:page');
if (rootService instanceof EdgelessRootService) {
return rootService;
}
alert('Please switch to edgeless mode');
throw new Error('Please open switch to edgeless mode');
}
export async function selectedToCanvas(host: EditorHost) {
const edgelessRoot = getEdgelessRootFromEditor(host);
@@ -287,15 +277,15 @@ export const getSelectedNoteAnchor = (host: EditorHost, id: string) => {
};
export function getCopilotSelectedElems(host: EditorHost): GfxModel[] {
const service = getService(host);
const gfx = host.std.get(GfxControllerIdentifier);
const copilotWidget = getEdgelessCopilotWidget(host);
if (copilotWidget.visible) {
const currentTool = service.gfx.tool.currentTool$.peek() as CopilotTool;
const currentTool = gfx.tool.currentTool$.peek() as CopilotTool;
return currentTool?.selectedElements ?? [];
}
return service.selection.selectedElements;
return gfx.selection.selectedElements;
}
export const imageCustomInput = async (host: EditorHost) => {