@formicoidea/labre-core 0.23.0

package/src/_pkgs/data-view/view-presets/table/pc-virtual/controller/selection.ts

@@ -0,0 +1,1110 @@
+import { getRangeByPositions } from '../../../../../affine-shared/utils/index.js';
+import { DisposableGroup } from '../../../../../global/disposable/index.js';
+import { SignalWatcher, WithDisposable } from '../../../../../global/lit/index.js';
+import { ShadowlessElement } from '../../../../../std/index.js';
+import { computed, type ReadonlySignal } from '@preact/signals-core';
+import type { ReactiveController } from 'lit';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { styleMap } from 'lit/directives/style-map.js';
+
+import { autoScrollOnBoundary } from '../../../../core/utils/auto-scroll.js';
+import { startDrag } from '../../../../core/utils/drag.js';
+import {
+  type MultiSelection,
+  RowWithGroup,
+  TableViewAreaSelection,
+  TableViewRowSelection,
+  type TableViewSelection,
+  type TableViewSelectionWithType,
+} from '../../selection';
+import type { DatabaseCellContainer } from '../row/cell';
+import type { VirtualTableViewUILogic } from '../table-view-ui-logic.js';
+import type { TableGridCell } from '../types.js';
+import {
+  DragToFillElement,
+  fillSelectionWithFocusCellData,
+} from './drag-to-fill.js';
+
+export class TableSelectionController implements ReactiveController {
+  disposables = new DisposableGroup();
+  private _tableViewSelection?: TableViewSelectionWithType;
+
+  private readonly getFocusCellContainer = () => {
+    if (
+      !this._tableViewSelection ||
+      this._tableViewSelection.selectionType !== 'area'
+    )
+      return null;
+    const { groupKey, focus } = this._tableViewSelection;
+
+    const dragStartCell = this.getCellContainer(
+      groupKey,
+      focus.rowIndex,
+      focus.columnIndex
+    );
+    return dragStartCell ?? null;
+  };
+
+  __dragToFillElement = new DragToFillElement();
+
+  __selectionElement;
+
+  selectionStyleUpdateTask = 0;
+
+  // private get areaSelectionElement() {
+  //   return this.__selectionElement;
+  // }
+
+  get dragToFillDraggable() {
+    return this.__dragToFillElement.dragToFillRef.value;
+  }
+
+  // private get focusSelectionElement() {
+  //   return this.__selectionElement;
+  // }
+
+  get selection(): TableViewSelectionWithType | undefined {
+    return this._tableViewSelection;
+  }
+
+  set selection(data: TableViewSelection | undefined) {
+    if (!data) {
+      this.clearSelection();
+      return;
+    }
+    const selection: TableViewSelectionWithType = {
+      ...data,
+      viewId: this.view.id,
+      type: 'table',
+    };
+    if (selection.selectionType === 'area' && selection.isEditing) {
+      const focus = selection.focus;
+      const container = this.getCellContainer(
+        selection.groupKey,
+        focus.rowIndex,
+        focus.columnIndex
+      );
+      const cell = container?.cell;
+      const isEditing = cell ? cell.beforeEnterEditMode() : true;
+      this.logic.setSelection({
+        ...selection,
+        isEditing,
+      });
+    } else {
+      this.logic.setSelection(selection);
+    }
+  }
+
+  get tableContainer() {
+    return this.virtualScroll?.content.parentElement;
+  }
+
+  get view() {
+    return this.logic.view;
+  }
+
+  constructor(public logic: VirtualTableViewUILogic) {
+    this.__selectionElement = new SelectionElement();
+    this.__selectionElement.controller = this;
+  }
+
+  get host() {
+    return this.logic.ui$.value;
+  }
+
+  private clearSelection() {
+    this.logic.setSelection();
+  }
+
+  private handleDragEvent() {
+    this.disposables.add(
+      this.logic.handleEvent('dragStart', context => {
+        if (this.logic.view.readonly$.value) {
+          return;
+        }
+        const event = context.get('pointerState').raw;
+        const target = event.target;
+        if (target instanceof HTMLElement) {
+          const [cell, fillValues] = this.resolveDragStartTarget(target);
+
+          if (cell) {
+            const selection = this.selection;
+            if (
+              selection &&
+              selection.selectionType === 'area' &&
+              selection.isEditing &&
+              selection.focus.rowIndex === cell.rowIndex$.value &&
+              selection.focus.columnIndex === cell.columnIndex$.value
+            ) {
+              return false;
+            }
+            this.startDrag(event, cell, fillValues);
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        }
+        return false;
+      })
+    );
+  }
+
+  private handleSelectionChange() {
+    this.disposables.add(
+      this.logic.selection$.subscribe(tableSelection => {
+        if (!this.isValidSelection(tableSelection)) {
+          this.selection = undefined;
+          return;
+        }
+        const old =
+          this._tableViewSelection?.selectionType === 'area'
+            ? this._tableViewSelection
+            : undefined;
+        const newSelection =
+          tableSelection?.selectionType === 'area' ? tableSelection : undefined;
+        if (
+          old?.focus.rowIndex !== newSelection?.focus.rowIndex ||
+          old?.focus.columnIndex !== newSelection?.focus.columnIndex
+        ) {
+          requestAnimationFrame(() => {
+            this.scrollToFocus();
+          });
+        }
+
+        if (
+          this.isRowSelection() &&
+          (old?.rowsSelection?.start !== newSelection?.rowsSelection?.start ||
+            old?.rowsSelection?.end !== newSelection?.rowsSelection?.end)
+        ) {
+          requestAnimationFrame(() => {
+            this.scrollToAreaSelection();
+          });
+        }
+
+        if (old) {
+          const container = this.getCellContainer(
+            old.groupKey,
+            old.focus.rowIndex,
+            old.focus.columnIndex
+          );
+          if (container) {
+            const cell = container.cell;
+            if (old.isEditing) {
+              cell?.beforeExitEditingMode();
+              cell?.blurCell();
+              container.isEditing$.value = false;
+            }
+          }
+        }
+        this._tableViewSelection = tableSelection;
+
+        if (newSelection) {
+          const container = this.getCellContainer(
+            newSelection.groupKey,
+            newSelection.focus.rowIndex,
+            newSelection.focus.columnIndex
+          );
+          if (container) {
+            const cell = container.cell;
+            if (newSelection.isEditing) {
+              container.isEditing$.value = true;
+              requestAnimationFrame(() => {
+                cell?.afterEnterEditingMode();
+                cell?.focusCell();
+              });
+            }
+          }
+        }
+      })
+    );
+  }
+
+  private insertTo(
+    groupKey: string | undefined,
+    rowId: string,
+    before: boolean
+  ) {
+    const id = this.view.rowAdd({ before, id: rowId });
+    if (groupKey != null) {
+      this.view.groupTrait.moveCardTo(id, undefined, groupKey, {
+        before,
+        id: rowId,
+      });
+    }
+    const rows =
+      groupKey != null
+        ? this.view.groupTrait.groupDataMap$.value?.[groupKey]?.rows
+        : this.view.rows$.value;
+    requestAnimationFrame(() => {
+      const index = this.view.properties$.value.findIndex(
+        v => v.type$.value === 'title'
+      );
+      this.selection = TableViewAreaSelection.create({
+        groupKey: groupKey,
+        focus: {
+          rowIndex: rows?.findIndex(v => v.rowId === id) ?? 0,
+          columnIndex: index,
+        },
+        isEditing: true,
+      });
+    });
+  }
+
+  private resolveDragStartTarget(
+    target: HTMLElement
+  ): [cell: DatabaseCellContainer | null, fillValues: boolean] {
+    let cell: DatabaseCellContainer | null;
+    const fillValues = !!target.dataset.dragToFill;
+    if (fillValues) {
+      const focusCellContainer = this.getFocusCellContainer();
+      cell = focusCellContainer ?? null;
+    } else {
+      cell = target.closest('affine-database-virtual-cell-container');
+    }
+    return [cell, fillValues];
+  }
+
+  private scrollToAreaSelection() {
+    // this.areaSelectionElement?.scrollIntoView({
+    //   block: 'nearest',
+    //   inline: 'nearest',
+    // });
+  }
+
+  private scrollToFocus() {
+    // this.focusSelectionElement?.scrollIntoView({
+    //   block: 'nearest',
+    //   inline: 'nearest',
+    // });
+  }
+
+  areaToRows(selection: TableViewAreaSelection) {
+    const rows = this.rows(selection.groupKey ?? '') ?? [];
+    const ids = Array.from({
+      length: selection.rowsSelection.end - selection.rowsSelection.start + 1,
+    })
+      .map((_, index) => index + selection.rowsSelection.start)
+      .map(row => rows[row]?.rowId)
+      .filter((id): id is string => id != null);
+    return ids.map(id => ({ id, groupKey: selection.groupKey }));
+  }
+
+  readonly columnPositions$ = computed(() => {
+    const columnPositions = this.virtualScroll?.columnPosition$.value?.slice(1);
+    if (columnPositions == null) {
+      return [];
+    }
+    return columnPositions;
+  });
+
+  readonly columnOffsets$ = computed(() => {
+    const columnPositions = this.columnPositions$.value;
+    if (columnPositions == null) {
+      return [];
+    }
+    const firstLeft = columnPositions[0]?.left;
+    if (firstLeft == null) {
+      return [];
+    }
+    const rights = columnPositions.map(v => v.right);
+    if (rights == null) {
+      return [];
+    }
+    return [firstLeft, ...rights];
+  });
+
+  readonly groupRowOffsets$ = computed<
+    Record<string, ReadonlySignal<number[]>>
+  >(() => {
+    return Object.fromEntries(
+      this.virtualScroll?.groups$.value.map(group => {
+        return [
+          group.groupId,
+          computed(() => {
+            const firstTop = group.rowsTop$.value;
+            if (firstTop == null) {
+              return [];
+            }
+            const offsets: number[] = [firstTop];
+            for (const row of group.rows$.value) {
+              if (row.bottom$.value == null) {
+                break;
+              }
+              offsets.push(row.bottom$.value);
+            }
+            return offsets;
+          }),
+        ];
+      }) ?? []
+    );
+  });
+
+  cellPosition(groupKey: string | undefined) {
+    const containerRect = this.virtualScroll?.content.getBoundingClientRect();
+    if (containerRect == null) {
+      return;
+    }
+    return (x1: number, x2: number, y1: number, y2: number) => {
+      x1 = x1 - containerRect.left;
+      x2 = x2 - containerRect.left;
+      y1 = y1 - containerRect.top;
+      y2 = y2 - containerRect.top;
+      const rowOffsets = this.groupRowOffsets$.value[groupKey ?? ''];
+      if (rowOffsets == null) {
+        return;
+      }
+      const [startX, endX] = x1 < x2 ? [x1, x2] : [x2, x1];
+      const [startY, endY] = y1 < y2 ? [y1, y2] : [y2, y1];
+      const column = getRangeByPositions(
+        this.columnOffsets$.value,
+        startX,
+        endX
+      );
+      const row = getRangeByPositions(rowOffsets.value, startY, endY);
+      return {
+        row,
+        column,
+      };
+    };
+  }
+
+  clear() {
+    this.selection = undefined;
+  }
+
+  deleteRow(rowId: string) {
+    this.view.rowsDelete([rowId]);
+    this.focusToCell('up');
+    this.logic.ui$.value?.requestUpdate();
+  }
+
+  focusFirstCell() {
+    this.selection = TableViewAreaSelection.create({
+      focus: {
+        rowIndex: 0,
+        columnIndex: 0,
+      },
+      isEditing: false,
+    });
+  }
+
+  focusToArea(selection: TableViewAreaSelection) {
+    return {
+      ...selection,
+      rowsSelection: selection.rowsSelection ?? {
+        start: selection.focus.rowIndex,
+        end: selection.focus.rowIndex,
+      },
+      columnsSelection: selection.columnsSelection ?? {
+        start: selection.focus.columnIndex,
+        end: selection.focus.columnIndex,
+      },
+      isEditing: false,
+    } satisfies TableViewAreaSelection;
+  }
+
+  focusToCell(position: 'left' | 'right' | 'up' | 'down') {
+    if (!this.selection || this.selection.selectionType !== 'area') {
+      return;
+    }
+    const cell = this.getCellContainer(
+      this.selection.groupKey,
+      this.selection.focus.rowIndex,
+      this.selection.focus.columnIndex
+    );
+    if (!cell) {
+      return;
+    }
+    const row = cell.gridCell.row;
+    const rows = row.group.rows$.value;
+    let rowIndex = row.rowIndex$.value;
+    let columnIndex = cell.columnIndex$.value;
+    const columns = this.columnPositions$.value;
+    if (position === 'left') {
+      if (columnIndex === 0) {
+        columnIndex = columns.length - 1;
+        rowIndex--;
+      } else {
+        columnIndex--;
+      }
+    }
+    if (position === 'right') {
+      if (columnIndex === columns.length - 1) {
+        columnIndex = 0;
+        rowIndex++;
+      } else {
+        columnIndex++;
+      }
+    }
+    if (position === 'up') {
+      if (rowIndex === 0) {
+        //
+      } else {
+        rowIndex--;
+      }
+    }
+    if (position === 'down') {
+      if (rowIndex === rows.length - 1) {
+        //
+      } else {
+        rowIndex++;
+      }
+    }
+    const cellContainer = this.getCellContainer(
+      this.selection.groupKey,
+      rowIndex,
+      columnIndex
+    );
+    if (!cellContainer) {
+      return;
+    }
+    cellContainer.selectCurrentCell(false);
+  }
+
+  getCellElement(cell: TableGridCell): DatabaseCellContainer | undefined {
+    return (
+      cell.element.querySelector('affine-database-virtual-cell-container') ??
+      undefined
+    );
+  }
+
+  getCellByIndex(
+    groupKey: string | undefined,
+    rowIndex: number,
+    columnIndex: number
+  ): TableGridCell | undefined {
+    const row = this.rows(groupKey)?.[rowIndex];
+    if (!row) {
+      return;
+    }
+    const cell = row.cells$.value[columnIndex + 1];
+    return cell;
+  }
+
+  getCellContainer(
+    groupKey: string | undefined,
+    rowIndex: number,
+    columnIndex: number
+  ): DatabaseCellContainer | undefined {
+    const cell = this.getCellByIndex(groupKey, rowIndex, columnIndex);
+    if (!cell) {
+      return;
+    }
+    return this.getCellElement(cell);
+  }
+
+  getRect(
+    groupKey: string | undefined,
+    topIndex: number,
+    bottomIndex: number,
+    leftIndex: number,
+    rightIndex: number
+  ):
+    | undefined
+    | {
+        top: number;
+        left: number;
+        width: number;
+        height: number;
+        scale: number;
+      } {
+    const rows = this.rows(groupKey);
+    const top = rows?.[topIndex]?.top$.value;
+    const bottom = rows?.[bottomIndex]?.bottom$.value;
+    if (top == null || bottom == null) {
+      return;
+    }
+    const left = this.columnPositions$.value[leftIndex]?.left;
+    const right = this.columnPositions$.value[rightIndex]?.right;
+    if (left == null || right == null) {
+      return;
+    }
+    return {
+      top,
+      left,
+      width: right - left,
+      height: bottom - top,
+      scale: 1,
+    };
+  }
+
+  getSelectionAreaBorder(position: 'left' | 'right' | 'top' | 'bottom') {
+    return this.__selectionElement?.querySelector(
+      `.area-border.area-${position}`
+    );
+  }
+
+  hostConnected() {
+    requestAnimationFrame(() => {
+      this.tableContainer?.append(this.__selectionElement);
+      this.tableContainer?.append(this.__dragToFillElement);
+    });
+    this.handleDragEvent();
+    this.handleSelectionChange();
+  }
+
+  insertRowAfter(groupKey: string | undefined, rowId: string) {
+    this.insertTo(groupKey, rowId, false);
+  }
+
+  insertRowBefore(groupKey: string | undefined, rowId: string) {
+    this.insertTo(groupKey, rowId, true);
+  }
+
+  isRowSelection() {
+    return this.selection?.selectionType === 'row';
+  }
+
+  isValidSelection(selection?: TableViewSelectionWithType): boolean {
+    if (!selection || selection.selectionType === 'row') {
+      return true;
+    }
+    if (selection.focus.rowIndex > this.view.rows$.value.length - 1) {
+      this.selection = undefined;
+      return false;
+    }
+    if (selection.focus.columnIndex > this.view.propertyIds$.value.length - 1) {
+      this.selection = undefined;
+      return false;
+    }
+    return true;
+  }
+
+  navigateRowSelection(direction: 'up' | 'down', append = false) {
+    if (!TableViewRowSelection.is(this.selection)) return;
+    const rows = this.selection.rows;
+    const lastRow = rows[rows.length - 1];
+    if (!lastRow) return;
+    const lastRowIndex =
+      this.getGroup(lastRow?.groupKey)?.rows$.value.find(
+        r => r.rowId === lastRow?.id
+      )?.rowIndex$.value ?? 0;
+    const getRowByIndex = (index: number) => {
+      const tableRow = this.rows(lastRow?.groupKey)?.[index];
+      if (!tableRow) {
+        return;
+      }
+      return {
+        id: tableRow.rowId,
+        groupKey: lastRow?.groupKey,
+      };
+    };
+    const prevRow = getRowByIndex(lastRowIndex - 1);
+    const nextRow = getRowByIndex(lastRowIndex + 1);
+    const includes = (row: RowWithGroup) => {
+      if (!row) {
+        return false;
+      }
+      return rows.some(r => RowWithGroup.equal(r, row));
+    };
+    if (append) {
+      const addList: RowWithGroup[] = [];
+      const removeList: RowWithGroup[] = [];
+      if (direction === 'up' && prevRow != null) {
+        if (includes(prevRow)) {
+          removeList.push(lastRow);
+        } else {
+          addList.push(prevRow);
+        }
+      }
+      if (direction === 'down' && nextRow != null) {
+        if (includes(nextRow)) {
+          removeList.push(lastRow);
+        } else {
+          addList.push(nextRow);
+        }
+      }
+      this.rowSelectionChange({ add: addList, remove: removeList });
+    } else {
+      const target = direction === 'up' ? prevRow : nextRow;
+      if (target != null) {
+        this.selection = TableViewRowSelection.create({
+          rows: [target],
+        });
+      }
+    }
+  }
+
+  get virtualScroll() {
+    return this.logic.virtualScroll$.value;
+  }
+
+  getGroup(groupKey: string | undefined) {
+    return this.virtualScroll?.getGroup(groupKey ?? '');
+  }
+
+  getRow(groupKey: string | undefined, rowId: string) {
+    return this.virtualScroll?.getRow(groupKey ?? '', rowId);
+  }
+
+  getCell(groupKey: string | undefined, rowId: string, columnId: string) {
+    return this.virtualScroll?.getCell(groupKey ?? '', rowId, columnId);
+  }
+
+  rows(groupKey: string | undefined) {
+    return this.virtualScroll?.getGroup(groupKey ?? '').rows$.value;
+  }
+
+  rowSelectionChange({
+    add,
+    remove,
+  }: {
+    add: RowWithGroup[];
+    remove: RowWithGroup[];
+  }) {
+    const key = (r: RowWithGroup) => `${r.id}.${r.groupKey ? r.groupKey : ''}`;
+    const rows = new Set(
+      TableViewRowSelection.rows(this.selection).map(r => key(r))
+    );
+    remove.forEach(row => rows.delete(key(row)));
+    add.forEach(row => rows.add(key(row)));
+    const result = [...rows]
+      .map(r => r.split('.'))
+      .flatMap(([id, groupKey]) => {
+        if (id == null) return [];
+        return [
+          {
+            id,
+            groupKey: groupKey ? groupKey : undefined,
+          },
+        ];
+      });
+    this.selection = TableViewRowSelection.create({
+      rows: result,
+    });
+  }
+
+  rowsToArea(rows: string[]):
+    | {
+        start: number;
+        end: number;
+        groupKey?: string;
+      }
+    | undefined {
+    let groupKey: string | undefined = undefined;
+    let minIndex: number | undefined = undefined;
+    let maxIndex: number | undefined = undefined;
+    const set = new Set(rows);
+    if (!this.tableContainer) return;
+    for (const row of this.tableContainer
+      ?.querySelectorAll('data-view-table-row')
+      .values() ?? []) {
+      if (!set.has(row.rowId)) {
+        continue;
+      }
+      minIndex =
+        minIndex != null ? Math.min(minIndex, row.rowIndex) : row.rowIndex;
+      maxIndex =
+        maxIndex != null ? Math.max(maxIndex, row.rowIndex) : row.rowIndex;
+      if (groupKey == null) {
+        groupKey = row.groupKey;
+      } else if (groupKey !== row.groupKey) {
+        return;
+      }
+    }
+    if (minIndex == null || maxIndex == null) {
+      return;
+    }
+    return {
+      groupKey,
+      start: minIndex,
+      end: maxIndex,
+    };
+  }
+
+  selectionAreaDown() {
+    const selection = this.selection;
+    if (!selection || selection.selectionType !== 'area') {
+      return;
+    }
+    const newSelection = this.focusToArea(selection);
+    if (newSelection.rowsSelection.start === newSelection.focus.rowIndex) {
+      newSelection.rowsSelection.end = Math.min(
+        (this.rows(newSelection.groupKey)?.length ?? 0) - 1,
+        newSelection.rowsSelection.end + 1
+      );
+      // requestAnimationFrame(() => {
+      //   this.getSelectionAreaBorder('bottom')?.scrollIntoView({
+      //     block: 'nearest',
+      //     inline: 'nearest',
+      //     behavior: 'smooth',
+      //   });
+      // });
+    } else {
+      newSelection.rowsSelection.start += 1;
+      // requestAnimationFrame(() => {
+      //   this.getSelectionAreaBorder('top')?.scrollIntoView({
+      //     block: 'nearest',
+      //     inline: 'nearest',
+      //     behavior: 'smooth',
+      //   });
+      // });
+    }
+    this.selection = newSelection;
+  }
+
+  selectionAreaLeft() {
+    const selection = this.selection;
+    if (!selection || selection.selectionType !== 'area') {
+      return;
+    }
+    const newSelection = this.focusToArea(selection);
+    if (newSelection.columnsSelection.end === newSelection.focus.columnIndex) {
+      newSelection.columnsSelection.start = Math.max(
+        0,
+        newSelection.columnsSelection.start - 1
+      );
+      // requestAnimationFrame(() => {
+      //   this.getSelectionAreaBorder('left')?.scrollIntoView({
+      //     block: 'nearest',
+      //     inline: 'nearest',
+      //     behavior: 'smooth',
+      //   });
+      // });
+    } else {
+      newSelection.columnsSelection.end -= 1;
+      // requestAnimationFrame(() => {
+      //   this.getSelectionAreaBorder('right')?.scrollIntoView({
+      //     block: 'nearest',
+      //     inline: 'nearest',
+      //     behavior: 'smooth',
+      //   });
+      // });
+    }
+    this.selection = newSelection;
+  }
+
+  selectionAreaRight() {
+    const selection = this.selection;
+    if (!selection || selection.selectionType !== 'area') {
+      return;
+    }
+    const newSelection = this.focusToArea(selection);
+    if (
+      newSelection.columnsSelection.start === newSelection.focus.columnIndex
+    ) {
+      const max = (this.virtualScroll?.columns$.value.length ?? 0) - 1;
+      newSelection.columnsSelection.end = Math.min(
+        max,
+        newSelection.columnsSelection.end + 1
+      );
+      // requestAnimationFrame(() => {
+      //   this.getSelectionAreaBorder('right')?.scrollIntoView({
+      //     block: 'nearest',
+      //     inline: 'nearest',
+      //     behavior: 'smooth',
+      //   });
+      // });
+    } else {
+      newSelection.columnsSelection.start += 1;
+      // requestAnimationFrame(() => {
+      //   this.getSelectionAreaBorder('left')?.scrollIntoView({
+      //     block: 'nearest',
+      //     inline: 'nearest',
+      //     behavior: 'smooth',
+      //   });
+      // });
+    }
+    this.selection = newSelection;
+  }
+
+  selectionAreaUp() {
+    const selection = this.selection;
+    if (!selection || selection.selectionType !== 'area') {
+      return;
+    }
+    const newSelection = this.focusToArea(selection);
+    if (newSelection.rowsSelection.end === newSelection.focus.rowIndex) {
+      newSelection.rowsSelection.start = Math.max(
+        0,
+        newSelection.rowsSelection.start - 1
+      );
+      // requestAnimationFrame(() => {
+      //   this.getSelectionAreaBorder('top')?.scrollIntoView({
+      //     block: 'nearest',
+      //     inline: 'nearest',
+      //     behavior: 'smooth',
+      //   });
+      // });
+    } else {
+      newSelection.rowsSelection.end -= 1;
+      // requestAnimationFrame(() => {
+      //   this.getSelectionAreaBorder('bottom')?.scrollIntoView({
+      //     block: 'nearest',
+      //     inline: 'nearest',
+      //     behavior: 'smooth',
+      //   });
+      // });
+    }
+    this.selection = newSelection;
+  }
+
+  startDrag(
+    evt: PointerEvent,
+    cell: DatabaseCellContainer,
+    fillValues?: boolean
+  ) {
+    const groupKey = cell.groupKey;
+    const table = this.tableContainer;
+    const scrollContainer = table?.parentElement;
+    if (!table || !scrollContainer) {
+      return;
+    }
+    const tableRect = table.getBoundingClientRect();
+    const startOffsetX = evt.x - tableRect.left;
+    const startOffsetY = evt.y - tableRect.top;
+    const offsetToSelection = this.cellPosition(groupKey);
+    const select = (selection: {
+      row: MultiSelection;
+      column: MultiSelection;
+    }) => {
+      this.selection = TableViewAreaSelection.create({
+        groupKey: groupKey,
+        rowsSelection: selection.row,
+        columnsSelection: selection.column,
+        focus: {
+          rowIndex: cell.rowIndex$.value,
+          columnIndex: cell.columnIndex$.value,
+        },
+        isEditing: false,
+      });
+    };
+    const drag = startDrag<
+      | {
+          row: MultiSelection;
+          column: MultiSelection;
+        }
+      | undefined,
+      {
+        x: number;
+        y: number;
+      }
+    >(evt, {
+      transform: evt => ({
+        x: evt.x,
+        y: evt.y,
+      }),
+      onDrag: () => {
+        if (fillValues) this.__dragToFillElement.dragging = true;
+        return undefined;
+      },
+      onMove: ({ x, y }) => {
+        if (!table) return;
+        const tableRect = table.getBoundingClientRect();
+        const startX = tableRect.left + startOffsetX;
+        const startY = tableRect.top + startOffsetY;
+        const selection = offsetToSelection?.(startX, x, startY, y);
+        if (!selection) {
+          return;
+        }
+        if (fillValues)
+          selection.column = {
+            start: cell.columnIndex$.value,
+            end: cell.columnIndex$.value,
+          };
+
+        select(selection);
+        return selection;
+      },
+      onDrop: selection => {
+        if (!selection) {
+          return;
+        }
+        select(selection);
+        if (fillValues && this.selection) {
+          this.__dragToFillElement.dragging = false;
+          fillSelectionWithFocusCellData(
+            this.logic,
+            TableViewAreaSelection.create({
+              groupKey: groupKey,
+              rowsSelection: selection.row,
+              columnsSelection: selection.column,
+              focus: {
+                rowIndex: cell.rowIndex$.value,
+                columnIndex: cell.columnIndex$.value,
+              },
+              isEditing: false,
+            })
+          );
+        }
+      },
+      onClear: () => {
+        cancelScroll();
+      },
+    });
+    const cancelScroll = autoScrollOnBoundary(
+      scrollContainer,
+      computed(() => {
+        return {
+          left: drag.mousePosition.value.x,
+          right: drag.mousePosition.value.x,
+          top: drag.mousePosition.value.y,
+          bottom: drag.mousePosition.value.y,
+        };
+      }),
+      {
+        onScroll() {
+          drag.move({ x: drag.last.x, y: drag.last.y });
+        },
+      }
+    );
+  }
+
+  toggleRow(rowId: string, groupKey?: string) {
+    const row = {
+      id: rowId,
+      groupKey,
+    };
+    const isSelected = TableViewRowSelection.includes(this.selection, row);
+    this.rowSelectionChange({
+      add: isSelected ? [] : [row],
+      remove: isSelected ? [row] : [],
+    });
+  }
+}
+
+export class SelectionElement extends SignalWatcher(
+  WithDisposable(ShadowlessElement)
+) {
+  static override styles = css`
+    data-view-virtual-table-selection {
+      display: block;
+      position: absolute;
+      left: 0;
+      top: 0;
+    }
+    .database-selection {
+      position: absolute;
+      z-index: 2;
+      box-sizing: border-box;
+      background-color: var(--affine-primary-color-04);
+      pointer-events: none;
+      display: none;
+    }
+
+    .database-focus {
+      position: absolute;
+      z-index: 2;
+      box-sizing: border-box;
+      border: 1px solid var(--affine-primary-color);
+      border-radius: 2px;
+      pointer-events: none;
+      outline: none;
+      display: none;
+    }
+  `;
+
+  get virtualScroll() {
+    return this.controller.virtualScroll;
+  }
+
+  focusPosition$ = computed(() => {
+    const selection = this.selection$.value;
+    if (selection?.selectionType !== 'area') {
+      return;
+    }
+    const focus = selection.focus;
+    const groupKey = selection.groupKey;
+    const group = this.controller.getGroup(groupKey);
+    if (!group) {
+      return;
+    }
+    const row = group.rows$.value[focus.rowIndex];
+    if (!row) {
+      return;
+    }
+    const columnPosition =
+      this.controller.columnPositions$.value[focus.columnIndex];
+    if (!columnPosition) {
+      return;
+    }
+    const left = columnPosition.left;
+    const top = row.top$.value;
+    const width = columnPosition.width;
+    const height = row.height$.value;
+    if (left == null || top == null || width == null || height == null) {
+      return;
+    }
+    const paddingLeft = this.controller.logic.root.config.virtualPadding$.value;
+    return {
+      left: left + paddingLeft,
+      top,
+      width,
+      height,
+      editing: selection.isEditing,
+    };
+  });
+
+  areaPosition$ = computed(() => {
+    const selection = this.selection$.value;
+    if (selection?.selectionType !== 'area') {
+      return;
+    }
+    const groupKey = selection.groupKey;
+    const group = this.controller.getGroup(groupKey);
+    if (!group) {
+      return;
+    }
+    const rect = this.controller.getRect(
+      groupKey,
+      selection.rowsSelection.start,
+      selection.rowsSelection.end,
+      selection.columnsSelection.start,
+      selection.columnsSelection.end
+    );
+    if (!rect) {
+      return;
+    }
+    const paddingLeft = this.controller.logic.root.config.virtualPadding$.value;
+    return {
+      left: rect.left + paddingLeft,
+      top: rect.top,
+      width: rect.width,
+      height: rect.height,
+    };
+  });
+
+  get selection$() {
+    return this.controller.logic.selection$;
+  }
+
+  override render() {
+    const focus = this.focusPosition$.value;
+    const focusStyle = focus
+      ? styleMap({
+          left: `${focus.left}px`,
+          top: `${focus.top}px`,
+          width: `${focus.width}px`,
+          height: `${focus.height}px`,
+          display: 'block',
+          boxShadow: focus.editing
+            ? '0px 0px 0px 2px rgba(30, 150, 235, 0.30)'
+            : 'unset',
+        })
+      : undefined;
+    const area = this.areaPosition$.value;
+    const areaStyle = area
+      ? styleMap({
+          left: `${area.left}px`,
+          top: `${area.top}px`,
+          width: `${area.width}px`,
+          height: `${area.height}px`,
+          display: 'block',
+        })
+      : undefined;
+    return html`
+      <div class="database-selection" style=${areaStyle}></div>
+      <div tabindex="0" class="database-focus" style=${focusStyle}></div>
+    `;
+  }
+
+  @property({ attribute: false })
+  accessor controller!: TableSelectionController;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'data-view-virtual-table-selection': SelectionElement;
+  }
+}