ng-virtual-list 16.0.3 → 16.0.4

package/fesm2022/ng-virtual-list.mjs

@@ -3,7 +3,7 @@ import { Component, ChangeDetectionStrategy, EventEmitter as EventEmitter$1, Vie
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { BehaviorSubject, filter, map, tap, combineLatest, distinctUntilChanged, debounceTime, switchMap, of } from 'rxjs';
+import { BehaviorSubject, filter, map, tap, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
 
 /**
  * Axis of the arrangement of virtual list elements.
@@ -32,6 +32,7 @@ const DEFAULT_DYNAMIC_SIZE = false;
 const TRACK_BY_PROPERTY_NAME = 'id';
 const DEFAULT_DIRECTION = Directions.VERTICAL;
 const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
+const MAX_SCROLL_TO_ITERATIONS = 5;
 // presets
 const BEHAVIOR_AUTO = 'auto';
 const BEHAVIOR_INSTANT = 'instant';
@@ -411,6 +412,7 @@ class EventEmitter {
     }
 }
 
+const MAX_SCROLL_DIRECTION_POOL = 10, CLEAR_SCROLL_DIRECTION_TO = 0;
 /**
  * Cache map.
  * Emits a change event on each mutation.
@@ -426,12 +428,51 @@ class CacheMap extends EventEmitter {
     get delta() {
         return this._delta;
     }
+    _deltaDirection = 1;
+    set deltaDirection(v) {
+        this._deltaDirection = v;
+        this._scrollDirection = this.calcScrollDirection(v);
+    }
+    get deltaDirection() {
+        return this._deltaDirection;
+    }
+    _scrollDirectionCache = [];
+    _scrollDirection = 1;
+    get scrollDirection() {
+        return this._scrollDirection;
+    }
     get version() {
         return this._version;
     }
+    _clearScrollDirectionDebounce = debounce(() => {
+        while (this._scrollDirectionCache.length > CLEAR_SCROLL_DIRECTION_TO) {
+            this._scrollDirectionCache.shift();
+        }
+    }, 10);
     constructor() {
         super();
     }
+    clearScrollDirectionCache() {
+        this._clearScrollDirectionDebounce.execute();
+    }
+    calcScrollDirection(v) {
+        while (this._scrollDirectionCache.length >= MAX_SCROLL_DIRECTION_POOL) {
+            this._scrollDirectionCache.shift();
+        }
+        this._scrollDirectionCache.push(v);
+        const dict = { [-1]: 0, [0]: 0, [1]: 0 };
+        for (let i = 0, l = this._scrollDirectionCache.length; i < l; i++) {
+            const dir = this._scrollDirectionCache[i];
+            dict[dir] += 1;
+        }
+        if (dict[-1] > dict[1]) {
+            return -1;
+        }
+        else if (dict[1] > dict[-1]) {
+            return 1;
+        }
+        return -1;
+    }
     bumpVersion() {
         this._version = this._version === Number.MAX_SAFE_INTEGER ? 0 : this._version + 1;
     }
@@ -506,12 +547,12 @@ class TrackBox extends CacheMap {
         this._debounceChanges.execute(this._version);
     }
     getItemPosition(id, stickyMap, options) {
-        const opt = { fromItemId: id, stickyMap, scrollDirection: undefined, ...options };
+        const opt = { fromItemId: id, stickyMap, ...options };
         const { scrollSize } = this.recalculateMetrics(opt);
         return scrollSize;
     }
     updateCollection(items, stickyMap, options) {
-        const opt = { stickyMap, scrollDirection: undefined, ...options };
+        const opt = { stickyMap, ...options };
         this.cacheElements();
         const metrics = this.recalculateMetrics({
             ...opt,
@@ -520,14 +561,35 @@ class TrackBox extends CacheMap {
         const displayItems = this.generateDisplayCollection(items, stickyMap, metrics);
         return { displayItems, totalSize: metrics.totalSize, delta: metrics.delta };
     }
+    getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical) {
+        const sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME;
+        let offset = 0, num = 0;
+        for (let j = collection.length - 1; j >= i; j--) {
+            const item = collection[j];
+            let itemSize = 0;
+            if (map.has(item.id)) {
+                const bounds = map.get(item.id);
+                itemSize = bounds ? bounds[sizeProperty] : typicalItemSize;
+            }
+            else {
+                itemSize = typicalItemSize;
+            }
+            offset += itemSize;
+            num++;
+            if (offset > size) {
+                return { num: 0, offset };
+            }
+        }
+        return { num, offset };
+    }
     /**
      * Calculates list metrics
      */
     recalculateMetrics(options) {
-        const { scrollDirection = 0, fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, stickyMap } = options;
-        const { width, height } = bounds, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, size = isVertical ? height : width, totalLength = collection.length, typicalItemSize = itemSize, w = isVertical ? width : typicalItemSize, h = isVertical ? typicalItemSize : height, totalSize = dynamicSize ? this.getBoundsFromCache(collection, typicalItemSize, isVertical) : totalLength * typicalItemSize, snippedPos = Math.floor(scrollSize), leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
+        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, stickyMap } = options;
+        const { width, height } = bounds, sizeProperty = isVertical ? HEIGHT_PROP_NAME : WIDTH_PROP_NAME, size = isVertical ? height : width, totalLength = collection.length, typicalItemSize = itemSize, w = isVertical ? width : typicalItemSize, h = isVertical ? typicalItemSize : height, snippedPos = Math.floor(scrollSize), leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
             || (typeof fromItemId === 'string' && fromItemId > '-1');
-        let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, itemById = undefined, itemByIdPos = 0, lastDisplayItemId = undefined, actualScrollSize = itemByIdPos, fullHeight = 0, startIndex;
+        let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, itemById = undefined, itemByIdPos = 0, lastDisplayItemId = undefined, actualScrollSize = itemByIdPos, totalSize = 0, startIndex;
         if (dynamicSize) {
             let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
             for (let i = 0, l = collection.length; i < l; i++) {
@@ -540,6 +602,7 @@ class TrackBox extends CacheMap {
                 else {
                     componentSize = typicalItemSize;
                 }
+                totalSize += componentSize;
                 if (isFromId) {
                     if (itemById === undefined) {
                         if (stickyMap && stickyMap[collectionItem.id] > 0) {
@@ -547,13 +610,18 @@ class TrackBox extends CacheMap {
                             stickyCollectionItem = collectionItem;
                         }
                         if (collectionItem.id === fromItemId) {
-                            itemById = collectionItem;
-                            itemByIdPos = y;
                             if (stickyCollectionItem && stickyMap && stickyMap[stickyCollectionItem.id] > 0) {
-                                if (!stickyMap[fromItemId]) {
-                                    leftHiddenItemsWeight += stickyComponentSize;
+                                const { num } = this.getElementNumToEnd(i, collection, map, typicalItemSize, size, isVertical);
+                                if (num > 0) {
+                                    y -= size - componentSize;
+                                }
+                                else {
+                                    y -= stickyComponentSize;
+                                    leftHiddenItemsWeight -= stickyComponentSize;
                                 }
                             }
+                            itemById = collectionItem;
+                            itemByIdPos = y;
                         }
                         else {
                             leftItemsWeights.push(componentSize);
@@ -586,7 +654,6 @@ class TrackBox extends CacheMap {
                 }
                 y += componentSize;
             }
-            fullHeight = y;
             if (itemsFromStartToScrollEnd === -1) {
                 itemsFromStartToScrollEnd = 0;
             }
@@ -612,12 +679,12 @@ class TrackBox extends CacheMap {
             rightItemsWeight = rightItemLength * typicalItemSize,
                 leftHiddenItemsWeight = itemsFromStartToScrollEnd * typicalItemSize,
                 totalItemsToDisplayEndWeight = itemsFromStartToDisplayEnd * typicalItemSize;
-            actualScrollSize = scrollSize,
-                fullHeight = totalLength * typicalItemSize;
+            actualScrollSize = scrollSize;
+            totalSize = totalLength * typicalItemSize;
         }
         startIndex = Math.min(itemsFromStartToScrollEnd - leftItemLength, totalLength > 0 ? totalLength - 1 : 0);
-        const itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = fullHeight - this._previouseFullHeigh;
-        if (scrollDirection === -1) {
+        const itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = totalSize - this._previouseFullHeigh;
+        if (this.scrollDirection === -1) {
             this._delta += delta;
         }
         const metrics = {
@@ -650,13 +717,17 @@ class TrackBox extends CacheMap {
             totalSize,
             typicalItemSize,
         };
-        if (scrollDirection !== 0) {
-            this._previouseFullHeigh = fullHeight;
-        }
+        this._previouseFullHeigh = totalSize;
         return metrics;
     }
-    clearDelta() {
+    clearDeltaDirection() {
+        this.clearScrollDirectionCache();
+    }
+    clearDelta(clearDirectionDetector = false) {
         this._delta = 0;
+        if (clearDirectionDetector) {
+            this.clearScrollDirectionCache();
+        }
     }
     generateDisplayCollection(items, stickyMap, metrics) {
         const { 
@@ -980,27 +1051,20 @@ class NgVirtualListComponent {
     }
     ;
     get itemsOffset() { return this._$itemsOffset.getValue(); }
-    _scrollToTimeout;
     _isVertical = this.getIsVertical();
     _displayComponents = [];
     _$bounds = new BehaviorSubject(null);
     _$scrollSize = new BehaviorSubject(0);
     _resizeObserver = null;
-    /**
-     * only dynamic
-     */
-    _$scrolledItemId = new BehaviorSubject(undefined);
     _onResizeHandler = () => {
         this._$bounds.next(this._container?.nativeElement?.getBoundingClientRect() ?? null);
     };
-    _scrollDirection = 0;
     _onScrollHandler = (e) => {
-        this._$scrolledItemId.next(undefined);
         const container = this._container?.nativeElement;
         if (container) {
             const dynamicSize = this.dynamicSize, delta = this._trackBox.delta, scrollSize = (this._isVertical ? container.scrollTop : container.scrollLeft), previouseScrollSize = this._$scrollSize.getValue();
             let actualScrollSize = scrollSize;
-            this._scrollDirection = previouseScrollSize > scrollSize ? -1 : 1;
+            this._trackBox.deltaDirection = previouseScrollSize > scrollSize ? -1 : 1;
             if (dynamicSize && delta !== 0) {
                 actualScrollSize = scrollSize + delta;
                 const params = {
@@ -1014,7 +1078,7 @@ class NgVirtualListComponent {
                 }
             }
             this._$scrollSize.next(actualScrollSize);
-            this.onScroll.emit(actualScrollSize);
+            this.onScroll.emit({ scrollSize: actualScrollSize, direction: this._trackBox.scrollDirection });
         }
     };
     scrollImmediately(container, params) {
@@ -1041,9 +1105,11 @@ class NgVirtualListComponent {
             container.nativeElement.removeEventListener(SCROLL_END, this._scrollImmediatelyHandler);
         }
     }
-    _onScrollEndHandler = (e, fireEvent = true) => {
+    _onScrollEndHandler = (e) => {
         const container = this._container;
         if (container) {
+            this._trackBox.clearDelta();
+            this._trackBox.clearDeltaDirection();
             const itemSize = this.itemSize, snapToItem = this.snapToItem, dynamicSize = this.dynamicSize, delta = this._trackBox.delta, scrollSize = (this._isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft);
             let actualScrollSize = scrollSize;
             if (dynamicSize && delta !== 0) {
@@ -1053,7 +1119,6 @@ class NgVirtualListComponent {
                         [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
                         behavior: BEHAVIOR_INSTANT
                     };
-                    this._trackBox.clearDelta();
                     this._$scrollSize.next(actualScrollSize);
                     container.nativeElement.scroll(params);
                     return;
@@ -1071,9 +1136,7 @@ class NgVirtualListComponent {
                 }
             }
             this._$scrollSize.next(actualScrollSize);
-            if (fireEvent) {
-                this.onScrollEnd.emit(actualScrollSize);
-            }
+            this.onScroll.emit({ scrollSize: actualScrollSize, direction: this._trackBox.scrollDirection });
         }
     };
     _$initialized = new BehaviorSubject(false);
@@ -1096,7 +1159,7 @@ class NgVirtualListComponent {
         this._$initialized = new BehaviorSubject(false);
         this.$initialized = this._$initialized.asObservable();
         this._trackBox.displayComponents = this._displayComponents;
-        const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = this.$itemsOffset.pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = this.$stickyMap.pipe(map(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $cacheVersion = this.$cacheVersion, $scrolledItemId = this._$scrolledItemId.asObservable();
+        const $bounds = this._$bounds.asObservable().pipe(filter(b => !!b)), $items = this.$items.pipe(map(i => !i ? [] : i)), $scrollSize = this._$scrollSize.asObservable(), $itemSize = this.$itemSize.pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = this.$itemsOffset.pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = this.$stickyMap.pipe(map(v => !v ? {} : v)), $snap = this.$snap, $isVertical = this.$direction.pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = this.$dynamicSize, $cacheVersion = this.$cacheVersion;
         $isVertical.pipe(takeUntilDestroyed(), tap(v => {
             this._isVertical = v;
             const el = this._elementRef.nativeElement;
@@ -1105,33 +1168,21 @@ class NgVirtualListComponent {
         $dynamicSize.pipe(takeUntilDestroyed(), tap(dynamicSize => {
             this.listenCacheChangesIfNeed(dynamicSize);
         })).subscribe();
-        combineLatest([this.$initialized, $scrolledItemId, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
+        combineLatest([this.$initialized, $bounds, $items, $stickyMap, $scrollSize, $itemSize,
             $itemsOffset, $snap, $isVertical, $dynamicSize, $cacheVersion,
-        ]).pipe(takeUntilDestroyed(), distinctUntilChanged(), debounceTime(0), filter(([initialized]) => !!initialized), switchMap(([, scrolledItemId, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, isVertical, dynamicSize, cacheVersion,]) => {
+        ]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, isVertical, dynamicSize, cacheVersion,]) => {
             const { width, height } = bounds;
             let actualScrollSize = scrollSize;
             const opts = {
                 bounds: { width, height }, collection: items, dynamicSize, isVertical, itemSize,
-                itemsOffset, scrollSize: scrollSize, snap, fromItemId: scrolledItemId,
+                itemsOffset, scrollSize: scrollSize, snap,
             };
-            if (dynamicSize && scrolledItemId !== undefined) {
-                const scrollSize = this._trackBox.getItemPosition(scrolledItemId, stickyMap, { ...opts, scrollSize: actualScrollSize });
-                actualScrollSize = scrollSize;
-                this._$scrollSize.next(actualScrollSize);
-            }
-            const scrollDirection = this._scrollDirection, { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
-                ...opts, scrollSize: actualScrollSize, scrollDirection
+            const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
+                ...opts, scrollSize: actualScrollSize,
             });
             this.resetBoundsSize(isVertical, totalSize);
             this.createDisplayComponentsIfNeed(displayItems);
             this.tracking();
-            if (dynamicSize && scrolledItemId !== undefined) {
-                const container = this._container;
-                if (container) {
-                    const params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior: BEHAVIOR_AUTO };
-                    this.scrollImmediately(container, params);
-                }
-            }
             return of(displayItems);
         })).subscribe();
         combineLatest([this.$initialized, this.$itemRenderer]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, itemRenderer]) => {
@@ -1207,6 +1258,14 @@ class NgVirtualListComponent {
      * Behavior accepts the values ​​"auto", "instant" and "smooth".
      */
     scrollTo(id, behavior = BEHAVIOR_AUTO) {
+        this.scrollToExecutor(id, behavior);
+    }
+    _scrollToRepeatExecutionTimeout;
+    clearScrollToRepeatExecutionTimeout() {
+        clearTimeout(this._scrollToRepeatExecutionTimeout);
+    }
+    scrollToExecutor(id, behavior, iteration = 0) {
+        this.clearScrollToRepeatExecutionTimeout();
         const items = this.items;
         if (!items || !items.length) {
             return;
@@ -1218,24 +1277,35 @@ class NgVirtualListComponent {
                     container.nativeElement.removeEventListener(SCROLL, this._onScrollHandler);
                     container.nativeElement.removeEventListener(SCROLL_END, this._onScrollEndHandler);
                 }
-                const { width, height } = this._$bounds.getValue() || { width: 0, height: 0 }, stickyMap = this.stickyMap, items = this.items, opts = {
+                const { width, height } = this._$bounds.getValue() || { width: 0, height: 0 }, stickyMap = this.stickyMap, items = this.items, isVertical = this._isVertical, opts = {
                     bounds: { width, height }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
-                    itemsOffset: this.itemsOffset, scrollSize: this._isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft,
+                    itemsOffset: this.itemsOffset, scrollSize: isVertical ? container.nativeElement.scrollTop : container.nativeElement.scrollLeft,
                     snap: this.snap, fromItemId: id,
-                }, scrollSize = this._trackBox.getItemPosition(id, stickyMap, opts), params = { [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
-                this._$scrolledItemId.next(id);
+                }, scrollSize = this._trackBox.getItemPosition(id, stickyMap, opts), params = { [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize, behavior };
                 this._$scrollSize.next(scrollSize);
                 if (container) {
                     const handler = () => {
                         if (container) {
                             container.nativeElement.removeEventListener(SCROLL_END, handler);
-                            clearTimeout(this._scrollToTimeout);
-                            this._scrollToTimeout = setTimeout(() => {
+                            const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
+                                ...opts, scrollSize, fromItemId: id,
+                            });
+                            this.resetBoundsSize(isVertical, totalSize);
+                            this.createDisplayComponentsIfNeed(displayItems);
+                            this.tracking();
+                            const _scrollSize = this._trackBox.getItemPosition(id, stickyMap, { ...opts, scrollSize, fromItemId: id });
+                            if (scrollSize < _scrollSize && iteration < MAX_SCROLL_TO_ITERATIONS) {
+                                this.clearScrollToRepeatExecutionTimeout();
+                                this._scrollToRepeatExecutionTimeout = setTimeout(() => {
+                                    this.scrollToExecutor(id, BEHAVIOR_INSTANT, iteration + 1);
+                                });
+                            }
+                            else {
+                                this._$scrollSize.next(scrollSize);
+                                this.onScroll.emit({ scrollSize, direction: this._trackBox.scrollDirection });
                                 container.nativeElement.addEventListener(SCROLL, this._onScrollHandler);
                                 container.nativeElement.addEventListener(SCROLL_END, this._onScrollEndHandler);
-                            }, 100);
-                            this.listenCacheChangesIfNeed(dynamicSize);
-                            this.onScroll.emit(scrollSize);
+                            }
                         }
                     };
                     container.nativeElement.addEventListener(SCROLL_END, handler);
@@ -1264,9 +1334,7 @@ class NgVirtualListComponent {
         }
     }
     ngOnDestroy() {
-        if (this._scrollToTimeout) {
-            clearTimeout(this._scrollToTimeout);
-        }
+        this.clearScrollToRepeatExecutionTimeout();
         if (this._trackBox) {
             this._trackBox.dispose();
         }