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

blocksuite/affine/blocks/block-frame/src/present/frame-order-button.ts

@@ -0,0 +1,82 @@
+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 { EdgelessFrameOrderMenu } from './frame-order-menu.js';
+
+export class EdgelessFrameOrderButton extends WithDisposable(LitElement) {
+  static override styles = css`
+    edgeless-frame-order-menu {
+      display: none;
+    }
+
+    edgeless-frame-order-menu[data-show] {
+      display: initial;
+    }
+  `;
+
+  private _edgelessFrameOrderPopper: ReturnType<
+    typeof createButtonPopper
+  > | null = null;
+
+  override disconnectedCallback() {
+    super.disconnectedCallback();
+    this._edgelessFrameOrderPopper?.dispose();
+  }
+
+  override firstUpdated() {
+    this._edgelessFrameOrderPopper = createButtonPopper({
+      reference: this._edgelessFrameOrderButton,
+      popperElement: this._edgelessFrameOrderMenu,
+      stateUpdated: ({ display }) => this.setPopperShow(display === 'show'),
+      mainAxis: 22,
+    });
+  }
+
+  protected override render() {
+    const { readonly } = this.edgeless.doc;
+    return html`
+      <style>
+        .edgeless-frame-order-button svg {
+          color: ${readonly ? 'var(--affine-text-disable-color)' : 'inherit'};
+        }
+      </style>
+      <edgeless-tool-icon-button
+        class="edgeless-frame-order-button"
+        .iconSize=${'24px'}
+        .tooltip=${this.popperShow ? '' : 'Frame Order'}
+        @click=${() => {
+          if (readonly) return;
+          this._edgelessFrameOrderPopper?.toggle();
+        }}
+        .iconContainerPadding=${0}
+      >
+        ${LayerIcon()}
+      </edgeless-tool-icon-button>
+      <edgeless-frame-order-menu .edgeless=${this.edgeless}>
+      </edgeless-frame-order-menu>
+    `;
+  }
+
+  @query('.edgeless-frame-order-button')
+  private accessor _edgelessFrameOrderButton!: HTMLElement;
+
+  @query('edgeless-frame-order-menu')
+  private accessor _edgelessFrameOrderMenu!: EdgelessFrameOrderMenu;
+
+  @property({ attribute: false })
+  accessor edgeless!: BlockComponent;
+
+  @property({ attribute: false })
+  accessor frames!: FrameBlockModel[];
+
+  @property({ attribute: false })
+  accessor popperShow = false;
+
+  @property({ attribute: false })
+  accessor setPopperShow: (show: boolean) => void = () => {};
+}

blocksuite/affine/blocks/block-frame/src/present/frame-order-menu.ts

