@formicoidea/labre-core 0.23.0 → 0.23.2

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

@@ -1,1110 +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;
-  }
-}
+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;
+  }
+}