refactor(editor): move frame related component to frame panel (#10735)

2026-08-18 10:31:50 +08:00 · 2025-03-10 05:45:18 +00:00
parent 6b0639facd
commit 36cf973372
13 changed files with 64 additions and 54 deletions
@@ -0,0 +1,123 @@
+import { EdgelessLegacySlotIdentifier } from '@blocksuite/affine-block-surface';
+import type { FrameBlockModel, RootBlockModel } from '@blocksuite/affine-model';
+import { EditPropsStore } from '@blocksuite/affine-shared/services';
+import { WidgetComponent, WidgetViewExtension } from '@blocksuite/block-std';
+import { GfxControllerIdentifier } from '@blocksuite/block-std/gfx';
+import { Bound } from '@blocksuite/global/gfx';
+import { effect } from '@preact/signals-core';
+import { css, html, nothing } from 'lit';
+import { state } from 'lit/decorators.js';
+import { literal, unsafeStatic } from 'lit/static-html.js';
+
+export const EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET =
+  'edgeless-navigator-black-background';
+export class EdgelessNavigatorBlackBackgroundWidget extends WidgetComponent<RootBlockModel> {
+  static override styles = css`
+    .edgeless-navigator-black-background {
+      background-color: black;
+      position: absolute;
+      z-index: 1;
+      background-color: transparent;
+      box-shadow: 0 0 0 5000px black;
+    }
+  `;
+
+  private _blackBackground = false;
+
+  get gfx() {
+    return this.std.get(GfxControllerIdentifier);
+  }
+
+  private get _slots() {
+    return this.std.get(EdgelessLegacySlotIdentifier);
+  }
+
+  private _tryLoadBlackBackground() {
+    const value = this.std
+      .get(EditPropsStore)
+      .getStorage('presentBlackBackground');
+    this._blackBackground = value ?? true;
+  }
+
+  override firstUpdated() {
+    const { _disposables, gfx } = this;
+    _disposables.add(
+      this._slots.navigatorFrameChanged.on(frame => {
+        this.frame = frame;
+      })
+    );
+
+    _disposables.add(
+      this._slots.navigatorSettingUpdated.on(({ blackBackground }) => {
+        if (blackBackground !== undefined) {
+          this.std
+            .get(EditPropsStore)
+            .setStorage('presentBlackBackground', blackBackground);
+
+          this._blackBackground = blackBackground;
+
+          this.show =
+            blackBackground &&
+            this.gfx.tool.currentToolOption$.peek().type === 'frameNavigator';
+        }
+      })
+    );
+
+    _disposables.add(
+      effect(() => {
+        const tool = gfx.tool.currentToolName$.value;
+
+        if (tool !== 'frameNavigator') {
+          this.show = false;
+        } else {
+          this.show = this._blackBackground;
+        }
+      })
+    );
+
+    _disposables.add(
+      this._slots.fullScreenToggled.on(
+        () =>
+          setTimeout(() => {
+            this.requestUpdate();
+          }, 500) // wait for full screen animation
+      )
+    );
+
+    this._tryLoadBlackBackground();
+  }
+
+  override render() {
+    const { frame, show, gfx } = this;
+
+    if (!show || !frame) return nothing;
+
+    const bound = Bound.deserialize(frame.xywh);
+    const zoom = gfx.viewport.zoom;
+    const width = bound.w * zoom;
+    const height = bound.h * zoom;
+    const [x, y] = gfx.viewport.toViewCoord(bound.x, bound.y);
+
+    return html` <style>
+        .edgeless-navigator-black-background {
+          width: ${width}px;
+          height: ${height}px;
+          top: ${y}px;
+          left: ${x}px;
+        }
+      </style>
+      <div class="edgeless-navigator-black-background"></div>`;
+  }
+
+  @state()
+  private accessor frame: FrameBlockModel | undefined = undefined;
+
+  @state()
+  private accessor show = false;
+}
+
+export const edgelessNavigatorBgWidget = WidgetViewExtension(
+  'affine:page',
+  EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET,
+  literal`${unsafeStatic(EDGELESS_NAVIGATOR_BLACK_BACKGROUND_WIDGET)}`
+);