@@ -0,0 +1,265 @@
+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';
+import { css, html, LitElement, nothing } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { repeat } from 'lit/directives/repeat.js';
+
+import { EdgelessFrameManagerIdentifier } from '../frame-manager';
+
+export class EdgelessFrameOrderMenu extends SignalWatcher(
+  WithDisposable(LitElement)
+) {
+  static override styles = css`
+    :host {
+      position: relative;
+    }
+    .edgeless-frame-order-items-container {
+      max-height: 281px;
+      border-radius: 8px;
+      padding: 8px;
+      background: var(--affine-background-overlay-panel-color);
+      box-shadow: var(--affine-menu-shadow);
+      overflow: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+    .edgeless-frame-order-items-container.embed {
+      padding: 0;
+      background: unset;
+      box-shadow: unset;
+      border-radius: 0;
+    }
+
+    .item {
+      box-sizing: border-box;
+      width: 256px;
+      border-radius: 4px;
+      padding: 4px;
+      display: flex;
+      gap: 4px;
+      align-items: center;
+      cursor: grab;
+    }
+
+    .draggable:hover {
+      background-color: var(--affine-hover-color);
+    }
+
+    .item:hover .drag-indicator {
+      opacity: 1;
+    }
+
+    .drag-indicator {
+      cursor: pointer;
+      width: 4px;
+      height: 12px;
+      border-radius: 1px;
+      opacity: 0.2;
+      background: var(--affine-placeholder-color);
+      margin-right: 2px;
+    }
+
+    .title {
+      font-size: 14px;
+      font-weight: 400;
+      height: 22px;
+      line-height: 22px;
+      color: var(--affine-text-primary-color);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .clone {
+      visibility: hidden;
+      position: absolute;
+      z-index: 1;
+      left: 8px;
+      height: 30px;
+      border: 1px solid var(--affine-border-color);
+      box-shadow: var(--affine-menu-shadow);
+      background-color: var(--affine-white);
+      pointer-events: none;
+    }
+
+    .indicator-line {
+      visibility: hidden;
+      position: absolute;
+      z-index: 1;
+      left: 8px;
+      background-color: var(--affine-primary-color);
+      height: 1px;
+      width: 90%;
+    }
+  `;
+
+  get crud() {
+    return this.edgeless.std.get(EdgelessCRUDIdentifier);
+  }
+
+  private get _frameMgr() {
+    return this.edgeless.std.get(EdgelessFrameManagerIdentifier);
+  }
+
+  private get _frames() {
+    return this._frameMgr.frames;
+  }
+
+  private _bindEvent() {
+    const { _disposables } = this;
+
+    _disposables.addFromEvent(this._container, 'wheel', e => {
+      e.stopPropagation();
+    });
+
+    _disposables.addFromEvent(this._container, 'pointerdown', e => {
+      const ele = e.target as HTMLElement;
+      const draggable = ele.closest('.draggable');
+      if (!draggable) return;
+      const clone = this._clone;
+      const indicatorLine = this._indicatorLine;
+      clone.style.visibility = 'visible';
+
+      const rect = draggable.getBoundingClientRect();
+
+      const index = Number(draggable.getAttribute('index'));
+      this._curIndex = index;
+      let newIndex = -1;
+
+      const containerRect = this._container.getBoundingClientRect();
+      const start = containerRect.top + 8;
+      const end = containerRect.bottom;
+
+      const shiftX = e.clientX - rect.left;
+      const shiftY = e.clientY - rect.top;
+      function moveAt(x: number, y: number) {
+        clone.style.left = x - containerRect.left - shiftX + 'px';
+        clone.style.top = y - containerRect.top - shiftY + 'px';
+      }
+
+      function isInsideContainer(e: PointerEvent) {
+        return e.clientY >= start && e.clientY <= end;
+      }
+      moveAt(e.clientX, e.clientY);
+
+      this._disposables.addFromEvent(document, 'pointermove', e => {
+        indicatorLine.style.visibility = 'visible';
+        moveAt(e.clientX, e.clientY);
+        if (isInsideContainer(e)) {
+          const relativeY = e.pageY + this._container.scrollTop - start;
+          let top = 0;
+          if (relativeY < rect.height / 2) {
+            newIndex = 0;
+            top = this.embed ? -2 : 4;
+          } else {
+            newIndex = Math.ceil(
+              (relativeY - rect.height / 2) / (rect.height + 10)
+            );
+            top =
+              (this.embed ? -2 : 7.5) +
+              newIndex * rect.height +
+              (newIndex - 0.5) * 4;
+          }
+
+          indicatorLine.style.top = top - this._container.scrollTop + 'px';
+          return;
+        }
+        newIndex = -1;
+      });
+
+      this._disposables.addFromEvent(document, 'pointerup', () => {
+        clone.style.visibility = 'hidden';
+        indicatorLine.style.visibility = 'hidden';
+        if (
+          newIndex >= 0 &&
+          newIndex <= this._frames.length &&
+          newIndex !== index &&
+          newIndex !== index + 1
+        ) {
+          const frameMgr = this._frameMgr;
+          // Legacy compatibility
+          frameMgr.refreshLegacyFrameOrder();
+
+          const before =
+            this._frames[newIndex - 1]?.props.presentationIndex || null;
+          const after = this._frames[newIndex]?.props.presentationIndex || null;
+
+          const frame = this._frames[index];
+
+          this.crud.updateElement(frame.id, {
+            presentationIndex: generateKeyBetweenV2(before, after),
+          });
+          this.edgeless.doc.captureSync();
+
+          this.requestUpdate();
+        }
+        this._disposables.dispose();
+        this._disposables = new DisposableGroup();
+        this._bindEvent();
+      });
+    });
+  }
+
+  override disconnectedCallback(): void {
+    super.disconnectedCallback();
+    this._disposables.dispose();
+  }
+
+  override firstUpdated() {
+    this._bindEvent();
+  }
+
+  override render() {
+    const frame = this._frames[this._curIndex];
+
+    return html`
+      <div
+        class="edgeless-frame-order-items-container ${this.embed
+          ? 'embed'
+          : ''}"
+        @click=${(e: MouseEvent) => e.stopPropagation()}
+      >
+        ${repeat(
+          this._frames,
+          frame => frame.id,
+          (frame, index) => html`
+            <div class="item draggable" id=${frame.id} index=${index}>
+              <div class="drag-indicator"></div>
+              <div class="title">${frame.props.title.toString()}</div>
+            </div>
+          `
+        )}
+        <div class="indicator-line"></div>
+        <div class="clone item">
+          ${frame
+            ? html`<div class="drag-indicator"></div>
+                <div class="index">${this._curIndex + 1}</div>
+                <div class="title">${frame.props.title.toString()}</div>`
+            : nothing}
+        </div>
+      </div>
+    `;
+  }
+
+  @query('.clone')
+  private accessor _clone!: HTMLDivElement;
+
+  @query('.edgeless-frame-order-items-container')
+  private accessor _container!: HTMLDivElement;
+
+  @state()
+  private accessor _curIndex = -1;
+
+  @query('.indicator-line')
+  private accessor _indicatorLine!: HTMLDivElement;
+
+  @property({ attribute: false })
+  accessor edgeless!: BlockComponent;
+
+  @property({ attribute: false })
+  accessor embed = false;
+}

