10000 fix(template): properly calc sizes when resizeobserver adjust viewpor… · rx-angular/rx-angular@b74fafc · GitHub
[go: up one dir, main page]
Skip to content

Commit b74fafc

Browse files
hoebbelsBhoebbelsB
authored
fix(template): properly calc sizes when resizeobserver adjust viewport (#1759)
fix(template): virtual-scroll: calc sizes on resizeobserver changes. fixes #1746
1 parent 9ae21ca commit b74fafc

File tree

4 files changed

+69
-0
lines changed

4 files changed

+69
-0
lines changed

‎apps/demos/src/app/features/template/rx-virtual-for/rx-virtual-for.menu.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,8 @@ export const RX_VIRTUAL_FOR_MENU_ITEMS = [
1919
label: 'Reverse Infinite Scroll',
2020
link: 'reverse-infinite-scroll',
2121
},
22+
{
23+
label: 'Crazy Update',
24+
link: 'crazy-update',
25+
},
2226
];

‎apps/demos/src/app/features/template/rx-virtual-for/virtual-rendering/virtual-for-crazy-update.component.ts

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import { Component, signal } from '@angular/core';
2+
import {
3+
AutoSizeVirtualScrollStrategy,
4+
RxVirtualScrollViewportComponent,
5+
RxVirtualFor,
6+
} from '@rx-angular/template/experimental/virtual-scrolling';
7+
import { BehaviorSubject, Subject } from 'rxjs';
8+
9+
@Component({
10+
selector: 'app-root',
11+
standalone: true,
12+
imports: [
13+
RxVirtualFor,
14+
RxVirtualScrollViewportComponent,
15+
AutoSizeVirtualScrollStrategy,
16+
],
17+
template: `
18+
<rx-virtual-scroll-viewport autosize [tombstoneSize]="63">
19+
<div
20+
*rxVirtualFor="
21+
let item of items$;
22+
trackBy: 'id';
23+
renderCallback: renderedItems
24+
"
25+
style="width: 100%;"
26+
>
27+
<p>{{ item.name }}</p>
28+
</div>
29+
</rx-virtual-scroll-viewport>
30+
`,
31+
})
32+
export class VirtualForCrazyUpdateComponent {
33+
items = signal(
34+
Array.from({ length: 200 }).map((_item, index) => ({
35+
id: index,
36+
name: `item #${index}`,
37+
})),
38+
);
39+
items$ = new BehaviorSubject(
40+
Array.from({ length: 200 }).map((_item, index) => ({
41+
id: index,
42+
name: `item #${index}`,
43+
})),
44+
);
45+
46+
renderedItems = new Subject<any[]>();
47+
48+
constructor() {
49+
this.renderedItems.subscribe(() => console.log('Completed rendering'));
50+
51+
setTimeout(() => {
52+
this.items$.next(
53+
this.items$.getValue().filter((item) => item.id % 2 === 0),
54+
);
55+
this.items.update((items) => items.filter((item) => item.id % 2 === 0));
56+
console.log('Updating items');
57+
}, 350);
58+
}
59+
}

‎apps/demos/src/app/features/template/rx-virtual-for/virtual-rendering/virtual-for-experiments.module.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { RxIf } from '@rx-angular/template/if';
2121
import { RxLet } from '@rx-angular/template/let';
2222
import { StrategySelectModule } from '../../../../shared/debug-helper/strategy-select/index';
2323
import { ValueProvidersModule } from '../../../../shared/debug-helper/value-provider/index';
24+
import { VirtualForCrazyUpdateComponent } from './virtual-for-crazy-update.component';
2425
import { VirtualForDemoComponent } from './virtual-for-demo.component';
2526
import { VirtualForMonkeyTestComponent } from './virtual-for-monkey-test.component';
2627
import { VirtualForReverseInfiniteScrollComponent } from './virtual-for-reverse-infinite-scroll.component';
@@ -55,6 +56,10 @@ import { VirtualForCustomScrollableDemoComponent } from './virtual-for-scrollabl
5556
path: 'monkey-test',
5657
component: VirtualForMonkeyTestComponent,
5758
},
59+
{
60+
path: 'crazy-update',
61+
component: VirtualForCrazyUpdateComponent,
62+
},
5863
]),
5964
ValueProvidersModule,
6065
RxLet,

‎libs/template/experimental/virtual-scrolling/src/lib/scroll-strategies/autosize-virtual-scroll-strategy.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -780,6 +780,7 @@ export class AutoSizeVirtualScrollStrategy<
780780
const itemIndex = view.context.index;
781781
const virtualItem = this._virtualItems[itemIndex];
782782
const element = this.getElement(view);
783+
this.updateElementSize(view, itemIndex);
783784
virtualItem.position = position;
784785
this.positionElement(element, position);
785786
position += virtualItem.size;

0 commit comments

Comments
 (0)
0