mirror of
https://github.com/toeverything/AFFiNE.git
synced 2026-02-19 15:26:59 +08:00
2c79d7229f
The main changes in this PR involve replacing the deprecated `BlockServiceWatcher` with the new `LifeCycleWatcher` across multiple files. Here's a detailed breakdown:
1. **Core Architectural Change:**
- Removed `BlockServiceWatcher` class completely (deleted file)
- Migrated to `LifeCycleWatcher` as the new standard for watching component lifecycle events
2. **Key Changes in Implementation:**
- Changed from using `blockService.specSlots` events to using `view.viewUpdated` events
- Replaced `flavour` static property with `key` static property
- Updated event handling to use more specific payload type checking
3. **Major File Changes:**
- Modified multiple block components:
- Embed synced doc block
- Frame preview
- Edgeless root spec
- AI-related components (code, image, paragraph, etc.)
- Quick search service
- Edgeless clipboard
4. **Pattern of Changes:**
The migration follows a consistent pattern:
```typescript
// Old pattern
class SomeWatcher extends BlockServiceWatcher {
static override readonly flavour = 'some:flavour';
mounted() {
this.blockService.specSlots.viewConnected.on(...)
}
}
// New pattern
class SomeWatcher extends LifeCycleWatcher {
static override key = 'some-watcher';
mounted() {
const { view } = this.std;
view.viewUpdated.on(payload => {
if (payload.type !== 'block' || payload.method !== 'add') return;
// Handle event
});
}
}
```
5. **Benefits:**
- More explicit and type-safe event handling
- Cleaner architecture by removing deprecated code
- More consistent approach to lifecycle management
- Better separation of concerns
This appears to be a significant architectural improvement that modernizes the codebase by removing deprecated patterns and standardizing on a more robust lifecycle management system.
97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
import { autoConnectWidget } from '@blocksuite/affine-widget-edgeless-auto-connect';
|
|
import { frameTitleWidget } from '@blocksuite/affine-widget-frame-title';
|
|
import { edgelessRemoteSelectionWidget } from '@blocksuite/affine-widget-remote-selection';
|
|
import {
|
|
BlockViewExtension,
|
|
LifeCycleWatcher,
|
|
WidgetViewExtension,
|
|
} from '@blocksuite/block-std';
|
|
import {
|
|
GfxControllerIdentifier,
|
|
ToolController,
|
|
} from '@blocksuite/block-std/gfx';
|
|
import type { ExtensionType } from '@blocksuite/store';
|
|
import { literal, unsafeStatic } from 'lit/static-html.js';
|
|
|
|
import { CommonSpecs } from '../common-specs/index.js';
|
|
import { AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET } from '../widgets/edgeless-zoom-toolbar/index.js';
|
|
import { EDGELESS_ELEMENT_TOOLBAR_WIDGET } from '../widgets/element-toolbar/index.js';
|
|
import { NOTE_SLICER_WIDGET } from './components/note-slicer/index.js';
|
|
import { EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET } from './components/presentation/edgeless-navigator-black-background.js';
|
|
import { EDGELESS_DRAGGING_AREA_WIDGET } from './components/rects/edgeless-dragging-area-rect.js';
|
|
import { EDGELESS_SELECTED_RECT_WIDGET } from './components/rects/edgeless-selected-rect.js';
|
|
import { EDGELESS_TOOLBAR_WIDGET } from './components/toolbar/edgeless-toolbar.js';
|
|
import { EdgelessRootService } from './edgeless-root-service.js';
|
|
|
|
export const edgelessZoomToolbarWidget = WidgetViewExtension(
|
|
'affine:page',
|
|
AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET,
|
|
literal`${unsafeStatic(AFFINE_EDGELESS_ZOOM_TOOLBAR_WIDGET)}`
|
|
);
|
|
export const elementToolbarWidget = WidgetViewExtension(
|
|
'affine:page',
|
|
EDGELESS_ELEMENT_TOOLBAR_WIDGET,
|
|
literal`${unsafeStatic(EDGELESS_ELEMENT_TOOLBAR_WIDGET)}`
|
|
);
|
|
export const edgelessDraggingAreaWidget = WidgetViewExtension(
|
|
'affine:page',
|
|
EDGELESS_DRAGGING_AREA_WIDGET,
|
|
literal`${unsafeStatic(EDGELESS_DRAGGING_AREA_WIDGET)}`
|
|
);
|
|
export const noteSlicerWidget = WidgetViewExtension(
|
|
'affine:page',
|
|
NOTE_SLICER_WIDGET,
|
|
literal`${unsafeStatic(NOTE_SLICER_WIDGET)}`
|
|
);
|
|
export const edgelessNavigatorBlackBackgroundWidget = WidgetViewExtension(
|
|
'affine:page',
|
|
EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
|
|
literal`${unsafeStatic(EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET)}`
|
|
);
|
|
export const edgelessSelectedRectWidget = WidgetViewExtension(
|
|
'affine:page',
|
|
EDGELESS_SELECTED_RECT_WIDGET,
|
|
literal`${unsafeStatic(EDGELESS_SELECTED_RECT_WIDGET)}`
|
|
);
|
|
export const edgelessToolbarWidget = WidgetViewExtension(
|
|
'affine:page',
|
|
EDGELESS_TOOLBAR_WIDGET,
|
|
literal`${unsafeStatic(EDGELESS_TOOLBAR_WIDGET)}`
|
|
);
|
|
|
|
class EdgelessLocker extends LifeCycleWatcher {
|
|
static override key = 'edgeless-locker';
|
|
|
|
override mounted() {
|
|
const { viewport } = this.std.get(GfxControllerIdentifier);
|
|
viewport.locked = true;
|
|
}
|
|
}
|
|
|
|
const EdgelessCommonExtension: ExtensionType[] = [
|
|
CommonSpecs,
|
|
ToolController,
|
|
EdgelessRootService,
|
|
].flat();
|
|
|
|
export const EdgelessRootBlockSpec: ExtensionType[] = [
|
|
...EdgelessCommonExtension,
|
|
BlockViewExtension('affine:page', literal`affine-edgeless-root`),
|
|
edgelessRemoteSelectionWidget,
|
|
edgelessZoomToolbarWidget,
|
|
frameTitleWidget,
|
|
elementToolbarWidget,
|
|
autoConnectWidget,
|
|
edgelessDraggingAreaWidget,
|
|
noteSlicerWidget,
|
|
edgelessNavigatorBlackBackgroundWidget,
|
|
edgelessSelectedRectWidget,
|
|
edgelessToolbarWidget,
|
|
];
|
|
|
|
export const PreviewEdgelessRootBlockSpec: ExtensionType[] = [
|
|
...EdgelessCommonExtension,
|
|
BlockViewExtension('affine:page', literal`affine-edgeless-root-preview`),
|
|
EdgelessLocker,
|
|
];
|