diff --git a/blocksuite/affine/block-attachment/package.json b/blocksuite/affine/block-attachment/package.json index 227341f6219b9..a4a3a4271187f 100644 --- a/blocksuite/affine/block-attachment/package.json +++ b/blocksuite/affine/block-attachment/package.json @@ -14,6 +14,7 @@ "license": "MIT", "dependencies": { "@blocksuite/affine-block-embed": "workspace:*", + "@blocksuite/affine-block-surface": "workspace:*", "@blocksuite/affine-components": "workspace:*", "@blocksuite/affine-model": "workspace:*", "@blocksuite/affine-shared": "workspace:*", diff --git a/blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts b/blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts index 72614b2deaa65..0ad0736d0cea2 100644 --- a/blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts +++ b/blocksuite/affine/block-attachment/src/attachment-edgeless-block.ts @@ -1,11 +1,11 @@ +import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import type { HoverController } from '@blocksuite/affine-components/hover'; import { AttachmentBlockStyles } from '@blocksuite/affine-model'; import { EMBED_CARD_HEIGHT, EMBED_CARD_WIDTH, } from '@blocksuite/affine-shared/consts'; -import { type BlockService, toGfxBlockComponent } from '@blocksuite/block-std'; -import type { Slot } from '@blocksuite/store'; +import { toGfxBlockComponent } from '@blocksuite/block-std'; import { styleMap } from 'lit/directives/style-map.js'; import { AttachmentBlockComponent } from './attachment-block.js'; @@ -17,30 +17,22 @@ export class AttachmentEdgelessBlockComponent extends toGfxBlockComponent( override blockDraggable = false; - get rootService(): null | (BlockService & { slots: Record }) { - return this.std.getService('affine:page'); + get slots() { + return this.std.get(EdgelessLegacySlotIdentifier); } override connectedCallback(): void { super.connectedCallback(); - const rootService = this.rootService; - if (!rootService) { - console.warn('rootService is not found'); - return; - } - - // TODO: move root service slots to extension this._disposables.add( - rootService.slots.elementResizeStart.on(() => { + this.slots.elementResizeStart.on(() => { this._isResizing = true; this._showOverlay = true; }) ); - // TODO: move root service slots to extension this._disposables.add( - rootService.slots.elementResizeEnd.on(() => { + this.slots.elementResizeEnd.on(() => { this._isResizing = false; this._showOverlay = this._isResizing || this._isDragging || !this._isSelected; diff --git a/blocksuite/affine/block-attachment/tsconfig.json b/blocksuite/affine/block-attachment/tsconfig.json index 54b5d3348b995..622857f8c4770 100644 --- a/blocksuite/affine/block-attachment/tsconfig.json +++ b/blocksuite/affine/block-attachment/tsconfig.json @@ -30,6 +30,9 @@ }, { "path": "../block-embed" + }, + { + "path": "../block-surface" } ] } diff --git a/blocksuite/affine/block-embed/src/common/insert-embed-card.ts b/blocksuite/affine/block-embed/src/common/insert-embed-card.ts index 6dfcf2f93a69e..c3b5397445daf 100644 --- a/blocksuite/affine/block-embed/src/common/insert-embed-card.ts +++ b/blocksuite/affine/block-embed/src/common/insert-embed-card.ts @@ -76,9 +76,9 @@ export function insertEmbedCard( editing: false, }); - // @ts-expect-error TODO: fix after edgeless refactor - edgelessRoot.tools.setEdgelessTool({ - type: 'default', - }); + gfx.tool.setTool( + // @ts-expect-error FIXME: resolve after gfx tool refactor + 'default' + ); } } diff --git a/blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts b/blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts index 2643f6f711121..880b910613ff1 100644 --- a/blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts +++ b/blocksuite/affine/block-embed/src/common/to-edgeless-embed-block.ts @@ -1,3 +1,4 @@ +import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import { blockComponentSymbol, type BlockService, @@ -49,21 +50,22 @@ export function toEdgelessEmbedBlock< return; } + get edgelessSlots() { + return this.std.get(EdgelessLegacySlotIdentifier); + } + override connectedCallback(): void { super.connectedCallback(); - const rootService = this.rootService; this._disposables.add( - // @ts-expect-error TODO: fix after edgeless slots are migrated to extension - rootService.slots.elementResizeStart.on(() => { + this.edgelessSlots.elementResizeStart.on(() => { this._isResizing = true; this._showOverlay = true; }) ); this._disposables.add( - // @ts-expect-error TODO: fix after edgeless slots are migrated to extension - rootService.slots.elementResizeEnd.on(() => { + this.edgelessSlots.elementResizeEnd.on(() => { this._isResizing = false; this._showOverlay = this._isResizing || this._isDragging || !this._isSelected; diff --git a/blocksuite/affine/block-embed/src/effects.ts b/blocksuite/affine/block-embed/src/effects.ts index fd6045d580e86..df55e512a5b42 100644 --- a/blocksuite/affine/block-embed/src/effects.ts +++ b/blocksuite/affine/block-embed/src/effects.ts @@ -1,3 +1,5 @@ +import type * as SurfaceEffects from '@blocksuite/affine-block-surface/effects'; + import { EmbedFigmaBlockComponent } from './embed-figma-block'; import { EmbedEdgelessBlockComponent } from './embed-figma-block/embed-edgeless-figma-block'; import type { EmbedFigmaBlockService } from './embed-figma-block/embed-figma-service'; @@ -90,6 +92,8 @@ export function effects() { ); } +declare type _GLOBAL = typeof SurfaceEffects; + declare global { interface HTMLElementTagNameMap { 'affine-embed-figma-block': EmbedFigmaBlockComponent; diff --git a/blocksuite/affine/block-embed/tsconfig.json b/blocksuite/affine/block-embed/tsconfig.json index c1a5453aa5056..f86f39bde9ab6 100644 --- a/blocksuite/affine/block-embed/tsconfig.json +++ b/blocksuite/affine/block-embed/tsconfig.json @@ -27,6 +27,9 @@ }, { "path": "../shared" + }, + { + "path": "../block-surface" } ] } diff --git a/blocksuite/affine/block-latex/src/index.ts b/blocksuite/affine/block-latex/src/index.ts index 727dfa7c7b6ef..db59377ad619c 100644 --- a/blocksuite/affine/block-latex/src/index.ts +++ b/blocksuite/affine/block-latex/src/index.ts @@ -7,7 +7,7 @@ export * from './latex-block'; export * from './latex-spec'; // Global types -declare type _Global = +declare type _GLOBAl = | typeof NoteType | typeof CommandsType | typeof RemarkMathType; diff --git a/blocksuite/affine/block-note/package.json b/blocksuite/affine/block-note/package.json index 492e515999f05..707f46576b697 100644 --- a/blocksuite/affine/block-note/package.json +++ b/blocksuite/affine/block-note/package.json @@ -14,6 +14,7 @@ "license": "MIT", "dependencies": { "@blocksuite/affine-block-embed": "workspace:*", + "@blocksuite/affine-block-surface": "workspace:*", "@blocksuite/affine-components": "workspace:*", "@blocksuite/affine-model": "workspace:*", "@blocksuite/affine-shared": "workspace:*", diff --git a/blocksuite/affine/block-note/src/note-edgeless-block.ts b/blocksuite/affine/block-note/src/note-edgeless-block.ts index 6f69d7ac4091e..217d8df94aa31 100644 --- a/blocksuite/affine/block-note/src/note-edgeless-block.ts +++ b/blocksuite/affine/block-note/src/note-edgeless-block.ts @@ -1,3 +1,4 @@ +import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import { MoreIndicatorIcon } from '@blocksuite/affine-components/icons'; import type { NoteBlockModel } from '@blocksuite/affine-model'; import { @@ -13,11 +14,7 @@ import { matchFlavours, stopPropagation, } from '@blocksuite/affine-shared/utils'; -import type { - BlockComponent, - BlockService, - EditorHost, -} from '@blocksuite/block-std'; +import type { BlockComponent, EditorHost } from '@blocksuite/block-std'; import { ShadowlessElement, toGfxBlockComponent } from '@blocksuite/block-std'; import { almostEqual, @@ -26,7 +23,7 @@ import { Point, WithDisposable, } from '@blocksuite/global/utils'; -import type { BlockModel, Slot } from '@blocksuite/store'; +import type { BlockModel } from '@blocksuite/store'; import { css, html, nothing } from 'lit'; import { property, query, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; @@ -153,9 +150,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent( } get rootService() { - return this.std.getService('affine:page') as BlockService & { - slots: Record; - }; + return this.std.getService('affine:page'); } private _collapsedContent() { @@ -330,12 +325,16 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent( ); } + get edgelessSlots() { + return this.std.get(EdgelessLegacySlotIdentifier); + } + override firstUpdated() { const { _disposables } = this; const selection = this.gfx.selection; _disposables.add( - this.rootService.slots.elementResizeStart.on(() => { + this.edgelessSlots.elementResizeStart.on(() => { if (selection.selectedElements.includes(this.model)) { this._isResizing = true; } @@ -343,7 +342,7 @@ export class EdgelessNoteBlockComponent extends toGfxBlockComponent( ); _disposables.add( - this.rootService.slots.elementResizeEnd.on(() => { + this.edgelessSlots.elementResizeEnd.on(() => { this._isResizing = false; }) ); diff --git a/blocksuite/affine/block-note/tsconfig.json b/blocksuite/affine/block-note/tsconfig.json index 54b5d3348b995..622857f8c4770 100644 --- a/blocksuite/affine/block-note/tsconfig.json +++ b/blocksuite/affine/block-note/tsconfig.json @@ -30,6 +30,9 @@ }, { "path": "../block-embed" + }, + { + "path": "../block-surface" } ] } diff --git a/blocksuite/affine/block-surface/src/extensions/index.ts b/blocksuite/affine/block-surface/src/extensions/index.ts index bfa3d9b634c1c..9059d6d9e1e4a 100644 --- a/blocksuite/affine/block-surface/src/extensions/index.ts +++ b/blocksuite/affine/block-surface/src/extensions/index.ts @@ -1 +1,2 @@ export * from './crud-extension'; +export * from './legacy-slot-extension'; diff --git a/blocksuite/affine/block-surface/src/extensions/legacy-slot-extension.ts b/blocksuite/affine/block-surface/src/extensions/legacy-slot-extension.ts new file mode 100644 index 0000000000000..df2e9d8ae2c9c --- /dev/null +++ b/blocksuite/affine/block-surface/src/extensions/legacy-slot-extension.ts @@ -0,0 +1,40 @@ +import type { FrameBlockModel } from '@blocksuite/affine-model'; +import type { ExtensionType } from '@blocksuite/block-std'; +import { createIdentifier } from '@blocksuite/global/di'; +import { Slot } from '@blocksuite/global/utils'; + +export const EdgelessLegacySlotIdentifier = createIdentifier<{ + readonlyUpdated: Slot; + navigatorSettingUpdated: Slot<{ + hideToolbar?: boolean; + blackBackground?: boolean; + fillScreen?: boolean; + }>; + navigatorFrameChanged: Slot; + fullScreenToggled: Slot; + + elementResizeStart: Slot; + elementResizeEnd: Slot; + toggleNoteSlicer: Slot; + + toolbarLocked: Slot; +}>('AffineEdgelessLegacySlotService'); + +export const EdgelessLegacySlotExtension: ExtensionType = { + setup: di => { + di.addImpl(EdgelessLegacySlotIdentifier, () => ({ + readonlyUpdated: new Slot(), + navigatorSettingUpdated: new Slot<{ + hideToolbar?: boolean; + blackBackground?: boolean; + fillScreen?: boolean; + }>(), + navigatorFrameChanged: new Slot(), + fullScreenToggled: new Slot(), + elementResizeStart: new Slot(), + elementResizeEnd: new Slot(), + toggleNoteSlicer: new Slot(), + toolbarLocked: new Slot(), + })); + }, +}; diff --git a/blocksuite/affine/block-surface/src/surface-spec.ts b/blocksuite/affine/block-surface/src/surface-spec.ts index 8e89e55e39a18..6013224a47967 100644 --- a/blocksuite/affine/block-surface/src/surface-spec.ts +++ b/blocksuite/affine/block-surface/src/surface-spec.ts @@ -10,11 +10,14 @@ import { literal } from 'lit/static-html.js'; import { EdgelessSurfaceBlockAdapterExtensions, SurfaceBlockAdapterExtensions, -} from './adapters/extension.js'; -import { commands } from './commands/index.js'; -import { EdgelessCRUDExtension } from './extensions/crud-extension.js'; -import { SurfaceBlockService } from './surface-service.js'; -import { MindMapView } from './view/mindmap.js'; +} from './adapters/extension'; +import { commands } from './commands'; +import { + EdgelessCRUDExtension, + EdgelessLegacySlotExtension, +} from './extensions'; +import { SurfaceBlockService } from './surface-service'; +import { MindMapView } from './view/mindmap'; const CommonSurfaceBlockSpec: ExtensionType[] = [ FlavourExtension('affine:surface'), @@ -23,6 +26,7 @@ const CommonSurfaceBlockSpec: ExtensionType[] = [ HighlightSelectionExtension, MindMapView, EdgelessCRUDExtension, + EdgelessLegacySlotExtension, ]; export const PageSurfaceBlockSpec: ExtensionType[] = [ diff --git a/blocksuite/affine/block-surface/src/utils/rough/core.ts b/blocksuite/affine/block-surface/src/utils/rough/core.ts index 0486d3d4dba05..60a2ccefe665a 100644 --- a/blocksuite/affine/block-surface/src/utils/rough/core.ts +++ b/blocksuite/affine/block-surface/src/utils/rough/core.ts @@ -64,8 +64,8 @@ export interface ResolvedOptions extends Options { preserveVertices: boolean; } -export declare type OpType = 'move' | 'bcurveTo' | 'lineTo'; -export declare type OpSetType = 'path' | 'fillPath' | 'fillSketch'; +export type OpType = 'move' | 'bcurveTo' | 'lineTo'; +export type OpSetType = 'path' | 'fillPath' | 'fillSketch'; export interface Op { op: OpType; diff --git a/blocksuite/blocks/src/root-block/edgeless/edgeless-root-block.ts b/blocksuite/blocks/src/root-block/edgeless/edgeless-root-block.ts index 5142cf5793d2c..083868dceec74 100644 --- a/blocksuite/blocks/src/root-block/edgeless/edgeless-root-block.ts +++ b/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() { diff --git a/blocksuite/blocks/src/root-block/edgeless/edgeless-root-service.ts b/blocksuite/blocks/src/root-block/edgeless/edgeless-root-service.ts index bb2e9a4d20737..ad01a5b22abf1 100644 --- a/blocksuite/blocks/src/root-block/edgeless/edgeless-root-service.ts +++ b/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 = elementRenderers; - slots = { - readonlyUpdated: new Slot(), - navigatorSettingUpdated: new Slot<{ - hideToolbar?: boolean; - blackBackground?: boolean; - fillScreen?: boolean; - }>(), - navigatorFrameChanged: new Slot(), - fullScreenToggled: new Slot(), - - elementResizeStart: new Slot(), - elementResizeEnd: new Slot(), - toggleNoteSlicer: new Slot(), - - toolbarLocked: new Slot(), - }; - 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); } }) ); diff --git a/blocksuite/blocks/src/root-block/widgets/drag-handle/watchers/edgeless-watcher.ts b/blocksuite/blocks/src/root-block/widgets/drag-handle/watchers/edgeless-watcher.ts index c871858816ceb..0867bebb8fce0 100644 --- a/blocksuite/blocks/src/root-block/widgets/drag-handle/watchers/edgeless-watcher.ts +++ b/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); }) diff --git a/blocksuite/blocks/src/root-block/widgets/edgeless-auto-connect/edgeless-auto-connect.ts b/blocksuite/blocks/src/root-block/widgets/edgeless-auto-connect/edgeless-auto-connect.ts index 303b6ac01cc43..dbbd9184fae49 100644 --- a/blocksuite/blocks/src/root-block/widgets/edgeless-auto-connect/edgeless-auto-connect.ts +++ b/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; }) ); diff --git a/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/index.ts b/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/index.ts index fc6695a9d1e52..3559642455f6f 100644 --- a/blocksuite/blocks/src/root-block/widgets/edgeless-zoom-toolbar/index.ts +++ b/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 }) => { diff --git a/blocksuite/presets/src/fragments/frame-panel/header/frame-panel-header.ts b/blocksuite/presets/src/fragments/frame-panel/header/frame-panel-header.ts index 43be03979cc0f..9744725d8703b 100644 --- a/blocksuite/presets/src/fragments/frame-panel/header/frame-panel-header.ts +++ b/blocksuite/presets/src/fragments/frame-panel/header/frame-panel-header.ts @@ -2,6 +2,7 @@ import type { EditorHost } from '@blocksuite/block-std'; import { createButtonPopper, DocModeProvider, + EdgelessLegacySlotIdentifier, EdgelessRootService, EditPropsStore, type NavigatorMode, @@ -134,14 +135,14 @@ export class FramePanelHeader extends WithDisposable(LitElement) { private readonly _setEdgelessDisposables = () => { if (!this._edgelessRootService) return; + const slots = this.editorHost.std.get(EdgelessLegacySlotIdentifier); + this._clearEdgelessDisposables(); this._edgelessDisposables = new DisposableGroup(); this._edgelessDisposables.add( - this._edgelessRootService.slots.navigatorSettingUpdated.on( - ({ fillScreen }) => { - this._navigatorMode = fillScreen ? 'fill' : 'fit'; - } - ) + slots.navigatorSettingUpdated.on(({ fillScreen }) => { + this._navigatorMode = fillScreen ? 'fill' : 'fit'; + }) ); }; diff --git a/blocksuite/presets/src/fragments/frame-panel/header/frames-setting-menu.ts b/blocksuite/presets/src/fragments/frame-panel/header/frames-setting-menu.ts index 4482a11120af3..f05c5973edcc1 100644 --- a/blocksuite/presets/src/fragments/frame-panel/header/frames-setting-menu.ts +++ b/blocksuite/presets/src/fragments/frame-panel/header/frames-setting-menu.ts @@ -1,5 +1,9 @@ import type { EditorHost } from '@blocksuite/block-std'; -import { EdgelessRootService, EditPropsStore } from '@blocksuite/blocks'; +import { + EdgelessLegacySlotIdentifier, + EdgelessRootService, + EditPropsStore, +} from '@blocksuite/blocks'; import { WithDisposable } from '@blocksuite/global/utils'; import { css, html, LitElement, type PropertyValues } from 'lit'; import { property, state } from 'lit/decorators.js'; @@ -72,16 +76,20 @@ export const AFFINE_FRAMES_SETTING_MENU = 'affine-frames-setting-menu'; export class FramesSettingMenu extends WithDisposable(LitElement) { static override styles = styles; + get slots() { + return this.editorHost.std.get(EdgelessLegacySlotIdentifier); + } + private readonly _onBlackBackgroundChange = (checked: boolean) => { this.blackBackground = checked; - this._edgelessRootService?.slots.navigatorSettingUpdated.emit({ + this.slots.navigatorSettingUpdated.emit({ blackBackground: this.blackBackground, }); }; private readonly _onFillScreenChange = (checked: boolean) => { this.fillScreen = checked; - this._edgelessRootService?.slots.navigatorSettingUpdated.emit({ + this.slots.navigatorSettingUpdated.emit({ fillScreen: this.fillScreen, }); this._editPropsStore.setStorage('presentFillScreen', this.fillScreen); @@ -89,7 +97,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) { private readonly _onHideToolBarChange = (checked: boolean) => { this.hideToolbar = checked; - this._edgelessRootService?.slots.navigatorSettingUpdated.emit({ + this.slots.navigatorSettingUpdated.emit({ hideToolbar: this.hideToolbar, }); this._editPropsStore.setStorage('presentHideToolbar', this.hideToolbar); @@ -170,7 +178,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) { if (_changedProperties.has('editorHost')) { if (this._edgelessRootService) { this.disposables.add( - this._edgelessRootService.slots.navigatorSettingUpdated.on( + this.slots.navigatorSettingUpdated.on( ({ blackBackground, hideToolbar }) => { if ( blackBackground !== undefined && diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts index abe5a3d27de6c..2d82398b99e1f 100644 --- a/tools/utils/src/workspace.gen.ts +++ b/tools/utils/src/workspace.gen.ts @@ -18,6 +18,7 @@ export const PackageList = [ name: '@blocksuite/affine-block-attachment', workspaceDependencies: [ 'blocksuite/affine/block-embed', + 'blocksuite/affine/block-surface', 'blocksuite/affine/components', 'blocksuite/affine/model', 'blocksuite/affine/shared', @@ -113,6 +114,7 @@ export const PackageList = [ name: '@blocksuite/affine-block-note', workspaceDependencies: [ 'blocksuite/affine/block-embed', + 'blocksuite/affine/block-surface', 'blocksuite/affine/components', 'blocksuite/affine/model', 'blocksuite/affine/shared', diff --git a/yarn.lock b/yarn.lock index f6f0863a23a8e..cbf81011ec557 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3244,6 +3244,7 @@ __metadata: resolution: "@blocksuite/affine-block-attachment@workspace:blocksuite/affine/block-attachment" dependencies: "@blocksuite/affine-block-embed": "workspace:*" + "@blocksuite/affine-block-surface": "workspace:*" "@blocksuite/affine-components": "workspace:*" "@blocksuite/affine-model": "workspace:*" "@blocksuite/affine-shared": "workspace:*" @@ -3407,6 +3408,7 @@ __metadata: resolution: "@blocksuite/affine-block-note@workspace:blocksuite/affine/block-note" dependencies: "@blocksuite/affine-block-embed": "workspace:*" + "@blocksuite/affine-block-surface": "workspace:*" "@blocksuite/affine-components": "workspace:*" "@blocksuite/affine-model": "workspace:*" "@blocksuite/affine-shared": "workspace:*"