refactor(editor): move present components to its package (#11089)

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();
+  }
+}

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;
   }
 }

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[];

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;

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;

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();
-  }
-}

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;