@veltra/sheet 2.0.1 → 2.2.0

package/src/grid/sheet-grid.ts

@@ -1,407 +0,0 @@
-import { ListTable, register } from '@visactor/vtable'
-import type { ListTableConstructorOptions } from '@visactor/vtable'
-import { InputEditor } from '@visactor/vtable-editors'
-import type { EditContext } from '@visactor/vtable-editors'
-
-import type { CellAddress, CellRange } from '../core/address'
-import { cellKey, colIndexToName, createRange } from '../core/address'
-import type { CellValue } from '../core/cell-store'
-import { computeFillTargetRange, generateFill, type FillDirection } from '../core/fill'
-import type { Sheet } from '../core/sheet'
-import {
-  SHEET_DEFAULT_ROW_HEIGHT,
-  sheetRowSeriesNumberStyle,
-  sheetVTableTheme
-} from './vtable-theme'
-
-/**
- * VTable 适配层：数据模型完全自持有，ListTable 只做渲染与输入。
- *
- * - 模型 → VTable：records 由 store 行视图桥接；customMergeCell 闭包直读 MergeManager
- *   （VTable 逐格动态求值、无缓存，合并变更后 setRecords 重建场景树即生效）
- * - VTable → 模型：change_cell_value 回写 store；selected_cell 经 resolveAnchor 更新选区
- * - 公式：公式格 record 存计算缓存（显示值）；进入编辑时编辑器显示公式原文（'=f'）。
- *   编辑提交期间模型变更（含公式重算派生格）先入待同步队列，提交结束统一回推表格——
- *   VTable 自己只更新了被编辑格的 record（还是输入文本），派生格它不知道
- * - 键盘：容器 keydown 绑定 undo/redo（Cmd/Ctrl+Z、Cmd/Ctrl+Shift+Z、Ctrl+Y），
- *   编辑器 input 打开时不拦截；编辑态方向键不换格（moveEditCellOnArrowKeys: false）
- * - 填充柄：excelOptions.fillHandle + mousedown/drag_end → core/fill → setCells
- * - 行列尺寸：列宽仅列头；行高仅行号列（包装 _canResizeRow）。稀疏存 Sheet.rowHeights，
- *   RESIZE_ROW_END 同步，重建时还原
- * - 坐标换算：行号列不计入 rowHeaderLevelCount，偏移量在首个表格实例上
- *   用 columnHeaderLevelCount + isSeriesNumber 实测并缓存（见 getOffsets）
- */
-
-/** 公式感知编辑器：进入编辑时公式格显示原文（同 Excel），其余格显示当前值 */
-class FormulaAwareInputEditor extends InputEditor {
-  /** 由 SheetGrid 注入：返回进入编辑时应显示的文本；undefined = 用 VTable 默认值 */
-  resolveEditText?: (col: number, row: number) => string | undefined
-
-  override onStart(context: EditContext<string>): void {
-    const text = this.resolveEditText?.(context.col, context.row)
-    super.onStart(text === undefined ? context : { ...context, value: text })
-  }
-}
-
-/** 编辑器按 grid 实例注册（hook 闭包各自 sheet），名称递增防冲突 */
-let editorSeq = 0
-
-/** 右键菜单回调参数（vue 层弹 UContextmenu；grid 不依赖 desktop） */
-export interface SheetGridContextMenuInfo {
-  x: number
-  y: number
-  /** body 格地址；行号/列头为 null */
-  addr: CellAddress | null
-}
-
-/** 从 VTable 事件载荷提取 viewport 坐标（兼容 nativeEvent 嵌套） */
-function clientPointFromEvent(event: unknown): { x: number; y: number } | null {
-  let current: unknown = event
-  for (let i = 0; i < 3 && current && typeof current === 'object'; i++) {
-    if ('clientX' in current && typeof (current as { clientX: unknown }).clientX === 'number') {
-      const { clientX, clientY } = current as { clientX: number; clientY: number }
-      return { x: clientX, y: clientY }
-    }
-    current = 'nativeEvent' in current ? (current as { nativeEvent: unknown }).nativeEvent : null
-  }
-  return null
-}
-
-export interface SheetGridOptions {
-  container: HTMLElement
-  sheet: Sheet
-  /** 渲染行数，默认 100 */
-  rows?: number
-  /** 渲染列数，默认 26（A..Z） */
-  cols?: number
-  /** 单元格右键（已 preventDefault）；由 vue 层弹出菜单 */
-  onContextMenu?: (info: SheetGridContextMenuInfo) => void
-}
-
-export class SheetGrid {
-  private readonly sheet: Sheet
-  private readonly table: ListTable
-  private readonly container: HTMLElement
-  private readonly rows: number
-  private readonly cols: number
-  private readonly editorName: string
-  private readonly onContextMenu?: (info: SheetGridContextMenuInfo) => void
-  private readonly disposers: (() => void)[] = []
-  /** 编辑提交期间累积的模型变更（提交结束统一回推表格，覆盖公式派生格） */
-  private pendingTableSync: Map<number, CellAddress> | null = null
-  /** 实测坐标偏移（行号列数 / 列头行数），首次使用时测量 */
-  private offsets?: { colOffset: number; rowOffset: number }
-  /** 填充柄：mousedown 时的源选区（模型坐标） */
-  private fillSourceRange: CellRange | null = null
-
-  constructor(options: SheetGridOptions) {
-    this.sheet = options.sheet
-    this.container = options.container
-    this.rows = options.rows ?? 100
-    this.cols = options.cols ?? 26
-    this.onContextMenu = options.onContextMenu
-
-    // 每个 grid 实例注册自己的编辑器（hook 闭包本实例的 sheet 与坐标换算）
-    this.editorName = `veltra-sheet-input-${editorSeq++}`
-    const editor = new FormulaAwareInputEditor()
-    editor.resolveEditText = (col, row) => {
-      const addr = this.toSheetAddr(this.table, col, row)
-      if (!addr) return undefined
-      const data = this.sheet.getCellData(this.sheet.merges.resolveAnchor(addr))
-      return data?.f ? `=${data.f}` : undefined
-    }
-    register.editor(this.editorName, editor)
-
-    this.table = new ListTable(options.container, this.buildOptions())
-    this.restrictRowResizeToSeriesNumber()
-    this.applyStoredRowHeights()
-    this.bindTableEvents()
-    this.bindSheetEvents()
-    this.bindKeyboard()
-  }
-
-  /** 底层 ListTable 实例（调试与测试用） */
-  getTable(): ListTable {
-    return this.table
-  }
-
-  /** 全量刷新（合并结构变化、批量数据变更后调用） */
-  refresh(): void {
-    this.table.setRecords(this.buildRecords())
-  }
-
-  /** 撤销一步（模型命令历史） */
-  undo(): boolean {
-    return this.sheet.undo()
-  }
-
-  /** 重做一步（模型命令历史） */
-  redo(): boolean {
-    return this.sheet.redo()
-  }
-
-  release(): void {
-    for (const dispose of this.disposers) dispose()
-    this.disposers.length = 0
-    this.table.release()
-  }
-
-  // ─── 坐标换算 ─────────────────────────────────────────────
-
-  /**
-   * 实测偏移：列头行数取 columnHeaderLevelCount；
-   * 行号列不被计入 rowHeaderLevelCount，用 isSeriesNumber 逐列探测。
-   * 结果缓存（表格实例不变，布局不变）。
-   */
-  private getOffsets(table: ListTable): { colOffset: number; rowOffset: number } {
-    if (!this.offsets) {
-      const rowOffset = table.columnHeaderLevelCount
-      let colOffset = 0
-      while (colOffset < table.colCount && table.isSeriesNumber(colOffset, rowOffset)) colOffset++
-      this.offsets = { colOffset, rowOffset }
-    }
-    return this.offsets
-  }
-
-  /** VTable 坐标 → 模型地址；行号列/列头返回 null */
-  private toSheetAddr(table: ListTable, col: number, row: number): CellAddress | null {
-    const { colOffset, rowOffset } = this.getOffsets(table)
-    const addr = { row: row - rowOffset, col: col - colOffset }
-    if (addr.row < 0 || addr.col < 0) return null
-    return addr
-  }
-
-  /** 模型地址 → VTable 坐标 */
-  private toTableCoord(table: ListTable, addr: CellAddress): { col: number; row: number } {
-    const { colOffset, rowOffset } = this.getOffsets(table)
-    return { col: addr.col + colOffset, row: addr.row + rowOffset }
-  }
-
-  // ─── 模型 → VTable ────────────────────────────────────────
-
-  private buildColumns() {
-    return Array.from({ length: this.cols }, (_, col) => ({
-      field: String(col),
-      title: colIndexToName(col)
-    }))
-  }
-
-  private buildRecords(): Record<string, CellValue>[] {
-    const records: Record<string, CellValue>[] = Array.from({ length: this.rows }, () => ({}))
-    for (const [addr, data] of this.sheet.store.entries()) {
-      if (addr.row < this.rows && addr.col < this.cols && data.v != null) {
-        records[addr.row]![String(addr.col)] = data.v
-      }
-    }
-    return records
-  }
-
-  private buildOptions(): ListTableConstructorOptions {
-    return {
-      records: this.buildRecords(),
-      columns: this.buildColumns(),
-      widthMode: 'standard',
-      defaultRowHeight: SHEET_DEFAULT_ROW_HEIGHT,
-      // 列宽只在列头（A/B/C…）。行高：VTable rowResizeMode:'header' 以 isHeader()
-      // 判定，而行号列 body 格不是 header——设 'header' 会禁用行号列调行高。
-      // 因此 row 用 'all'，构造后限制到行号列（见 restrictRowResizeToSeriesNumber）。
-      resize: { columnResizeMode: 'header', rowResizeMode: 'all' },
-      theme: sheetVTableTheme,
-      rowSeriesNumber: { width: 46, style: sheetRowSeriesNumberStyle },
-      excelOptions: { fillHandle: true },
-      // 禁止浏览器默认右键菜单，改由 CONTEXTMENU_CELL → UContextmenu
-      eventOptions: { preventDefaultContextMenu: true },
-      editor: this.editorName,
-      editCellTrigger: 'doubleclick',
-      keyboardOptions: {
-        moveFocusCellOnTab: true,
-        editCellOnEnter: true,
-        moveFocusCellOnEnter: true,
-        // 编辑中方向键只移输入光标；未编辑时选区导航不受影响
-        moveEditCellOnArrowKeys: false,
-        selectAllOnCtrlA: true
-      },
-      customMergeCell: (col, row, table) => {
-        const addr = this.toSheetAddr(table as ListTable, col, row)
-        if (!addr) return undefined
-        const merge = this.sheet.merges.getMergeAt(addr)
-        if (!merge) return undefined
-        const anchorCoord = this.toTableCoord(table as ListTable, merge.start)
-        const recordValue = (table as ListTable).getCellOriginValue(
-          anchorCoord.col,
-          anchorCoord.row
-        )
-        return {
-          range: { start: anchorCoord, end: this.toTableCoord(table as ListTable, merge.end) },
-          // 关键 1：必须携带 text。VTable 的 getCellRange 仅在 text/customLayout/
-          // customRender 有效时才认这个自定义合并——没有 text 时选区与编辑不会
-          // 扩展为整个合并区域，且合并格渲染为空。
-          // 关键 2：text 必须读 VTable records 而非模型。编辑提交的顺序是
-          // 先更新 record → 重绘 → 最后才发 change_cell_value 回写模型；
-          // 若此时读模型，拿到的还是回写前的旧值（合并格显示旧文本）。
-          text: recordValue == null ? '' : String(recordValue)
-        }
-      }
-    }
-  }
-
-  /**
-   * 行高只允许在行号列拖拽（Excel 语义）。
-   * VTable 无 canResizeRow，且 'header' 不含 rowSeriesNumber body，故包装 _canResizeRow。
-   */
-  private restrictRowResizeToSeriesNumber(): void {
-    const table = this.table
-    const base = table._canResizeRow.bind(table)
-    table._canResizeRow = (col, row) => table.isSeriesNumber(col, row) && base(col, row)
-  }
-
-  /** 按 Sheet 稀疏行高还原到 VTable（tab 切换重建后保留） */
-  private applyStoredRowHeights(): void {
-    for (const [row, height] of this.sheet.getRowHeights()) {
-      const tableRow = this.toTableCoord(this.table, { row, col: 0 }).row
-      this.table.setRowHeight(tableRow, height)
-    }
-  }
-
-  // ─── 事件桥接 ─────────────────────────────────────────────
-
-  private bindTableEvents(): void {
-    this.table.on(ListTable.EVENT_TYPE.CHANGE_CELL_VALUE, (args) => {
-      const addr = this.toSheetAddr(this.table, args.col, args.row)
-      if (addr == null) return
-      // 编辑提交期间模型变更（含公式重算派生格）先入队列，提交结束统一回推。
-      // 被编辑格自身也入队：VTable 已把输入文本写进 record，公式格需回推计算值
-      this.pendingTableSync = new Map([[cellKey(addr), addr]])
-      try {
-        this.sheet.setCellValue(addr, args.changedValue ?? null)
-      } finally {
-        const pending = this.pendingTableSync
-        this.pendingTableSync = null
-        if (pending) {
-          for (const pendingAddr of pending.values()) this.pushCellToTable(pendingAddr)
-        }
-      }
-    })
-
-    this.table.on(ListTable.EVENT_TYPE.SELECTED_CELL, (args) => {
-      const addr = this.toSheetAddr(this.table, args.col, args.row)
-      if (addr == null) return
-      this.sheet.selectCell(addr)
-    })
-
-    // 拖选结束 → 选区同步为区域（合并等区域操作的前提）
-    this.table.on(ListTable.EVENT_TYPE.DRAG_SELECT_END, () => {
-      const range = this.readSelectedModelRange()
-      if (!range) return
-      this.sheet.selectRange(range)
-    })
-
-    // 行高拖拽结束 → 写入模型稀疏表（不进 undo）
-    this.table.on(ListTable.EVENT_TYPE.RESIZE_ROW_END, (args) => {
-      const addr = this.toSheetAddr(this.table, this.getOffsets(this.table).colOffset, args.row)
-      if (!addr) return
-      this.sheet.setRowHeight(addr.row, args.rowHeight)
-    })
-
-    // 填充柄：记下源选区
-    this.table.on(ListTable.EVENT_TYPE.MOUSEDOWN_FILL_HANDLE, () => {
-      this.fillSourceRange = this.readSelectedModelRange()
-    })
-
-    // 填充柄拖拽结束 → generateFill → setCells
-    this.table.on(ListTable.EVENT_TYPE.DRAG_FILL_HANDLE_END, (args) => {
-      const source = this.fillSourceRange
-      this.fillSourceRange = null
-      const direction = args.direction as FillDirection | undefined
-      if (!source || !direction) return
-      const expanded = this.readSelectedModelRange()
-      if (!expanded) return
-      const target = computeFillTargetRange(source, direction, expanded)
-      if (!target) return
-      const items = generateFill({
-        source,
-        target,
-        direction,
-        getCellData: (addr) => this.sheet.getCellData(addr)
-      })
-      if (items.length === 0) return
-      this.sheet.setCells(items)
-      this.sheet.selectRange(createRange(source.start, expanded.end))
-    })
-
-    // 右键 → vue 层 UContextmenu（grid 不依赖 desktop）
-    // VTable 在 rightdown 上派发 CONTEXTMENU_CELL（非原生 contextmenu）
-    this.table.on(ListTable.EVENT_TYPE.CONTEXTMENU_CELL, (args) => {
-      const event = args.event
-      if (event && typeof event === 'object' && 'preventDefault' in event) {
-        ;(event as { preventDefault: () => void }).preventDefault()
-      }
-      if (!this.onContextMenu) return
-      const point = clientPointFromEvent(event)
-      // 延后一帧：避开 VTable rightdown 同步阶段，保证菜单挂载后不被同轮指针事件干扰
-      const info: SheetGridContextMenuInfo = {
-        x: point?.x ?? 0,
-        y: point?.y ?? 0,
-        addr: this.toSheetAddr(this.table, args.col, args.row)
-      }
-      queueMicrotask(() => this.onContextMenu?.(info))
-    })
-  }
-
-  /** 当前 VTable 选区 → 规范化模型区域；无有效 body 选区返回 null */
-  private readSelectedModelRange(): CellRange | null {
-    const range = this.table.getSelectedCellRanges()[0]
-    if (!range) return null
-    const start = this.toSheetAddr(this.table, range.start.col, range.start.row)
-    const end = this.toSheetAddr(this.table, range.end.col, range.end.row)
-    if (!start || !end) return null
-    return createRange(start, end)
-  }
-
-  private bindSheetEvents(): void {
-    this.disposers.push(
-      this.sheet.on('cell-change', ({ addr }) => {
-        if (this.pendingTableSync) {
-          this.pendingTableSync.set(cellKey(addr), addr)
-          return
-        }
-        this.pushCellToTable(addr)
-      })
-    )
-
-    this.disposers.push(
-      this.sheet.on('merge-change', () => {
-        this.refresh()
-      })
-    )
-  }
-
-  /** 模型格 → 表格 record（显示值；公式格为计算缓存） */
-  private pushCellToTable(addr: CellAddress): void {
-    const { col, row } = this.toTableCoord(this.table, addr)
-    const value = this.sheet.getDisplayValue(addr)
-    this.table.changeCellValue(col, row, value as string | number | null, false, false)
-  }
-
-  /**
-   * 键盘绑定：Cmd/Ctrl+Z undo，Cmd/Ctrl+Shift+Z 与 Ctrl+Y redo。
-   * 编辑器打开时（事件来自编辑器 input）不拦截，保留文本编辑自身的撤销行为。
-   */
-  private bindKeyboard(): void {
-    const onKeyDown = (event: KeyboardEvent): void => {
-      if (event.target instanceof HTMLInputElement || event.target instanceof HTMLTextAreaElement) {
-        return
-      }
-      const mod = event.metaKey || event.ctrlKey
-      if (!mod) return
-      const key = event.key.toLowerCase()
-      if (key === 'z' && !event.shiftKey) {
-        if (this.undo()) event.preventDefault()
-      } else if ((key === 'z' && event.shiftKey) || (key === 'y' && event.ctrlKey)) {
-        if (this.redo()) event.preventDefault()
-      }
-    }
-    this.container.addEventListener('keydown', onKeyDown)
-    this.disposers.push(() => this.container.removeEventListener('keydown', onKeyDown))
-  }
-}

