fix(edgeless): frame title disappear after reordering frames (#6157)

packages/blocks/src/frame-block/frame-block.ts

@@ -24,26 +24,26 @@ export class FrameBlockComponent extends BlockElement<FrameBlockModel> {
 
  get isInner() {
  const title = this.titleElement;
- if (!title) return false;
- return title.isInner;
+ return !!title?.isInner;
  }
 
- get surface() {
+ private get _surface() {
  return this.closest('affine-edgeless-page')!.surface;
  }
 
- get edgeless() {
+ private get _edgeless() {
  return this.closest('affine-edgeless-page');
  }
 
  override connectedCallback() {
  super.connectedCallback();
+
  let lastZoom = 0;
  this._disposables.add(
- this.edgeless!.service.viewport.viewportUpdated.on(({ zoom }) => {
+ this._edgeless!.service.viewport.viewportUpdated.on(({ zoom }) => {
  if (zoom !== lastZoom) {
- this.requestUpdate();
  lastZoom = zoom;
+ this.requestUpdate();
  }
  })
  );
@@ -62,7 +62,7 @@ export class FrameBlockComponent extends BlockElement<FrameBlockModel> {
  }
 
  override firstUpdated() {
- this.surface.edgeless.slots.edgelessToolUpdated.on(tool => {
+ this._surface.edgeless.slots.edgelessToolUpdated.on(tool => {
  this._isNavigator = tool.type === 'frameNavigator' ? true : false;
  });
  }

packages/blocks/src/page-block/edgeless/components/block-portal/frame/edgeless-frame.ts

@@ -14,25 +14,31 @@ const FRAME_OFFSET = 8;
 
 @customElement('edgeless-frame-title')
 export class EdgelessFrameTitle extends WithDisposable(ShadowlessElement) {
- isInner = false;
+ @property({ attribute: false })
+ frame!: FrameBlockModel;
+
+ @property({ attribute: false })
+ edgeless!: EdgelessPageBlockComponent;
 
  @state()
  private _editing = false;
 
  @state()
  private _isNavigator = false;
 
- @property({ attribute: false })
- frame!: FrameBlockModel;
+ private _isInner = false;
 
- @property({ attribute: false })
- edgeless!: EdgelessPageBlockComponent;
+ get isInner() {
+ return this._isInner;
+ }
 
  private _updateElement = () => {
  this.requestUpdate();
  };
 
- override firstUpdated() {
+ override connectedCallback() {
+ super.connectedCallback();
+
  const { _disposables, edgeless } = this;
  const { service, surface } = edgeless;
 
@@ -62,19 +68,14 @@ export class EdgelessFrameTitle extends WithDisposable(ShadowlessElement) {
 
  _disposables.add(
  edgeless.service.selection.slots.updated.on(() => {
- if (
+ this._editing =
  edgeless.service.selection.selectedIds[0] === this.frame.id &&
- edgeless.service.selection.editing
- ) {
- this._editing = true;
- } else {
- this._editing = false;
- }
+ edgeless.service.selection.editing;
  })
  );
 
  surface.edgeless.slots.edgelessToolUpdated.on(tool => {
- this._isNavigator = tool.type === 'frameNavigator' ? true : false;
+ this._isNavigator = tool.type === 'frameNavigator';
  });
 
  this.setAttribute('data-frame-title-id', this.frame.id);
@@ -86,59 +87,64 @@ export class EdgelessFrameTitle extends WithDisposable(ShadowlessElement) {
  }
 
  override render() {
- const { edgeless, frame: model, _isNavigator } = this;
- const { service } = edgeless;
- const { zoom } = service.viewport;
+ const model = this.frame;
  const bound = Bound.deserialize(model.xywh);
- this.isInner = service.frames.some(frame => {
- if (frame.id === model.id) return false;
- if (Bound.deserialize(frame.xywh).contains(bound)) {
- return true;
- }
- return false;
- });
 
- const [x, y] = service.viewport.toViewCoord(bound.x, bound.y);
- const { isInner } = this;
- const text = model.title.toString();
+ const { frames, viewport } = this.edgeless.service;
+ const { zoom } = viewport;
+
+ this._isInner = frames.some(
+ frame =>
+ frame.id !== model.id && Bound.deserialize(frame.xywh).contains(bound)
+ );
+
+ const { _isNavigator, _editing, _isInner } = this;
 
- const top = (isInner ? FRAME_OFFSET : -(29 + FRAME_OFFSET)) + y;
- const left = (isInner ? FRAME_OFFSET : 0) + x;
- const maxWidth = isInner
+ const [x, y] = viewport.toViewCoord(bound.x, bound.y);
+ const left = (_isInner ? FRAME_OFFSET : 0) + x;
+ const top = (_isInner ? FRAME_OFFSET : -(29 + FRAME_OFFSET)) + y;
+ const maxWidth = _isInner
  ? bound.w * zoom - FRAME_OFFSET / zoom
  : bound.w * zoom;
- const hidden = 32 / zoom > bound.h && isInner;
+ const hidden = 32 / zoom > bound.h && _isInner;
+
+ const text = model.title.toString();
+
  return html`
- ${text && !_isNavigator && !this._editing
- ? html` <div
- style=${styleMap({
- display: hidden ? 'none' : 'initial',
- position: 'absolute',
- zIndex: 1,
- left: '0px',
- top: '0px',
- transform: `translate(${left}px, ${top}px)`,
- borderRadius: '4px',
- width: 'fit-content',
- maxWidth: maxWidth + 'px',
- padding: '8px 10px',
- fontSize: '14px',
- background: isInner
- ? 'var(--affine-white)'
- : 'var(--affine-text-primary-color)',
- color: isInner
- ? 'var(--affine-text-secondary-color)'
- : 'var(--affine-white)',
- cursor: 'default',
- whiteSpace: 'nowrap',
- overflow: 'hidden',
- textOverflow: 'ellipsis',
- border: isInner ? '1px solid var(--affine-border-color)' : 'none',
- })}
- class="affine-frame-title"
- >
- ${text}
- </div>`
+ ${text && !_isNavigator && !_editing
+ ? html`
+ <div
+ style=${styleMap({
+ display: hidden ? 'none' : 'initial',
+ position: 'absolute',
+ zIndex: 1,
+ left: '0px',
+ top: '0px',
+ transform: `translate(${left}px, ${top}px)`,
+ borderRadius: '4px',
+ width: 'fit-content',
+ maxWidth: maxWidth + 'px',
+ padding: '8px 10px',
+ fontSize: '14px',
+ background: _isInner
+ ? 'var(--affine-white)'
+ : 'var(--affine-text-primary-color)',
+ color: _isInner
+ ? 'var(--affine-text-secondary-color)'
+ : 'var(--affine-white)',
+ cursor: 'default',
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
+ border: _isInner
+ ? '1px solid var(--affine-border-color)'
+ : 'none',
+ })}
+ class="affine-frame-title"
+ >
+ ${text}
+ </div>
+ `
  : nothing}
  `;
  }
@@ -198,11 +204,13 @@ export class EdgelessFramesContainer extends WithDisposable(ShadowlessElement) {
  frame => frame.id,
  (frame, index) =>
  this.onlyTitle
- ? html`<edgeless-frame-title
- .frame=${frame}
- .edgeless=${this.edgeless}
- >
- </edgeless-frame-title>`
+ ? html`
+ <edgeless-frame-title
+ .frame=${frame}
+ .edgeless=${this.edgeless}
+ >
+ </edgeless-frame-title>
+ `
  : html`
  <edgeless-block-portal-frame
  .index=${index}

packages/blocks/src/page-block/edgeless/components/component-toolbar/change-frame-button.ts

@@ -1,3 +1,4 @@
+import '../buttons/tool-icon-button.js';
 import './component-toolbar-menu-divider.js';
 
 import { WithDisposable } from '@blocksuite/lit';
@@ -164,9 +165,12 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
  @click=${this._insertIntoPage}
  >
  ${NoteIcon}
+
  <span style="margin-left: 2px;">Insert into Page</span>
  </edgeless-tool-icon-button>
+
  <component-toolbar-menu-divider></component-toolbar-menu-divider>
+
  <edgeless-tool-icon-button
  .tooltip=${'Rename'}
  .tipPosition=${'bottom'}
@@ -176,6 +180,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
  >
  ${RenameIcon}
  </edgeless-tool-icon-button>
+
  <component-toolbar-menu-divider></component-toolbar-menu-divider>
  `
  : nothing}
@@ -190,6 +195,7 @@ export class EdgelessChangeFrameButton extends WithDisposable(LitElement) {
  >
  <div class="fill-color-container">${ColorUnit(background)}</div>
  </edgeless-tool-icon-button>
+
  <div class="color-panel-container fill-color">
  <edgeless-color-panel
  .value=${background}

packages/blocks/src/page-block/edgeless/components/component-toolbar/more-button.ts

@@ -1,5 +1,6 @@
 import '../buttons/tool-icon-button.js';
 import '../toolbar/shape/shape-menu.js';
+import '../../../../_common/components/menu-divider.js';
 
 import { WithDisposable } from '@blocksuite/lit';
 import { baseTheme } from '@toeverything/theme';

packages/blocks/src/page-block/edgeless/components/presentation/edgeless-navigator-black-background.ts

@@ -73,7 +73,7 @@ export class EdgelessNavigatorBlackBackground extends WithDisposable(
  );
 
  _disposables.add(
- edgeless.slots.fullScrennToggled.on(
+ edgeless.slots.fullScreenToggled.on(
  () =>
  setTimeout(() => {
  this.requestUpdate();