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

refactor(editor): group and expose parameters of createButtonPopper (#10999)

Browse Source
This commit is contained in:
L-Sun
2025-03-20 08:37:59 +00:00
parent 6ff19ca307
commit da63d51b7e
8 changed files with 76 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/frame-order-button.ts
View File

@@ -29,14 +29,12 @@ export class EdgelessFrameOrderButton extends WithDisposable(LitElement) {
} }
override firstUpdated() { override firstUpdated() {
this._edgelessFrameOrderPopper = createButtonPopper( this._edgelessFrameOrderPopper = createButtonPopper({
this._edgelessFrameOrderButton, reference: this._edgelessFrameOrderButton,
this._edgelessFrameOrderMenu, popperElement: this._edgelessFrameOrderMenu,
({ display }) => this.setPopperShow(display === 'show'), stateUpdated: ({ display }) => this.setPopperShow(display === 'show'),
{ mainAxis: 22,
mainAxis: 22, });
}
);
} }
protected override render() { protected override render() {

14
blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/navigator-setting-button.ts
View File

@@ -96,14 +96,12 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
} }
override firstUpdated() { override firstUpdated() {
this._navigatorSettingPopper = createButtonPopper( this._navigatorSettingPopper = createButtonPopper({
this._navigatorSettingButton, reference: this._navigatorSettingButton,
this._navigatorSettingMenu, popperElement: this._navigatorSettingMenu,
({ display }) => this.setPopperShow(display === 'show'), stateUpdated: ({ display }) => this.setPopperShow(display === 'show'),
{ mainAxis: 22,
mainAxis: 22, });
}
);
} }
override render() { override render() {

28
blocksuite/affine/components/src/toolbar/menu-button.ts
View File

@@ -1,5 +1,8 @@
import { PANEL_BASE } from '@blocksuite/affine-shared/styles'; import { PANEL_BASE } from '@blocksuite/affine-shared/styles';
import { createButtonPopper } from '@blocksuite/affine-shared/utils'; import {
type ButtonPopperOptions,
createButtonPopper,
} from '@blocksuite/affine-shared/utils';
import { WithDisposable } from '@blocksuite/global/lit'; import { WithDisposable } from '@blocksuite/global/lit';
import { import {
css, css,
@@ -25,13 +28,12 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
private _popper!: ReturnType<typeof createButtonPopper>; private _popper!: ReturnType<typeof createButtonPopper>;
override firstUpdated() { override firstUpdated() {
this._popper = createButtonPopper( this._popper = createButtonPopper({
this._trigger, reference: this._trigger,
this._content, popperElement: this._content,
({ display }) => { stateUpdated: ({ display }) => {
const opened = display === 'show'; const opened = display === 'show';
this._trigger.showTooltip = !opened; this._trigger.showTooltip = !opened;
this.dispatchEvent( this.dispatchEvent(
new CustomEvent('toggle', { new CustomEvent('toggle', {
detail: opened, detail: opened,
@@ -41,12 +43,11 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
}) })
); );
}, },
{ mainAxis: 12,
mainAxis: 12, ignoreShift: true,
ignoreShift: true, offsetHeight: 6 * 4,
offsetHeight: 6 * 4, ...this.popperOptions,
} });
);
this._disposables.addFromEvent(this, 'keydown', (e: KeyboardEvent) => { this._disposables.addFromEvent(this, 'keydown', (e: KeyboardEvent) => {
e.stopPropagation(); e.stopPropagation();
if (e.key === 'Escape') { if (e.key === 'Escape') {
@@ -93,6 +94,9 @@ export class EditorMenuButton extends WithDisposable(LitElement) {
@property({ attribute: false }) @property({ attribute: false })
accessor contentPadding: string | undefined = undefined; accessor contentPadding: string | undefined = undefined;
@property({ attribute: false })
accessor popperOptions: Partial<ButtonPopperOptions> = {};
} }
export class EditorMenuContent extends LitElement { export class EditorMenuContent extends LitElement {

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

@@ -172,17 +172,15 @@ export class FramePanelHeader extends WithDisposable(LitElement) {
override firstUpdated() { override firstUpdated() {
const disposables = this.disposables; const disposables = this.disposables;
this._framesSettingMenuPopper = createButtonPopper( this._framesSettingMenuPopper = createButtonPopper({
this._frameSettingButton, reference: this._frameSettingButton,
this._frameSettingMenu, popperElement: this._frameSettingMenu,
({ display }) => { stateUpdated: ({ display }) => {
this._settingPopperShow = display === 'show'; this._settingPopperShow = display === 'show';
}, },
{ mainAxis: 14,
mainAxis: 14, crossAxis: -100,
crossAxis: -100, });
}
);
disposables.add(this._framesSettingMenuPopper); disposables.add(this._framesSettingMenuPopper);
} }

16
blocksuite/affine/fragments/fragment-outline/src/card/outline-card.ts
View File

@@ -152,17 +152,15 @@ export class OutlineNoteCard extends SignalWatcher(
} }
override firstUpdated() { override firstUpdated() {
this._displayModePopper = createButtonPopper( this._displayModePopper = createButtonPopper({
this._displayModeButtonGroup, reference: this._displayModeButtonGroup,
this._displayModePanel, popperElement: this._displayModePanel,
({ display }) => { stateUpdated: ({ display }) => {
this._showPopper$.value = display === 'show'; this._showPopper$.value = display === 'show';
}, },
{ mainAxis: 0,
mainAxis: 0, crossAxis: -60,
crossAxis: -60, });
}
);
this.disposables.add(this._displayModePopper); this.disposables.add(this._displayModePopper);
} }

16
blocksuite/affine/fragments/fragment-outline/src/header/outline-panel-header.ts
View File

@@ -22,17 +22,15 @@ export class OutlinePanelHeader extends SignalWatcher(
private readonly _settingPopperShow$ = signal(false); private readonly _settingPopperShow$ = signal(false);
override firstUpdated() { override firstUpdated() {
this._notePreviewSettingMenuPopper = createButtonPopper( this._notePreviewSettingMenuPopper = createButtonPopper({
this._noteSettingButton, reference: this._noteSettingButton,
this._notePreviewSettingMenu, popperElement: this._notePreviewSettingMenu,
({ display }) => { stateUpdated: ({ display }) => {
this._settingPopperShow$.value = display === 'show'; this._settingPopperShow$.value = display === 'show';
}, },
{ mainAxis: 14,
mainAxis: 14, crossAxis: -30,
crossAxis: -30, });
}
);
this.disposables.add(this._notePreviewSettingMenuPopper); this.disposables.add(this._notePreviewSettingMenuPopper);
} }

36
blocksuite/affine/shared/src/utils/button-popper.ts
View File

@@ -32,6 +32,17 @@ export function listenClickAway(
type Display = 'show' | 'hidden'; type Display = 'show' | 'hidden';
const ATTR_SHOW = 'data-show'; const ATTR_SHOW = 'data-show';
export type ButtonPopperOptions = {
reference: HTMLElement;
popperElement: HTMLElement;
stateUpdated?: (state: { display: Display }) => void;
mainAxis?: number;
crossAxis?: number;
rootBoundary?: Rect | (() => Rect | undefined);
ignoreShift?: boolean;
offsetHeight?: number;
};
/** /**
* Using attribute 'data-show' to control popper visibility. * Using attribute 'data-show' to control popper visibility.
* *
@@ -44,28 +55,19 @@ const ATTR_SHOW = 'data-show';
* } * }
* ``` * ```
*/ */
export function createButtonPopper( export function createButtonPopper(options: ButtonPopperOptions) {
reference: HTMLElement, let display: Display = 'hidden';
popperElement: HTMLElement, let cleanup: (() => void) | void;
stateUpdated: (state: { display: Display }) => void = () => { const {
/** DEFAULT EMPTY FUNCTION */ reference,
}, popperElement,
{ stateUpdated = () => {},
mainAxis, mainAxis,
crossAxis, crossAxis,
rootBoundary, rootBoundary,
ignoreShift, ignoreShift,
offsetHeight, offsetHeight,
}: { } = options;
mainAxis?: number;
crossAxis?: number;
rootBoundary?: Rect | (() => Rect | undefined);
ignoreShift?: boolean;
offsetHeight?: number;
} = {}
) {
let display: Display = 'hidden';
let cleanup: (() => void) | void;
const originMaxHeight = window.getComputedStyle(popperElement).maxHeight; const originMaxHeight = window.getComputedStyle(popperElement).maxHeight;

17
packages/frontend/core/src/blocksuite/ai/components/copy-more.ts
View File

@@ -146,15 +146,14 @@ export class ChatCopyMore extends WithDisposable(LitElement) {
this._morePopper?.dispose(); this._morePopper?.dispose();
this._morePopper = null; this._morePopper = null;
} else if (!this._morePopper) { } else if (!this._morePopper) {
this._morePopper = createButtonPopper( this._morePopper = createButtonPopper({
this._moreButton, reference: this._moreButton,
this._moreMenu, popperElement: this._moreMenu,
({ display }) => (this._showMoreMenu = display === 'show'), stateUpdated: ({ display }) =>
{ (this._showMoreMenu = display === 'show'),
mainAxis: 0, mainAxis: 0,
crossAxis: -100, crossAxis: -100,
} });
);
} }
} }
} }