blocksuite/affine/blocks/block-frame/src/present/navigator-setting-button.ts

@@ -0,0 +1,196 @@
+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';
+
+export class EdgelessNavigatorSettingButton extends WithDisposable(LitElement) {
+  static override styles = css`
+    .navigator-setting-menu {
+      display: none;
+      padding: 8px;
+      border-radius: 8px;
+      font-size: 12px;
+      font-weight: 500;
+      background-color: var(--affine-background-overlay-panel-color);
+      box-shadow: var(--affine-menu-shadow);
+      color: var(--affine-text-primary-color);
+    }
+
+    .navigator-setting-menu[data-show] {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .item-container {
+      padding: 4px 12px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      min-width: 264px;
+      width: 100%;
+      box-sizing: border-box;
+    }
+    .item-container.header {
+      height: 34px;
+    }
+
+    .text {
+      padding: 0px 4px;
+      line-height: 22px;
+      font-size: var(--affine-font-sm);
+      color: var(--affine-text-primary-color);
+    }
+
+    .text.title {
+      font-weight: 500;
+      line-height: 20px;
+      font-size: var(--affine-font-xs);
+      color: var(--affine-text-secondary-color);
+    }
+
+    .divider {
+      width: 100%;
+      height: 16px;
+      display: flex;
+      align-items: center;
+    }
+    .divider::before {
+      content: '';
+      width: 100%;
+      height: 1px;
+      background: var(--affine-border-color);
+    }
+  `;
+
+  private _navigatorSettingPopper?: ReturnType<
+    typeof createButtonPopper
+  > | null = null;
+
+  private readonly _onBlackBackgroundChange = (checked: boolean) => {
+    this.blackBackground = checked;
+    const slots = this.edgeless.std.get(EdgelessLegacySlotIdentifier);
+    slots.navigatorSettingUpdated.next({
+      blackBackground: this.blackBackground,
+    });
+  };
+
+  private _tryRestoreSettings() {
+    const blackBackground = this.edgeless.std
+      .get(EditPropsStore)
+      .getStorage('presentBlackBackground');
+    this.blackBackground = blackBackground ?? true;
+  }
+
+  override connectedCallback() {
+    super.connectedCallback();
+    this._tryRestoreSettings();
+  }
+
+  override disconnectedCallback(): void {
+    this._navigatorSettingPopper?.dispose();
+    this._navigatorSettingPopper = null;
+  }
+
+  override firstUpdated() {
+    this._navigatorSettingPopper = createButtonPopper({
+      reference: this._navigatorSettingButton,
+      popperElement: this._navigatorSettingMenu,
+      stateUpdated: ({ display }) => this.setPopperShow(display === 'show'),
+      mainAxis: 22,
+    });
+  }
+
+  override render() {
+    return html`
+      <edgeless-tool-icon-button
+        class="navigator-setting-button"
+        .tooltip=${this.popperShow ? '' : 'Settings'}
+        .iconSize=${'24px'}
+        @click=${() => {
+          this._navigatorSettingPopper?.toggle();
+        }}
+        .iconContainerPadding=${0}
+      >
+        ${SettingsIcon()}
+      </edgeless-tool-icon-button>
+
+      <div
+        class="navigator-setting-menu"
+        @click=${(e: MouseEvent) => {
+          e.stopPropagation();
+        }}
+      >
+        <div class="item-container header">
+          <div class="text title">Playback Settings</div>
+        </div>
+
+        <div class="item-container">
+          <div class="text">Black background</div>
+
+          <toggle-switch
+            .subscribe=${this.blackBackground}
+            .onChange=${this._onBlackBackgroundChange}
+          >
+          </toggle-switch>
+        </div>
+
+        <div class="item-container">
+          <div class="text">Hide toolbar</div>
+
+          <toggle-switch
+            .subscribe=${this.hideToolbar}
+            .onChange=${(checked: boolean) => {
+              this.onHideToolbarChange && this.onHideToolbarChange(checked);
+            }}
+          >
+          </toggle-switch>
+        </div>
+
+        ${this.includeFrameOrder
+          ? html` <div class="divider"></div>
+              <div class="item-container header">
+                <div class="text title">Frame Order</div>
+              </div>
+
+              <edgeless-frame-order-menu
+                .edgeless=${this.edgeless}
+                .embed=${true}
+              ></edgeless-frame-order-menu>`
+          : nothing}
+      </div>
+    `;
+  }
+
+  @query('.navigator-setting-button')
+  private accessor _navigatorSettingButton!: HTMLElement;
+
+  @query('.navigator-setting-menu')
+  private accessor _navigatorSettingMenu!: HTMLElement;
+
+  @state()
+  accessor blackBackground = true;
+
+  @property({ attribute: false })
+  accessor edgeless!: BlockComponent;
+
+  @property({ attribute: false })
+  accessor hideToolbar = false;
+
+  @property({ attribute: false })
+  accessor includeFrameOrder = false;
+
+  @property({ attribute: false })
+  accessor onHideToolbarChange: undefined | ((hideToolbar: boolean) => void) =
+    undefined;
+
+  @property({ attribute: false })
+  accessor popperShow = false;
+
+  @property({ attribute: false })
+  accessor setPopperShow: (show: boolean) => void = () => {};
+}

