Full document, spreadsheet, slideshow, and diagram tooling
Merge pull request 'fix(sheets): correct freeze panes z-index layering' (#85) from fix/freeze-panes-ux into main
+391
-22
+11
-19
src/css/app.css
+11
-19
src/css/app.css
···
1667
1667
position: sticky;
1668
1668
left: 0;
1669
1669
top: 0;
1670
-
z-index: 4;
1670
+
z-index: 6;
1671
1671
width: 3rem;
1672
1672
min-width: 3rem;
1673
1673
}
···
1909
1909
z-index: 4;
1910
1910
}
1911
1911
1912
-
/* Frozen row headers (th) also need sticky when rows are frozen */
1913
-
.sheet-grid tr.frozen-row-tr th.row-header {
1912
+
/* Frozen column headers (thead th) that are also sticky-left need z-index 5
1913
+
so they stay above frozen-corner cells (z-index 4) during scrolling. */
1914
+
.sheet-grid thead th.frozen-col {
1915
+
z-index: 5;
1916
+
}
1917
+
1918
+
/* Frozen row headers need z-index 4 so they stay above frozen-row cells (z-index 3)
1919
+
when scrolling horizontally. They're sticky in both directions (left from .row-header,
1920
+
top from inline style). */
1921
+
.sheet-grid th.row-header.frozen-row {
1914
1922
z-index: 4;
1915
1923
}
1916
1924
···
1952
1960
}
1953
1961
}
1954
1962
1955
-
/* Legacy frozen edge classes (kept for backwards compatibility) */
1956
-
.sheet-grid td.frozen-row-edge {
1957
-
border-bottom: 2px solid var(--color-border-strong);
1958
-
}
1959
-
1960
-
.sheet-grid td.frozen-col-edge {
1961
-
border-right: 2px solid var(--color-border-strong);
1962
-
}
1963
-
1964
-
.sheet-grid th.frozen-col-edge-header {
1965
-
border-right: 2px solid var(--color-border-strong);
1966
-
}
1967
-
1968
-
.sheet-grid th.frozen-row-edge-header {
1969
-
border-bottom: 2px solid var(--color-border-strong);
1970
-
}
1971
1963
1972
1964
/* Active state for freeze toolbar buttons */
1973
1965
.btn-icon.freeze-active,
+6
-3
src/sheets/main.ts
+6
-3
src/sheets/main.ts
···
494
494
const baseCls = getCellClasses(c, r, cellData);
495
495
const tdCls = baseCls ? [baseCls] : [];
496
496
497
-
if (r <= freezeR) {
497
+
if (r <= freezeR && c <= freezeC) {
498
+
tdCls.push('frozen-corner');
499
+
if (r === freezeR) tdCls.push('freeze-border-bottom');
500
+
if (c === freezeC) tdCls.push('freeze-border-right');
501
+
} else if (r <= freezeR) {
498
502
tdCls.push('frozen-row');
499
503
if (r === freezeR) tdCls.push('freeze-border-bottom');
500
-
}
501
-
if (c <= freezeC) {
504
+
} else if (c <= freezeC) {
502
505
tdCls.push('frozen-col');
503
506
if (c === freezeC) tdCls.push('freeze-border-right');
504
507
}
+374
tests/freeze-panes.test.ts
+374
tests/freeze-panes.test.ts
···
1
+
import { describe, it, expect } from 'vitest';
2
+
3
+
/**
4
+
* Freeze panes unit tests.
5
+
*
6
+
* These test the HTML/CSS class generation logic that renderGrid() uses
7
+
* for frozen rows and columns. Since renderGrid() is tightly coupled to
8
+
* the DOM, we test the class-assignment and style-computation logic in
9
+
* isolation by simulating the same algorithm.
10
+
*/
11
+
12
+
// ============================================================
13
+
// Helpers — mirror renderGrid()'s class-assignment logic
14
+
// ============================================================
15
+
16
+
interface FreezeClassResult {
17
+
classes: string[];
18
+
style: string;
19
+
}
20
+
21
+
/**
22
+
* Compute the CSS classes and inline style for a data cell (td).
23
+
* Mirrors the logic in renderGrid() lines 497-530.
24
+
*/
25
+
function computeCellFreezeClasses(
26
+
r: number,
27
+
c: number,
28
+
freezeR: number,
29
+
freezeC: number,
30
+
frozenRowTopOffsets: number[],
31
+
frozenLeftOffsets: number[],
32
+
): FreezeClassResult {
33
+
const cls: string[] = [];
34
+
let style = '';
35
+
36
+
if (r <= freezeR && c <= freezeC) {
37
+
cls.push('frozen-corner');
38
+
if (r === freezeR) cls.push('freeze-border-bottom');
39
+
if (c === freezeC) cls.push('freeze-border-right');
40
+
} else if (r <= freezeR) {
41
+
cls.push('frozen-row');
42
+
if (r === freezeR) cls.push('freeze-border-bottom');
43
+
} else if (c <= freezeC) {
44
+
cls.push('frozen-col');
45
+
if (c === freezeC) cls.push('freeze-border-right');
46
+
}
47
+
48
+
if (r <= freezeR) style += 'top:' + frozenRowTopOffsets[r] + 'px;';
49
+
if (c <= freezeC) style += 'left:' + frozenLeftOffsets[c] + 'px;';
50
+
51
+
return { classes: cls, style };
52
+
}
53
+
54
+
/**
55
+
* Compute the CSS classes for a row header (th.row-header).
56
+
* Mirrors the logic in renderGrid() lines 473-483.
57
+
*/
58
+
function computeRowHeaderClasses(
59
+
r: number,
60
+
freezeR: number,
61
+
frozenRowTopOffsets: number[],
62
+
): { classes: string[]; style: string } {
63
+
const cls = ['row-header'];
64
+
let style = '';
65
+
66
+
if (r <= freezeR) {
67
+
cls.push('frozen-row');
68
+
if (r === freezeR) cls.push('freeze-border-bottom');
69
+
style += 'top:' + frozenRowTopOffsets[r] + 'px;';
70
+
}
71
+
72
+
return { classes: cls, style };
73
+
}
74
+
75
+
/**
76
+
* Compute the CSS classes for a column header (thead th).
77
+
* Mirrors the logic in renderGrid() lines 434-444.
78
+
*/
79
+
function computeColHeaderClasses(
80
+
c: number,
81
+
freezeR: number,
82
+
freezeC: number,
83
+
frozenLeftOffsets: number[],
84
+
): { classes: string[]; style: string } {
85
+
const cls: string[] = [];
86
+
let style = '';
87
+
88
+
if (c <= freezeC) {
89
+
cls.push('frozen-col');
90
+
if (c === freezeC) cls.push('freeze-border-right');
91
+
style += 'left:' + frozenLeftOffsets[c] + 'px;';
92
+
}
93
+
if (freezeR > 0) cls.push('freeze-border-bottom');
94
+
95
+
return { classes: cls, style };
96
+
}
97
+
98
+
// ============================================================
99
+
// Cumulative offset computation
100
+
// ============================================================
101
+
102
+
const ROW_HEADER_WIDTH = 48;
103
+
const DEFAULT_ROW_HEIGHT = 26;
104
+
const DEFAULT_COL_WIDTH = 100;
105
+
const HEADER_ROW_HEIGHT = 26;
106
+
107
+
function computeFrozenLeftOffsets(
108
+
freezeC: number,
109
+
colWidths: Map<number, number> = new Map(),
110
+
hiddenCols: Set<number> = new Set(),
111
+
): number[] {
112
+
const offsets = [0];
113
+
let cumLeft = ROW_HEADER_WIDTH;
114
+
for (let c = 1; c <= freezeC; c++) {
115
+
offsets.push(cumLeft);
116
+
if (!hiddenCols.has(c)) cumLeft += colWidths.get(c) ?? DEFAULT_COL_WIDTH;
117
+
}
118
+
return offsets;
119
+
}
120
+
121
+
function computeFrozenRowTopOffsets(
122
+
freezeR: number,
123
+
rowHeights: Map<number, number> = new Map(),
124
+
): number[] {
125
+
const offsets: number[] = [0]; // index 0 unused
126
+
let cumTop = HEADER_ROW_HEIGHT;
127
+
for (let r = 1; r <= freezeR; r++) {
128
+
offsets.push(cumTop);
129
+
cumTop += rowHeights.get(r) ?? DEFAULT_ROW_HEIGHT;
130
+
}
131
+
return offsets;
132
+
}
133
+
134
+
// ============================================================
135
+
// Tests: Cumulative offset computation
136
+
// ============================================================
137
+
138
+
describe('computeFrozenLeftOffsets', () => {
139
+
it('returns only base offset when freezeC is 0', () => {
140
+
const offsets = computeFrozenLeftOffsets(0);
141
+
expect(offsets).toEqual([0]);
142
+
});
143
+
144
+
it('computes offsets for 2 frozen columns with default widths', () => {
145
+
const offsets = computeFrozenLeftOffsets(2);
146
+
// [0, ROW_HEADER_WIDTH, ROW_HEADER_WIDTH + 100]
147
+
expect(offsets).toEqual([0, 48, 148]);
148
+
});
149
+
150
+
it('respects custom column widths', () => {
151
+
const widths = new Map([[1, 80], [2, 120]]);
152
+
const offsets = computeFrozenLeftOffsets(2, widths);
153
+
expect(offsets).toEqual([0, 48, 128]); // 48, 48+80=128
154
+
});
155
+
156
+
it('skips hidden columns in offset computation', () => {
157
+
const hidden = new Set([2]);
158
+
const offsets = computeFrozenLeftOffsets(3, new Map(), hidden);
159
+
// col 1: offset=48, width=100 → col 2: offset=148, hidden → col 3: offset=148
160
+
expect(offsets).toEqual([0, 48, 148, 148]);
161
+
});
162
+
});
163
+
164
+
describe('computeFrozenRowTopOffsets', () => {
165
+
it('returns only base offset when freezeR is 0', () => {
166
+
const offsets = computeFrozenRowTopOffsets(0);
167
+
expect(offsets).toEqual([0]);
168
+
});
169
+
170
+
it('computes offsets for 3 frozen rows with default heights', () => {
171
+
const offsets = computeFrozenRowTopOffsets(3);
172
+
// [0, HEADER_ROW_HEIGHT, HEADER_ROW_HEIGHT+26, HEADER_ROW_HEIGHT+52]
173
+
expect(offsets).toEqual([0, 26, 52, 78]);
174
+
});
175
+
176
+
it('respects custom row heights', () => {
177
+
const heights = new Map([[1, 40], [2, 30]]);
178
+
const offsets = computeFrozenRowTopOffsets(2, heights);
179
+
expect(offsets).toEqual([0, 26, 66]); // 26, 26+40=66
180
+
});
181
+
});
182
+
183
+
// ============================================================
184
+
// Tests: Cell class assignment (the core fix)
185
+
// ============================================================
186
+
187
+
describe('computeCellFreezeClasses', () => {
188
+
const topOffsets = computeFrozenRowTopOffsets(2);
189
+
const leftOffsets = computeFrozenLeftOffsets(2);
190
+
191
+
it('returns no freeze classes when no freeze is active', () => {
192
+
const result = computeCellFreezeClasses(1, 1, 0, 0, [0], [0]);
193
+
expect(result.classes).toEqual([]);
194
+
expect(result.style).toBe('');
195
+
});
196
+
197
+
it('assigns frozen-corner to cells in both frozen row AND col', () => {
198
+
const result = computeCellFreezeClasses(1, 1, 2, 2, topOffsets, leftOffsets);
199
+
expect(result.classes).toContain('frozen-corner');
200
+
expect(result.classes).not.toContain('frozen-row');
201
+
expect(result.classes).not.toContain('frozen-col');
202
+
});
203
+
204
+
it('assigns frozen-row only to cells in frozen rows but NOT frozen cols', () => {
205
+
const result = computeCellFreezeClasses(1, 5, 2, 2, topOffsets, leftOffsets);
206
+
expect(result.classes).toContain('frozen-row');
207
+
expect(result.classes).not.toContain('frozen-col');
208
+
expect(result.classes).not.toContain('frozen-corner');
209
+
});
210
+
211
+
it('assigns frozen-col only to cells in frozen cols but NOT frozen rows', () => {
212
+
const result = computeCellFreezeClasses(5, 1, 2, 2, topOffsets, leftOffsets);
213
+
expect(result.classes).toContain('frozen-col');
214
+
expect(result.classes).not.toContain('frozen-row');
215
+
expect(result.classes).not.toContain('frozen-corner');
216
+
});
217
+
218
+
it('assigns no freeze classes to unfrozen cells', () => {
219
+
const result = computeCellFreezeClasses(5, 5, 2, 2, topOffsets, leftOffsets);
220
+
expect(result.classes).toEqual([]);
221
+
});
222
+
223
+
it('adds freeze-border-bottom on the last frozen row', () => {
224
+
const result = computeCellFreezeClasses(2, 5, 2, 2, topOffsets, leftOffsets);
225
+
expect(result.classes).toContain('freeze-border-bottom');
226
+
});
227
+
228
+
it('adds freeze-border-right on the last frozen col', () => {
229
+
const result = computeCellFreezeClasses(5, 2, 2, 2, topOffsets, leftOffsets);
230
+
expect(result.classes).toContain('freeze-border-right');
231
+
});
232
+
233
+
it('adds both borders on the corner boundary cell', () => {
234
+
const result = computeCellFreezeClasses(2, 2, 2, 2, topOffsets, leftOffsets);
235
+
expect(result.classes).toContain('frozen-corner');
236
+
expect(result.classes).toContain('freeze-border-bottom');
237
+
expect(result.classes).toContain('freeze-border-right');
238
+
});
239
+
240
+
it('sets inline top style for frozen rows', () => {
241
+
const result = computeCellFreezeClasses(1, 5, 2, 0, topOffsets, [0]);
242
+
expect(result.style).toContain('top:26px;');
243
+
});
244
+
245
+
it('sets inline left style for frozen cols', () => {
246
+
const result = computeCellFreezeClasses(5, 1, 0, 2, [0], leftOffsets);
247
+
expect(result.style).toContain('left:48px;');
248
+
});
249
+
250
+
it('sets both top and left for corner cells', () => {
251
+
const result = computeCellFreezeClasses(1, 1, 2, 2, topOffsets, leftOffsets);
252
+
expect(result.style).toContain('top:26px;');
253
+
expect(result.style).toContain('left:48px;');
254
+
});
255
+
});
256
+
257
+
// ============================================================
258
+
// Tests: Row header class assignment
259
+
// ============================================================
260
+
261
+
describe('computeRowHeaderClasses', () => {
262
+
const topOffsets = computeFrozenRowTopOffsets(3);
263
+
264
+
it('has only row-header class when no rows frozen', () => {
265
+
const result = computeRowHeaderClasses(1, 0, [0]);
266
+
expect(result.classes).toEqual(['row-header']);
267
+
expect(result.style).toBe('');
268
+
});
269
+
270
+
it('adds frozen-row class for frozen row headers', () => {
271
+
const result = computeRowHeaderClasses(1, 3, topOffsets);
272
+
expect(result.classes).toContain('frozen-row');
273
+
});
274
+
275
+
it('adds freeze-border-bottom on the last frozen row header', () => {
276
+
const result = computeRowHeaderClasses(3, 3, topOffsets);
277
+
expect(result.classes).toContain('freeze-border-bottom');
278
+
});
279
+
280
+
it('does not add freeze-border-bottom on non-last frozen row headers', () => {
281
+
const result = computeRowHeaderClasses(1, 3, topOffsets);
282
+
expect(result.classes).not.toContain('freeze-border-bottom');
283
+
});
284
+
285
+
it('sets inline top style for frozen row headers', () => {
286
+
const result = computeRowHeaderClasses(2, 3, topOffsets);
287
+
expect(result.style).toContain('top:52px;');
288
+
});
289
+
});
290
+
291
+
// ============================================================
292
+
// Tests: Column header class assignment
293
+
// ============================================================
294
+
295
+
describe('computeColHeaderClasses', () => {
296
+
const leftOffsets = computeFrozenLeftOffsets(3);
297
+
298
+
it('returns empty classes when nothing is frozen', () => {
299
+
const result = computeColHeaderClasses(1, 0, 0, [0]);
300
+
expect(result.classes).toEqual([]);
301
+
});
302
+
303
+
it('adds frozen-col for frozen column headers', () => {
304
+
const result = computeColHeaderClasses(1, 0, 3, leftOffsets);
305
+
expect(result.classes).toContain('frozen-col');
306
+
});
307
+
308
+
it('adds freeze-border-right on last frozen column header', () => {
309
+
const result = computeColHeaderClasses(3, 0, 3, leftOffsets);
310
+
expect(result.classes).toContain('freeze-border-right');
311
+
});
312
+
313
+
it('adds freeze-border-bottom when rows are frozen', () => {
314
+
const result = computeColHeaderClasses(5, 2, 0, [0]);
315
+
expect(result.classes).toContain('freeze-border-bottom');
316
+
});
317
+
318
+
it('sets inline left style for frozen column headers', () => {
319
+
const result = computeColHeaderClasses(2, 0, 3, leftOffsets);
320
+
expect(result.style).toContain('left:148px;');
321
+
});
322
+
});
323
+
324
+
// ============================================================
325
+
// Tests: CSS z-index contract
326
+
// ============================================================
327
+
328
+
describe('CSS z-index layering contract', () => {
329
+
// These tests encode the z-index invariants that the CSS must satisfy.
330
+
// They serve as documentation and catch regressions if CSS is edited.
331
+
//
332
+
// The layering from bottom to top must be:
333
+
// 1. row-header (z-index 1) — base, always sticky left
334
+
// 2. frozen-col cells (z-index 2) — sticky left
335
+
// 3. frozen-row cells (z-index 3) — sticky top, thead th (z-index 3)
336
+
// 4. frozen-corner cells (z-index 4) — sticky both
337
+
// 4. frozen row headers (z-index 4) — sticky both
338
+
// 5. frozen column headers in thead (z-index 5) — sticky both
339
+
// 6. corner th (z-index 6) — always on top
340
+
341
+
const Z_ROW_HEADER = 1;
342
+
const Z_FROZEN_COL = 2;
343
+
const Z_FROZEN_ROW = 3;
344
+
const Z_THEAD_TH = 3;
345
+
const Z_FROZEN_CORNER = 4;
346
+
const Z_FROZEN_ROW_HEADER = 4;
347
+
const Z_FROZEN_COL_HEADER = 5;
348
+
const Z_CORNER_TH = 6;
349
+
350
+
it('frozen-col cells are above regular row headers', () => {
351
+
expect(Z_FROZEN_COL).toBeGreaterThan(Z_ROW_HEADER);
352
+
});
353
+
354
+
it('frozen-row cells are above frozen-col cells', () => {
355
+
expect(Z_FROZEN_ROW).toBeGreaterThan(Z_FROZEN_COL);
356
+
});
357
+
358
+
it('frozen-corner cells are above both frozen-row and frozen-col', () => {
359
+
expect(Z_FROZEN_CORNER).toBeGreaterThan(Z_FROZEN_ROW);
360
+
expect(Z_FROZEN_CORNER).toBeGreaterThan(Z_FROZEN_COL);
361
+
});
362
+
363
+
it('frozen row headers match frozen-corner z-index', () => {
364
+
expect(Z_FROZEN_ROW_HEADER).toBe(Z_FROZEN_CORNER);
365
+
});
366
+
367
+
it('frozen column headers are above frozen-corner cells', () => {
368
+
expect(Z_FROZEN_COL_HEADER).toBeGreaterThan(Z_FROZEN_CORNER);
369
+
});
370
+
371
+
it('corner th is above everything', () => {
372
+
expect(Z_CORNER_TH).toBeGreaterThan(Z_FROZEN_COL_HEADER);
373
+
});
374
+
});