From d398ee4dfacd533ad9659db33c2fa52fddefcc52 Mon Sep 17 00:00:00 2001 From: Saul-Mirone Date: Sat, 22 Mar 2025 14:39:04 +0000 Subject: [PATCH] refactor(editor): move present components to its package (#11089) --- .../edgeless-toolbar}/presentation-toolbar.ts | 59 +++++++++++++------ .../affine/blocks/block-frame/src/effects.ts | 21 +++++++ .../src}/present/frame-order-button.ts | 4 +- .../src}/present/frame-order-menu.ts | 13 ++-- .../src}/present/navigator-setting-button.ts | 9 +-- .../src}/present/present-button.ts | 0 .../src/edgeless/components/utils.ts | 24 -------- .../affine/blocks/block-root/src/effects.ts | 22 ------- 8 files changed, 78 insertions(+), 74 deletions(-) rename blocksuite/affine/blocks/{block-root/src/edgeless/components/toolbar => block-frame/src/edgeless-toolbar}/presentation-toolbar.ts (90%) rename blocksuite/affine/blocks/{block-root/src/edgeless/components/toolbar => block-frame/src}/present/frame-order-button.ts (94%) rename blocksuite/affine/blocks/{block-root/src/edgeless/components/toolbar => block-frame/src}/present/frame-order-menu.ts (95%) rename blocksuite/affine/blocks/{block-root/src/edgeless/components/toolbar => block-frame/src}/present/navigator-setting-button.ts (94%) rename blocksuite/affine/blocks/{block-root/src/edgeless/components/toolbar => block-frame/src}/present/present-button.ts (100%) diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/presentation-toolbar.ts b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/presentation-toolbar.ts similarity index 90% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/presentation-toolbar.ts rename to blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/presentation-toolbar.ts index 56630828a5..349a2e354d 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/presentation-toolbar.ts +++ b/blocksuite/affine/blocks/block-frame/src/edgeless-toolbar/presentation-toolbar.ts @@ -1,8 +1,3 @@ -import { - EdgelessFrameManagerIdentifier, - isFrameBlock, - type NavigatorMode, -} from '@blocksuite/affine-block-frame'; import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import { toast } from '@blocksuite/affine-components/toast'; import type { FrameBlockModel } from '@blocksuite/affine-model'; @@ -11,6 +6,7 @@ import { ViewportElementProvider, } from '@blocksuite/affine-shared/services'; import { EdgelessToolbarToolMixin } from '@blocksuite/affine-widget-edgeless-toolbar'; +import type { BlockComponent } from '@blocksuite/block-std'; import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx'; import { Bound, clamp } from '@blocksuite/global/gfx'; import { SignalWatcher } from '@blocksuite/global/lit'; @@ -26,8 +22,11 @@ import { cssVar } from '@toeverything/theme'; import { css, html, LitElement, nothing, type PropertyValues } from 'lit'; import { property, state } from 'lit/decorators.js'; -import type { EdgelessRootBlockComponent } from '../../edgeless-root-block.js'; -import { launchIntoFullscreen } from '../utils.js'; +import { + EdgelessFrameManagerIdentifier, + isFrameBlock, + type NavigatorMode, +} from '../frame-manager'; export class PresentationToolbar extends EdgelessToolbarToolMixin( SignalWatcher(LitElement) @@ -145,7 +144,7 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin( return this.edgeless.std.get(EdgelessLegacySlotIdentifier); } - constructor(edgeless: EdgelessRootBlockComponent) { + constructor(edgeless: BlockComponent) { super(); this.edgeless = edgeless; } @@ -172,11 +171,11 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin( private _exitPresentation() { // When exit presentation mode, we need to set the tool to default or pan // And exit fullscreen - this.setEdgelessTool( - this.edgeless.doc.readonly - ? { type: 'pan', panning: false } - : { type: 'default' } - ); + const tool = this.edgeless.doc.readonly + ? { type: 'pan', panning: false } + : { type: 'default' }; + // @ts-expect-error FIXME: resolve after gfx tool refactor + this.setEdgelessTool(tool); if (document.fullscreenElement) { document.exitFullscreen().catch(console.error); @@ -310,11 +309,11 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin( this.edgelessTool.type === 'frameNavigator' && this._fullScreenMode ) { - this.setEdgelessTool( - this.edgeless.doc.readonly - ? { type: 'pan', panning: false } - : { type: 'default' } - ); + const tool = this.edgeless.doc.readonly + ? { type: 'pan', panning: false } + : { type: 'default' }; + // @ts-expect-error FIXME: resolve after gfx tool refactor + this.setEdgelessTool(tool); } } @@ -459,3 +458,27 @@ export class PresentationToolbar extends EdgelessToolbarToolMixin( @property({ type: Boolean }) accessor settingMenuShow = false; } + +function launchIntoFullscreen(element: Element) { + if (element.requestFullscreen) { + element.requestFullscreen().catch(console.error); + } else if ( + 'mozRequestFullScreen' in element && + element.mozRequestFullScreen instanceof Function + ) { + // Firefox + element.mozRequestFullScreen(); + } else if ( + 'webkitRequestFullscreen' in element && + element.webkitRequestFullscreen instanceof Function + ) { + // Chrome, Safari and Opera + element.webkitRequestFullscreen(); + } else if ( + 'msRequestFullscreen' in element && + element.msRequestFullscreen instanceof Function + ) { + // IE/Edge + element.msRequestFullscreen(); + } +} diff --git a/blocksuite/affine/blocks/block-frame/src/effects.ts b/blocksuite/affine/blocks/block-frame/src/effects.ts index 9502a23e13..ec5ce9746b 100644 --- a/blocksuite/affine/blocks/block-frame/src/effects.ts +++ b/blocksuite/affine/blocks/block-frame/src/effects.ts @@ -1,10 +1,26 @@ import { EdgelessFrameMenu, EdgelessFrameToolButton } from './edgeless-toolbar'; +import { PresentationToolbar } from './edgeless-toolbar/presentation-toolbar'; import { FrameBlockComponent } from './frame-block'; +import { EdgelessFrameOrderButton } from './present/frame-order-button'; +import { EdgelessFrameOrderMenu } from './present/frame-order-menu'; +import { EdgelessNavigatorSettingButton } from './present/navigator-setting-button'; +import { EdgelessPresentButton } from './present/present-button'; export function effects() { customElements.define('affine-frame', FrameBlockComponent); customElements.define('edgeless-frame-tool-button', EdgelessFrameToolButton); customElements.define('edgeless-frame-menu', EdgelessFrameMenu); + customElements.define( + 'edgeless-frame-order-button', + EdgelessFrameOrderButton + ); + customElements.define('edgeless-frame-order-menu', EdgelessFrameOrderMenu); + customElements.define( + 'edgeless-navigator-setting-button', + EdgelessNavigatorSettingButton + ); + customElements.define('edgeless-present-button', EdgelessPresentButton); + customElements.define('presentation-toolbar', PresentationToolbar); } declare global { @@ -12,5 +28,10 @@ declare global { 'affine-frame': FrameBlockComponent; 'edgeless-frame-tool-button': EdgelessFrameToolButton; 'edgeless-frame-menu': EdgelessFrameMenu; + 'edgeless-frame-order-button': EdgelessFrameOrderButton; + 'edgeless-frame-order-menu': EdgelessFrameOrderMenu; + 'edgeless-navigator-setting-button': EdgelessNavigatorSettingButton; + 'edgeless-present-button': EdgelessPresentButton; + 'presentation-toolbar': PresentationToolbar; } } diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/frame-order-button.ts b/blocksuite/affine/blocks/block-frame/src/present/frame-order-button.ts similarity index 94% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/frame-order-button.ts rename to blocksuite/affine/blocks/block-frame/src/present/frame-order-button.ts index 53e6328775..51b875acbd 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/frame-order-button.ts +++ b/blocksuite/affine/blocks/block-frame/src/present/frame-order-button.ts @@ -1,11 +1,11 @@ import type { FrameBlockModel } from '@blocksuite/affine-model'; import { createButtonPopper } from '@blocksuite/affine-shared/utils'; +import type { BlockComponent } from '@blocksuite/block-std'; import { WithDisposable } from '@blocksuite/global/lit'; import { LayerIcon } from '@blocksuite/icons/lit'; import { css, html, LitElement } from 'lit'; import { property, query } from 'lit/decorators.js'; -import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js'; import type { EdgelessFrameOrderMenu } from './frame-order-menu.js'; export class EdgelessFrameOrderButton extends WithDisposable(LitElement) { @@ -69,7 +69,7 @@ export class EdgelessFrameOrderButton extends WithDisposable(LitElement) { private accessor _edgelessFrameOrderMenu!: EdgelessFrameOrderMenu; @property({ attribute: false }) - accessor edgeless!: EdgelessRootBlockComponent; + accessor edgeless!: BlockComponent; @property({ attribute: false }) accessor frames!: FrameBlockModel[]; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/frame-order-menu.ts b/blocksuite/affine/blocks/block-frame/src/present/frame-order-menu.ts similarity index 95% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/frame-order-menu.ts rename to blocksuite/affine/blocks/block-frame/src/present/frame-order-menu.ts index e8d5a58cd2..56b26d919f 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/frame-order-menu.ts +++ b/blocksuite/affine/blocks/block-frame/src/present/frame-order-menu.ts @@ -1,4 +1,5 @@ import { EdgelessCRUDIdentifier } from '@blocksuite/affine-block-surface'; +import type { BlockComponent } from '@blocksuite/block-std'; import { generateKeyBetweenV2 } from '@blocksuite/block-std/gfx'; import { DisposableGroup } from '@blocksuite/global/disposable'; import { SignalWatcher, WithDisposable } from '@blocksuite/global/lit'; @@ -6,7 +7,7 @@ import { css, html, LitElement, nothing } from 'lit'; import { property, query, state } from 'lit/decorators.js'; import { repeat } from 'lit/directives/repeat.js'; -import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js'; +import { EdgelessFrameManagerIdentifier } from '../frame-manager'; export class EdgelessFrameOrderMenu extends SignalWatcher( WithDisposable(LitElement) @@ -100,8 +101,12 @@ export class EdgelessFrameOrderMenu extends SignalWatcher( return this.edgeless.std.get(EdgelessCRUDIdentifier); } + private get _frameMgr() { + return this.edgeless.std.get(EdgelessFrameManagerIdentifier); + } + private get _frames() { - return this.edgeless.service.frames; + return this._frameMgr.frames; } private _bindEvent() { @@ -175,7 +180,7 @@ export class EdgelessFrameOrderMenu extends SignalWatcher( newIndex !== index && newIndex !== index + 1 ) { - const frameMgr = this.edgeless.service.frame; + const frameMgr = this._frameMgr; // Legacy compatibility frameMgr.refreshLegacyFrameOrder(); @@ -253,7 +258,7 @@ export class EdgelessFrameOrderMenu extends SignalWatcher( private accessor _indicatorLine!: HTMLDivElement; @property({ attribute: false }) - accessor edgeless!: EdgelessRootBlockComponent; + accessor edgeless!: BlockComponent; @property({ attribute: false }) accessor embed = false; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/navigator-setting-button.ts b/blocksuite/affine/blocks/block-frame/src/present/navigator-setting-button.ts similarity index 94% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/navigator-setting-button.ts rename to blocksuite/affine/blocks/block-frame/src/present/navigator-setting-button.ts index 4cc9e72693..52ed0276ab 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/navigator-setting-button.ts +++ b/blocksuite/affine/blocks/block-frame/src/present/navigator-setting-button.ts @@ -1,12 +1,12 @@ +import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface'; import { EditPropsStore } from '@blocksuite/affine-shared/services'; import { createButtonPopper } from '@blocksuite/affine-shared/utils'; +import type { BlockComponent } from '@blocksuite/block-std'; import { WithDisposable } from '@blocksuite/global/lit'; import { SettingsIcon } from '@blocksuite/icons/lit'; import { css, html, LitElement, nothing } from 'lit'; import { property, query, state } from 'lit/decorators.js'; -import type { EdgelessRootBlockComponent } from '../../../edgeless-root-block.js'; - export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) { static override styles = css` .navigator-setting-menu { @@ -73,7 +73,8 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) { private readonly _onBlackBackgroundChange = (checked: boolean) => { this.blackBackground = checked; - this.edgeless.slots.navigatorSettingUpdated.next({ + const slots = this.edgeless.std.get(EdgelessLegacySlotIdentifier); + slots.navigatorSettingUpdated.next({ blackBackground: this.blackBackground, }); }; @@ -175,7 +176,7 @@ export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) { accessor blackBackground = true; @property({ attribute: false }) - accessor edgeless!: EdgelessRootBlockComponent; + accessor edgeless!: BlockComponent; @property({ attribute: false }) accessor hideToolbar = false; diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/present-button.ts b/blocksuite/affine/blocks/block-frame/src/present/present-button.ts similarity index 100% rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/present/present-button.ts rename to blocksuite/affine/blocks/block-frame/src/present/present-button.ts diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/utils.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/utils.ts index 3d36639e0d..1a7948320c 100644 --- a/blocksuite/affine/blocks/block-root/src/edgeless/components/utils.ts +++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/utils.ts @@ -141,27 +141,3 @@ export function getResizeLabel(target: HTMLElement) { const ariaLabel = handle?.getAttribute('aria-label'); return ariaLabel; } - -export function launchIntoFullscreen(element: Element) { - if (element.requestFullscreen) { - element.requestFullscreen().catch(console.error); - } else if ( - 'mozRequestFullScreen' in element && - element.mozRequestFullScreen instanceof Function - ) { - // Firefox - element.mozRequestFullScreen(); - } else if ( - 'webkitRequestFullscreen' in element && - element.webkitRequestFullscreen instanceof Function - ) { - // Chrome, Safari and Opera - element.webkitRequestFullscreen(); - } else if ( - 'msRequestFullscreen' in element && - element.msRequestFullscreen instanceof Function - ) { - // IE/Edge - element.msRequestFullscreen(); - } -} diff --git a/blocksuite/affine/blocks/block-root/src/effects.ts b/blocksuite/affine/blocks/block-root/src/effects.ts index 66629551d4..bf350f2a82 100644 --- a/blocksuite/affine/blocks/block-root/src/effects.ts +++ b/blocksuite/affine/blocks/block-root/src/effects.ts @@ -42,11 +42,6 @@ import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link- import { MindMapPlaceholder } from './edgeless/components/toolbar/mindmap/mindmap-importing-placeholder.js'; import { EdgelessMindmapMenu } from './edgeless/components/toolbar/mindmap/mindmap-menu.js'; import { EdgelessMindmapToolButton } from './edgeless/components/toolbar/mindmap/mindmap-tool-button.js'; -import { EdgelessFrameOrderButton } from './edgeless/components/toolbar/present/frame-order-button.js'; -import { EdgelessFrameOrderMenu } from './edgeless/components/toolbar/present/frame-order-menu.js'; -import { EdgelessNavigatorSettingButton } from './edgeless/components/toolbar/present/navigator-setting-button.js'; -import { EdgelessPresentButton } from './edgeless/components/toolbar/present/present-button.js'; -import { PresentationToolbar } from './edgeless/components/toolbar/presentation-toolbar.js'; import { OverlayScrollbar } from './edgeless/components/toolbar/template/overlay-scrollbar.js'; import { AffineTemplateLoading } from './edgeless/components/toolbar/template/template-loading.js'; import { EdgelessTemplatePanel } from './edgeless/components/toolbar/template/template-panel.js'; @@ -170,18 +165,6 @@ function registerEdgelessToolbarComponents() { // Toolbar components customElements.define('toolbar-arrow-up-icon', ToolbarArrowUpIcon); - - // Frame order components - customElements.define( - 'edgeless-frame-order-button', - EdgelessFrameOrderButton - ); - customElements.define('edgeless-frame-order-menu', EdgelessFrameOrderMenu); - customElements.define( - 'edgeless-navigator-setting-button', - EdgelessNavigatorSettingButton - ); - customElements.define('edgeless-present-button', EdgelessPresentButton); } function registerEdgelessPanelComponents() { @@ -220,7 +203,6 @@ function registerMiscComponents() { // Toolbar and UI components customElements.define('affine-image-toolbar', AffineImageToolbar); - customElements.define('presentation-toolbar', PresentationToolbar); customElements.define('edgeless-zoom-toolbar', EdgelessZoomToolbar); customElements.define('zoom-bar-toggle-button', ZoomBarToggleButton); customElements.define('overlay-scrollbar', OverlayScrollbar); @@ -281,7 +263,6 @@ declare global { 'edgeless-selected-rect': EdgelessSelectedRectWidget; 'edgeless-connector-label-editor': EdgelessConnectorLabelEditor; 'edgeless-group-title-editor': EdgelessGroupTitleEditor; - 'presentation-toolbar': PresentationToolbar; 'edgeless-brush-menu': EdgelessBrushMenu; 'edgeless-brush-tool-button': EdgelessBrushToolButton; 'edgeless-slide-menu': EdgelessSlideMenu; @@ -295,9 +276,6 @@ declare global { 'mindmap-import-placeholder': MindMapPlaceholder; 'edgeless-mindmap-menu': EdgelessMindmapMenu; 'edgeless-mindmap-tool-button': EdgelessMindmapToolButton; - 'edgeless-frame-order-menu': EdgelessFrameOrderMenu; - 'edgeless-navigator-setting-button': EdgelessNavigatorSettingButton; - 'edgeless-present-button': EdgelessPresentButton; 'overlay-scrollbar': OverlayScrollbar; 'affine-template-loading': AffineTemplateLoading; 'edgeless-templates-panel': EdgelessTemplatePanel;