mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-07-23 21:38:44 +08:00
refactor(editor): extract edgeless legacy slots (#9363)
This commit is contained in:
@@ -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"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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);
|
||||
})
|
||||
|
||||
+13
-9
@@ -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 &&
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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:*"
|
||||
|
||||
Reference in New Issue
Block a user