@formicoidea/labre-core 0.23.0 → 0.23.2

package/src/_pkgs/affine-block-frame/edgeless-toolbar/presentation-toolbar.ts

@@ -1,560 +1,560 @@
-import {
-  DefaultTool,
-  EdgelessLegacySlotIdentifier,
-} from '../../affine-block-surface/index.js';
-import { toast } from '../../affine-components/toast/index.js';
-import { PanTool } from '../../affine-gfx-pointer/index.js';
-import type { FrameBlockModel } from '../../affine-model/index.js';
-import {
-  EditPropsStore,
-  ViewportElementProvider,
-} from '../../affine-shared/services/index.js';
-import { EdgelessToolbarToolMixin } from '../../affine-widget-edgeless-toolbar/index.js';
-import { Bound, clamp } from '../../global/gfx/index.js';
-import { SignalWatcher } from '../../global/lit/index.js';
-import {
-  EndPointArrowIcon,
-  ExpandCloseIcon,
-  ExpandFullIcon,
-  StartPointArrowIcon,
-  StopAiIcon,
-} from '@blocksuite/icons/lit';
-import type { BlockComponent } from '../../std/index.js';
-import type { ToolOptions } from '../../std/gfx/index.js';
-import { effect } from '@preact/signals-core';
-import { cssVar } from '@toeverything/theme';
-import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
-import { property, state } from 'lit/decorators.js';
-
-import {
-  EdgelessFrameManagerIdentifier,
-  isFrameBlock,
-  type NavigatorMode,
-} from '../frame-manager';
-import { PresentTool } from '../present-tool';
-
-export class PresentationToolbar extends EdgelessToolbarToolMixin(
-  SignalWatcher(LitElement)
-) {
-  static override styles = css`
-    :host {
-      align-items: inherit;
-      width: 100%;
-      height: 100%;
-      gap: 8px;
-      padding-right: 2px;
-    }
-    .full-divider {
-      width: 8px;
-      height: 100%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .full-divider::after {
-      content: '';
-      width: 1px;
-      height: 100%;
-      background: var(--affine-border-color);
-      transform: scaleX(0.5);
-    }
-    .config-buttons {
-      display: flex;
-      gap: 10px;
-    }
-    .edgeless-frame-navigator {
-      width: 140px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .edgeless-frame-navigator.dense {
-      width: auto;
-    }
-
-    .edgeless-frame-navigator-title {
-      display: inline-block;
-      cursor: pointer;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      padding-right: 8px;
-    }
-
-    .edgeless-frame-navigator-count {
-      color: var(--affine-text-secondary-color);
-      white-space: nowrap;
-    }
-    .edgeless-frame-navigator-stop {
-      border: none;
-      cursor: pointer;
-      padding: 4px;
-      border-radius: 8px;
-      position: relative;
-      overflow: hidden;
-
-      svg {
-        display: block;
-        width: 24px;
-        height: 24px;
-        color: white;
-      }
-    }
-    .edgeless-frame-navigator-stop::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: transparent;
-      border-radius: inherit;
-    }
-    .edgeless-frame-navigator-stop:hover::before {
-      background: var(--affine-hover-color);
-    }
-  `;
-
-  private _cachedIndex = -1;
-
-  private _timer?: ReturnType<typeof setTimeout>;
-
-  override type = PresentTool;
-
-  private get _cachedPresentHideToolbar() {
-    return !!this.edgeless.std
-      .get(EditPropsStore)
-      .getStorage('presentHideToolbar');
-  }
-
-  private set _cachedPresentHideToolbar(value) {
-    this.edgeless.std
-      .get(EditPropsStore)
-      .setStorage('presentHideToolbar', !!value);
-  }
-
-  private get _frames(): FrameBlockModel[] {
-    return this.edgeless.std.get(EdgelessFrameManagerIdentifier).frames;
-  }
-
-  get dense() {
-    return this.containerWidth < 554;
-  }
-
-  get host() {
-    return this.edgeless.host;
-  }
-
-  get slots() {
-    return this.edgeless.std.get(EdgelessLegacySlotIdentifier);
-  }
-
-  constructor(edgeless: BlockComponent) {
-    super();
-    this.edgeless = edgeless;
-  }
-
-  private _bindHotKey() {
-    const handleKeyIfFrameNavigator = (action: () => void) => () => {
-      if (this.edgelessTool.toolType === PresentTool) {
-        action();
-      }
-    };
-
-    this.edgeless.bindHotKey(
-      {
-        ArrowLeft: handleKeyIfFrameNavigator(() => this._previousFrame()),
-        ArrowRight: handleKeyIfFrameNavigator(() => this._nextFrame()),
-        Escape: handleKeyIfFrameNavigator(() => this._exitPresentation()),
-      },
-      {
-        global: true,
-      }
-    );
-  }
-
-  private _exitPresentation() {
-    // When exit presentation mode, we need to set the tool to default or pan
-    // And exit fullscreen
-    if (this.edgeless.store.readonly) {
-      this.setEdgelessTool(PanTool, { panning: false });
-    } else {
-      this.setEdgelessTool(DefaultTool);
-    }
-
-    if (document.fullscreenElement) {
-      document.exitFullscreen().catch(console.error);
-    }
-
-    // Reset the flag when fully exiting presentation mode
-    this.edgeless.std
-      .get(EditPropsStore)
-      .setStorage('presentNoFrameToastShown', false);
-  }
-
-  private _moveToCurrentFrame(forceMove = false) {
-    const currentToolOption = this.gfx.tool.currentToolOption$.value;
-    const toolOptions = currentToolOption?.options;
-
-    // If PresentTool is being activated after a temporary pan (indicated by restoredAfterPan)
-    // and a forced move isn't explicitly requested, skip moving to the current frame.
-    // This preserves the user's panned position instead of resetting to the frame's default view.
-    if (
-      currentToolOption?.toolType === PresentTool &&
-      toolOptions?.restoredAfterPan &&
-      !forceMove
-    ) {
-      // Clear the flag so future navigations behave normally
-      // Here we modify the tool's activated option to avoid triggering setTool update
-      const currentTool = this.gfx.tool.currentTool$.peek();
-      if (currentTool?.activatedOption) {
-        currentTool.activatedOption.restoredAfterPan = false;
-      }
-      return;
-    }
-
-    const current = this._currentFrameIndex;
-    const viewport = this.gfx.viewport;
-    const frame = this._frames[current];
-
-    if (frame) {
-      let bound = Bound.deserialize(frame.xywh);
-
-      if (this._navigatorMode === 'fill') {
-        const vb = viewport.viewportBounds;
-        const center = bound.center;
-        let w, h;
-        if (vb.w / vb.h > bound.w / bound.h) {
-          w = bound.w;
-          h = (w * vb.h) / vb.w;
-        } else {
-          h = bound.h;
-          w = (h * vb.w) / vb.h;
-        }
-        bound = Bound.fromCenter(center, w, h);
-      }
-
-      viewport.setViewportByBound(bound, [0, 0, 0, 0], false);
-      this.slots.navigatorFrameChanged.next(
-        this._frames[this._currentFrameIndex]
-      );
-    }
-  }
-
-  private _nextFrame() {
-    const frames = this._frames;
-    const min = 0;
-    const max = frames.length - 1;
-    if (this._currentFrameIndex === frames.length - 1) {
-      toast(this.host, 'You have reached the last frame');
-    } else {
-      this._currentFrameIndex = clamp(this._currentFrameIndex + 1, min, max);
-    }
-  }
-
-  private _previousFrame() {
-    const frames = this._frames;
-    const min = 0;
-    const max = frames.length - 1;
-    if (this._currentFrameIndex === 0) {
-      toast(this.host, 'You have reached the first frame');
-    } else {
-      this._currentFrameIndex = clamp(this._currentFrameIndex - 1, min, max);
-    }
-  }
-
-  /**
-   * Toggle fullscreen, but keep edgeless tool to frameNavigator
-   * If already fullscreen, exit fullscreen
-   * If not fullscreen, enter fullscreen
-   */
-  private _toggleFullScreen() {
-    if (document.fullscreenElement) {
-      document.exitFullscreen().catch(console.error);
-      this._fullScreenMode = false;
-    } else {
-      const { viewportElement } = this.edgeless.std.get(
-        ViewportElementProvider
-      );
-      launchIntoFullscreen(viewportElement);
-      this._fullScreenMode = true;
-    }
-  }
-
-  override connectedCallback(): void {
-    super.connectedCallback();
-
-    const { _disposables } = this;
-
-    _disposables.add(
-      effect(() => {
-        const currentToolOption = this.gfx.tool.currentToolOption$.value;
-
-        if (currentToolOption?.toolType === PresentTool) {
-          const opts = currentToolOption.options as
-            | ToolOptions<PresentTool>
-            | undefined;
-
-          const isAlreadyFullscreen = !!document.fullscreenElement;
-
-          if (!isAlreadyFullscreen) {
-            this._toggleFullScreen();
-          } else {
-            this._fullScreenMode = true;
-          }
-
-          this._cachedIndex = this._currentFrameIndex;
-          this._navigatorMode = opts?.mode ?? this._navigatorMode;
-
-          const selection = this.gfx.selection;
-          if (
-            selection.selectedElements.length > 0 &&
-            isFrameBlock(selection.selectedElements[0])
-          ) {
-            const selectedFrameId = selection.selectedElements[0].id;
-            const indexOfSelectedFrame = this._frames.findIndex(
-              frame => frame.id === selectedFrameId
-            );
-            if (indexOfSelectedFrame !== -1) {
-              this._cachedIndex = indexOfSelectedFrame;
-            }
-          }
-
-          const store = this.edgeless.std.get(EditPropsStore);
-          if (this._frames.length === 0) {
-            if (!store.getStorage('presentNoFrameToastShown')) {
-              toast(
-                this.host,
-                'The presentation requires at least 1 frame. You can firstly create a frame.',
-                5000
-              );
-              store.setStorage('presentNoFrameToastShown', true);
-            }
-          } else {
-            // If frames exist, and the flag was set, reset it.
-            // This allows the toast to show again if all frames are subsequently deleted.
-            if (store.getStorage('presentNoFrameToastShown')) {
-              store.setStorage('presentNoFrameToastShown', false);
-            }
-          }
-        }
-        this.requestUpdate();
-      })
-    );
-  }
-
-  override firstUpdated() {
-    const { _disposables } = this;
-
-    this._bindHotKey();
-
-    _disposables.add(
-      this.slots.navigatorSettingUpdated.subscribe(({ fillScreen }) => {
-        if (fillScreen !== undefined) {
-          this._navigatorMode = fillScreen ? 'fill' : 'fit';
-        }
-      })
-    );
-
-    _disposables.addFromEvent(document, 'fullscreenchange', () => {
-      if (document.fullscreenElement) {
-        this._timer = setTimeout(() => {
-          this._currentFrameIndex = this._cachedIndex;
-        }, 400);
-      } else {
-        clearTimeout(this._timer);
-        if (
-          this.edgelessTool.toolType === PresentTool &&
-          this._fullScreenMode
-        ) {
-          if (this.edgeless.store.readonly) {
-            this.setEdgelessTool(PanTool, { panning: false });
-          } else {
-            this.setEdgelessTool(DefaultTool);
-          }
-        }
-      }
-
-      setTimeout(() => this._moveToCurrentFrame(true), 400);
-      this.slots.fullScreenToggled.next();
-    });
-
-    this._navigatorMode =
-      this.edgeless.std.get(EditPropsStore).getStorage('presentFillScreen') ===
-      true
-        ? 'fill'
-        : 'fit';
-  }
-
-  override render() {
-    const current = this._currentFrameIndex;
-    const frames = this._frames;
-    const frame = frames[current];
-
-    return html`
-      <style>
-        :host {
-          display: flex;
-        }
-      </style>
-      <edgeless-tool-icon-button
-        .iconContainerPadding=${0}
-        .tooltip=${'Previous'}
-        .iconSize=${'24px'}
-        @click=${() => this._previousFrame()}
-      >
-        ${StartPointArrowIcon()}
-      </edgeless-tool-icon-button>
-
-      <div class="edgeless-frame-navigator ${this.dense ? 'dense' : ''}">
-        ${this.dense
-          ? nothing
-          : html`<span
-              style="color: ${cssVar('textPrimaryColor')}"
-              class="edgeless-frame-navigator-title"
-              @click=${() => this._moveToCurrentFrame()}
-            >
-              ${frame?.props.title ?? 'no frame'}
-            </span>`}
-
-        <span class="edgeless-frame-navigator-count">
-          ${frames.length === 0 ? 0 : current + 1} / ${frames.length}
-        </span>
-      </div>
-
-      <edgeless-tool-icon-button
-        .tooltip=${'Next'}
-        @click=${() => this._nextFrame()}
-        .iconContainerPadding=${0}
-        .iconSize=${'24px'}
-      >
-        ${EndPointArrowIcon()}
-      </edgeless-tool-icon-button>
-
-      <div class="full-divider"></div>
-
-      <div class="config-buttons">
-        <edgeless-tool-icon-button
-          .tooltip=${document.fullscreenElement
-            ? 'Exit Full Screen'
-            : 'Enter Full Screen'}
-          @click=${() => this._toggleFullScreen()}
-          .iconContainerPadding=${0}
-          .iconContainerWidth=${'24px'}
-          .iconSize=${'24px'}
-        >
-          ${document.fullscreenElement ? ExpandCloseIcon() : ExpandFullIcon()}
-        </edgeless-tool-icon-button>
-
-        ${this.dense
-          ? nothing
-          : html`<edgeless-frame-order-button
-              .popperShow=${this.frameMenuShow}
-              .setPopperShow=${this.setFrameMenuShow}
-              .edgeless=${this.edgeless}
-            >
-            </edgeless-frame-order-button>`}
-
-        <edgeless-navigator-setting-button
-          .edgeless=${this.edgeless}
-          .hideToolbar=${this._cachedPresentHideToolbar}
-          .onHideToolbarChange=${(hideToolbar: boolean) => {
-            this._cachedPresentHideToolbar = hideToolbar;
-          }}
-          .popperShow=${this.settingMenuShow}
-          .setPopperShow=${this.setSettingMenuShow}
-          .includeFrameOrder=${this.dense}
-        >
-        </edgeless-navigator-setting-button>
-      </div>
-
-      <div class="full-divider"></div>
-
-      <button
-        class="edgeless-frame-navigator-stop"
-        @click=${this._exitPresentation}
-        style="background: ${cssVar('warningColor')}"
-      >
-        ${StopAiIcon()}
-      </button>
-    `;
-  }
-
-  protected override updated(changedProperties: PropertyValues) {
-    const currentToolOption = this.gfx.tool.currentToolOption$.value;
-    const isPresentToolActive = currentToolOption?.toolType === PresentTool;
-    const toolOptions = currentToolOption?.options;
-    const isRestoredAfterPan = !!(
-      isPresentToolActive && toolOptions?.restoredAfterPan
-    );
-
-    if (changedProperties.has('_currentFrameIndex') && isPresentToolActive) {
-      // When the current frame index changes (e.g., user navigates), a viewport update is needed.
-      // However, if PresentTool is merely being restored after a pan (isRestoredAfterPan = true)
-      // without an explicit index change in this update cycle, we avoid forcing a move to preserve the panned position.
-      // Thus, `forceMove` is true unless it's a pan restoration.
-      const shouldForceMove = !isRestoredAfterPan;
-      this._moveToCurrentFrame(shouldForceMove);
-    } else if (isPresentToolActive && changedProperties.has('edgelessTool')) {
-      // Handles cases where the tool is set/switched to PresentTool (e.g., initial activation or returning from another tool).
-      // Similar to frame index changes, avoid forcing a viewport move if restoring after a pan.
-      const currentToolIsPresentTool =
-        this.edgelessTool.toolType === PresentTool;
-      if (currentToolIsPresentTool) {
-        const shouldForceMoveOnToolChange = !isRestoredAfterPan;
-        this._moveToCurrentFrame(shouldForceMoveOnToolChange);
-      }
-    }
-  }
-
-  @state({
-    hasChanged() {
-      return true;
-    },
-  })
-  private accessor _currentFrameIndex = 0;
-
-  private accessor _fullScreenMode = true;
-
-  @state()
-  private accessor _navigatorMode: NavigatorMode = 'fit';
-
-  @property({ attribute: false })
-  accessor containerWidth = 1920;
-
-  @property({ type: Boolean })
-  accessor frameMenuShow = false;
-
-  @property()
-  accessor setFrameMenuShow: (show: boolean) => void = () => {};
-
-  @property()
-  accessor setSettingMenuShow: (show: boolean) => void = () => {};
-
-  @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();
-  }
-}
+import {
+  DefaultTool,
+  EdgelessLegacySlotIdentifier,
+} from '../../affine-block-surface/index.js';
+import { toast } from '../../affine-components/toast/index.js';
+import { PanTool } from '../../affine-gfx-pointer/index.js';
+import type { FrameBlockModel } from '../../affine-model/index.js';
+import {
+  EditPropsStore,
+  ViewportElementProvider,
+} from '../../affine-shared/services/index.js';
+import { EdgelessToolbarToolMixin } from '../../affine-widget-edgeless-toolbar/index.js';
+import { Bound, clamp } from '../../global/gfx/index.js';
+import { SignalWatcher } from '../../global/lit/index.js';
+import {
+  EndPointArrowIcon,
+  ExpandCloseIcon,
+  ExpandFullIcon,
+  StartPointArrowIcon,
+  StopAiIcon,
+} from '@blocksuite/icons/lit';
+import type { BlockComponent } from '../../std/index.js';
+import type { ToolOptions } from '../../std/gfx/index.js';
+import { effect } from '@preact/signals-core';
+import { cssVar } from '@toeverything/theme';
+import { css, html, LitElement, nothing, type PropertyValues } from 'lit';
+import { property, state } from 'lit/decorators.js';
+
+import {
+  EdgelessFrameManagerIdentifier,
+  isFrameBlock,
+  type NavigatorMode,
+} from '../frame-manager';
+import { PresentTool } from '../present-tool';
+
+export class PresentationToolbar extends EdgelessToolbarToolMixin(
+  SignalWatcher(LitElement)
+) {
+  static override styles = css`
+    :host {
+      align-items: inherit;
+      width: 100%;
+      height: 100%;
+      gap: 8px;
+      padding-right: 2px;
+    }
+    .full-divider {
+      width: 8px;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .full-divider::after {
+      content: '';
+      width: 1px;
+      height: 100%;
+      background: var(--affine-border-color);
+      transform: scaleX(0.5);
+    }
+    .config-buttons {
+      display: flex;
+      gap: 10px;
+    }
+    .edgeless-frame-navigator {
+      width: 140px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .edgeless-frame-navigator.dense {
+      width: auto;
+    }
+
+    .edgeless-frame-navigator-title {
+      display: inline-block;
+      cursor: pointer;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      padding-right: 8px;
+    }
+
+    .edgeless-frame-navigator-count {
+      color: var(--affine-text-secondary-color);
+      white-space: nowrap;
+    }
+    .edgeless-frame-navigator-stop {
+      border: none;
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 8px;
+      position: relative;
+      overflow: hidden;
+
+      svg {
+        display: block;
+        width: 24px;
+        height: 24px;
+        color: white;
+      }
+    }
+    .edgeless-frame-navigator-stop::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: transparent;
+      border-radius: inherit;
+    }
+    .edgeless-frame-navigator-stop:hover::before {
+      background: var(--affine-hover-color);
+    }
+  `;
+
+  private _cachedIndex = -1;
+
+  private _timer?: ReturnType<typeof setTimeout>;
+
+  override type = PresentTool;
+
+  private get _cachedPresentHideToolbar() {
+    return !!this.edgeless.std
+      .get(EditPropsStore)
+      .getStorage('presentHideToolbar');
+  }
+
+  private set _cachedPresentHideToolbar(value) {
+    this.edgeless.std
+      .get(EditPropsStore)
+      .setStorage('presentHideToolbar', !!value);
+  }
+
+  private get _frames(): FrameBlockModel[] {
+    return this.edgeless.std.get(EdgelessFrameManagerIdentifier).frames;
+  }
+
+  get dense() {
+    return this.containerWidth < 554;
+  }
+
+  get host() {
+    return this.edgeless.host;
+  }
+
+  get slots() {
+    return this.edgeless.std.get(EdgelessLegacySlotIdentifier);
+  }
+
+  constructor(edgeless: BlockComponent) {
+    super();
+    this.edgeless = edgeless;
+  }
+
+  private _bindHotKey() {
+    const handleKeyIfFrameNavigator = (action: () => void) => () => {
+      if (this.edgelessTool.toolType === PresentTool) {
+        action();
+      }
+    };
+
+    this.edgeless.bindHotKey(
+      {
+        ArrowLeft: handleKeyIfFrameNavigator(() => this._previousFrame()),
+        ArrowRight: handleKeyIfFrameNavigator(() => this._nextFrame()),
+        Escape: handleKeyIfFrameNavigator(() => this._exitPresentation()),
+      },
+      {
+        global: true,
+      }
+    );
+  }
+
+  private _exitPresentation() {
+    // When exit presentation mode, we need to set the tool to default or pan
+    // And exit fullscreen
+    if (this.edgeless.store.readonly) {
+      this.setEdgelessTool(PanTool, { panning: false });
+    } else {
+      this.setEdgelessTool(DefaultTool);
+    }
+
+    if (document.fullscreenElement) {
+      document.exitFullscreen().catch(console.error);
+    }
+
+    // Reset the flag when fully exiting presentation mode
+    this.edgeless.std
+      .get(EditPropsStore)
+      .setStorage('presentNoFrameToastShown', false);
+  }
+
+  private _moveToCurrentFrame(forceMove = false) {
+    const currentToolOption = this.gfx.tool.currentToolOption$.value;
+    const toolOptions = currentToolOption?.options;
+
+    // If PresentTool is being activated after a temporary pan (indicated by restoredAfterPan)
+    // and a forced move isn't explicitly requested, skip moving to the current frame.
+    // This preserves the user's panned position instead of resetting to the frame's default view.
+    if (
+      currentToolOption?.toolType === PresentTool &&
+      toolOptions?.restoredAfterPan &&
+      !forceMove
+    ) {
+      // Clear the flag so future navigations behave normally
+      // Here we modify the tool's activated option to avoid triggering setTool update
+      const currentTool = this.gfx.tool.currentTool$.peek();
+      if (currentTool?.activatedOption) {
+        currentTool.activatedOption.restoredAfterPan = false;
+      }
+      return;
+    }
+
+    const current = this._currentFrameIndex;
+    const viewport = this.gfx.viewport;
+    const frame = this._frames[current];
+
+    if (frame) {
+      let bound = Bound.deserialize(frame.xywh);
+
+      if (this._navigatorMode === 'fill') {
+        const vb = viewport.viewportBounds;
+        const center = bound.center;
+        let w, h;
+        if (vb.w / vb.h > bound.w / bound.h) {
+          w = bound.w;
+          h = (w * vb.h) / vb.w;
+        } else {
+          h = bound.h;
+          w = (h * vb.w) / vb.h;
+        }
+        bound = Bound.fromCenter(center, w, h);
+      }
+
+      viewport.setViewportByBound(bound, [0, 0, 0, 0], false);
+      this.slots.navigatorFrameChanged.next(
+        this._frames[this._currentFrameIndex]
+      );
+    }
+  }
+
+  private _nextFrame() {
+    const frames = this._frames;
+    const min = 0;
+    const max = frames.length - 1;
+    if (this._currentFrameIndex === frames.length - 1) {
+      toast(this.host, 'You have reached the last frame');
+    } else {
+      this._currentFrameIndex = clamp(this._currentFrameIndex + 1, min, max);
+    }
+  }
+
+  private _previousFrame() {
+    const frames = this._frames;
+    const min = 0;
+    const max = frames.length - 1;
+    if (this._currentFrameIndex === 0) {
+      toast(this.host, 'You have reached the first frame');
+    } else {
+      this._currentFrameIndex = clamp(this._currentFrameIndex - 1, min, max);
+    }
+  }
+
+  /**
+   * Toggle fullscreen, but keep edgeless tool to frameNavigator
+   * If already fullscreen, exit fullscreen
+   * If not fullscreen, enter fullscreen
+   */
+  private _toggleFullScreen() {
+    if (document.fullscreenElement) {
+      document.exitFullscreen().catch(console.error);
+      this._fullScreenMode = false;
+    } else {
+      const { viewportElement } = this.edgeless.std.get(
+        ViewportElementProvider
+      );
+      launchIntoFullscreen(viewportElement);
+      this._fullScreenMode = true;
+    }
+  }
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+
+    const { _disposables } = this;
+
+    _disposables.add(
+      effect(() => {
+        const currentToolOption = this.gfx.tool.currentToolOption$.value;
+
+        if (currentToolOption?.toolType === PresentTool) {
+          const opts = currentToolOption.options as
+            | ToolOptions<PresentTool>
+            | undefined;
+
+          const isAlreadyFullscreen = !!document.fullscreenElement;
+
+          if (!isAlreadyFullscreen) {
+            this._toggleFullScreen();
+          } else {
+            this._fullScreenMode = true;
+          }
+
+          this._cachedIndex = this._currentFrameIndex;
+          this._navigatorMode = opts?.mode ?? this._navigatorMode;
+
+          const selection = this.gfx.selection;
+          if (
+            selection.selectedElements.length > 0 &&
+            isFrameBlock(selection.selectedElements[0])
+          ) {
+            const selectedFrameId = selection.selectedElements[0].id;
+            const indexOfSelectedFrame = this._frames.findIndex(
+              frame => frame.id === selectedFrameId
+            );
+            if (indexOfSelectedFrame !== -1) {
+              this._cachedIndex = indexOfSelectedFrame;
+            }
+          }
+
+          const store = this.edgeless.std.get(EditPropsStore);
+          if (this._frames.length === 0) {
+            if (!store.getStorage('presentNoFrameToastShown')) {
+              toast(
+                this.host,
+                'The presentation requires at least 1 frame. You can firstly create a frame.',
+                5000
+              );
+              store.setStorage('presentNoFrameToastShown', true);
+            }
+          } else {
+            // If frames exist, and the flag was set, reset it.
+            // This allows the toast to show again if all frames are subsequently deleted.
+            if (store.getStorage('presentNoFrameToastShown')) {
+              store.setStorage('presentNoFrameToastShown', false);
+            }
+          }
+        }
+        this.requestUpdate();
+      })
+    );
+  }
+
+  override firstUpdated() {
+    const { _disposables } = this;
+
+    this._bindHotKey();
+
+    _disposables.add(
+      this.slots.navigatorSettingUpdated.subscribe(({ fillScreen }) => {
+        if (fillScreen !== undefined) {
+          this._navigatorMode = fillScreen ? 'fill' : 'fit';
+        }
+      })
+    );
+
+    _disposables.addFromEvent(document, 'fullscreenchange', () => {
+      if (document.fullscreenElement) {
+        this._timer = setTimeout(() => {
+          this._currentFrameIndex = this._cachedIndex;
+        }, 400);
+      } else {
+        clearTimeout(this._timer);
+        if (
+          this.edgelessTool.toolType === PresentTool &&
+          this._fullScreenMode
+        ) {
+          if (this.edgeless.store.readonly) {
+            this.setEdgelessTool(PanTool, { panning: false });
+          } else {
+            this.setEdgelessTool(DefaultTool);
+          }
+        }
+      }
+
+      setTimeout(() => this._moveToCurrentFrame(true), 400);
+      this.slots.fullScreenToggled.next();
+    });
+
+    this._navigatorMode =
+      this.edgeless.std.get(EditPropsStore).getStorage('presentFillScreen') ===
+      true
+        ? 'fill'
+        : 'fit';
+  }
+
+  override render() {
+    const current = this._currentFrameIndex;
+    const frames = this._frames;
+    const frame = frames[current];
+
+    return html`
+      <style>
+        :host {
+          display: flex;
+        }
+      </style>
+      <edgeless-tool-icon-button
+        .iconContainerPadding=${0}
+        .tooltip=${'Previous'}
+        .iconSize=${'24px'}
+        @click=${() => this._previousFrame()}
+      >
+        ${StartPointArrowIcon()}
+      </edgeless-tool-icon-button>
+
+      <div class="edgeless-frame-navigator ${this.dense ? 'dense' : ''}">
+        ${this.dense
+          ? nothing
+          : html`<span
+              style="color: ${cssVar('textPrimaryColor')}"
+              class="edgeless-frame-navigator-title"
+              @click=${() => this._moveToCurrentFrame()}
+            >
+              ${frame?.props.title ?? 'no frame'}
+            </span>`}
+
+        <span class="edgeless-frame-navigator-count">
+          ${frames.length === 0 ? 0 : current + 1} / ${frames.length}
+        </span>
+      </div>
+
+      <edgeless-tool-icon-button
+        .tooltip=${'Next'}
+        @click=${() => this._nextFrame()}
+        .iconContainerPadding=${0}
+        .iconSize=${'24px'}
+      >
+        ${EndPointArrowIcon()}
+      </edgeless-tool-icon-button>
+
+      <div class="full-divider"></div>
+
+      <div class="config-buttons">
+        <edgeless-tool-icon-button
+          .tooltip=${document.fullscreenElement
+            ? 'Exit Full Screen'
+            : 'Enter Full Screen'}
+          @click=${() => this._toggleFullScreen()}
+          .iconContainerPadding=${0}
+          .iconContainerWidth=${'24px'}
+          .iconSize=${'24px'}
+        >
+          ${document.fullscreenElement ? ExpandCloseIcon() : ExpandFullIcon()}
+        </edgeless-tool-icon-button>
+
+        ${this.dense
+          ? nothing
+          : html`<edgeless-frame-order-button
+              .popperShow=${this.frameMenuShow}
+              .setPopperShow=${this.setFrameMenuShow}
+              .edgeless=${this.edgeless}
+            >
+            </edgeless-frame-order-button>`}
+
+        <edgeless-navigator-setting-button
+          .edgeless=${this.edgeless}
+          .hideToolbar=${this._cachedPresentHideToolbar}
+          .onHideToolbarChange=${(hideToolbar: boolean) => {
+            this._cachedPresentHideToolbar = hideToolbar;
+          }}
+          .popperShow=${this.settingMenuShow}
+          .setPopperShow=${this.setSettingMenuShow}
+          .includeFrameOrder=${this.dense}
+        >
+        </edgeless-navigator-setting-button>
+      </div>
+
+      <div class="full-divider"></div>
+
+      <button
+        class="edgeless-frame-navigator-stop"
+        @click=${this._exitPresentation}
+        style="background: ${cssVar('warningColor')}"
+      >
+        ${StopAiIcon()}
+      </button>
+    `;
+  }
+
+  protected override updated(changedProperties: PropertyValues) {
+    const currentToolOption = this.gfx.tool.currentToolOption$.value;
+    const isPresentToolActive = currentToolOption?.toolType === PresentTool;
+    const toolOptions = currentToolOption?.options;
+    const isRestoredAfterPan = !!(
+      isPresentToolActive && toolOptions?.restoredAfterPan
+    );
+
+    if (changedProperties.has('_currentFrameIndex') && isPresentToolActive) {
+      // When the current frame index changes (e.g., user navigates), a viewport update is needed.
+      // However, if PresentTool is merely being restored after a pan (isRestoredAfterPan = true)
+      // without an explicit index change in this update cycle, we avoid forcing a move to preserve the panned position.
+      // Thus, `forceMove` is true unless it's a pan restoration.
+      const shouldForceMove = !isRestoredAfterPan;
+      this._moveToCurrentFrame(shouldForceMove);
+    } else if (isPresentToolActive && changedProperties.has('edgelessTool')) {
+      // Handles cases where the tool is set/switched to PresentTool (e.g., initial activation or returning from another tool).
+      // Similar to frame index changes, avoid forcing a viewport move if restoring after a pan.
+      const currentToolIsPresentTool =
+        this.edgelessTool.toolType === PresentTool;
+      if (currentToolIsPresentTool) {
+        const shouldForceMoveOnToolChange = !isRestoredAfterPan;
+        this._moveToCurrentFrame(shouldForceMoveOnToolChange);
+      }
+    }
+  }
+
+  @state({
+    hasChanged() {
+      return true;
+    },
+  })
+  private accessor _currentFrameIndex = 0;
+
+  private accessor _fullScreenMode = true;
+
+  @state()
+  private accessor _navigatorMode: NavigatorMode = 'fit';
+
+  @property({ attribute: false })
+  accessor containerWidth = 1920;
+
+  @property({ type: Boolean })
+  accessor frameMenuShow = false;
+
+  @property()
+  accessor setFrameMenuShow: (show: boolean) => void = () => {};
+
+  @property()
+  accessor setSettingMenuShow: (show: boolean) => void = () => {};
+
+  @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();
+  }
+}