feat(edgeless): add index for other notes when selecting a note (#3235)

toeverything · Jun 28, 2023 · c901371 · c901371
1 parent 133b703
commit c901371
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 9 deletions.
diff --git a/packages/blocks/src/page-block/edgeless/components/component-toolbar/change-note-button.ts b/packages/blocks/src/page-block/edgeless/components/component-toolbar/change-note-button.ts
@@ -72,14 +72,22 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
  background: var(--affine-blue-600);
  border-radius: 4px;
  color: var(--affine-white);
+ font-size: 12px;
+ font-family: Avenir Next;
+ font-weight: 600;
+ line-height: 16px;
  }
 
  .note-status > span {
- width: 12px;
- height: 16px;
- font-weight: 600;
- font-size: 12px;
- line-height: 16px;
+ display: flex;
+ padding: 4px 6px;
+ width: 24px;
+ flex-direction: column;
+ }
+
+ .note-status.hidden > span {
+ display: flex;
+ padding: 4px;
  }
 
  .note-status-button {
@@ -222,7 +230,7 @@ export class EdgelessChangeNoteButton extends WithDisposable(LitElement) {
 
  if (note.hidden) {
  return html`
- <div class="note-status hidden">${HiddenIcon}</div>
+ <div class="note-status hidden"><span>${HiddenIcon}</span></div>
  <div
  @click=${() => this._setNoteHidden(note, !note.hidden)}
  class="note-status-button"

diff --git a/packages/blocks/src/page-block/edgeless/components/notes-status.ts b/packages/blocks/src/page-block/edgeless/components/notes-status.ts
@@ -0,0 +1,96 @@
+import { HiddenIcon } from '@blocksuite/global/config';
+import { assertExists } from '@blocksuite/store';
+import { computePosition, flip, offset } from '@floating-ui/dom';
+import { html, nothing } from 'lit';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { getBlockElementById } from '../../../__internal__/utils/query.js';
+import type { NoteBlockModel } from '../../../note-block/note-model.js';
+import type { EdgelessPageBlockComponent } from '../edgeless-page-block.js';
+
+export function EdgelessNotesStatus(
+ edgeless: EdgelessPageBlockComponent,
+ notes: NoteBlockModel[]
+) {
+ const state = edgeless.selection.state;
+ const isSelectOne = state.selected.length === 1;
+ const singleSelected = state.selected[0];
+
+ if (!isSelectOne) return nothing;
+
+ const notesWithoutSelected = notes.filter(
+ note => note.id !== singleSelected.id
+ );
+ const visibleNotes = notes.filter(note => !note.hidden);
+
+ requestAnimationFrame(() => {
+ for (const note of notesWithoutSelected) {
+ const noteStatusElement = edgeless.querySelector(
+ `[data-note-id="${note.id}"]`
+ );
+ if (noteStatusElement instanceof HTMLElement) {
+ const noteElement = getBlockElementById(note.id);
+ assertExists(noteElement);
+ computePosition(noteElement, noteStatusElement, {
+ placement: 'top-start',
+ middleware: [
+ flip(),
+ offset({
+ // 24 is `EDGELESS_BLOCK_CHILD_PADDING`
+ mainAxis: (8 + 24) * edgeless.surface.viewport.zoom,
+ crossAxis: (4 - 24) * edgeless.surface.viewport.zoom,
+ }),
+ ],
+ }).then(({ x, y }) => {
+ noteStatusElement.style.top = y + 'px';
+ noteStatusElement.style.left = x + 'px';
+ });
+ }
+ }
+ });
+
+ return html`<div class="affine-edgeless-notes-status">
+ ${notesWithoutSelected.map(note => {
+ const index = visibleNotes.indexOf(note);
+
+ return html`<div
+ data-note-id=${note.id}
+ style=${styleMap({
+ position: 'absolute',
+ top: '-32px',
+ left: '4px',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ textAlign: 'center',
+ gap: '10px',
+ width: '24px',
+ height: '24px',
+ background: 'var(--affine-blue-600)',
+ color: 'var(--affine-white)',
+ borderRadius: '4px',
+ fontSize: '12px',
+ fontWeight: '600',
+ lineHeight: '16px',
+ })}
+ >
+ ${!note.hidden
+ ? html`<span
+ style=${styleMap({
+ display: 'flex',
+ padding: '4px 6px',
+ flexDirection: 'column',
+ })}
+ >${index + 1}</span
+ >`
+ : html`<span
+ style=${styleMap({
+ display: 'flex',
+ padding: '4px',
+ })}
+ >${HiddenIcon}</span
+ >`}
+ </div>`;
+ })}
+ </div>`;
+}
diff --git a/packages/blocks/src/page-block/edgeless/edgeless-page-block.ts b/packages/blocks/src/page-block/edgeless/edgeless-page-block.ts
@@ -66,6 +66,7 @@ import { PageBlockService } from '../../index.js';
 import { tryUpdateNoteSize } from '../utils/index.js';
 import { createDragHandle } from './components/create-drag-handle.js';
 import { EdgelessNotesContainer } from './components/edgeless-notes-container.js';
+import { EdgelessNotesStatus } from './components/notes-status.js';
 import { EdgelessDraggingAreaRect } from './components/rects/dragging-area-rect.js';
 import { EdgelessHoverRect } from './components/rects/hover-rect.js';
 import {
@@ -1036,6 +1037,7 @@ export class EdgelessPageBlockComponent
  ></edgeless-selected-rect>
  `
  : nothing}
+ ${EdgelessNotesStatus(this, this.sortedNotes)}
  </div>
  `;
  }

diff --git a/packages/global/src/config/icons/edgeless.ts b/packages/global/src/config/icons/edgeless.ts
@@ -549,14 +549,14 @@ export const AlignRightIcon = html`<svg
 </svg>`;
 
 export const HiddenIcon = html`<svg
- width="17"
+ width="16"
  height="17"
- viewBox="0 0 17 17"
+ viewBox="0 0 16 17"
  fill="none"
  xmlns="http://www.w3.org/2000/svg"
 >
  <path
- d="M6.90665 6.87741C5.87002 7.44261 5.16667 8.54216 5.16667 9.80599C5.16667 11.6469 6.65905 13.1393 8.5 13.1393C9.76442 13.1393 10.8644 12.4353 11.4294 11.3979M14.5 9.80599C14.5 6.49228 11.8137 3.80599 8.5 3.80599C8.20546 3.80599 7.91587 3.82721 7.63268 3.86822M2.5 9.80599C2.5 7.81062 3.47403 6.04275 4.97256 4.9519M2.5 2.47266L14.5 14.4727"
+ d="M6.40665 7.11374C5.37002 7.67894 4.66667 8.77849 4.66667 10.0423C4.66667 11.8833 6.15905 13.3757 8 13.3757C9.26442 13.3757 10.3644 12.6716 10.9294 11.6342M14 10.0423C14 6.72861 11.3137 4.04232 8 4.04232C7.70546 4.04232 7.41587 4.06354 7.13268 4.10454M2 10.0423C2 8.04695 2.97403 6.27907 4.47256 5.18822M2 2.70898L14 14.709"
  stroke="currentColor"
  stroke-width="1.6"
  stroke-linecap="round"