Skip to content

Commit 730b454

Browse files
inokawainokawa
committed
Implement gap prop
1 parent 6af14de commit 730b454

22 files changed

Lines changed: 232 additions & 71 deletions

‎src/core/cache.spec.ts‎

Lines changed: 86 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const initCacheWithComputedOffsets = (
3838
return acc;
3939
}, [] as number[]),
4040
_defaultItemSize: defaultSize,
41+
_gap: 0,
4142
};
4243
};
4344

@@ -51,6 +52,7 @@ const initCacheWithEmptyOffsets = (
5152
_computedOffsetIndex: -1,
5253
_offsets: range(sizes.length, () => -1),
5354
_defaultItemSize: defaultSize,
55+
_gap: 0,
5456
};
5557
};
5658

@@ -68,6 +70,7 @@ const initCacheWithOffsets = (
6870
_computedOffsetIndex: offsets.findIndex((o) => o === -1) - 1,
6971
_offsets: [...offsets],
7072
_defaultItemSize: defaultSize,
73+
_gap: 0,
7174
};
7275
};
7376

@@ -306,6 +309,7 @@ describe(computeTotalSize.name, () => {
306309
_computedOffsetIndex: 2,
307310
_offsets: offsets,
308311
_defaultItemSize: 30,
312+
_gap: 0,
309313
};
310314
expect(computeTotalSize(cache)).toBe(sum(range(8, () => 20)) + 22);
311315
expect(cache._offsets).toEqual([
@@ -322,6 +326,7 @@ describe(computeTotalSize.name, () => {
322326
_computedOffsetIndex: 9,
323327
_offsets: offsets,
324328
_defaultItemSize: 30,
329+
_gap: 0,
325330
};
326331
expect(computeTotalSize(cache)).toBe(99 + 20);
327332
expect(cache._offsets).toEqual([0, 11, 22, 33, 44, 55, 66, 77, 88, 99]);
@@ -729,11 +734,12 @@ describe(estimateDefaultItemSize.name, () => {
729734
describe(initCache.name, () => {
730735
it("should create cache", () => {
731736
const itemLength = 10;
732-
const cache = initCache(itemLength, 23);
737+
const cache = initCache(itemLength, 23, 0);
733738
expect(cache).toMatchInlineSnapshot(`
734739
{
735740
"_computedOffsetIndex": -1,
736741
"_defaultItemSize": 23,
742+
"_gap": 0,
737743
"_length": 10,
738744
"_offsets": [
739745
-1,
@@ -768,53 +774,55 @@ describe(initCache.name, () => {
768774

769775
it("should restore cache from snapshot", () => {
770776
const itemLength = 10;
771-
const cache = initCache(itemLength, 23, [
777+
const cache = initCache(itemLength, 23, 0, [
772778
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
773779
123,
774780
]);
775781
expect(cache).toMatchInlineSnapshot(`
776-
{
777-
"_computedOffsetIndex": -1,
778-
"_defaultItemSize": 123,
779-
"_length": 10,
780-
"_offsets": [
781-
-1,
782-
-1,
783-
-1,
784-
-1,
785-
-1,
786-
-1,
787-
-1,
788-
-1,
789-
-1,
790-
-1,
791-
],
792-
"_sizes": [
793-
0,
794-
1,
795-
2,
796-
3,
797-
4,
798-
5,
799-
6,
800-
7,
801-
8,
802-
9,
803-
],
804-
}
805-
`);
782+
{
783+
"_computedOffsetIndex": -1,
784+
"_defaultItemSize": 123,
785+
"_gap": 0,
786+
"_length": 10,
787+
"_offsets": [
788+
-1,
789+
-1,
790+
-1,
791+
-1,
792+
-1,
793+
-1,
794+
-1,
795+
-1,
796+
-1,
797+
-1,
798+
],
799+
"_sizes": [
800+
0,
801+
1,
802+
2,
803+
3,
804+
4,
805+
5,
806+
6,
807+
7,
808+
8,
809+
9,
810+
],
811+
}
812+
`);
806813
expect(cache._length).toBe(itemLength);
807814
expect(cache._sizes.length).toBe(itemLength);
808815
expect(cache._offsets.length).toBe(itemLength);
809816
});
810817

811818
it("should restore cache from snapshot which has shorter length", () => {
812819
const itemLength = 10;
813-
const cache = initCache(itemLength, 23, [[0, 1, 2, 3, 4], 123]);
820+
const cache = initCache(itemLength, 23, 0, [[0, 1, 2, 3, 4], 123]);
814821
expect(cache).toMatchInlineSnapshot(`
815822
{
816823
"_computedOffsetIndex": -1,
817824
"_defaultItemSize": 123,
825+
"_gap": 0,
818826
"_length": 10,
819827
"_offsets": [
820828
-1,
@@ -849,41 +857,42 @@ describe(initCache.name, () => {
849857

850858
it("should restore cache from snapshot which has longer length", () => {
851859
const itemLength = 10;
852-
const cache = initCache(itemLength, 23, [
860+
const cache = initCache(itemLength, 23, 0, [
853861
[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
854862
123,
855863
]);
856864
expect(cache).toMatchInlineSnapshot(`
857-
{
858-
"_computedOffsetIndex": -1,
859-
"_defaultItemSize": 123,
860-
"_length": 10,
861-
"_offsets": [
862-
-1,
863-
-1,
864-
-1,
865-
-1,
866-
-1,
867-
-1,
868-
-1,
869-
-1,
870-
-1,
871-
-1,
872-
],
873-
"_sizes": [
874-
0,
875-
1,
876-
2,
877-
3,
878-
4,
879-
5,
880-
6,
881-
7,
882-
8,
883-
9,
884-
],
885-
}
886-
`);
865+
{
866+
"_computedOffsetIndex": -1,
867+
"_defaultItemSize": 123,
868+
"_gap": 0,
869+
"_length": 10,
870+
"_offsets": [
871+
-1,
872+
-1,
873+
-1,
874+
-1,
875+
-1,
876+
-1,
877+
-1,
878+
-1,
879+
-1,
880+
-1,
881+
],
882+
"_sizes": [
883+
0,
884+
1,
885+
2,
886+
3,
887+
4,
888+
5,
889+
6,
890+
7,
891+
8,
892+
9,
893+
],
894+
}
895+
`);
887896
expect(cache._length).toBe(itemLength);
888897
expect(cache._sizes.length).toBe(itemLength);
889898
expect(cache._offsets.length).toBe(itemLength);
@@ -926,21 +935,22 @@ describe(takeCacheSnapshot.name, () => {
926935

927936
describe(updateCacheLength.name, () => {
928937
it("should recover cache length from 0", () => {
929-
const cache = initCache(10, 40);
938+
const cache = initCache(10, 40, 0);
930939
const initialCache = JSON.parse(JSON.stringify(cache));
931940
updateCacheLength(cache, 0);
932941
updateCacheLength(cache, 10);
933942
expect(cache).toEqual(initialCache);
934943
});
935944

936945
it("should increase cache length", () => {
937-
const cache = initCache(10, 40);
946+
const cache = initCache(10, 40, 0);
938947
const res = updateCacheLength(cache, 15, undefined);
939948
expect(res).toEqual(40 * 5);
940949
expect(cache).toMatchInlineSnapshot(`
941950
{
942951
"_computedOffsetIndex": -1,
943952
"_defaultItemSize": 40,
953+
"_gap": 0,
944954
"_length": 15,
945955
"_offsets": [
946956
-1,
@@ -989,6 +999,7 @@ describe(updateCacheLength.name, () => {
989999
{
9901000
"_computedOffsetIndex": 9,
9911001
"_defaultItemSize": 40,
1002+
"_gap": 0,
9921003
"_length": 15,
9931004
"_offsets": [
9941005
0,
@@ -1029,13 +1040,14 @@ describe(updateCacheLength.name, () => {
10291040
});
10301041

10311042
it("should decrease cache length", () => {
1032-
const cache = initCache(10, 40);
1043+
const cache = initCache(10, 40, 0);
10331044
const res = updateCacheLength(cache, 5, undefined);
10341045
expect(res).toEqual(-(40 * 5));
10351046
expect(cache).toMatchInlineSnapshot(`
10361047
{
10371048
"_computedOffsetIndex": -1,
10381049
"_defaultItemSize": 40,
1050+
"_gap": 0,
10391051
"_length": 5,
10401052
"_offsets": [
10411053
-1,
@@ -1064,6 +1076,7 @@ describe(updateCacheLength.name, () => {
10641076
{
10651077
"_computedOffsetIndex": 4,
10661078
"_defaultItemSize": 40,
1079+
"_gap": 0,
10671080
"_length": 5,
10681081
"_offsets": [
10691082
0,
@@ -1084,13 +1097,14 @@ describe(updateCacheLength.name, () => {
10841097
});
10851098

10861099
it("should increase cache length with shifting", () => {
1087-
const cache = initCache(10, 40);
1100+
const cache = initCache(10, 40, 0);
10881101
const res = updateCacheLength(cache, 15, true);
10891102
expect(res).toEqual(40 * 5);
10901103
expect(cache).toMatchInlineSnapshot(`
10911104
{
10921105
"_computedOffsetIndex": -1,
10931106
"_defaultItemSize": 40,
1107+
"_gap": 0,
10941108
"_length": 15,
10951109
"_offsets": [
10961110
-1,
@@ -1139,6 +1153,7 @@ describe(updateCacheLength.name, () => {
11391153
{
11401154
"_computedOffsetIndex": -1,
11411155
"_defaultItemSize": 40,
1156+
"_gap": 0,
11421157
"_length": 15,
11431158
"_offsets": [
11441159
0,
@@ -1179,13 +1194,14 @@ describe(updateCacheLength.name, () => {
11791194
});
11801195

11811196
it("should decrease cache length with shifting", () => {
1182-
const cache = initCache(10, 40);
1197+
const cache = initCache(10, 40, 0);
11831198
const res = updateCacheLength(cache, 5, true);
11841199
expect(res).toEqual(-(40 * 5));
11851200
expect(cache).toMatchInlineSnapshot(`
11861201
{
11871202
"_computedOffsetIndex": -1,
11881203
"_defaultItemSize": 40,
1204+
"_gap": 0,
11891205
"_length": 5,
11901206
"_offsets": [
11911207
-1,
@@ -1214,6 +1230,7 @@ describe(updateCacheLength.name, () => {
12141230
{
12151231
"_computedOffsetIndex": -1,
12161232
"_defaultItemSize": 40,
1233+
"_gap": 0,
12171234
"_length": 5,
12181235
"_offsets": [
12191236
0,

‎src/core/cache.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export type Cache = {
1919
// offsets
2020
readonly _computedOffsetIndex: number;
2121
readonly _offsets: number[];
22+
readonly _gap: number;
2223
};
2324

2425
const fill = (array: number[], length: number, prepend?: boolean): number[] => {
@@ -73,7 +74,7 @@ export const computeOffset = (
7374
let i = cache._computedOffsetIndex;
7475
let top = cache._offsets[i]!;
7576
while (i < index) {
76-
top += getItemSize(cache, i);
77+
top += getItemSize(cache, i) + cache._gap;
7778
cache._offsets[++i] = top;
7879
}
7980
// mark as measured
@@ -188,6 +189,7 @@ export const estimateDefaultItemSize = (
188189
export const initCache = (
189190
length: number,
190191
itemSize: number,
192+
gap: number,
191193
snapshot?: InternalCacheSnapshot
192194
): Cache => {
193195
return {
@@ -203,6 +205,7 @@ export const initCache = (
203205
_length: length,
204206
_computedOffsetIndex: -1,
205207
_offsets: fill([], length),
208+
_gap: gap,
206209
};
207210
};
208211

‎src/core/store.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,7 @@ export type VirtualStore = {
119119
export const createVirtualStore = (
120120
elementsCount: number,
121121
itemSize: number = 40,
122+
gap: number = 0,
122123
overscan: number = 4,
123124
ssrCount: number = 0,
124125
cacheSnapshot?: CacheSnapshot | undefined,
@@ -143,6 +144,7 @@ export const createVirtualStore = (
143144
const cache = initCache(
144145
elementsCount,
145146
itemSize,
147+
gap,
146148
cacheSnapshot as unknown as InternalCacheSnapshot | undefined
147149
);
148150
const subscribers = new Set<[number, Subscriber]>();

‎src/react/VGrid.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -277,12 +277,14 @@ export const VGrid = forwardRef<VGridHandle, VGridProps>(
277277
const _rowStore = createVirtualStore(
278278
rowCount,
279279
cellHeight,
280+
undefined, // TODO
280281
overscan,
281282
initialRowCount
282283
);
283284
const _colStore = createVirtualStore(
284285
colCount,
285286
cellWidth,
287+
undefined, // TODO
286288
overscan,
287289
initialColCount
288290
);

0 commit comments

Comments
 (0)