virtua 0.53.3 → 0.53.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +37 -32
- package/lib/angular/VGrid.d.ts +1 -1
- package/lib/angular/VList.d.ts +1 -1
- package/lib/angular/VMasonry.d.ts +1 -1
- package/lib/angular/Virtualizer.d.ts +1 -1
- package/lib/angular/WindowVirtualizer.d.ts +1 -1
- package/lib/angular/index.js +588 -586
- package/lib/angular/index.js.map +1 -1
- package/lib/core/index.cjs +415 -412
- package/lib/core/index.cjs.map +1 -1
- package/lib/core/index.d.ts +2 -2
- package/lib/core/index.js +426 -423
- package/lib/core/index.js.map +1 -1
- package/lib/index.cjs +647 -645
- package/lib/index.cjs.map +1 -1
- package/lib/index.js +641 -639
- package/lib/index.js.map +1 -1
- package/lib/react/VGrid.d.ts +1 -1
- package/lib/react/VMasonry.d.ts +1 -1
- package/lib/react/Virtualizer.d.ts +1 -1
- package/lib/react/WindowVirtualizer.d.ts +1 -1
- package/lib/solid/VGrid.d.ts +1 -1
- package/lib/solid/VMasonry.d.ts +1 -1
- package/lib/solid/Virtualizer.d.ts +1 -1
- package/lib/solid/WindowVirtualizer.d.ts +1 -1
- package/lib/solid/index.cjs +674 -671
- package/lib/solid/index.cjs.map +1 -1
- package/lib/solid/index.js +673 -671
- package/lib/solid/index.js.map +1 -1
- package/lib/solid/index.jsx +167 -216
- package/lib/solid/index.jsx.map +1 -1
- package/lib/svelte/GridRow.svelte +3 -1
- package/lib/svelte/GridRowGroup.svelte +3 -1
- package/lib/svelte/VGrid.svelte +18 -21
- package/lib/svelte/VGrid.type.d.ts +1 -1
- package/lib/svelte/VMasonry.svelte +13 -15
- package/lib/svelte/VMasonry.type.d.ts +1 -1
- package/lib/svelte/Virtualizer.svelte +12 -13
- package/lib/svelte/Virtualizer.type.d.ts +1 -1
- package/lib/svelte/WindowVirtualizer.svelte +11 -10
- package/lib/svelte/WindowVirtualizer.type.d.ts +1 -1
- package/lib/vue/VGrid.d.ts +1 -1
- package/lib/vue/VMasonry.d.ts +1 -1
- package/lib/vue/Virtualizer.d.ts +1 -1
- package/lib/vue/WindowVirtualizer.d.ts +1 -1
- package/lib/vue/index.cjs +802 -797
- package/lib/vue/index.cjs.map +1 -1
- package/lib/vue/index.js +773 -768
- package/lib/vue/index.js.map +1 -1
- package/package.json +1 -1
- package/lib/core/observer.d.ts +0 -1
package/lib/solid/index.jsx
CHANGED
|
@@ -49,10 +49,10 @@ var ACTION_SCROLL_END = 2;
|
|
|
49
49
|
var ACTION_ITEM_RESIZE = 3;
|
|
50
50
|
var ACTION_VIEWPORT_RESIZE = 4;
|
|
51
51
|
var ACTION_ITEMS_LENGTH_CHANGE = 5;
|
|
52
|
-
var
|
|
53
|
-
var
|
|
54
|
-
var
|
|
55
|
-
var
|
|
52
|
+
var ACTION_RELAYOUT = 6;
|
|
53
|
+
var ACTION_START_OFFSET_CHANGE = 7;
|
|
54
|
+
var ACTION_MANUAL_SCROLL = 8;
|
|
55
|
+
var ACTION_BEFORE_MANUAL_SMOOTH_SCROLL = 9;
|
|
56
56
|
var UPDATE_VIRTUAL_STATE = 1;
|
|
57
57
|
var UPDATE_SIZE_EVENT = 2;
|
|
58
58
|
var UPDATE_SCROLL_EVENT = 4;
|
|
@@ -60,7 +60,14 @@ var UPDATE_SCROLL_END_EVENT = 8;
|
|
|
60
60
|
var getScrollSize = (store) => {
|
|
61
61
|
return max(store.$getTotalSize(), store.$getViewportSize());
|
|
62
62
|
};
|
|
63
|
-
var
|
|
63
|
+
var relayout = (store, layout, a, b) => {
|
|
64
|
+
const anchorIndex = store._getAnchorIndex();
|
|
65
|
+
const anchorOffset = layout.$getItemOffset(anchorIndex);
|
|
66
|
+
if (layout.$relayout(a, b)) {
|
|
67
|
+
store.$update(6, layout.$getItemOffset(anchorIndex) - anchorOffset);
|
|
68
|
+
}
|
|
69
|
+
};
|
|
70
|
+
var createVirtualStore = ({ $getRange: getRange, $findIndex: findIndex, $getItemOffset: getItemOffset, $getItemSize: getItemSize, $setItemSizes: setItemSizes, $getTotalSize: getTotalSize, $getLength: getLength, $setLength: setLength, $isEstimating: isEstimating }, ssrCount = 0) => {
|
|
64
71
|
let isSSR = !!ssrCount;
|
|
65
72
|
let stateVersion = 1;
|
|
66
73
|
let viewportSize = 0;
|
|
@@ -77,17 +84,7 @@ var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $get
|
|
|
77
84
|
const subscribers = new Set();
|
|
78
85
|
const getRelativeScrollOffset = () => scrollOffset - startSpacerSize;
|
|
79
86
|
const getVisibleOffset = () => getRelativeScrollOffset() + pendingJump + jump;
|
|
80
|
-
const
|
|
81
|
-
return getOffset(index) - pendingJump;
|
|
82
|
-
};
|
|
83
|
-
const shouldKeep = (index) => {
|
|
84
|
-
if (_scrollMode === SCROLL_BY_SHIFT) {
|
|
85
|
-
return true;
|
|
86
|
-
}
|
|
87
|
-
if (_frozenRange && _scrollMode === SCROLL_BY_MANUAL_SCROLL) {
|
|
88
|
-
return index < _frozenRange[0];
|
|
89
|
-
}
|
|
90
|
-
const start = getRelativeScrollOffset();
|
|
87
|
+
const shouldKeep = (index, start) => {
|
|
91
88
|
const itemOffset = getItemOffset(index);
|
|
92
89
|
const itemSize = getItemSize(index);
|
|
93
90
|
return _scrollDirection !== SCROLL_DOWN && _scrollMode === SCROLL_BY_NATIVE ? itemOffset + itemSize <= start : itemOffset < start && itemOffset + itemSize < start + viewportSize;
|
|
@@ -101,6 +98,24 @@ var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $get
|
|
|
101
98
|
}
|
|
102
99
|
}
|
|
103
100
|
};
|
|
101
|
+
const getAnchorIndex = () => {
|
|
102
|
+
const length = getLength();
|
|
103
|
+
if (_scrollMode === SCROLL_BY_SHIFT) {
|
|
104
|
+
return length;
|
|
105
|
+
}
|
|
106
|
+
if (_frozenRange && _scrollMode === SCROLL_BY_MANUAL_SCROLL) {
|
|
107
|
+
return min(_frozenRange[0], length);
|
|
108
|
+
}
|
|
109
|
+
const start = getVisibleOffset();
|
|
110
|
+
let anchorIndex = findIndex(start);
|
|
111
|
+
while (anchorIndex > 0 && !shouldKeep(anchorIndex - 1, start)) {
|
|
112
|
+
anchorIndex--;
|
|
113
|
+
}
|
|
114
|
+
while (anchorIndex < length && shouldKeep(anchorIndex, start)) {
|
|
115
|
+
anchorIndex++;
|
|
116
|
+
}
|
|
117
|
+
return anchorIndex;
|
|
118
|
+
};
|
|
104
119
|
return {
|
|
105
120
|
$dispose: () => {
|
|
106
121
|
subscribers.clear();
|
|
@@ -134,12 +149,11 @@ var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $get
|
|
|
134
149
|
}
|
|
135
150
|
return [max(startIndex, 0), min(endIndex, getLength() - 1)];
|
|
136
151
|
},
|
|
137
|
-
|
|
138
|
-
$getItemOffset:
|
|
139
|
-
|
|
140
|
-
|
|
152
|
+
_getAnchorIndex: getAnchorIndex,
|
|
153
|
+
$getItemOffset: (index) => {
|
|
154
|
+
return getItemOffset(index) - pendingJump;
|
|
155
|
+
},
|
|
141
156
|
$getScrollOffset: () => scrollOffset,
|
|
142
|
-
$getVisibleOffset: getVisibleOffset,
|
|
143
157
|
$isScrolling: () => _scrollDirection !== SCROLL_IDLE,
|
|
144
158
|
$getViewportSize: () => viewportSize,
|
|
145
159
|
$getStartSpacerSize: () => startSpacerSize,
|
|
@@ -156,7 +170,7 @@ var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $get
|
|
|
156
170
|
subscribers.delete(sub);
|
|
157
171
|
};
|
|
158
172
|
},
|
|
159
|
-
$update: (type, payload) => {
|
|
173
|
+
$update: (type, payload, payload2) => {
|
|
160
174
|
let shouldFlushPendingJump;
|
|
161
175
|
let shouldSync;
|
|
162
176
|
let mutated = 0;
|
|
@@ -197,13 +211,14 @@ var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $get
|
|
|
197
211
|
break;
|
|
198
212
|
}
|
|
199
213
|
case 3: {
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
214
|
+
if (payload.length) {
|
|
215
|
+
const anchorIndex = getAnchorIndex();
|
|
216
|
+
const anchorOffset = getItemOffset(anchorIndex);
|
|
217
|
+
setItemSizes(payload, viewportSize);
|
|
218
|
+
applyJump(getItemOffset(anchorIndex) - anchorOffset);
|
|
219
|
+
mutated = 1 + 2;
|
|
220
|
+
shouldSync = true;
|
|
203
221
|
}
|
|
204
|
-
applyJump(resize(updated, shouldKeep, getVisibleOffset(), viewportSize));
|
|
205
|
-
mutated = 1 + 2;
|
|
206
|
-
shouldSync = true;
|
|
207
222
|
break;
|
|
208
223
|
}
|
|
209
224
|
case 4: {
|
|
@@ -217,32 +232,33 @@ var createVirtualStore = ({ $getRange: getRange, $getItemOffset: getOffset, $get
|
|
|
217
232
|
break;
|
|
218
233
|
}
|
|
219
234
|
case 5: {
|
|
220
|
-
if (payload
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
235
|
+
if (payload !== getLength()) {
|
|
236
|
+
if (payload2) {
|
|
237
|
+
const totalSize = getTotalSize();
|
|
238
|
+
setLength(payload, true);
|
|
239
|
+
applyJump(getTotalSize() - totalSize);
|
|
240
|
+
_scrollMode = SCROLL_BY_SHIFT;
|
|
241
|
+
} else {
|
|
242
|
+
setLength(payload);
|
|
243
|
+
}
|
|
226
244
|
mutated = 1;
|
|
227
245
|
}
|
|
228
246
|
break;
|
|
229
247
|
}
|
|
230
248
|
case 6: {
|
|
231
|
-
|
|
249
|
+
applyJump(payload);
|
|
250
|
+
mutated = 1;
|
|
232
251
|
break;
|
|
233
252
|
}
|
|
234
253
|
case 7: {
|
|
235
|
-
|
|
254
|
+
startSpacerSize = payload;
|
|
236
255
|
break;
|
|
237
256
|
}
|
|
238
|
-
case
|
|
239
|
-
|
|
240
|
-
applyJump(payload);
|
|
241
|
-
mutated = 1;
|
|
242
|
-
}
|
|
257
|
+
case 8: {
|
|
258
|
+
_scrollMode = SCROLL_BY_MANUAL_SCROLL;
|
|
243
259
|
break;
|
|
244
260
|
}
|
|
245
|
-
case
|
|
261
|
+
case 9: {
|
|
246
262
|
_frozenRange = getRange(payload, payload + viewportSize);
|
|
247
263
|
mutated = 1;
|
|
248
264
|
break;
|
|
@@ -297,8 +313,8 @@ var createListLayout = (length, itemSize, snapshot) => {
|
|
|
297
313
|
let _totalMeasuredSize = 0;
|
|
298
314
|
let shouldAutoEstimateItemSize = !itemSize;
|
|
299
315
|
let prevStartIndex = 0;
|
|
300
|
-
const
|
|
301
|
-
|
|
316
|
+
const sizes = snapshot ? snapshot[0].slice(0, length) : [];
|
|
317
|
+
fill(sizes, length - sizes.length);
|
|
302
318
|
const offsets = fill([], length + 1);
|
|
303
319
|
const getSize = (index) => {
|
|
304
320
|
const size = sizes[index];
|
|
@@ -341,37 +357,26 @@ var createListLayout = (length, itemSize, snapshot) => {
|
|
|
341
357
|
$getItemOffset: getOffset,
|
|
342
358
|
$getItemSize: getSize,
|
|
343
359
|
$isSizeEqual: (index, size = -1) => sizes[index] === size,
|
|
344
|
-
$
|
|
345
|
-
let jump = resizes.reduce((acc, [index, size]) => shouldKeep(index) ? acc + (size - getSize(index)) : acc, 0);
|
|
360
|
+
$setItemSizes: (resizes, viewportSize) => {
|
|
346
361
|
for (const [index, size] of resizes) {
|
|
347
362
|
_totalMeasuredSize += sizes[index] === -1 ? size : size - getSize(index);
|
|
348
363
|
sizes[index] = size;
|
|
349
364
|
computedOffsetIndex = min(index, computedOffsetIndex);
|
|
350
365
|
}
|
|
351
366
|
if (shouldAutoEstimateItemSize && viewportSize && _totalMeasuredSize > viewportSize) {
|
|
352
|
-
let measuredCountBeforeStart = 0;
|
|
353
|
-
const startIndex = findIndex(getOffset, length, scrollOffset + jump);
|
|
354
367
|
const measuredSizes = [];
|
|
355
|
-
sizes.forEach((s
|
|
356
|
-
if (s !== -1) {
|
|
357
|
-
|
|
358
|
-
measuredSizes.push(s);
|
|
359
|
-
}
|
|
360
|
-
if (i < startIndex) {
|
|
361
|
-
measuredCountBeforeStart++;
|
|
362
|
-
}
|
|
368
|
+
sizes.forEach((s) => {
|
|
369
|
+
if (s !== -1 && s) {
|
|
370
|
+
measuredSizes.push(s);
|
|
363
371
|
}
|
|
364
372
|
});
|
|
365
373
|
computedOffsetIndex = -1;
|
|
366
374
|
sort(measuredSizes);
|
|
367
375
|
const len = measuredSizes.length;
|
|
368
376
|
const mid = len / 2 | 0;
|
|
369
|
-
|
|
370
|
-
const prevDefaultItemSize = defaultItemSize;
|
|
371
|
-
jump += ((defaultItemSize = median) - prevDefaultItemSize) * max(startIndex - measuredCountBeforeStart, 0);
|
|
377
|
+
defaultItemSize = len % 2 === 0 ? (measuredSizes[mid - 1] + measuredSizes[mid]) / 2 : measuredSizes[mid];
|
|
372
378
|
shouldAutoEstimateItemSize = false;
|
|
373
379
|
}
|
|
374
|
-
return jump;
|
|
375
380
|
},
|
|
376
381
|
$getTotalSize: () => getOffset(length),
|
|
377
382
|
$getLength: () => length,
|
|
@@ -382,10 +387,9 @@ var createListLayout = (length, itemSize, snapshot) => {
|
|
|
382
387
|
if (diff > 0) {
|
|
383
388
|
fill(offsets, diff);
|
|
384
389
|
fill(sizes, diff, isShift);
|
|
385
|
-
return defaultItemSize * diff;
|
|
386
390
|
} else {
|
|
387
391
|
offsets.splice(diff);
|
|
388
|
-
|
|
392
|
+
isShift ? sizes.splice(0, -diff) : sizes.splice(diff);
|
|
389
393
|
}
|
|
390
394
|
},
|
|
391
395
|
$isEstimating: () => shouldAutoEstimateItemSize,
|
|
@@ -460,8 +464,7 @@ var createGridLayout = (axis, size, gap = 0) => {
|
|
|
460
464
|
$findIndex: find,
|
|
461
465
|
$getItemOffset: getOffset,
|
|
462
466
|
$getItemSize: getItemSize,
|
|
463
|
-
$
|
|
464
|
-
let jump = resizes.reduce((acc, [index, size]) => isMeasurable(index) && shouldKeep(index) ? acc + (size - getItemSize(index)) : acc, 0);
|
|
467
|
+
$setItemSizes: (resizes, viewportSize) => {
|
|
465
468
|
for (const [index, size] of resizes) {
|
|
466
469
|
if (isMeasurable(index)) {
|
|
467
470
|
materialize();
|
|
@@ -470,29 +473,19 @@ var createGridLayout = (axis, size, gap = 0) => {
|
|
|
470
473
|
}
|
|
471
474
|
}
|
|
472
475
|
if (shouldAutoEstimateItemSize && viewportSize && _totalMeasuredSize > viewportSize) {
|
|
473
|
-
let measuredCountBeforeStart = 0;
|
|
474
|
-
const startIndex = find(scrollOffset + jump);
|
|
475
476
|
const measuredSizes = [];
|
|
476
|
-
sizes.forEach((s
|
|
477
|
-
if (s !== -1) {
|
|
478
|
-
|
|
479
|
-
measuredSizes.push(s);
|
|
480
|
-
}
|
|
481
|
-
if (i < startIndex) {
|
|
482
|
-
measuredCountBeforeStart++;
|
|
483
|
-
}
|
|
477
|
+
sizes.forEach((s) => {
|
|
478
|
+
if (s !== -1 && s) {
|
|
479
|
+
measuredSizes.push(s);
|
|
484
480
|
}
|
|
485
481
|
});
|
|
486
482
|
computedOffsetIndex = -1;
|
|
487
483
|
sort(measuredSizes);
|
|
488
484
|
const len = measuredSizes.length;
|
|
489
485
|
const mid = len / 2 | 0;
|
|
490
|
-
|
|
491
|
-
const prevDefaultItemSize = defaultItemSize;
|
|
492
|
-
jump += ((defaultItemSize = median) - prevDefaultItemSize) * max(startIndex - measuredCountBeforeStart, 0);
|
|
486
|
+
defaultItemSize = len % 2 === 0 ? (measuredSizes[mid - 1] + measuredSizes[mid]) / 2 : measuredSizes[mid];
|
|
493
487
|
shouldAutoEstimateItemSize = false;
|
|
494
488
|
}
|
|
495
|
-
return jump;
|
|
496
489
|
},
|
|
497
490
|
$isSizeEqual: (index, size = -1) => {
|
|
498
491
|
const cachedSize = sizes.length ? sizes[index] : -1;
|
|
@@ -511,7 +504,6 @@ var createGridLayout = (axis, size, gap = 0) => {
|
|
|
511
504
|
sizes.splice(diff);
|
|
512
505
|
}
|
|
513
506
|
}
|
|
514
|
-
return 0;
|
|
515
507
|
},
|
|
516
508
|
$isEstimating: () => shouldAutoEstimateItemSize,
|
|
517
509
|
$isMeasurable: isMeasurable,
|
|
@@ -522,28 +514,25 @@ var createGridLayout = (axis, size, gap = 0) => {
|
|
|
522
514
|
$getPinnedStart: getPinnedStart,
|
|
523
515
|
$getTrailStart: getTrailStart,
|
|
524
516
|
$getSizes: (nextAxis, nextSize) => typeof nextSize === "number" ? isUniform ? nextSize : null : isUniform || isAuto || nextSize === "auto" ? null : nextAxis.map((item) => item != null ? item[nextSize] : null),
|
|
525
|
-
$relayout: (nextSizes
|
|
517
|
+
$relayout: (nextSizes) => {
|
|
526
518
|
if (nextSizes == null) {
|
|
527
|
-
return;
|
|
519
|
+
return false;
|
|
528
520
|
}
|
|
529
521
|
if (typeof nextSizes === "number") {
|
|
530
522
|
const nextDefaultItemSize = nextSizes + gap;
|
|
531
523
|
if (nextDefaultItemSize === defaultItemSize) {
|
|
532
|
-
return;
|
|
524
|
+
return false;
|
|
533
525
|
}
|
|
534
|
-
const jump = find(scrollOffset) * (nextDefaultItemSize - defaultItemSize);
|
|
535
526
|
defaultItemSize = nextDefaultItemSize;
|
|
536
|
-
return
|
|
527
|
+
return true;
|
|
537
528
|
}
|
|
538
529
|
if (nextSizes === currentSizes && length === autos.length) {
|
|
539
|
-
return;
|
|
530
|
+
return false;
|
|
540
531
|
}
|
|
541
532
|
currentSizes = nextSizes;
|
|
542
533
|
autos.length = length;
|
|
543
534
|
materialize();
|
|
544
|
-
|
|
545
|
-
const prevOffset = getOffset(anchorIndex);
|
|
546
|
-
let changed;
|
|
535
|
+
let changed = false;
|
|
547
536
|
for (let i = 0; i < length; i++) {
|
|
548
537
|
const itemSize = nextSizes[i];
|
|
549
538
|
const isAutoItem = typeof itemSize !== "number";
|
|
@@ -556,10 +545,7 @@ var createGridLayout = (axis, size, gap = 0) => {
|
|
|
556
545
|
}
|
|
557
546
|
}
|
|
558
547
|
}
|
|
559
|
-
|
|
560
|
-
return;
|
|
561
|
-
}
|
|
562
|
-
return getOffset(anchorIndex) - prevOffset;
|
|
548
|
+
return changed;
|
|
563
549
|
}
|
|
564
550
|
};
|
|
565
551
|
};
|
|
@@ -910,96 +896,84 @@ var createMasonryLayout = (length, lanesOpt, gap = 0, itemSize, snapshot) => {
|
|
|
910
896
|
let computedIndex = -1;
|
|
911
897
|
let estimatingIndexes = itemSize ? undefined : new Set();
|
|
912
898
|
let isEstimating = !itemSize;
|
|
913
|
-
const
|
|
914
|
-
|
|
899
|
+
const sizes = snapshot ? snapshot[0].slice(0, length) : [];
|
|
900
|
+
fill(sizes, length - sizes.length);
|
|
915
901
|
const offsets = [];
|
|
916
902
|
const laneIndexes = [];
|
|
917
|
-
const highs = [];
|
|
903
|
+
const highs = [0];
|
|
918
904
|
const getSize = (index) => {
|
|
919
905
|
const size = sizes[index];
|
|
920
906
|
return size === -1 ? defaultItemSize : size;
|
|
921
907
|
};
|
|
922
|
-
const compute = (
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
const bottoms = [];
|
|
908
|
+
const compute = () => {
|
|
909
|
+
if (computedIndex >= length - 1) return;
|
|
910
|
+
const nextOffsets = [];
|
|
926
911
|
const lastIndexes = [];
|
|
927
912
|
for (let l = 0; l < lanes; l++) {
|
|
928
|
-
|
|
913
|
+
nextOffsets.push(0);
|
|
929
914
|
lastIndexes.push(-1);
|
|
930
915
|
}
|
|
931
916
|
for (let j = computedIndex, remaining = lanes; j >= 0 && remaining; j--) {
|
|
932
917
|
const l = laneIndexes[j];
|
|
933
918
|
if (lastIndexes[l] === -1) {
|
|
934
919
|
lastIndexes[l] = j;
|
|
935
|
-
|
|
920
|
+
nextOffsets[l] = offsets[j] + getSize(j) + gap;
|
|
936
921
|
remaining--;
|
|
937
922
|
}
|
|
938
923
|
}
|
|
939
|
-
while (computedIndex <
|
|
924
|
+
while (computedIndex < length - 1) {
|
|
940
925
|
const i = ++computedIndex;
|
|
941
926
|
let lane = 0;
|
|
942
927
|
let offset = Infinity;
|
|
943
928
|
let lastIndex = Infinity;
|
|
944
929
|
for (let l = 0; l < lanes; l++) {
|
|
945
|
-
const candidate =
|
|
930
|
+
const candidate = nextOffsets[l];
|
|
946
931
|
if (candidate < offset || candidate === offset && lastIndexes[l] < lastIndex) {
|
|
947
932
|
lane = l;
|
|
948
933
|
offset = candidate;
|
|
949
934
|
lastIndex = lastIndexes[l];
|
|
950
935
|
}
|
|
951
936
|
}
|
|
937
|
+
const bottom = offset + getSize(i);
|
|
952
938
|
offsets[i] = offset;
|
|
953
939
|
laneIndexes[i] = lane;
|
|
954
|
-
|
|
940
|
+
nextOffsets[lane] = bottom + gap;
|
|
955
941
|
lastIndexes[lane] = i;
|
|
956
|
-
highs[i] = max(
|
|
942
|
+
highs[i + 1] = max(highs[i], bottom);
|
|
957
943
|
}
|
|
958
944
|
};
|
|
959
945
|
const getOffset = (index) => {
|
|
960
946
|
if (index >= length) return getTotalSize();
|
|
961
|
-
compute(
|
|
947
|
+
compute();
|
|
962
948
|
return offsets[index];
|
|
963
949
|
};
|
|
964
950
|
const getHigh = (index) => {
|
|
965
|
-
compute(
|
|
951
|
+
compute();
|
|
966
952
|
return highs[index];
|
|
967
953
|
};
|
|
968
|
-
const getTotalSize = () =>
|
|
969
|
-
const findStart = (offset) =>
|
|
970
|
-
if (!length) return 0;
|
|
971
|
-
const index = findIndex(getHigh, length, offset);
|
|
972
|
-
return getHigh(index) <= offset ? index + 1 : index;
|
|
973
|
-
};
|
|
954
|
+
const getTotalSize = () => getHigh(length);
|
|
955
|
+
const findStart = (offset) => findIndex(getHigh, length + 1, offset);
|
|
974
956
|
return {
|
|
975
957
|
$getRange: (startOffset, endOffset) => {
|
|
976
958
|
const end = findIndex(getOffset, length, endOffset);
|
|
977
959
|
return [min(findStart(startOffset), end), end];
|
|
978
960
|
},
|
|
961
|
+
$findIndex: findStart,
|
|
979
962
|
$getItemOffset: getOffset,
|
|
980
963
|
$getItemSize: getSize,
|
|
981
964
|
$isSizeEqual: (index, size = -1) => sizes[index] === size,
|
|
982
|
-
$
|
|
983
|
-
let anchorIndex = findStart(scrollOffset);
|
|
984
|
-
while (anchorIndex > 0 && !shouldKeep(anchorIndex - 1)) {
|
|
985
|
-
anchorIndex--;
|
|
986
|
-
}
|
|
987
|
-
while (anchorIndex < length && shouldKeep(anchorIndex)) {
|
|
988
|
-
anchorIndex++;
|
|
989
|
-
}
|
|
990
|
-
const prevAnchorOffset = getOffset(anchorIndex);
|
|
965
|
+
$setItemSizes: (resizes, viewportSize) => {
|
|
991
966
|
for (const [index, size] of resizes) {
|
|
992
967
|
sizes[index] = size;
|
|
993
968
|
estimatingIndexes && estimatingIndexes.add(index);
|
|
994
969
|
computedIndex = min(index - 1, computedIndex);
|
|
995
970
|
}
|
|
996
|
-
let jump = getOffset(anchorIndex) - prevAnchorOffset;
|
|
997
971
|
if (estimatingIndexes && viewportSize) {
|
|
998
972
|
const measuredSizes = [];
|
|
999
973
|
let totalMeasuredSize = 0;
|
|
1000
974
|
estimatingIndexes.forEach((index) => {
|
|
1001
975
|
const size = sizes[index];
|
|
1002
|
-
if (size
|
|
976
|
+
if (size !== -1 && size) {
|
|
1003
977
|
measuredSizes.push(size);
|
|
1004
978
|
totalMeasuredSize += size + gap;
|
|
1005
979
|
}
|
|
@@ -1008,17 +982,12 @@ var createMasonryLayout = (length, lanesOpt, gap = 0, itemSize, snapshot) => {
|
|
|
1008
982
|
sort(measuredSizes);
|
|
1009
983
|
const len = measuredSizes.length;
|
|
1010
984
|
const mid = len / 2 | 0;
|
|
1011
|
-
|
|
1012
|
-
const startIndex = findStart(scrollOffset + jump);
|
|
1013
|
-
const prevStartOffset = getOffset(startIndex);
|
|
1014
|
-
defaultItemSize = median;
|
|
985
|
+
defaultItemSize = len % 2 === 0 ? (measuredSizes[mid - 1] + measuredSizes[mid]) / 2 : measuredSizes[mid];
|
|
1015
986
|
computedIndex = -1;
|
|
1016
|
-
jump += getOffset(startIndex) - prevStartOffset;
|
|
1017
987
|
estimatingIndexes = undefined;
|
|
1018
988
|
isEstimating = false;
|
|
1019
989
|
}
|
|
1020
990
|
}
|
|
1021
|
-
return jump;
|
|
1022
991
|
},
|
|
1023
992
|
$getTotalSize: getTotalSize,
|
|
1024
993
|
$getLength: () => length,
|
|
@@ -1031,34 +1000,31 @@ var createMasonryLayout = (length, lanesOpt, gap = 0, itemSize, snapshot) => {
|
|
|
1031
1000
|
} else {
|
|
1032
1001
|
sizes.splice(diff);
|
|
1033
1002
|
}
|
|
1034
|
-
return 0;
|
|
1035
1003
|
},
|
|
1036
|
-
$relayout: (nextLanes, nextGap = 0
|
|
1004
|
+
$relayout: (nextLanes, nextGap = 0) => {
|
|
1037
1005
|
nextLanes = max(nextLanes, 1);
|
|
1038
1006
|
if (nextLanes === lanes && nextGap === gap) {
|
|
1039
|
-
return;
|
|
1007
|
+
return false;
|
|
1040
1008
|
}
|
|
1041
|
-
const startIndex = findStart(scrollOffset);
|
|
1042
|
-
const prevStartOffset = getOffset(startIndex);
|
|
1043
1009
|
lanes = nextLanes;
|
|
1044
1010
|
gap = nextGap;
|
|
1045
1011
|
computedIndex = -1;
|
|
1046
1012
|
estimatingIndexes = itemSize ? undefined : new Set();
|
|
1047
|
-
return
|
|
1013
|
+
return true;
|
|
1048
1014
|
},
|
|
1049
1015
|
$isEstimating: () => isEstimating,
|
|
1050
1016
|
$snapshot: () => [sizes.slice(), defaultItemSize],
|
|
1051
1017
|
$getLanes: () => lanes,
|
|
1052
1018
|
$getGap: () => gap,
|
|
1053
1019
|
$getItemLane: (index) => {
|
|
1054
|
-
compute(
|
|
1020
|
+
compute();
|
|
1055
1021
|
return laneIndexes[index];
|
|
1056
1022
|
}
|
|
1057
1023
|
};
|
|
1058
1024
|
};
|
|
1059
1025
|
|
|
1060
1026
|
//#endregion
|
|
1061
|
-
//#region src/core/
|
|
1027
|
+
//#region src/core/driver.ts
|
|
1062
1028
|
var createResizeObserver = (cb) => {
|
|
1063
1029
|
let ro;
|
|
1064
1030
|
return {
|
|
@@ -1073,7 +1039,7 @@ var createResizeObserver = (cb) => {
|
|
|
1073
1039
|
}
|
|
1074
1040
|
};
|
|
1075
1041
|
};
|
|
1076
|
-
var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMomentumJump, getStartOffset) => {
|
|
1042
|
+
var createScrollObserver = (store, layout, viewport, scroller, isHorizontal, isRtl, onMomentumJump, getStartOffset) => {
|
|
1077
1043
|
let lastScrollTime = 0;
|
|
1078
1044
|
let wheeling = false;
|
|
1079
1045
|
let touching = false;
|
|
@@ -1113,7 +1079,7 @@ var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMo
|
|
|
1113
1079
|
stillMomentumScrolling = true;
|
|
1114
1080
|
}
|
|
1115
1081
|
if (getStartOffset) {
|
|
1116
|
-
store.$update(
|
|
1082
|
+
store.$update(7, getStartOffset());
|
|
1117
1083
|
}
|
|
1118
1084
|
store.$update(1, getScrollOffset());
|
|
1119
1085
|
scheduleScrollEnd();
|
|
@@ -1141,6 +1107,7 @@ var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMo
|
|
|
1141
1107
|
viewport.addEventListener("wheel", onWheel, { passive: true });
|
|
1142
1108
|
viewport.addEventListener("touchstart", onTouchStart, { passive: true });
|
|
1143
1109
|
viewport.addEventListener("touchend", onTouchEnd, { passive: true });
|
|
1110
|
+
viewport.addEventListener("touchcancel", onTouchEnd, { passive: true });
|
|
1144
1111
|
return {
|
|
1145
1112
|
_sync: onScroll,
|
|
1146
1113
|
_dispose: () => {
|
|
@@ -1148,6 +1115,7 @@ var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMo
|
|
|
1148
1115
|
viewport.removeEventListener("wheel", onWheel);
|
|
1149
1116
|
viewport.removeEventListener("touchstart", onTouchStart);
|
|
1150
1117
|
viewport.removeEventListener("touchend", onTouchEnd);
|
|
1118
|
+
viewport.removeEventListener("touchcancel", onTouchEnd);
|
|
1151
1119
|
cancelTimeout(scrollEndTimer);
|
|
1152
1120
|
},
|
|
1153
1121
|
_fixScrollJump: () => {
|
|
@@ -1197,13 +1165,13 @@ var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMo
|
|
|
1197
1165
|
}
|
|
1198
1166
|
if (smooth) {
|
|
1199
1167
|
for (let [i, end] = store.$getRange(0); i <= end; i++) {
|
|
1200
|
-
if (
|
|
1168
|
+
if (layout.$isSizeEqual(i)) {
|
|
1201
1169
|
return;
|
|
1202
1170
|
}
|
|
1203
1171
|
}
|
|
1204
1172
|
stop();
|
|
1205
1173
|
}
|
|
1206
|
-
store.$update(
|
|
1174
|
+
store.$update(8);
|
|
1207
1175
|
scrollTo(getTargetOffset(), smooth);
|
|
1208
1176
|
};
|
|
1209
1177
|
const start = () => {
|
|
@@ -1224,16 +1192,13 @@ var createScrollObserver = (store, viewport, scroller, isHorizontal, isRtl, onMo
|
|
|
1224
1192
|
onMeasured();
|
|
1225
1193
|
};
|
|
1226
1194
|
if (smooth) {
|
|
1227
|
-
store.$update(
|
|
1195
|
+
store.$update(9, getTargetOffset());
|
|
1228
1196
|
}
|
|
1229
1197
|
start();
|
|
1230
1198
|
}
|
|
1231
1199
|
};
|
|
1232
1200
|
};
|
|
1233
|
-
|
|
1234
|
-
//#endregion
|
|
1235
|
-
//#region src/core/driver.ts
|
|
1236
|
-
var createContainerDriver = (store, isHorizontal) => {
|
|
1201
|
+
var createContainerDriver = (store, layout, isHorizontal) => {
|
|
1237
1202
|
let viewportElement;
|
|
1238
1203
|
let scrollObserver;
|
|
1239
1204
|
let initialized = createPromise();
|
|
@@ -1255,18 +1220,19 @@ var createContainerDriver = (store, isHorizontal) => {
|
|
|
1255
1220
|
} else if (target.offsetParent) {
|
|
1256
1221
|
const index = mountedIndexes.get(target);
|
|
1257
1222
|
if (index != null) {
|
|
1258
|
-
|
|
1223
|
+
const size = isHorizontal ? width : height;
|
|
1224
|
+
if (!layout.$isSizeEqual(index, size)) {
|
|
1225
|
+
resizes.push([index, size]);
|
|
1226
|
+
}
|
|
1259
1227
|
}
|
|
1260
1228
|
}
|
|
1261
1229
|
}
|
|
1262
|
-
|
|
1263
|
-
store.$update(3, resizes);
|
|
1264
|
-
}
|
|
1230
|
+
store.$update(3, resizes);
|
|
1265
1231
|
});
|
|
1266
1232
|
return {
|
|
1267
1233
|
$observe(containerElement, viewport = containerElement.parentElement) {
|
|
1268
1234
|
resizeObserver._observe(viewportElement = viewport);
|
|
1269
|
-
scrollObserver = createScrollObserver(store, viewport, viewport, isHorizontal, isHorizontal && getComputedStyle(viewport).direction === "rtl", () => {
|
|
1235
|
+
scrollObserver = createScrollObserver(store, layout, viewport, viewport, isHorizontal, isHorizontal && getComputedStyle(viewport).direction === "rtl", () => {
|
|
1270
1236
|
const overflowKey = isHorizontal ? "overflowX" : "overflowY";
|
|
1271
1237
|
const style = viewport.style;
|
|
1272
1238
|
const prev = style[overflowKey];
|
|
@@ -1302,7 +1268,7 @@ var createContainerDriver = (store, isHorizontal) => {
|
|
|
1302
1268
|
$getBaseOffset: store.$getStartSpacerSize
|
|
1303
1269
|
};
|
|
1304
1270
|
};
|
|
1305
|
-
var createWindowDriver = (store, isHorizontal) => {
|
|
1271
|
+
var createWindowDriver = (store, layout, isHorizontal) => {
|
|
1306
1272
|
let viewportElement;
|
|
1307
1273
|
let scrollObserver;
|
|
1308
1274
|
let cleanupOnWindowResize;
|
|
@@ -1318,13 +1284,14 @@ var createWindowDriver = (store, isHorizontal) => {
|
|
|
1318
1284
|
} else if (target.offsetParent) {
|
|
1319
1285
|
const index = mountedIndexes.get(target);
|
|
1320
1286
|
if (index != null) {
|
|
1321
|
-
|
|
1287
|
+
const size = isHorizontal ? width : height;
|
|
1288
|
+
if (!layout.$isSizeEqual(index, size)) {
|
|
1289
|
+
resizes.push([index, size]);
|
|
1290
|
+
}
|
|
1322
1291
|
}
|
|
1323
1292
|
}
|
|
1324
1293
|
}
|
|
1325
|
-
|
|
1326
|
-
store.$update(3, resizes);
|
|
1327
|
-
}
|
|
1294
|
+
store.$update(3, resizes);
|
|
1328
1295
|
});
|
|
1329
1296
|
return {
|
|
1330
1297
|
$observe(container) {
|
|
@@ -1352,7 +1319,7 @@ var createWindowDriver = (store, isHorizontal) => {
|
|
|
1352
1319
|
cleanupOnWindowResize = () => {
|
|
1353
1320
|
window.removeEventListener("resize", onWindowResize);
|
|
1354
1321
|
};
|
|
1355
|
-
scrollObserver = createScrollObserver(store, window, viewport, isHorizontal, isRtl, null, baseOffset);
|
|
1322
|
+
scrollObserver = createScrollObserver(store, layout, window, viewport, isHorizontal, isRtl, null, baseOffset);
|
|
1356
1323
|
initialized[1](true);
|
|
1357
1324
|
},
|
|
1358
1325
|
$dispose() {
|
|
@@ -1383,7 +1350,7 @@ var createWindowDriver = (store, isHorizontal) => {
|
|
|
1383
1350
|
}
|
|
1384
1351
|
};
|
|
1385
1352
|
};
|
|
1386
|
-
var createContainerGridDriver = (rowStore, colStore) => {
|
|
1353
|
+
var createContainerGridDriver = (rowStore, colStore, rowLayout, colLayout) => {
|
|
1387
1354
|
let viewportElement;
|
|
1388
1355
|
let rowScrollObserver;
|
|
1389
1356
|
let colScrollObserver;
|
|
@@ -1410,20 +1377,16 @@ var createContainerGridDriver = (rowStore, colStore) => {
|
|
|
1410
1377
|
} else if (target.offsetParent) {
|
|
1411
1378
|
const rowIndex = mountedRowIndexes.get(target);
|
|
1412
1379
|
const colIndex = mountedColIndexes.get(target);
|
|
1413
|
-
if (rowIndex != null) {
|
|
1380
|
+
if (rowIndex != null && !rowLayout.$isSizeEqual(rowIndex, height)) {
|
|
1414
1381
|
rowResizes.push([rowIndex, height]);
|
|
1415
1382
|
}
|
|
1416
|
-
if (colIndex != null) {
|
|
1383
|
+
if (colIndex != null && !colLayout.$isSizeEqual(colIndex, width)) {
|
|
1417
1384
|
colResizes.push([colIndex, width]);
|
|
1418
1385
|
}
|
|
1419
1386
|
}
|
|
1420
1387
|
}
|
|
1421
|
-
|
|
1422
|
-
|
|
1423
|
-
}
|
|
1424
|
-
if (colResizes.length) {
|
|
1425
|
-
colStore.$update(3, colResizes);
|
|
1426
|
-
}
|
|
1388
|
+
rowStore.$update(3, rowResizes);
|
|
1389
|
+
colStore.$update(3, colResizes);
|
|
1427
1390
|
});
|
|
1428
1391
|
return {
|
|
1429
1392
|
async $scroll(isHorizontal, getTargetOffset) {
|
|
@@ -1433,7 +1396,7 @@ var createContainerGridDriver = (rowStore, colStore) => {
|
|
|
1433
1396
|
},
|
|
1434
1397
|
$observe(containerElement, viewport = containerElement.parentElement) {
|
|
1435
1398
|
resizeObserver._observe(viewportElement = viewport);
|
|
1436
|
-
const observe = (store, isHorizontal) => createScrollObserver(store, viewport, viewport, isHorizontal, isHorizontal && getComputedStyle(viewport).direction === "rtl", () => {
|
|
1399
|
+
const observe = (store, layout, isHorizontal) => createScrollObserver(store, layout, viewport, viewport, isHorizontal, isHorizontal && getComputedStyle(viewport).direction === "rtl", () => {
|
|
1437
1400
|
const overflowKey = isHorizontal ? "overflowX" : "overflowY";
|
|
1438
1401
|
const style = viewport.style;
|
|
1439
1402
|
const prev = style[overflowKey];
|
|
@@ -1442,8 +1405,8 @@ var createContainerGridDriver = (rowStore, colStore) => {
|
|
|
1442
1405
|
style[overflowKey] = prev;
|
|
1443
1406
|
});
|
|
1444
1407
|
});
|
|
1445
|
-
rowScrollObserver = observe(rowStore, false);
|
|
1446
|
-
colScrollObserver = observe(colStore, true);
|
|
1408
|
+
rowScrollObserver = observe(rowStore, rowLayout, false);
|
|
1409
|
+
colScrollObserver = observe(colStore, colLayout, true);
|
|
1447
1410
|
initialized[1](true);
|
|
1448
1411
|
},
|
|
1449
1412
|
$dispose() {
|
|
@@ -1482,21 +1445,21 @@ var scrollTo = (driver, offset) => {
|
|
|
1482
1445
|
var scrollBy = (driver, store, offset) => {
|
|
1483
1446
|
scrollTo(driver, offset + store.$getScrollOffset());
|
|
1484
1447
|
};
|
|
1485
|
-
var scrollToIndex = (driver, store, index, { align, smooth, offset = 0 } = {}) => {
|
|
1486
|
-
index = clamp(index, 0,
|
|
1448
|
+
var scrollToIndex = (driver, store, layout, index, { align, smooth, offset = 0 } = {}) => {
|
|
1449
|
+
index = clamp(index, 0, layout.$getLength() - 1);
|
|
1487
1450
|
if (align === "nearest") {
|
|
1488
1451
|
const itemOffset = store.$getItemOffset(index);
|
|
1489
1452
|
const scrollOffset = store.$getScrollOffset();
|
|
1490
1453
|
if (itemOffset < scrollOffset) {
|
|
1491
1454
|
align = "start";
|
|
1492
|
-
} else if (itemOffset +
|
|
1455
|
+
} else if (itemOffset + layout.$getItemSize(index) > scrollOffset + store.$getViewportSize()) {
|
|
1493
1456
|
align = "end";
|
|
1494
1457
|
} else {
|
|
1495
1458
|
return;
|
|
1496
1459
|
}
|
|
1497
1460
|
}
|
|
1498
1461
|
driver.$scroll(() => {
|
|
1499
|
-
return offset + driver.$getBaseOffset() + store.$getItemOffset(index) + (align === "end" ?
|
|
1462
|
+
return offset + driver.$getBaseOffset() + store.$getItemOffset(index) + (align === "end" ? layout.$getItemSize(index) - store.$getViewportSize() : align === "center" ? (layout.$getItemSize(index) - store.$getViewportSize()) / 2 : 0);
|
|
1500
1463
|
}, smooth);
|
|
1501
1464
|
};
|
|
1502
1465
|
var gridScrollTo = (driver, vertical, horizontal) => {
|
|
@@ -1518,7 +1481,7 @@ var gridScrollBy = (driver, rowStore, colStore, vertical, horizontal) => {
|
|
|
1518
1481
|
}
|
|
1519
1482
|
};
|
|
1520
1483
|
var scrollGridAxisToIndex = (driver, store, layout, sections, index, align, isHorizontal) => {
|
|
1521
|
-
const count =
|
|
1484
|
+
const count = layout.$getLength();
|
|
1522
1485
|
const pinnedStart = layout.$getPinnedStart();
|
|
1523
1486
|
const trailStart = layout.$getTrailStart();
|
|
1524
1487
|
index = clamp(index, 0, count - 1);
|
|
@@ -1534,11 +1497,11 @@ var scrollGridAxisToIndex = (driver, store, layout, sections, index, align, isHo
|
|
|
1534
1497
|
const insetStart = getInsetStart();
|
|
1535
1498
|
const scrollOffset = store.$getScrollOffset() + insetStart;
|
|
1536
1499
|
const viewportSize = store.$getViewportSize() - insetStart - getInsetEnd();
|
|
1537
|
-
const itemSize =
|
|
1500
|
+
const itemSize = layout.$getItemSize(index);
|
|
1538
1501
|
let itemOffset = store.$getItemOffset(index);
|
|
1539
1502
|
if (sectionHeader === index) {
|
|
1540
1503
|
const lastIndex = (section + 1 < starts.length ? starts[section + 1] : trailStart) - 1;
|
|
1541
|
-
itemOffset = max(itemOffset, min(scrollOffset, store.$getItemOffset(lastIndex) +
|
|
1504
|
+
itemOffset = max(itemOffset, min(scrollOffset, store.$getItemOffset(lastIndex) + layout.$getItemSize(lastIndex) - itemSize));
|
|
1542
1505
|
}
|
|
1543
1506
|
if (itemOffset < scrollOffset) {
|
|
1544
1507
|
align = "start";
|
|
@@ -1550,7 +1513,7 @@ var scrollGridAxisToIndex = (driver, store, layout, sections, index, align, isHo
|
|
|
1550
1513
|
}
|
|
1551
1514
|
driver.$scroll(isHorizontal, () => {
|
|
1552
1515
|
const insetStart = getInsetStart();
|
|
1553
|
-
const rest =
|
|
1516
|
+
const rest = layout.$getItemSize(index) - (store.$getViewportSize() - insetStart - getInsetEnd());
|
|
1554
1517
|
return store.$getItemOffset(index) - insetStart + (align === "end" ? rest : align === "center" ? rest / 2 : 0);
|
|
1555
1518
|
});
|
|
1556
1519
|
};
|
|
@@ -1609,7 +1572,7 @@ var Virtualizer = (props) => {
|
|
|
1609
1572
|
const [isSSR, setIsSSR] = createSignal(!!ssrCount);
|
|
1610
1573
|
const layout = createListLayout(props.data.length, itemSize, cache);
|
|
1611
1574
|
const store = createVirtualStore(layout, ssrCount);
|
|
1612
|
-
const driver = createContainerDriver(store, horizontal);
|
|
1575
|
+
const driver = createContainerDriver(store, layout, horizontal);
|
|
1613
1576
|
const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
|
|
1614
1577
|
store.$subscribe(1, () => {
|
|
1615
1578
|
setRerender(store.$getStateVersion());
|
|
@@ -1650,8 +1613,8 @@ var Virtualizer = (props) => {
|
|
|
1650
1613
|
},
|
|
1651
1614
|
findItemIndex: (offset) => layout.$findIndex(offset - store.$getStartSpacerSize()),
|
|
1652
1615
|
getItemOffset: store.$getItemOffset,
|
|
1653
|
-
getItemSize:
|
|
1654
|
-
scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts),
|
|
1616
|
+
getItemSize: layout.$getItemSize,
|
|
1617
|
+
scrollToIndex: (index, opts) => scrollToIndex(driver, store, layout, index, opts),
|
|
1655
1618
|
scrollTo: (offset) => scrollTo(driver, offset),
|
|
1656
1619
|
scrollBy: (offset) => scrollBy(driver, store, offset)
|
|
1657
1620
|
});
|
|
@@ -1666,9 +1629,7 @@ var Virtualizer = (props) => {
|
|
|
1666
1629
|
});
|
|
1667
1630
|
});
|
|
1668
1631
|
createComputed(on(() => props.startMargin || 0, (value) => {
|
|
1669
|
-
|
|
1670
|
-
store.$update(6, value);
|
|
1671
|
-
}
|
|
1632
|
+
store.$update(7, value);
|
|
1672
1633
|
}));
|
|
1673
1634
|
createEffect(on(stateVersion, () => {
|
|
1674
1635
|
driver.$effect();
|
|
@@ -1676,9 +1637,7 @@ var Virtualizer = (props) => {
|
|
|
1676
1637
|
const dataSlice = createMemo(() => {
|
|
1677
1638
|
const count = props.data.length;
|
|
1678
1639
|
untrack(() => {
|
|
1679
|
-
|
|
1680
|
-
store.$update(5, [count, props.shift]);
|
|
1681
|
-
}
|
|
1640
|
+
store.$update(5, count, props.shift);
|
|
1682
1641
|
});
|
|
1683
1642
|
const items = [];
|
|
1684
1643
|
const indexes = [];
|
|
@@ -1711,7 +1670,7 @@ var Virtualizer = (props) => {
|
|
|
1711
1670
|
});
|
|
1712
1671
|
const hide = createMemo(() => {
|
|
1713
1672
|
stateVersion();
|
|
1714
|
-
return
|
|
1673
|
+
return layout.$isSizeEqual(index());
|
|
1715
1674
|
});
|
|
1716
1675
|
const children = createMemo(() => {
|
|
1717
1676
|
return untrack(() => props.children(data, index));
|
|
@@ -1778,7 +1737,7 @@ var WindowVirtualizer = (props) => {
|
|
|
1778
1737
|
const [isSSR, setIsSSR] = createSignal(!!ssrCount);
|
|
1779
1738
|
const layout = createListLayout(props.data.length, itemSize, cache);
|
|
1780
1739
|
const store = createVirtualStore(layout, ssrCount);
|
|
1781
|
-
const driver = createWindowDriver(store, horizontal);
|
|
1740
|
+
const driver = createWindowDriver(store, layout, horizontal);
|
|
1782
1741
|
const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
|
|
1783
1742
|
store.$subscribe(1, () => {
|
|
1784
1743
|
setRerender(store.$getStateVersion());
|
|
@@ -1816,8 +1775,8 @@ var WindowVirtualizer = (props) => {
|
|
|
1816
1775
|
},
|
|
1817
1776
|
findItemIndex: (offset) => layout.$findIndex(offset - store.$getStartSpacerSize()),
|
|
1818
1777
|
getItemOffset: store.$getItemOffset,
|
|
1819
|
-
getItemSize:
|
|
1820
|
-
scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts)
|
|
1778
|
+
getItemSize: layout.$getItemSize,
|
|
1779
|
+
scrollToIndex: (index, opts) => scrollToIndex(driver, store, layout, index, opts)
|
|
1821
1780
|
});
|
|
1822
1781
|
onCleanup(() => ref());
|
|
1823
1782
|
}
|
|
@@ -1835,9 +1794,7 @@ var WindowVirtualizer = (props) => {
|
|
|
1835
1794
|
const dataSlice = createMemo(() => {
|
|
1836
1795
|
const count = props.data.length;
|
|
1837
1796
|
untrack(() => {
|
|
1838
|
-
|
|
1839
|
-
store.$update(5, [count, props.shift]);
|
|
1840
|
-
}
|
|
1797
|
+
store.$update(5, count, props.shift);
|
|
1841
1798
|
});
|
|
1842
1799
|
const items = [];
|
|
1843
1800
|
for (let [i, j] = range(); i <= j; i++) {
|
|
@@ -1863,7 +1820,7 @@ var WindowVirtualizer = (props) => {
|
|
|
1863
1820
|
});
|
|
1864
1821
|
const hide = createMemo(() => {
|
|
1865
1822
|
stateVersion();
|
|
1866
|
-
return
|
|
1823
|
+
return layout.$isSizeEqual(itemIndex());
|
|
1867
1824
|
});
|
|
1868
1825
|
const children = createMemo(() => {
|
|
1869
1826
|
return untrack(() => props.children(data, itemIndex));
|
|
@@ -1954,7 +1911,7 @@ var VGrid = (props) => {
|
|
|
1954
1911
|
const spanIndex = createMemo(() => createGridSpanIndex(props.spans));
|
|
1955
1912
|
const rowStore = createVirtualStore(rowLayout);
|
|
1956
1913
|
const colStore = createVirtualStore(colLayout);
|
|
1957
|
-
const driver = createContainerGridDriver(rowStore, colStore);
|
|
1914
|
+
const driver = createContainerGridDriver(rowStore, colStore, rowLayout, colLayout);
|
|
1958
1915
|
const getStateVersion = () => rowStore.$getStateVersion() + colStore.$getStateVersion();
|
|
1959
1916
|
const [stateVersion, setRerender] = createSignal(getStateVersion());
|
|
1960
1917
|
const rerender = () => setRerender(getStateVersion());
|
|
@@ -1994,17 +1951,13 @@ var VGrid = (props) => {
|
|
|
1994
1951
|
colLayout.$setPinned(props.headerCols, props.footerCols);
|
|
1995
1952
|
const rowLength = getAxisLength(props.rows);
|
|
1996
1953
|
const colLength = getAxisLength(props.cols);
|
|
1997
|
-
|
|
1998
|
-
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
colStore.$update(5, [colLength]);
|
|
2002
|
-
}
|
|
2003
|
-
rowStore.$update(9, rowLayout.$relayout(rowSizes(), rowStore.$getVisibleOffset()));
|
|
2004
|
-
colStore.$update(9, colLayout.$relayout(colSizes(), colStore.$getVisibleOffset()));
|
|
1954
|
+
rowStore.$update(5, rowLength);
|
|
1955
|
+
colStore.$update(5, colLength);
|
|
1956
|
+
relayout(rowStore, rowLayout, rowSizes());
|
|
1957
|
+
relayout(colStore, colLayout, colSizes());
|
|
2005
1958
|
});
|
|
2006
|
-
const rowCount = createMemo(() => stateVersion() &&
|
|
2007
|
-
const colCount = createMemo(() => stateVersion() &&
|
|
1959
|
+
const rowCount = createMemo(() => stateVersion() && rowLayout.$getLength());
|
|
1960
|
+
const colCount = createMemo(() => stateVersion() && colLayout.$getLength());
|
|
2008
1961
|
const plan = createMemo(() => {
|
|
2009
1962
|
stateVersion();
|
|
2010
1963
|
return createGridPlan(rowLayout, colLayout, rowStore.$getRange(props.bufferSize), colStore.$getRange(props.bufferSize), spanIndex(), props.sectionRows, props.keepMounted, props.ariaSort);
|
|
@@ -2054,8 +2007,8 @@ var VGrid = (props) => {
|
|
|
2054
2007
|
findColIndex: colLayout.$findIndex,
|
|
2055
2008
|
getRowOffset: rowStore.$getItemOffset,
|
|
2056
2009
|
getColOffset: colStore.$getItemOffset,
|
|
2057
|
-
getRowSize:
|
|
2058
|
-
getColSize:
|
|
2010
|
+
getRowSize: rowLayout.$getItemSize,
|
|
2011
|
+
getColSize: colLayout.$getItemSize,
|
|
2059
2012
|
scrollToIndex: (opts) => gridScrollToIndex(driver, rowStore, colStore, rowLayout, colLayout, props.sectionRows, opts),
|
|
2060
2013
|
scrollTo: ({ vertical, horizontal }) => gridScrollTo(driver, vertical, horizontal),
|
|
2061
2014
|
scrollBy: ({ vertical, horizontal }) => gridScrollBy(driver, rowStore, colStore, vertical, horizontal)
|
|
@@ -2129,7 +2082,7 @@ var VMasonry = (props) => {
|
|
|
2129
2082
|
]);
|
|
2130
2083
|
const layout = createMasonryLayout(props.data.length, props.lanes, props.gap, itemSize, cache);
|
|
2131
2084
|
const store = createVirtualStore(layout);
|
|
2132
|
-
const driver = createContainerDriver(store, false);
|
|
2085
|
+
const driver = createContainerDriver(store, layout, false);
|
|
2133
2086
|
const [stateVersion, setRerender] = createSignal(store.$getStateVersion());
|
|
2134
2087
|
store.$subscribe(1, () => {
|
|
2135
2088
|
setRerender(store.$getStateVersion());
|
|
@@ -2144,7 +2097,7 @@ var VMasonry = (props) => {
|
|
|
2144
2097
|
props.onResize?.();
|
|
2145
2098
|
});
|
|
2146
2099
|
createComputed(() => {
|
|
2147
|
-
store
|
|
2100
|
+
relayout(store, layout, props.lanes, props.gap);
|
|
2148
2101
|
});
|
|
2149
2102
|
const range = createMemo((prev) => {
|
|
2150
2103
|
stateVersion();
|
|
@@ -2175,8 +2128,8 @@ var VMasonry = (props) => {
|
|
|
2175
2128
|
return store.$getViewportSize();
|
|
2176
2129
|
},
|
|
2177
2130
|
getItemOffset: store.$getItemOffset,
|
|
2178
|
-
getItemSize:
|
|
2179
|
-
scrollToIndex: (index, opts) => scrollToIndex(driver, store, index, opts),
|
|
2131
|
+
getItemSize: layout.$getItemSize,
|
|
2132
|
+
scrollToIndex: (index, opts) => scrollToIndex(driver, store, layout, index, opts),
|
|
2180
2133
|
scrollTo: (offset) => scrollTo(driver, offset),
|
|
2181
2134
|
scrollBy: (offset) => scrollBy(driver, store, offset)
|
|
2182
2135
|
});
|
|
@@ -2195,9 +2148,7 @@ var VMasonry = (props) => {
|
|
|
2195
2148
|
const dataSlice = createMemo(() => {
|
|
2196
2149
|
const count = props.data.length;
|
|
2197
2150
|
untrack(() => {
|
|
2198
|
-
|
|
2199
|
-
store.$update(5, [count]);
|
|
2200
|
-
}
|
|
2151
|
+
store.$update(5, count);
|
|
2201
2152
|
});
|
|
2202
2153
|
const items = [];
|
|
2203
2154
|
const indexes = [];
|
|
@@ -2234,7 +2185,7 @@ var VMasonry = (props) => {
|
|
|
2234
2185
|
});
|
|
2235
2186
|
const hide = createMemo(() => {
|
|
2236
2187
|
stateVersion();
|
|
2237
|
-
return
|
|
2188
|
+
return layout.$isSizeEqual(index());
|
|
2238
2189
|
});
|
|
2239
2190
|
const children = createMemo(() => {
|
|
2240
2191
|
return untrack(() => props.children(data, index));
|