@veltra/sheet 2.0.0

package/src/core/workbook.ts

@@ -0,0 +1,99 @@
+import { TypedEventEmitter } from './events'
+import { DependencyGraph } from './formula/dependency-graph'
+import { Sheet } from './sheet'
+
+/**
+ * Workbook：多 Sheet 管理。
+ * 所有 sheet 共享一个公式依赖图（跨表引用与增量重算的中枢）。
+ */
+
+export type WorkbookEvents = {
+  /** 激活 sheet 切换 */
+  'active-sheet-change': { sheet: Sheet; index: number }
+  /** sheet 增删 */
+  'sheets-change': { sheets: Sheet[] }
+}
+
+export class Workbook {
+  private sheets: Sheet[] = []
+  private activeIndex = 0
+  private emitter = new TypedEventEmitter<WorkbookEvents>()
+  /** 工作簿级公式依赖图（全部 sheet 共享） */
+  readonly formulaGraph = new DependencyGraph()
+
+  constructor() {
+    this.addSheet()
+  }
+
+  get sheetCount(): number {
+    return this.sheets.length
+  }
+
+  get activeSheet(): Sheet {
+    return this.sheets[this.activeIndex]!
+  }
+
+  get activeSheetIndex(): number {
+    return this.activeIndex
+  }
+
+  getSheets(): Sheet[] {
+    return [...this.sheets]
+  }
+
+  getSheet(name: string): Sheet | undefined {
+    return this.sheets.find((sheet) => sheet.name === name)
+  }
+
+  /** 新增 sheet，名称缺省为 Sheet{n}（保证唯一） */
+  addSheet(name?: string): Sheet {
+    const sheet = new Sheet(name ?? this.nextDefaultName(), this.formulaGraph)
+    this.sheets.push(sheet)
+    this.emitter.emit('sheets-change', { sheets: this.getSheets() })
+    return sheet
+  }
+
+  /** 删除 sheet；至少保留一个。删除激活项时激活相邻 sheet */
+  removeSheet(name: string): boolean {
+    if (this.sheets.length <= 1) return false
+    const index = this.sheets.findIndex((sheet) => sheet.name === name)
+    if (index < 0) return false
+    const [removed] = this.sheets.splice(index, 1)
+    this.formulaGraph.unregisterSheet(removed!)
+    if (this.activeIndex >= this.sheets.length) {
+      this.activeIndex = this.sheets.length - 1
+    }
+    this.emitter.emit('sheets-change', { sheets: this.getSheets() })
+    this.emitter.emit('active-sheet-change', { sheet: this.activeSheet, index: this.activeIndex })
+    return true
+  }
+
+  /** 激活指定 sheet */
+  activateSheet(name: string): boolean {
+    const index = this.sheets.findIndex((sheet) => sheet.name === name)
+    if (index < 0 || index === this.activeIndex) return false
+    this.activeIndex = index
+    this.emitter.emit('active-sheet-change', { sheet: this.activeSheet, index })
+    return true
+  }
+
+  on<K extends keyof WorkbookEvents>(
+    type: K,
+    handler: (payload: WorkbookEvents[K]) => void
+  ): () => void {
+    return this.emitter.on(type, handler)
+  }
+
+  off<K extends keyof WorkbookEvents>(
+    type: K,
+    handler: (payload: WorkbookEvents[K]) => void
+  ): void {
+    this.emitter.off(type, handler)
+  }
+
+  private nextDefaultName(): string {
+    let n = this.sheets.length + 1
+    while (this.getSheet(`Sheet${n}`)) n++
+    return `Sheet${n}`
+  }
+}

package/src/env.d.ts

@@ -0,0 +1,7 @@
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<object, object, any>
+  export default component
+}
+
+declare module '*.scss' {}

package/src/grid/__test__/canvas-mock.ts