package/src/grid/vtable-theme.ts

@@ -1,61 +0,0 @@
-import { themes } from '@visactor/vtable'
-
-/** 行号 / 列头浅底（canvas 主题无法读 CSS 变量，固定色贴近 Excel） */
-const CHROME_BG = '#F5F5F5'
-/** body 纯白，覆盖 DEFAULT 斑马底色 */
-const BODY_BG = '#FFF'
-/** 网格线 / 外框：浅灰（勿用 DEFAULTBORDERCOLOR #000） */
-const GRID_BORDER = '#E1E4E8'
-/** 选区边框：清晰蓝（覆盖 DEFAULT 的 #0000ff） */
-const SELECTION_BORDER = '#2170E7'
-/** 选区填充 */
-const SELECTION_BG = 'rgba(33, 112, 231, 0.12)'
-
-/**
- * 单元格内边距 [上, 右, 下, 左]。
- * VTable DEFAULT 为 `[10, 16, 10, 16]`，配合 `defaultRowHeight: 28` 会挤占文字区；
- * 收紧到贴近 Excel 的密度（仍留少量呼吸空间）。
- */
-export const SHEET_CELL_PADDING = [2, 6, 2, 6] as const
-
-/**
- * Sheet 默认 VTable 主题。
- *
- * 必须基于 `themes.DEFAULT.extends`：传入裸对象时 VTable 不会继承 DEFAULT，
- * 缺省 `borderColor` 会回落到内部 `DEFAULTBORDERCOLOR = '#000'`，出现刺眼黑线。
- */
-export const sheetVTableTheme = themes.DEFAULT.extends({
-  underlayBackgroundColor: BODY_BG,
-  defaultStyle: {
-    bgColor: CHROME_BG,
-    borderColor: GRID_BORDER,
-    padding: [...SHEET_CELL_PADDING],
-    textOverflow: 'clip'
-  },
-  headerStyle: { bgColor: CHROME_BG, borderColor: GRID_BORDER, textOverflow: 'clip' },
-  cornerHeaderStyle: { bgColor: CHROME_BG, borderColor: GRID_BORDER, textOverflow: 'clip' },
-  rowHeaderStyle: { bgColor: CHROME_BG, borderColor: GRID_BORDER, textOverflow: 'clip' },
-  bodyStyle: { bgColor: BODY_BG, borderColor: GRID_BORDER, textOverflow: 'clip' },
-  frameStyle: {
-    borderColor: GRID_BORDER,
-    borderLineWidth: 1,
-    shadowBlur: 0,
-    shadowColor: 'transparent'
-  },
-  selectionStyle: {
-    cellBgColor: SELECTION_BG,
-    cellBorderColor: SELECTION_BORDER,
-    cellBorderLineWidth: 2
-  }
-})
-
-/** 行号列默认样式（与主题 chrome 对齐） */
-export const sheetRowSeriesNumberStyle = {
-  bgColor: CHROME_BG,
-  borderColor: GRID_BORDER,
-  padding: [...SHEET_CELL_PADDING],
-  textOverflow: 'clip' as const
-}
-
-/** 默认行高（比 VTable 默认 40 更接近表格密度；与 SHEET_CELL_PADDING 搭配） */
-export const SHEET_DEFAULT_ROW_HEIGHT = 28