ng-virtual-list 19.7.20 → 19.7.22

package/README.md

@@ -115,7 +115,7 @@ items = Array.from({ length: 100000 }, (_, i) => ({ id: i, name: `Item #${i}` })
 
 Template:
 ```html
-<ng-virtual-list class="list" direction="horizontal" [items]="horizontalItems" [bufferSize]="50"
+<ng-virtual-list class="list" direction="horizontal" [items]="horizontalItems" [bufferSize]="5" [maxBufferSize]="20"
     [itemRenderer]="horizontalItemRenderer" [itemSize]="64" [methodForSelecting]="'select'"
     [selectedIds]="2" (onSelect)="onSelect($event)" (onItemClick)="onItemClick($event)"></ng-virtual-list>
 
@@ -166,8 +166,8 @@ export class AppComponent {
 Template:
 ```html
 <ng-virtual-list class="list" direction="horizontal" [items]="horizontalGroupItems" [itemRenderer]="horizontalGroupItemRenderer"
-    [bufferSize]="50" [itemConfigMap]="horizontalGroupItemConfigMap" [itemSize]="54" [snap]="true" [methodForSelecting]="'multi-select'"
-    [selectedIds]="[3,2]" (onSelect)="onSelect($event)" (onItemClick)="onItemClick($event)"></ng-virtual-list>
+    [bufferSize]="5" [maxBufferSize]="20" [itemConfigMap]="horizontalGroupItemConfigMap" [itemSize]="54" [snap]="true"
+    methodForSelecting="multi-select" [selectedIds]="[3,2]" (onSelect)="onSelect($event)" (onItemClick)="onItemClick($event)"></ng-virtual-list>
 
 <ng-template #horizontalGroupItemRenderer let-data="data" let-config="config">
   @if (data) {
@@ -239,7 +239,7 @@ export class AppComponent {
 
 Template:
 ```html
-<ng-virtual-list class="list simple" [items]="items" [bufferSize]="50" [itemRenderer]="itemRenderer"
+<ng-virtual-list class="list simple" [items]="items" [bufferSize]="5" [maxBufferSize]="20" [itemRenderer]="itemRenderer"
   [itemSize]="40"></ng-virtual-list>
 
 <ng-template #itemRenderer let-data="data">
@@ -280,7 +280,7 @@ export class AppComponent {
 
 Template:
 ```html
-<ng-virtual-list class="list simple" [items]="groupItems" [bufferSize]="50" [itemRenderer]="groupItemRenderer"
+<ng-virtual-list class="list simple" [items]="groupItems" [bufferSize]="5" [maxBufferSize]="20" [itemRenderer]="groupItemRenderer"
     [itemConfigMap]="groupItemConfigMap" [itemSize]="40" [snap]="false"></ng-virtual-list>
 
 <ng-template #groupItemRenderer let-data="data">
@@ -307,7 +307,7 @@ Template:
 
 Template (with snapping):
 ```html
-<ng-virtual-list class="list simple" [items]="groupItems" [bufferSize]="50" [itemRenderer]="groupItemRenderer"
+<ng-virtual-list class="list simple" [items]="groupItems" [bufferSize]="5" [maxBufferSize]="20" [itemRenderer]="groupItemRenderer"
     [itemConfigMap]="groupItemConfigMap" [itemSize]="40" [snap]="true"></ng-virtual-list>
 
 <ng-template #groupItemRenderer let-data="data">
@@ -372,7 +372,7 @@ Template
   <button class="scroll-to__button" (click)="onButtonScrollToIdClickHandler($event)">Scroll</button>
 </div>
 
-<ng-virtual-list #virtualList class="list" [items]="items" [itemRenderer]="itemRenderer" [bufferSize]="50"
+<ng-virtual-list #virtualList class="list" [items]="items" [itemRenderer]="itemRenderer" [bufferSize]="5" [maxBufferSize]="20"
   [itemSize]="40"></ng-virtual-list>
 
 <ng-template #itemRenderer let-data="data">
@@ -426,7 +426,7 @@ Virtual list with height-adjustable elements.
 
 Template
 ```html
-<ng-virtual-list #dynamicList class="list" [items]="groupDynamicItems" [itemRenderer]="groupItemRenderer" [bufferSize]="10"
+<ng-virtual-list #dynamicList class="list" [items]="groupDynamicItems" [itemRenderer]="groupItemRenderer" [bufferSize]="5" [maxBufferSize]="20"
       [itemConfigMap]="groupDynamicItemConfigMap" [dynamicSize]="true" [snap]="true"></ng-virtual-list>
 
 <ng-template #groupItemRenderer let-data="data">
@@ -565,7 +565,7 @@ List items are encapsulated in shadowDOM, so to override default styles you need
 Selecting even elements:
 
 ```html
-<ng-virtual-list class="list" direction="horizontal" [items]="horizontalItems" [bufferSize]="5"
+<ng-virtual-list class="list" direction="horizontal" [items]="horizontalItems" [bufferSize]="5" [maxBufferSize]="20"
   [itemRenderer]="horizontalItemRenderer" [itemSize]="54"></ng-virtual-list>
 
 <ng-template #horizontalItemRenderer let-data="data" let-config="config">

package/fesm2022/ng-virtual-list.mjs

@@ -2,7 +2,7 @@ import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
 import { Injectable, inject, signal, ElementRef, ChangeDetectionStrategy, Component, viewChild, output, input, ViewContainerRef, ViewChild, ViewEncapsulation } from '@angular/core';
-import { Subject, tap, fromEvent, combineLatest, map, filter, distinctUntilChanged, skip, switchMap, of } from 'rxjs';
+import { Subject, tap, fromEvent, combineLatest, map, filter, distinctUntilChanged, switchMap, of } from 'rxjs';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';
 
@@ -1259,7 +1259,11 @@ const bufferInterpolation = (currentBufferValue, array, value, extra) => {
     return Math.ceil(buffer / l);
 };
 
-const TRACK_BOX_CHANGE_EVENT_NAME = 'change';
+var TrackBoxEvents;
+(function (TrackBoxEvents) {
+    TrackBoxEvents["CHANGE"] = "change";
+    TrackBoxEvents["RESET"] = "reset";
+})(TrackBoxEvents || (TrackBoxEvents = {}));
 var ItemDisplayMethods;
 (function (ItemDisplayMethods) {
     ItemDisplayMethods[ItemDisplayMethods["CREATE"] = 0] = "CREATE";
@@ -1267,7 +1271,7 @@ var ItemDisplayMethods;
     ItemDisplayMethods[ItemDisplayMethods["DELETE"] = 2] = "DELETE";
     ItemDisplayMethods[ItemDisplayMethods["NOT_CHANGED"] = 3] = "NOT_CHANGED";
 })(ItemDisplayMethods || (ItemDisplayMethods = {}));
-const DEFAULT_BUFFER_EXTREMUM_THRESHOLD = 15, DEFAULT_MAX_BUFFER_SEQUENCE_LENGTH = 30, DEFAULT_RESET_BUFFER_SIZE_TIMEOUT = 10000;
+const DEFAULT_BUFFER_EXTREMUM_THRESHOLD = 15, DEFAULT_MAX_BUFFER_SEQUENCE_LENGTH = 30, DEFAULT_RESET_BUFFER_SIZE_TIMEOUT = 10000, IS_NEW = 'isNew';
 /**
  * An object that performs tracking, calculations and caching.
  * @link https://github.com/DjonnyX/ng-virtual-list/blob/19.x/projects/ng-virtual-list/src/lib/utils/trackBox.ts
@@ -1343,7 +1347,7 @@ class TrackBox extends CacheMap {
     get crudDetected() { return this._crudDetected; }
     fireChangeIfNeed() {
         if (this.changesDetected()) {
-            this.dispatch(TRACK_BOX_CHANGE_EVENT_NAME, this._version);
+            this.dispatch(TrackBoxEvents.CHANGE, this._version);
         }
     }
     _previousTotalSize = 0;
@@ -1359,7 +1363,7 @@ class TrackBox extends CacheMap {
     _maxBufferSize = this._defaultBufferSize;
     _resetBufferSizeTimeout = DEFAULT_RESET_BUFFER_SIZE_TIMEOUT;
     _resetBufferSizeTimer;
-    isInit = true;
+    isReseted = true;
     lifeCircle() {
         this.fireChangeIfNeed();
         this.lifeCircleDo();
@@ -1372,11 +1376,19 @@ class TrackBox extends CacheMap {
             console.warn('Attention! The collection must be immutable.');
             return;
         }
-        if (this.isInit && !(!this._previousCollection || this._previousCollection.length === 0)) {
-            this.isInit = false;
+        let reseted = this.isReseted;
+        if (reseted) {
+            if (!(!this._previousCollection || this._previousCollection.length === 0)) {
+                reseted = false;
+            }
+        }
+        if (!reseted && (!currentCollection || currentCollection.length === 0)) {
+            reseted = true;
         }
+        this.isReseted = reseted;
+        this.dispatch(TrackBoxEvents.RESET, reseted);
         this.updateCache(this._previousCollection, currentCollection, itemSize);
-        this._previousCollection = currentCollection;
+        this._previousCollection = [...(currentCollection || [])];
     }
     /**
      * Update the cache of items from the list
@@ -1599,7 +1611,7 @@ class TrackBox extends CacheMap {
             leftItemsOffset = rightItemsOffset = bufferSize;
         }
         let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, leftSizeOfAddedItems = 0, leftSizeOfUpdatedItems = 0, leftSizeOfDeletedItems = 0, itemById = undefined, itemByIdPos = 0, targetDisplayItemIndex = -1, isTargetInOverscroll = false, actualScrollSize = itemByIdPos, totalSize = 0, startIndex, isFromItemIdFound = false, deltaFromStartCreation = 0;
-        let isNew = !this.isInit && (scrollSize === 0);
+        let isNew = !this.isReseted && (scrollSize === 0);
         // If the list is dynamic or there are new elements in the collection, then it switches to the long algorithm.
         if (dynamicSize) {
             let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
@@ -1610,7 +1622,7 @@ class TrackBox extends CacheMap {
                     const bounds = map.get(id) || { width: typicalItemSize, height: typicalItemSize };
                     componentSize = bounds[sizeProperty];
                     itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
-                    const isItemNew = bounds.isNew ?? this._isLazy;
+                    const isItemNew = bounds?.[IS_NEW] ?? this._isLazy;
                     if (!isItemNew && (!this._isLazy || !itemConfigMap[collection[0].id]?.sticky)) {
                         isNew = false;
                     }
@@ -1748,7 +1760,7 @@ class TrackBox extends CacheMap {
                     if (map.has(id)) {
                         const bounds = map.get(id);
                         itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
-                        const isItemNew = bounds.isNew ?? this._isLazy;
+                        const isItemNew = bounds?.[IS_NEW] ?? this._isLazy;
                         if (!isItemNew && (!this._isLazy || !itemConfigMap[collection[0].id]?.sticky)) {
                             isNew = false;
                         }
@@ -1866,7 +1878,7 @@ class TrackBox extends CacheMap {
                             height: isVertical ? size : normalizedItemHeight,
                             delta: 0,
                         }, config = {
-                            new: cache.isNew === true,
+                            new: cache?.[IS_NEW] === true,
                             odd: isOdd,
                             even: !isOdd,
                             isVertical,
@@ -1908,7 +1920,7 @@ class TrackBox extends CacheMap {
                             height: h,
                             delta: 0,
                         }, config = {
-                            new: cache.isNew === true,
+                            new: cache?.[IS_NEW] === true,
                             odd: isOdd,
                             even: !isOdd,
                             isVertical,
@@ -1949,7 +1961,7 @@ class TrackBox extends CacheMap {
                         height: isVertical ? size : normalizedItemHeight,
                         delta: 0,
                     }, config = {
-                        new: cache.isNew === true,
+                        new: cache?.[IS_NEW] === true,
                         odd: isOdd,
                         even: !isOdd,
                         isVertical,
@@ -2658,10 +2670,25 @@ class NgVirtualListComponent {
         this._cacheVersion.set(v);
     };
     _cacheVersion = signal(-1);
+    _isResetedReachStart = true;
+    _onTrackBoxResetHandler = (v) => {
+        if (v) {
+            this._isResetedReachStart = true;
+            const container = this._container()?.nativeElement;
+            if (container) {
+                const params = {
+                    [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: 0,
+                    behavior: BEHAVIOR_INSTANT,
+                };
+                container.scrollTo(params);
+            }
+        }
+    };
     constructor() {
         NgVirtualListComponent.__nextId = NgVirtualListComponent.__nextId + 1 === Number.MAX_SAFE_INTEGER
             ? 0 : NgVirtualListComponent.__nextId + 1;
         this._id = NgVirtualListComponent.__nextId;
+        this._trackBox.addEventListener(TrackBoxEvents.RESET, this._onTrackBoxResetHandler);
         this._service.initialize(this._trackBox);
         this._service.itemToFocus = this.itemToFocus;
         this._initialized = signal(false);
@@ -2674,12 +2701,13 @@ class NgVirtualListComponent {
             this._service.listElement = v.nativeElement;
         })).subscribe();
         const $trackBy = toObservable(this.trackBy), $selectByClick = toObservable(this.selectByClick), $collapseByClick = toObservable(this.collapseByClick), $isScrollStart = toObservable(this._isScrollStart), $isScrollFinished = toObservable(this._isScrollFinished);
-        $isScrollStart.pipe(takeUntilDestroyed(), distinctUntilChanged(), skip(1), tap(v => {
-            if (v) {
+        $isScrollStart.pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(v => {
+            if (v && !this._isResetedReachStart) {
                 this.onScrollReachStart.emit();
             }
+            this._isResetedReachStart = false;
         })).subscribe();
-        $isScrollFinished.pipe(takeUntilDestroyed(), distinctUntilChanged(), skip(1), tap(v => {
+        $isScrollFinished.pipe(takeUntilDestroyed(), distinctUntilChanged(), tap(v => {
             if (v) {
                 this.onScrollReachEnd.emit();
             }
@@ -2774,9 +2802,11 @@ class NgVirtualListComponent {
             this.resetBoundsSize(isVertical, totalSize);
             this.createDisplayComponentsIfNeed(displayItems);
             this.tracking();
-            const scrollLength = (this._isVertical ? this._container()?.nativeElement.scrollHeight ?? 0 : this._container()?.nativeElement.scrollWidth) ?? 0, actualScrollLength = scrollLength === 0 ? 0 : scrollLength - (this._isVertical ? height : width), scrollPosition = actualScrollSize + this._trackBox.delta;
-            this._isScrollStart.set(scrollPosition === 0);
-            this._isScrollFinished.set(scrollPosition === actualScrollLength);
+            const scrollLength = (this._isVertical ? this._container()?.nativeElement.scrollHeight ?? 0 : this._container()?.nativeElement.scrollWidth) ?? 0, actualScrollLength = scrollLength === 0 ? 0 : Math.round(scrollLength - (this._isVertical ? height : width)), scrollPosition = actualScrollSize + this._trackBox.delta;
+            if (actualScrollLength > 0) {
+                this._isScrollStart.set(scrollPosition === 0);
+                this._isScrollFinished.set(scrollPosition === actualScrollLength);
+            }
             if (this._isSnappingMethodAdvanced) {
                 this.updateRegularRenderer();
             }
@@ -2845,13 +2875,13 @@ class NgVirtualListComponent {
     }
     listenCacheChangesIfNeed(value) {
         if (value) {
-            if (!this._trackBox.hasEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler)) {
-                this._trackBox.addEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler);
+            if (!this._trackBox.hasEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler)) {
+                this._trackBox.addEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler);
             }
         }
         else {
-            if (this._trackBox.hasEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler)) {
-                this._trackBox.removeEventListener(TRACK_BOX_CHANGE_EVENT_NAME, this._onTrackBoxChangeHandler);
+            if (this._trackBox.hasEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler)) {
+                this._trackBox.removeEventListener(TrackBoxEvents.CHANGE, this._onTrackBoxChangeHandler);
             }
         }
     }