@@ -0,0 +1,49 @@
+/**
+ * happy-dom 不实现 canvas 2d 上下文（getContext 返回 null），
+ * 这里用 Proxy 提供最小可用的 mock，让 @visactor/vrender 能在无头环境
+ * 完成挂载与绘制调用。仅用于测试（vp test setupFiles）。
+ */
+
+type Context2dMock = Record<string | symbol, unknown>
+
+function createContext2dMock(canvas: HTMLCanvasElement): Context2dMock {
+  const store: Context2dMock = { canvas }
+
+  return new Proxy(store, {
+    get(target, prop) {
+      if (prop in target) return target[prop]
+      if (prop === 'measureText') return (text: unknown) => ({ width: String(text).length * 8 })
+      if (prop === 'getImageData')
+        return () => ({ data: new Uint8ClampedArray(0), width: 0, height: 0 })
+      if (
+        prop === 'createLinearGradient' ||
+        prop === 'createRadialGradient' ||
+        prop === 'createPattern'
+      ) {
+        return () => ({ addColorStop: () => {} })
+      }
+      if (prop === 'getLineDash') return () => []
+      // 其余一律视为无操作绘制方法
+      return () => {}
+    },
+    set(target, prop, value) {
+      target[prop] = value
+      return true
+    }
+  })
+}
+
+/** 补丁 HTMLCanvasElement，使 getContext('2d') 返回可用 mock */
+export function setupCanvasMock(): void {
+  const getContext = function (this: HTMLCanvasElement, contextId: string): unknown {
+    if (contextId !== '2d') return null
+    return createContext2dMock(this)
+  }
+
+  HTMLCanvasElement.prototype.getContext =
+    getContext as unknown as typeof HTMLCanvasElement.prototype.getContext
+
+  if (typeof HTMLCanvasElement.prototype.toDataURL !== 'function') {
+    HTMLCanvasElement.prototype.toDataURL = () => 'data:,'
+  }
+}

package/src/grid/__test__/setup.ts

@@ -0,0 +1,3 @@
+import { setupCanvasMock } from './canvas-mock'
+
+setupCanvasMock()

package/src/grid/__test__/sheet-grid-formula.test.ts

