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

This commit is contained in:
Saul-Mirone
2024-12-27 04:22:52 +00:00
parent 71272203b0
commit 3ae3ae98c8
24 changed files with 167 additions and 113 deletions
@@ -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:*",
@@ -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<string, Slot> }) {
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;
@@ -30,6 +30,9 @@
},
{
"path": "../block-embed"
},
{
"path": "../block-surface"
}
]
}
@@ -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'
);
}
}
@@ -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;
@@ -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;
@@ -27,6 +27,9 @@
},
{
"path": "../shared"
},
{
"path": "../block-surface"
}
]
}
+1 -1
View File
@@ -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;
@@ -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:*",
@@ -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<string, Slot>;
};
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;
})
);
@@ -30,6 +30,9 @@
},
{
"path": "../block-embed"
},
{
"path": "../block-surface"
}
]
}
@@ -1 +1,2 @@
export * from './crud-extension';
export * from './legacy-slot-extension';
@@ -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<boolean>;
navigatorSettingUpdated: Slot<{
hideToolbar?: boolean;
blackBackground?: boolean;
fillScreen?: boolean;
}>;
navigatorFrameChanged: Slot<FrameBlockModel>;
fullScreenToggled: Slot;
elementResizeStart: Slot;
elementResizeEnd: Slot;
toggleNoteSlicer: Slot;
toolbarLocked: Slot<boolean>;
}>('AffineEdgelessLegacySlotService');
export const EdgelessLegacySlotExtension: ExtensionType = {
setup: di => {
di.addImpl(EdgelessLegacySlotIdentifier, () => ({
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>(),
}));
},
};
@@ -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[] = [
@@ -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;
@@ -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() {
@@ -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);
}
})
);
@@ -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);
})
@@ -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;
})
);
@@ -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 }) => {
@@ -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';
})
);
};
@@ -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 &&
+2
View File
@@ -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',
+2
View File
@@ -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:*"