Skip to content

Commit 3e3c0a8

Browse files
orefaloorefalo
committed
refactor: bug still there
1 parent e37da53 commit 3e3c0a8

File tree

12 files changed

+47
-45
lines changed

12 files changed

+47
-45
lines changed

‎src/lib/SizeAndPositionManager.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* which was forked from react-virtualized.
66
*/
77

8-
import { ALIGNMENT, type VirtualItemSize, type VirtualRange } from '.';
8+
import { ALIGNMENT, type VirtualItemSize, type VLRange } from '.';
99

1010
export default class SizeAndPositionManager {
1111
private model: Array<any>;
@@ -226,7 +226,7 @@ export default class SizeAndPositionManager {
226226
containerSize: number = 0,
227227
offset: number,
228228
windowOverPaddingCount: number
229-
): VirtualRange {
229+
): VLRange {
230230
const totalSize = this.getTotalSize();
231231

232232
if (totalSize === 0) {

‎src/lib/VirtualList.svelte‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@
3737
SCROLL_BEHAVIOR,
3838
SCROLL_CHANGE_REASON,
3939
type AfterScrollEvent,
40-
type VirtualListModel,
41-
type VirtualRangeEvent,
40+
type VLSlotSignature,
41+
type VLRangeEvent,
4242
type VirtualItemSize
4343
} from '.';
4444
@@ -93,10 +93,10 @@
9393
scrollToBehaviour?: SCROLL_BEHAVIOR;
9494
// snippets
9595
header?: Snippet;
96-
slot: Snippet<[VirtualListModel]>;
96+
slot: Snippet<[VLSlotSignature]>;
9797
footer?: Snippet;
9898
// events
99-
onVisibleRangeUpdate?: (range: VirtualRangeEvent) => void;
99+
onVisibleRangeUpdate?: (range: VLRangeEvent) => void;
100100
onAfterScroll?: (event: AfterScrollEvent) => void;
101101
class?: string;
102102
style?: string;
@@ -135,7 +135,7 @@
135135
136136
let mounted: boolean = false;
137137
let container: HTMLDivElement;
138-
let visibleItems: Array<VirtualListModel> = $state([]);
138+
let visibleItems: Array<VLSlotSignature> = $state([]);
139139
140140
let curState: VState = $state({
141141
offset:

‎src/lib/index.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ export { default as VirtualList } from './VirtualList.svelte';
55
export type SizingCalculatorFn=(index: number, item: unknown) => number
66

77
// use by the row() snippet
8-
export interface VirtualListModel {
8+
export interface VLSlotSignature {
99
// the actual item value
1010
item: any;
1111

@@ -17,14 +17,14 @@ export interface VirtualListModel {
1717
size?: number;
1818
}
1919

20-
export interface VirtualRange {
20+
export interface VLRange {
2121
// index of the first visible item
2222
start: number;
2323
// index of the last visible item
2424
end: number;
2525
}
2626

27-
export interface VirtualRangeEvent extends VirtualRange {
27+
export interface VLRangeEvent extends VLRange {
2828
type: 'range.update';
2929
}
3030

‎src/lib/new/NewPositionManager.ts‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55
* which was forked from react-virtualized.
66
*/
77

8-
import { ALIGNMENT, type SizingCalculatorFn, type VirtualRange } from '..';
8+
import { ALIGNMENT, type SizingCalculatorFn, type VLRange } from '..';
99

1010
export default class SizeAndPositionManager {
1111
private model: Array<any>;
1212

1313
// calculate the size of a given index
14-
private sizingCalculator?: SizingCalculatorFn;
14+
private sizingCalculatorFn?: SizingCalculatorFn;
1515
private estimatedSize?: number;
1616

1717
private indexToSizeAndPosition: Record<
@@ -32,14 +32,14 @@ export default class SizeAndPositionManager {
3232

3333
constructor(model: Array<any>, sizingCalculator?: SizingCalculatorFn, estimatedSize?: number) {
3434
this.model = model;
35-
this.sizingCalculator = sizingCalculator;
35+
this.sizingCalculatorFn = sizingCalculator;
3636
this.estimatedSize = estimatedSize;
3737
this.indexToSizeAndPosition = {};
3838
this.lastMeasuredIndex = -1;
3939

4040
this.checkForMismatchItemSizeAndItemCount();
4141

42-
if (!this.sizingCalculator) this.computeTotalSizeAndPositionData();
42+
if (!this.sizingCalculatorFn) this.computeTotalSizeAndPositionData();
4343
}
4444

4545
//TODO add model update
@@ -49,20 +49,20 @@ export default class SizeAndPositionManager {
4949
}
5050

5151
if (sizingCalculator !== undefined) {
52-
this.sizingCalculator = sizingCalculator;
52+
this.sizingCalculatorFn = sizingCalculator;
5353
}
5454

5555
this.checkForMismatchItemSizeAndItemCount();
5656

57-
if (this.sizingCalculator && this.totalSize !== undefined) {
57+
if (this.sizingCalculatorFn && this.totalSize !== undefined) {
5858
this.totalSize = undefined;
5959
} else {
6060
this.computeTotalSizeAndPositionData();
6161
}
6262
}
6363

6464
private checkForMismatchItemSizeAndItemCount() {
65-
if (Array.isArray(this.sizingCalculator) && this.sizingCalculator.length < this.model.length) {
65+
if (Array.isArray(this.sizingCalculatorFn) && this.sizingCalculatorFn.length < this.model.length) {
6666
throw Error(`When itemSize is an array, itemSize.length can't be smaller than itemCount`);
6767
}
6868
}
@@ -71,8 +71,8 @@ export default class SizeAndPositionManager {
7171
private getSize(index: number): number {
7272
// const { sizingCalculator: itemSize } = this;
7373

74-
if (this.sizingCalculator) {
75-
return this.sizingCalculator(index, this.model[index]);
74+
if (this.sizingCalculatorFn) {
75+
return this.sizingCalculatorFn(index, this.model[index]);
7676
}
7777

7878
//return Array.isArray(itemSize) ? itemSize[index] : itemSize;
@@ -107,7 +107,7 @@ export default class SizeAndPositionManager {
107107
throw Error(`Requested index ${index} is outside of range 0..${this.model.length}`);
108108
}
109109

110-
return this.sizingCalculator
110+
return this.sizingCalculatorFn
111111
? this.getJustInTimeSizeAndPositionForIndex(index)
112112
: this.indexToSizeAndPosition[index];
113113
}
@@ -151,7 +151,7 @@ export default class SizeAndPositionManager {
151151
private getEstimatedItemSize(): number {
152152
return (
153153
this.estimatedSize ||
154-
(typeof this.sizingCalculator === 'number' && this.sizingCalculator) ||
154+
(typeof this.sizingCalculatorFn === 'number' && this.sizingCalculatorFn) ||
155155
50
156156
);
157157
}
@@ -224,7 +224,7 @@ export default class SizeAndPositionManager {
224224
containerSize: number = 0,
225225
offset: number,
226226
windowOverPaddingCount: number
227-
): VirtualRange {
227+
): VLRange {
228228
const totalSize = this.getTotalSize();
229229

230230
if (totalSize === 0) {

‎src/lib/new/VirtualListNew.svelte‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@
3737
SCROLL_BEHAVIOR,
3838
type AfterScrollEvent,
3939
type SizingCalculatorFn,
40-
type VirtualListModel,
41-
type VirtualRangeEvent
40+
type VLSlotSignature,
41+
type VLRangeEvent
4242
} from '..';
4343
import { binarySearch } from './jshelper';
4444
import clsx from 'clsx';
@@ -113,11 +113,11 @@
113113
// snippets
114114
header?: Snippet;
115115
// size is passed when a sizingCalculator is defined
116-
vl_slot: Snippet<[VirtualListModel]>;
116+
vl_slot: Snippet<[VLSlotSignature]>;
117117
footer?: Snippet;
118118
119119
// events
120-
onVisibleRangeUpdate?: (range: VirtualRangeEvent) => void;
120+
onVisibleRangeUpdate?: (range: VLRangeEvent) => void;
121121
onAfterScroll?: (event: AfterScrollEvent) => void;
122122
123123
// css
@@ -196,11 +196,11 @@
196196
return p;
197197
});
198198
199-
const visibleItemsInfo: VirtualListModel[] = $derived.by(() => {
199+
const visibleItemsInfo: VLSlotSignature[] = $derived.by(() => {
200200
if (!items || isDisabled) {
201201
return [];
202202
}
203-
const r: VirtualListModel[] = [];
203+
const r: VLSlotSignature[] = [];
204204
for (let index = startIdx; index <= end2; index++) {
205205
console.log(index)
206206
const item = items[index];
@@ -315,11 +315,13 @@
315315
}
316316
317317
startIdx = getStart();
318+
console.log("starIdx"+startIdx)
318319
endIdx = getEnd();
320+
console.log("endIdx"+endIdx)
319321
320322
let vi0 = 0;
321323
322-
// index -> offset
324+
// holds index -> offset
323325
const runtimeSizesTemp: Record<number, number> = {};
324326
const children = !isTable ? listInner.children : listInner.querySelector('tbody')!.children;
325327
@@ -333,9 +335,9 @@
333335
}
334336
335337
const size = stl.display !== 'none' ? getOuterSize(el as HTMLElement) : 0;
336-
337338
const index = startIdx + vi0;
338339
runtimeSizesTemp[index] = (runtimeSizesTemp[index] || 0) + size;
340+
console.log("rt size "+index+" -> "+runtimeSizesTemp[index])
339341
vi0++;
340342
}
341343
@@ -413,8 +415,7 @@
413415
return !isHorizontal ? parseFloat(style.paddingTop) : parseFloat(style.paddingLeft);
414416
}
415417
416-
// scrolls the contrainer to
417-
// TODO: How is this going to work with the onscoll hook?
418+
// scrolls the contrainer to px
418419
function scrollTo(value: number) {
419420
if ('scroll' in listContainer) {
420421
const p: Record<string, any> = { behavior: scrollToBehaviour };

‎src/routes/examples/events/code.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { VirtualList, type VirtualListModel } from 'svelte-virtuallists';
2+
import { VirtualList, type VLSlotSignature } from 'svelte-virtuallists';
33
import TextArea from '$comp/TextAreaAutosize.svelte';
44
55
let val = $state('// Event name: Event params (Last event at the top)');
@@ -87,7 +87,7 @@
8787
scrollOffset={scrollOffet}
8888
onAfterScroll={handleMessage}
8989
onVisibleRangeUpdate={handleMessage}>
90-
{#snippet slot({ item, style, index }: VirtualListModel<any>)}
90+
{#snippet slot({ item, style, index }: VLSlotSignature<any>)}
9191
<div class="row" {style} class:highlighted={index === scrollToIndex}>
9292
Item #{item}
9393
</div>

‎src/routes/examples/horizontalOLD/code.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { DIRECTION, VirtualList, type VirtualListModel } from 'svelte-virtuallists';
2+
import { DIRECTION, VirtualList, type VLSlotSignature } from 'svelte-virtuallists';
33
44
interface MyItemsData {
55
text: string;
@@ -22,7 +22,7 @@
2222
model={myModel}
2323
modelCount={myModel.length}
2424
itemSize={150}>
25-
{#snippet slot({ item: _item, style, index }: VirtualListModel<any>)}
25+
{#snippet slot({ item: _item, style, index }: VLSlotSignature<any>)}
2626
<div class="col" {style}>
2727
Item #{index}
2828
</div>

‎src/routes/examples/positioning/code.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { ALIGNMENT, SCROLL_BEHAVIOR, type VirtualListModel } from '$lib';
2+
import { ALIGNMENT, SCROLL_BEHAVIOR, type VLSlotSignature } from '$lib';
33
import VirtualList from 'svelte-virtuallists/new/VirtualListNew.svelte';
44
55
const myModel = new Array(10000).fill(1).map((v, i) => {

‎src/routes/examples/variableheightOLD/code.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { VirtualList, type VirtualListModel } from 'svelte-virtuallists';
2+
import { VirtualList, type VLSlotSignature } from 'svelte-virtuallists';
33
44
const modelCount = 10000;
55
@@ -39,7 +39,7 @@
3939
width="auto"
4040
{modelCount}
4141
itemSize={rowHeights}>
42-
{#snippet slot({ item, style, index: _index }: VirtualListModel<MyItemsData>)}
42+
{#snippet slot({ item, style, index: _index }: VLSlotSignature<MyItemsData>)}
4343
<div class="row" {style}>
4444
{item.text}
4545
</div>

‎src/routes/examples/variablesizing/code.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { type VirtualListModel } from 'svelte-virtuallists';
2+
import { type VLSlotSignature } from 'svelte-virtuallists';
33
import VirtualList from 'svelte-virtuallists/new/VirtualListNew.svelte';
44
55
const myModel = new Array(10000).fill(1).map((v, i) => {
@@ -24,7 +24,7 @@
2424
<h2>Horizontal</h2>
2525

2626
<VirtualList items={myModel} style="width:100%" isHorizontal={true}>
27-
{#snippet vl_slot({ index, item, size }: VirtualListModel)}
27+
{#snippet vl_slot({ index, item, size }: VLSlotSignature)}
2828
<div style="border: 1px solid rgb(204, 204, 204); width: {size}px;">
2929
{item.text}
3030
</div>
@@ -34,7 +34,7 @@
3434
<h2>Vertical</h2>
3535

3636
<VirtualList items={myModel} style="height:600px">
37-
{#snippet vl_slot({ index, item, size }: VirtualListModel)}
37+
{#snippet vl_slot({ index, item, size }: VLSlotSignature)}
3838
<div style="border: 1px solid rgb(204, 204, 204); line-height: {size}px;">
3939
{item.text}
4040
</div>

0 commit comments

Comments
 (0)