@@ -0,0 +1,140 @@
+import type { ListTable } from '@visactor/vtable'
+import { describe, expect, it } from 'vitest'
+
+import { Sheet } from '../../core/sheet'
+import { SheetGrid } from '../sheet-grid'
+
+function createContainer(): HTMLElement {
+  const el = document.createElement('div')
+  el.style.width = '800px'
+  el.style.height = '600px'
+  document.body.appendChild(el)
+  return el
+}
+
+function createGrid() {
+  const sheet = new Sheet()
+  const container = createContainer()
+  const grid = new SheetGrid({ container, sheet, rows: 20, cols: 6 })
+  return { sheet, grid, table: grid.getTable(), container }
+}
+
+/** 当前编辑器 input（容器里另有 VTable 内部 input，不能靠 querySelector 取） */
+function editorInput(table: ListTable): HTMLInputElement | undefined {
+  const manager = (
+    table as unknown as {
+      editorManager?: { editingEditor?: { getInputElement?: () => HTMLInputElement } }
+    }
+  ).editorManager
+  return manager?.editingEditor?.getInputElement?.()
+}
+
+describe('SheetGrid 公式集成（happy-dom）', () => {
+  it('公式格显示计算值（模型写入公式 → 表格显示缓存值）', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      sheet.setCellValue({ row: 0, col: 0 }, 21)
+      sheet.setCellFormula({ row: 0, col: 1 }, '=A1*2')
+      // 模型 (0,1) → 表格 (2,1)
+      expect(table.getCellValue(2, 1)).toBe(42)
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('编辑提交 = 开头文本 → 模型存公式，表格回推计算值', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      sheet.setCellValue({ row: 0, col: 0 }, 5)
+      // 模拟编辑提交（Playwright 无法触发双击编辑，changeCellValue 走同一提交路径）
+      table.changeCellValue(2, 1, '=A1*2', false, true)
+      expect(sheet.getCellData({ row: 0, col: 1 })).toMatchObject({ f: 'A1*2', v: 10, t: 'n' })
+      // VTable 先把输入文本写进 record；回推后必须是计算值而非公式原文
+      expect(table.getCellValue(2, 1)).toBe(10)
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('编辑提交引发的派生变更同步到表格（源格 + 全部依赖格）', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      sheet.setCellValue({ row: 0, col: 0 }, 1)
+      sheet.setCellFormula({ row: 0, col: 1 }, '=A1*2')
+      sheet.setCellFormula({ row: 0, col: 2 }, '=B1+1')
+      expect(table.getCellValue(2, 1)).toBe(2)
+      expect(table.getCellValue(3, 1)).toBe(3)
+
+      // 编辑 A1 → B1/C1 派生重算，两格都要同步到表格
+      // （编辑提交回写的是输入文本，A1 落为字符串 '10'；公式按数字文本强转）
+      table.changeCellValue(1, 1, '10', false, true)
+      expect(sheet.getCellData({ row: 0, col: 0 })).toMatchObject({ v: '10' })
+      expect(table.getCellValue(1, 1)).toBe('10')
+      expect(table.getCellValue(2, 1)).toBe(20)
+      expect(table.getCellValue(3, 1)).toBe(21)
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('进入编辑时公式格显示原文，提交新公式后模型与显示更新', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      sheet.setCellValue({ row: 0, col: 0 }, 21)
+      sheet.setCellFormula({ row: 0, col: 1 }, '=A1*2')
+
+      // 程序化进入编辑（等价双击）：编辑器文本 = 公式原文
+      table.startEditCell(2, 1)
+      const input = editorInput(table)
+      expect(input).toBeDefined()
+      expect(input!.value).toBe('=A1*2')
+
+      // 输入新公式并提交
+      input!.value = '=A1*3'
+      table.completeEditCell()
+      expect(sheet.getCellData({ row: 0, col: 1 })).toMatchObject({ f: 'A1*3', v: 63 })
+      expect(table.getCellValue(2, 1)).toBe(63)
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('普通格进入编辑显示当前值', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      sheet.setCellValue({ row: 0, col: 0 }, 'plain')
+      table.startEditCell(1, 1)
+      expect(editorInput(table)!.value).toBe('plain')
+      table.completeEditCell()
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('公式错误值直接显示（#DIV/0!）', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      sheet.setCellFormula({ row: 0, col: 0 }, '=1/0')
+      expect(table.getCellValue(1, 1)).toBe('#DIV/0!')
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('undo 公式编辑后表格恢复显示', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      sheet.setCellValue({ row: 0, col: 0 }, 21)
+      sheet.setCellFormula({ row: 0, col: 1 }, '=A1*2')
+      expect(table.getCellValue(2, 1)).toBe(42)
+
+      sheet.undo()
+      expect(table.getCellValue(2, 1)).toBeUndefined()
+
+      sheet.redo()
+      expect(table.getCellValue(2, 1)).toBe(42)
+    } finally {
+      grid.release()
+    }
+  })
+})

package/src/grid/__test__/sheet-grid.test.ts

@@ -0,0 +1,177 @@
+import { ListTable } from '@visactor/vtable'
+import { describe, expect, it } from 'vitest'
+
+import { Sheet } from '../../core/sheet'
+import { SheetGrid } from '../sheet-grid'
+
+function createContainer(): HTMLElement {
+  const el = document.createElement('div')
+  el.style.width = '800px'
+  el.style.height = '600px'
+  document.body.appendChild(el)
+  return el
+}
+
+function createGrid() {
+  const sheet = new Sheet()
+  const grid = new SheetGrid({ container: createContainer(), sheet, rows: 20, cols: 6 })
+  return { sheet, grid, table: grid.getTable() }
+}
+
+describe('SheetGrid（happy-dom smoke）', () => {
+  it('能挂载：列头 A..F + 行号列，坐标带偏移', () => {
+    const { grid, table } = createGrid()
+    try {
+      // (0,*) 为行号列，(*,0) 为列头；模型 (0,0) → 表格 (1,1)
+      expect(table.isSeriesNumber(0, 1)).toBe(true)
+      expect(table.isHeader(1, 0)).toBe(true)
+      expect(table.getCellValue(1, 0)).toBe('A')
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('模型 → 表格：setCellValue 后表格可见', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      sheet.setCellValue({ row: 0, col: 0 }, 'hello')
+      expect(table.getCellValue(1, 1)).toBe('hello')
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('表格 → 模型：change_cell_value 回写 store', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      table.changeCellValue(2, 3, 'world', false, true)
+      expect(sheet.getCellData({ row: 2, col: 1 })).toEqual({ v: 'world', t: 's' })
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('合并映射：customMergeCell 反映 MergeManager 的包围盒', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      sheet.mergeCells({ start: { row: 1, col: 1 }, end: { row: 2, col: 2 } })
+      // 模型 B2:C3 → 表格坐标 (2..3, 2..3)
+      const merge = table.getCustomMerge(3, 3)
+      expect(merge?.range).toMatchObject({ start: { col: 2, row: 2 }, end: { col: 3, row: 3 } })
+      expect(table.getCustomMerge(1, 1)).toBeUndefined()
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('合并区域是单一可操作单位：被覆盖格的 getCellRange 扩展为整个合并', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      sheet.setCellValue({ row: 1, col: 1 }, 'anchor-value')
+      sheet.mergeCells({ start: { row: 1, col: 1 }, end: { row: 2, col: 2 } })
+
+      // 点击被覆盖格（表格坐标 3,3）→ 选区/编辑范围 = 整个合并区域
+      const range = table.getCellRange(3, 3)
+      expect(range).toMatchObject({
+        start: { col: 2, row: 2 },
+        end: { col: 3, row: 3 },
+        isCustom: true
+      })
+
+      // 合并格文本 = 锚点显示值（否则渲染为空）
+      expect(table.getCustomMerge(3, 3)?.text).toBe('anchor-value')
+      expect(table.getCustomMerge(2, 2)?.text).toBe('anchor-value')
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('编辑提交后合并格文本立即刷新（text 读 records，与 VTable 更新次序一致）', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      sheet.setCellValue({ row: 1, col: 1 }, 'old')
+      sheet.mergeCells({ start: { row: 1, col: 1 }, end: { row: 2, col: 2 } })
+
+      // 模拟编辑提交：doExit 的 isCustom 分支 → changeCellValue(锚点, 新值)
+      const range = table.getCellRange(3, 3)
+      table.changeCellValue(range.start.col, range.start.row, 'new')
+
+      // 模型已回写；且重绘发生在 change_cell_value 之前，text 必须已是新值
+      expect(sheet.getCellData({ row: 1, col: 1 })).toMatchObject({ v: 'new' })
+      expect(table.getCustomMerge(3, 3)?.text).toBe('new')
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('编辑回写走命令系统：change_cell_value 后可 undo/redo', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      table.changeCellValue(1, 1, 'edited', false, true)
+      expect(sheet.getCellData({ row: 0, col: 0 })).toEqual({ v: 'edited', t: 's' })
+
+      expect(sheet.undo()).toBe(true)
+      expect(sheet.getCellData({ row: 0, col: 0 })).toBeUndefined()
+
+      expect(sheet.redo()).toBe(true)
+      expect(sheet.getCellData({ row: 0, col: 0 })).toEqual({ v: 'edited', t: 's' })
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('拖选结束 → 模型选区同步为区域（合并工具的前提）', () => {
+    const { sheet, grid, table } = createGrid()
+    try {
+      // 模拟 VTable 拖选结果（表格坐标含偏移：行号列 1 + 列头行 1）
+      table.getSelectedCellRanges = () => [{ start: { col: 1, row: 1 }, end: { col: 3, row: 2 } }]
+      table.fireListeners(ListTable.EVENT_TYPE.DRAG_SELECT_END, {})
+      expect(sheet.getSelection().ranges[0]).toEqual({
+        start: { row: 0, col: 0 },
+        end: { row: 1, col: 2 }
+      })
+      expect(sheet.getSelection().activeCell).toEqual({ row: 0, col: 0 })
+    } finally {
+      grid.release()
+    }
+  })
+
+  it('键盘绑定：Ctrl+Z undo、Ctrl+Shift+Z / Ctrl+Y redo；编辑器 input 不拦截', () => {
+    const container = createContainer()
+    const sheet = new Sheet()
+    const grid = new SheetGrid({ container, sheet, rows: 20, cols: 6 })
+    try {
+      sheet.setCellValue({ row: 0, col: 0 }, 'x')
+
+      // Ctrl+Z → undo
+      container.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'z', ctrlKey: true, bubbles: true })
+      )
+      expect(sheet.getCellData({ row: 0, col: 0 })).toBeUndefined()
+
+      // Ctrl+Shift+Z → redo
+      container.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'z', ctrlKey: true, shiftKey: true, bubbles: true })
+      )
+      expect(sheet.getCellData({ row: 0, col: 0 })).toMatchObject({ v: 'x' })
+
+      // Ctrl+Z → undo；Ctrl+Y → redo
+      container.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'z', ctrlKey: true, bubbles: true })
+      )
+      container.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'y', ctrlKey: true, bubbles: true })
+      )
+      expect(sheet.getCellData({ row: 0, col: 0 })).toMatchObject({ v: 'x' })
+
+      // 事件来自编辑器 input（编辑中）→ 不拦截
+      const input = document.createElement('input')
+      container.appendChild(input)
+      sheet.setCellValue({ row: 0, col: 1 }, 'y')
+      input.dispatchEvent(new KeyboardEvent('keydown', { key: 'z', ctrlKey: true, bubbles: true }))
+      expect(sheet.getCellData({ row: 0, col: 1 })).toMatchObject({ v: 'y' })
+    } finally {
+      grid.release()
+    }
+  })
+})