luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat(editor): replace slot with rxjs subject (#10768)

Browse Source
This commit is contained in:
Mirone
2025-03-12 11:29:24 +09:00
committed by GitHub
parent 19f978d9aa
commit cd63e0ed8b
302 changed files with 1405 additions and 1251 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
blocksuite/affine/fragments/fragment-doc-title/package.json
View File

@@ -30,6 +30,7 @@
"@toeverything/theme": "^1.1.12",
"lit": "^3.2.0",
"minimatch": "^10.0.1",
"rxjs": "^7.8.1",
"zod": "^3.23.8"
},
"exports": {

1
blocksuite/affine/fragments/fragment-frame-panel/package.json
View File

@@ -32,6 +32,7 @@
"lit": "^3.2.0",
"lodash-es": "^4.17.21",
"minimatch": "^10.0.1",
"rxjs": "^7.8.1",
"zod": "^3.23.8"
},
"exports": {

4
blocksuite/affine/fragments/fragment-frame-panel/src/body/frame-panel-body.ts
View File

@@ -9,9 +9,9 @@ import {
generateKeyBetweenV2,
GfxControllerIdentifier,
} from '@blocksuite/block-std/gfx';
import { DisposableGroup } from '@blocksuite/global/disposable';
import { Bound } from '@blocksuite/global/gfx';
import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit';
import { DisposableGroup } from '@blocksuite/global/slot';
import type { Store } from '@blocksuite/store';
import { css, html, nothing, type PropertyValues } from 'lit';
import { property, query, state } from 'lit/decorators.js';
@@ -326,7 +326,7 @@ export class FramePanelBody extends SignalWatcher(
this._clearDocDisposables();
this._docDisposables = new DisposableGroup();
this._docDisposables.add(
doc.slots.blockUpdated.on(({ type, flavour }) => {
doc.slots.blockUpdated.subscribe(({ type, flavour }) => {
if (flavour === 'affine:frame' && type !== 'update') {
requestAnimationFrame(() => {
this._updateFrames();

2
blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card-title-editor.ts
View File

@@ -39,7 +39,7 @@ export class FrameCardTitleEditor extends WithDisposable(ShadowlessElement) {
this.inlineEditor.selectAll();
this.inlineEditor.slots.renderComplete.on(() => {
this.inlineEditor.slots.renderComplete.subscribe(() => {
this.requestUpdate();
});

2
blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-card-title.ts
View File

@@ -1,7 +1,7 @@
import type { FrameBlockModel } from '@blocksuite/affine-model';
import { ShadowlessElement } from '@blocksuite/block-std';
import { DisposableGroup } from '@blocksuite/global/disposable';
import { WithDisposable } from '@blocksuite/global/lit';
import { DisposableGroup } from '@blocksuite/global/slot';
import { css, html, type PropertyValues } from 'lit';
import { property, query } from 'lit/decorators.js';
import type * as Y from 'yjs';

9
blocksuite/affine/fragments/fragment-frame-panel/src/card/frame-preview.ts
View File

@@ -8,9 +8,9 @@ import {
ShadowlessElement,
} from '@blocksuite/block-std';
import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
import { DisposableGroup } from '@blocksuite/global/disposable';
import { Bound, deserializeXYWH } from '@blocksuite/global/gfx';
import { WithDisposable } from '@blocksuite/global/lit';
import { DisposableGroup } from '@blocksuite/global/slot';
import { type Query, type Store } from '@blocksuite/store';
import { css, html, nothing, type PropertyValues } from 'lit';
import { property, query, state } from 'lit/decorators.js';
@@ -122,7 +122,7 @@ export class FramePreview extends WithDisposable(ShadowlessElement) {
override mounted() {
const std = this.std;
const { view } = std;
view.viewUpdated.on(payload => {
view.viewUpdated.subscribe(payload => {
if (
payload.type !== 'block' ||
payload.method !== 'add' ||
@@ -131,7 +131,8 @@ export class FramePreview extends WithDisposable(ShadowlessElement) {
return;
}
const viewport = std.get(GfxControllerIdentifier).viewport;
viewport.sizeUpdated.once(() => {
const subscription = viewport.sizeUpdated.subscribe(() => {
subscription.unsubscribe();
refreshViewport();
});
});
@@ -186,7 +187,7 @@ export class FramePreview extends WithDisposable(ShadowlessElement) {
this._clearFrameDisposables();
this._frameDisposables = new DisposableGroup();
this._frameDisposables.add(
frame.propsUpdated.on(
frame.propsUpdated.subscribe(
debounce(this._updateFrameViewportWH, 10, { leading: true })
)
);

4
blocksuite/affine/fragments/fragment-frame-panel/src/header/frame-panel-header.ts
View File

@@ -7,8 +7,8 @@ import {
import { createButtonPopper } from '@blocksuite/affine-shared/utils';
import type { EditorHost } from '@blocksuite/block-std';
import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
import { DisposableGroup } from '@blocksuite/global/disposable';
import { WithDisposable } from '@blocksuite/global/lit';
import { DisposableGroup } from '@blocksuite/global/slot';
import { PresentationIcon, SettingsIcon } from '@blocksuite/icons/lit';
import { css, html, LitElement, type PropertyValues } from 'lit';
import { property, query, state } from 'lit/decorators.js';
@@ -143,7 +143,7 @@ export class FramePanelHeader extends WithDisposable(LitElement) {
this._clearEdgelessDisposables();
this._edgelessDisposables = new DisposableGroup();
this._edgelessDisposables.add(
slots.navigatorSettingUpdated.on(({ fillScreen }) => {
slots.navigatorSettingUpdated.subscribe(({ fillScreen }) => {
this._navigatorMode = fillScreen ? 'fill' : 'fit';
})
);

14
blocksuite/affine/fragments/fragment-frame-panel/src/header/frames-setting-menu.ts
View File

@@ -82,14 +82,14 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
private readonly _onBlackBackgroundChange = (checked: boolean) => {
this.blackBackground = checked;
this.slots.navigatorSettingUpdated.emit({
this.slots.navigatorSettingUpdated.next({
blackBackground: this.blackBackground,
});
};
private readonly _onFillScreenChange = (checked: boolean) => {
this.fillScreen = checked;
this.slots.navigatorSettingUpdated.emit({
this.slots.navigatorSettingUpdated.next({
fillScreen: this.fillScreen,
});
this._editPropsStore.setStorage('presentFillScreen', this.fillScreen);
@@ -97,7 +97,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
private readonly _onHideToolBarChange = (checked: boolean) => {
this.hideToolbar = checked;
this.slots.navigatorSettingUpdated.emit({
this.slots.navigatorSettingUpdated.next({
hideToolbar: this.hideToolbar,
});
this._editPropsStore.setStorage('presentHideToolbar', this.hideToolbar);
@@ -138,7 +138,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
<div class="action-label">Fill Screen</div>
<div class="toggle-button">
<toggle-switch
.on=${this.fillScreen}
.subscribe=${this.fillScreen}
.onChange=${this._onFillScreenChange}
></toggle-switch>
</div>
@@ -153,7 +153,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
<div class="action-label">Dark background</div>
<div class="toggle-button">
<toggle-switch
.on=${this.blackBackground}
.subscribe=${this.blackBackground}
.onChange=${this._onBlackBackgroundChange}
></toggle-switch>
</div>
@@ -162,7 +162,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
<div class="action-label">Hide toolbar</div>
<div class="toggle-button">
<toggle-switch
.on=${this.hideToolbar}
.subscribe=${this.hideToolbar}
.onChange=${this._onHideToolBarChange}
></toggle-switch>
</div>
@@ -175,7 +175,7 @@ export class FramesSettingMenu extends WithDisposable(LitElement) {
const docModeProvider = this.editorHost.std.get(DocModeProvider);
if (docModeProvider.getEditorMode() === 'edgeless') {
this.disposables.add(
this.slots.navigatorSettingUpdated.on(
this.slots.navigatorSettingUpdated.subscribe(
({ blackBackground, hideToolbar }) => {
if (
blackBackground !== undefined &&

1
blocksuite/affine/fragments/fragment-outline/package.json
View File

@@ -31,6 +31,7 @@
"@vanilla-extract/css": "^1.17.0",
"lit": "^3.2.0",
"minimatch": "^10.0.1",
"rxjs": "^7.8.1",
"zod": "^3.23.8"
},
"exports": {

2
blocksuite/affine/fragments/fragment-outline/src/header/outline-setting-menu.ts
View File

@@ -26,7 +26,7 @@ export class OutlineNotePreviewSettingMenu extends SignalWatcher(
<div class=${styles.actionLabel}>Show type icon</div>
<div class=${styles.toggleButton}>
<toggle-switch
.on=${showPreviewIcon}
.subscribe=${showPreviewIcon}
.onChange=${() => {
this._context.showIcons$.value = !showPreviewIcon;
}}

2
blocksuite/affine/fragments/fragment-outline/src/outline-viewer.ts
View File

@@ -201,7 +201,7 @@ export class OutlineViewer extends SignalWatcher(
);
this.disposables.add(
this.editor.doc.workspace.meta.docMetaUpdated.on(() => {
this.editor.doc.workspace.meta.docMetaUpdated.subscribe(() => {
this.requestUpdate();
})
);

2
blocksuite/affine/fragments/fragment-outline/src/utils/scroll.ts
View File

@@ -3,8 +3,8 @@ import { NoteDisplayMode } from '@blocksuite/affine-model';
import { DocModeProvider } from '@blocksuite/affine-shared/services';
import type { Viewport } from '@blocksuite/affine-shared/types';
import type { EditorHost } from '@blocksuite/block-std';
import { DisposableGroup } from '@blocksuite/global/disposable';
import { clamp } from '@blocksuite/global/gfx';
import { DisposableGroup } from '@blocksuite/global/slot';
import { getHeadingBlocksFromDoc } from './query.js';