blocksuite/affine/blocks/block-frame/src/present/present-button.ts

@@ -0,0 +1,41 @@
+import {
+  EdgelessToolbarToolMixin,
+  QuickToolMixin,
+} from '@blocksuite/affine-widget-edgeless-toolbar';
+import type { GfxToolsFullOptionValue } from '@blocksuite/block-std/gfx';
+import { PresentationIcon } from '@blocksuite/icons/lit';
+import { css, html, LitElement } from 'lit';
+
+export class EdgelessPresentButton extends QuickToolMixin(
+  EdgelessToolbarToolMixin(LitElement)
+) {
+  static override styles = css`
+    :host {
+      display: flex;
+    }
+    .edgeless-note-button {
+      display: flex;
+      position: relative;
+    }
+  `;
+
+  override type: GfxToolsFullOptionValue['type'] = 'frameNavigator';
+
+  override render() {
+    return html`<edgeless-tool-icon-button
+    class="edgeless-frame-navigator-button"
+    .tooltip=${'Present'}
+    .tooltipOffset=${17}
+    .iconContainerPadding=${6}
+    .iconSize=${'24px'}
+    @click=${() => {
+      this.setEdgelessTool({
+        type: 'frameNavigator',
+      });
+    }}
+  >
+    ${PresentationIcon()}
+    </edgeless-tool-icon-button>
+  </div>`;
+  }
+}