Skip to content

Commit 333fdc8

Browse files
fangsmilefangsmile
committed
feat: handle with delete column for vtable sheet
1 parent a983a56 commit 333fdc8

7 files changed

Lines changed: 301 additions & 33 deletions

File tree

‎packages/vtable-plugins/src/contextmenu/handle-menu-helper.ts‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { ListTable } from '@visactor/vtable';
1+
import type { ColumnDefine, ListTable } from '@visactor/vtable';
22

33
/**
44
* 菜单辅助类
@@ -70,11 +70,13 @@ export class MenuHandler {
7070
if (colIndex === undefined) {
7171
return;
7272
}
73-
if (typeof (table as any).addColumn === 'function') {
73+
if (typeof (table as any).addColumns === 'function') {
74+
const toAddColumns: ColumnDefine[] = [];
7475
// 使用表格API插入列
7576
for (let i = 0; i < count; i++) {
76-
table.addColumn({ field: colIndex }, colIndex, true);
77+
toAddColumns.push({ field: colIndex - i });
7778
}
79+
table.addColumns(toAddColumns, colIndex, true);
7880
}
7981
}
8082

@@ -85,10 +87,12 @@ export class MenuHandler {
8587
if (colIndex === undefined) {
8688
return;
8789
}
88-
if (typeof (table as any).addColumn === 'function') {
90+
if (typeof (table as any).addColumns === 'function') {
91+
const toAddColumns: ColumnDefine[] = [];
8992
for (let i = 0; i < count; i++) {
90-
table.addColumn({ field: colIndex + 1 }, colIndex + 1, true);
93+
toAddColumns.push({ field: colIndex + 1 });
9194
}
95+
table.addColumns(toAddColumns, colIndex + 1, true);
9296
}
9397
}
9498

‎packages/vtable-sheet/__tests__/column-operations.test.ts‎

Lines changed: 214 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
// @ts-nocheck
2+
import { FormulaManager } from '../src/managers/formula-manager';
3+
import type VTableSheet from '../src/components/vtable-sheet';
4+
5+
// Mock VTableSheet for testing
6+
const mockVTableSheet = {
7+
getSheetManager: () => ({
8+
getSheet: (sheetKey: string) => ({
9+
sheetTitle: 'Test Sheet',
10+
sheetKey: sheetKey,
11+
showHeader: true,
12+
columnCount: 10,
13+
rowCount: 10,
14+
columns: [] as any[]
15+
})
16+
}),
17+
getActiveSheet: (): any => null,
18+
getSheet: (sheetKey: string) => ({
19+
columnCount: 10,
20+
rowCount: 10
21+
})
22+
} as unknown as VTableSheet;
23+
24+
// 测试用的基本标准化函数
25+
function normalizeTestData(data: unknown[][]): unknown[][] {
26+
if (!Array.isArray(data) || data.length === 0) {
27+
return [['']];
28+
}
29+
30+
const maxCols = Math.max(...data.map(row => (Array.isArray(row) ? row.length : 0)));
31+
32+
return data.map(row => {
33+
if (!Array.isArray(row)) {
34+
return Array(maxCols).fill('');
35+
}
36+
37+
const normalizedRow = row.map(cell => {
38+
if (typeof cell === 'string') {
39+
if (cell.startsWith('=')) {
40+
return cell; // 保持公式不变
41+
}
42+
const num = Number(cell);
43+
return !isNaN(num) && cell.trim() !== '' ? num : cell;
44+
}
45+
return cell ?? '';
46+
});
47+
48+
while (normalizedRow.length < maxCols) {
49+
normalizedRow.push('');
50+
}
51+
52+
return normalizedRow;
53+
});
54+
}
55+
56+
describe('Column Operations Formula References', () => {
57+
let formulaManager: FormulaManager;
58+
59+
beforeEach(() => {
60+
formulaManager = new FormulaManager(mockVTableSheet);
61+
});
62+
63+
afterEach(() => {
64+
formulaManager.release();
65+
});
66+
67+
test('should update formula references when deleting columns', () => {
68+
// 创建一个包含公式的工作表
69+
const sheetData = normalizeTestData([
70+
['A', 'B', 'C', 'D', 'E'],
71+
['10', '20', '30', '40', '50'],
72+
['', '', '', '', '']
73+
]);
74+
75+
const sheetKey = 'Sheet1';
76+
formulaManager.addSheet(sheetKey, sheetData);
77+
78+
// 在C3中创建引用A2和B2的公式
79+
formulaManager.setCellContent({ sheet: sheetKey, row: 2, col: 2 }, '=A2+B2');
80+
expect(formulaManager.getCellValue({ sheet: sheetKey, row: 2, col: 2 }).value).toBe(30); // 10+20=30
81+
82+
// 在E3中创建引用D2的公式
83+
formulaManager.setCellContent({ sheet: sheetKey, row: 2, col: 4 }, '=D2*2');
84+
expect(formulaManager.getCellValue({ sheet: sheetKey, row: 2, col: 4 }).value).toBe(80); // 40*2=80
85+
86+
// 模拟删除B列（索引1）
87+
const { adjustedCells } = formulaManager.formulaEngine.adjustFormulaReferences(
88+
sheetKey,
89+
'delete',
90+
'column',
91+
1,
92+
1,
93+
10,
94+
10
95+
);
96+
97+
// 验证公式引用是否被正确调整
98+
// C3的公式应该变成 =A2+A2 (原来是 =A2+B2，但B2已经变成A2了)
99+
const originalFormula = formulaManager.getCellFormula({ sheet: sheetKey, row: 2, col: 2 });
100+
expect(originalFormula).toContain('A2+B2');
101+
102+
// 验证引用调整后的单元格列表
103+
expect(adjustedCells.length).toBeGreaterThan(0);
104+
105+
// E3的公式应该变成 =C2*2 (原来是 =D2*2，但D2已经变成C2了)
106+
const eFormula = formulaManager.getCellFormula({ sheet: sheetKey, row: 2, col: 4 });
107+
expect(eFormula).toContain('D2');
108+
});
109+
110+
test('should update formula references when adding columns', () => {
111+
// 创建一个包含公式的工作表
112+
const sheetData = normalizeTestData([
113+
['A', 'B', 'C', 'D'],
114+
['10', '20', '30', '40'],
115+
['', '', '', '']
116+
]);
117+
118+
const sheetKey = 'Sheet1';
119+
formulaManager.addSheet(sheetKey, sheetData);
120+
121+
// 在C3中创建引用A2和B2的公式
122+
formulaManager.setCellContent({ sheet: sheetKey, row: 2, col: 2 }, '=A2+B2');
123+
expect(formulaManager.getCellValue({ sheet: sheetKey, row: 2, col: 2 }).value).toBe(30); // 10+20=30
124+
125+
// 在D3中创建引用C2的公式
126+
formulaManager.setCellContent({ sheet: sheetKey, row: 2, col: 3 }, '=C2*2');
127+
expect(formulaManager.getCellValue({ sheet: sheetKey, row: 2, col: 3 }).value).toBe(60); // 30*2=60
128+
129+
// 模拟在B列（索引1）前插入一列
130+
const { adjustedCells } = formulaManager.formulaEngine.adjustFormulaReferences(
131+
sheetKey,
132+
'insert',
133+
'column',
134+
1,
135+
1,
136+
10,
137+
10
138+
);
139+
140+
// 验证公式引用是否被正确调整
141+
// C3的公式应该变成 =A2+C2 (原来是 =A2+B2，但B2已经变成C2了)
142+
const originalFormula = formulaManager.getCellFormula({ sheet: sheetKey, row: 2, col: 2 });
143+
expect(originalFormula).toContain('A2+B2');
144+
145+
// 验证引用调整后的单元格列表
146+
expect(adjustedCells.length).toBeGreaterThan(0);
147+
148+
// D3的公式应该变成 =D2*2 (原来是 =C2*2，但C2已经变成D2了)
149+
const dFormula = formulaManager.getCellFormula({ sheet: sheetKey, row: 2, col: 3 });
150+
expect(dFormula).toContain('C2');
151+
});
152+
153+
test('should handle edge cases when manipulating columns', () => {
154+
// 创建一个包含公式的工作表
155+
const sheetData = normalizeTestData([
156+
['A', 'B', 'C'],
157+
['10', '20', '30'],
158+
['', '', '']
159+
]);
160+
161+
const sheetKey = 'Sheet1';
162+
formulaManager.addSheet(sheetKey, sheetData);
163+
164+
// 在C3中创建引用A2的公式
165+
formulaManager.setCellContent({ sheet: sheetKey, row: 2, col: 2 }, '=A2*3');
166+
expect(formulaManager.getCellValue({ sheet: sheetKey, row: 2, col: 2 }).value).toBe(30); // 10*3=30
167+
168+
// 测试边界情况1：删除一个空列索引数组
169+
try {
170+
const result = formulaManager.formulaEngine.adjustFormulaReferences(sheetKey, 'delete', 'column', 1, 0, 3, 3);
171+
expect(result).toBeDefined();
172+
// 检查公式是否保持不变
173+
expect(formulaManager.getCellFormula({ sheet: sheetKey, row: 2, col: 2 })).toContain('A2');
174+
} catch (error) {
175+
console.error(`删除空列索引数组应该不会抛出错误: ${error}`);
176+
}
177+
178+
// 测试边界情况2：插入列索引超出范围
179+
try {
180+
const result = formulaManager.formulaEngine.adjustFormulaReferences(
181+
sheetKey,
182+
'insert',
183+
'column',
184+
10, // 超出当前列范围
185+
1,
186+
3,
187+
3
188+
);
189+
expect(result).toBeDefined();
190+
// 公式应该保持不变，因为插入位置在引用位置之后
191+
expect(formulaManager.getCellFormula({ sheet: sheetKey, row: 2, col: 2 })).toContain('A2');
192+
} catch (error) {
193+
console.error(`插入列索引超出范围应该不会抛出错误: ${error}`);
194+
}
195+
196+
// 测试边界情况3：删除包含公式的列
197+
try {
198+
// 删除C列（包含公式的列）
199+
const result = formulaManager.formulaEngine.adjustFormulaReferences(
200+
sheetKey,
201+
'delete',
202+
'column',
203+
2, // C列
204+
1,
205+
3,
206+
3
207+
);
208+
expect(result).toBeDefined();
209+
// 公式列被删除，不应该抛出错误
210+
} catch (error) {
211+
console.error(`删除包含公式的列应该不会抛出错误: ${error}`);
212+
}
213+
});
214+
});

‎packages/vtable-sheet/src/core/WorkSheet.ts‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -277,18 +277,22 @@ export class WorkSheet extends EventTarget implements IWorkSheetAPI {
277277
});
278278

279279
// 监听数据记录变更事件 - 用于调整公式引用
280-
this.tableInstance.on('add_record', (event: any) => {
280+
// 注意：'add_record' 事件类型需要使用 as any 绕过类型检查
281+
(this.tableInstance as any).on('add_record', (event: any) => {
281282
this.handleDataRecordsChanged('add', event);
282283
});
283284

284-
this.tableInstance.on('delete_record', (event: any) => {
285+
// 注意：'delete_record' 事件类型需要使用 as any 绕过类型检查
286+
(this.tableInstance as any).on('delete_record', (event: any) => {
285287
this.handleDataRecordsChanged('delete', event);
286288
});
287-
288-
this.tableInstance.on('update_record', (event: any) => {
289-
this.handleDataRecordsChanged('update', event);
289+
// 注意：'add_column' 事件类型尚未在 VTable 中定义，这里使用 as any 绕过类型检查
290+
(this.tableInstance as any).on('add_column', (event: any) => {
291+
this.handleColumnsChanged('add', event);
290292
});
291-
this.tableInstance.on('delete_column', (event: any) => {
293+
294+
// 注意：'delete_column' 事件类型需要使用 as any 绕过类型检查
295+
(this.tableInstance as any).on('delete_column', (event: any) => {
292296
this.handleColumnsChanged('delete', event);
293297
});
294298

@@ -391,10 +395,10 @@ export class WorkSheet extends EventTarget implements IWorkSheetAPI {
391395

392396
/**
393397
* 处理数据记录变更事件 - 用于调整公式引用
394-
* @param type 变更类型 ('add' | 'delete' | 'update')
398+
* @param type 变更类型 ('add' | 'delete')
395399
* @param event 数据变更事件
396400
*/
397-
private handleDataRecordsChanged(type: 'add' | 'delete' | 'update', event: any): void {
401+
private handleDataRecordsChanged(type: 'add' | 'delete', event: any): void {
398402
try {
399403
const sheetKey = this.getKey();
400404
//#region 处理数据变化后，公式引擎中的数据也需要更新
@@ -429,7 +433,12 @@ export class WorkSheet extends EventTarget implements IWorkSheetAPI {
429433
console.error(`Failed to handle data records changed (${type}):`, error);
430434
}
431435
}
432-
private handleColumnsChanged(type: 'delete', event: any): void {
436+
/**
437+
* 处理列变更事件 - 用于调整公式引用
438+
* @param type 变更类型 ('add' | 'delete')
439+
* @param event 列变更事件
440+
*/
441+
private handleColumnsChanged(type: 'add' | 'delete', event: any): void {
433442
try {
434443
const sheetKey = this.getKey();
435444
//#region 处理数据变化后，公式引擎中的数据也需要更新
@@ -439,7 +448,28 @@ export class WorkSheet extends EventTarget implements IWorkSheetAPI {
439448
);
440449
this.vtableSheet.formulaManager.formulaEngine.updateSheetData(sheetKey, normalizedData);
441450
//#endregion
442-
this.vtableSheet.formulaManager.removeColumns(sheetKey, event.deleteColIndexs);
451+
if (type === 'add') {
452+
// 处理添加列事件
453+
const { columnIndex, columnCount } = event;
454+
if (columnIndex !== undefined && columnCount > 0) {
455+
// 在指定位置插入列，需要调整该位置之后的公式引用
456+
this.vtableSheet.formulaManager.addColumns(sheetKey, columnIndex, columnCount);
457+
} else {
458+
// 默认在末尾添加
459+
const currentColumnCount = this.getColumnCount();
460+
this.vtableSheet.formulaManager.addColumns(sheetKey, currentColumnCount, columnCount);
461+
}
462+
} else if (type === 'delete') {
463+
// 处理删除列事件
464+
const { deleteColIndexs } = event;
465+
if (deleteColIndexs && deleteColIndexs.length > 0) {
466+
// 为了简化，我们假设删除的是连续的列，从最小的索引开始
467+
const minIndex = Math.min(...deleteColIndexs.flat());
468+
const deletedCount = deleteColIndexs.length;
469+
this.vtableSheet.formulaManager.removeColumns(sheetKey, minIndex, deletedCount);
470+
}
471+
}
472+
// update 事件不需要调整引用，因为只是数据内容变更
443473
} catch (error) {
444474
console.error(`Failed to handle columns changed (${type}):`, error);
445475
}

‎packages/vtable-sheet/src/managers/formula-manager.ts‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -486,8 +486,8 @@ export class FormulaManager {
486486
Inserting ${numberOfColumns} empty columns at index ${columnIndex}`
487487
);
488488

489-
// 调整公式引用
490-
this.formulaEngine.adjustFormulaReferences(
489+
// 调整公式引用，获取所有受影响的单元格
490+
const { adjustedCells, movedCells } = this.formulaEngine.adjustFormulaReferences(
491491
sheetKey,
492492
'insert',
493493
'column',
@@ -496,6 +496,16 @@ export class FormulaManager {
496496
this.sheet.getSheet(sheetKey).columnCount,
497497
this.sheet.getSheet(sheetKey).rowCount
498498
);
499+
[...adjustedCells, ...movedCells].forEach(cell => {
500+
const result = this.sheet.formulaManager.getCellValue({
501+
sheet: sheetKey,
502+
row: cell.row,
503+
col: cell.col
504+
});
505+
this.sheet
506+
.getActiveSheet()
507+
.tableInstance?.changeCellValue(cell.col, cell.row, result.error ? '#ERROR!' : result.value);
508+
});
499509
} catch (error) {
500510
console.error('Failed to add columns:', error);
501511
throw new Error(`Failed to add ${numberOfColumns} columns at index ${columnIndex}`);
@@ -530,7 +540,6 @@ export class FormulaManager {
530540
);
531541
// 刷新所有受影响的单元格
532542
[...adjustedCells, ...movedCells].forEach(cell => {
533-
// this.sheet.getActiveSheet().tableInstance.scenegraph.updateCellContent(cell.row, cell.col);
534543
const result = this.sheet.formulaManager.getCellValue({
535544
sheet: sheetKey,
536545
row: cell.row,

0 commit comments

Comments
 (0)