ng-virtual-list 19.1.28 → 19.1.30

package/fesm2022/ng-virtual-list.mjs

@@ -28,7 +28,6 @@ const DEFAULT_ITEMS_OFFSET = 2;
 const DEFAULT_LIST_SIZE = 400;
 const DEFAULT_SNAP = false;
 const DEFAULT_ENABLED_BUFFER_OPTIMIZATION = false;
-const DEFAULT_SNAP_TO_ITEM = false;
 const DEFAULT_DYNAMIC_SIZE = false;
 const TRACK_BY_PROPERTY_NAME = 'id';
 const DEFAULT_DIRECTION = Directions.VERTICAL;
@@ -112,8 +111,8 @@ class NgVirtualListItemComponent {
             ? 0 : NgVirtualListItemComponent.__nextId + 1;
     }
     getBounds() {
-        const el = this._elementRef.nativeElement, { width, height, left, top } = el.getBoundingClientRect();
-        return { width, height, x: left, y: top };
+        const el = this._elementRef.nativeElement, { width, height } = el.getBoundingClientRect();
+        return { width, height };
     }
     show() {
         const styles = this._elementRef.nativeElement.style;
@@ -397,6 +396,33 @@ class EventEmitter {
     }
 }
 
+class CMap {
+    _dict = {};
+    constructor(dict) {
+        if (dict) {
+            this._dict = { ...dict._dict };
+        }
+    }
+    get(key) {
+        const k = String(key);
+        return this._dict[k];
+    }
+    set(key, value) {
+        const k = String(key);
+        this._dict[k] = value;
+        return this;
+    }
+    has(key) {
+        return this._dict.hasOwnProperty(String(key));
+    }
+    delete(key) {
+        const k = String(key);
+        delete this._dict[k];
+    }
+    clear() {
+        this._dict = {};
+    }
+}
 const MAX_SCROLL_DIRECTION_POOL = 50, CLEAR_SCROLL_DIRECTION_TO = 10;
 /**
  * Cache map.
@@ -406,8 +432,8 @@ const MAX_SCROLL_DIRECTION_POOL = 50, CLEAR_SCROLL_DIRECTION_TO = 10;
  * @email djonnyx@gmail.com
  */
 class CacheMap extends EventEmitter {
-    _map = new Map();
-    _snapshot = new Map();
+    _map = new CMap();
+    _snapshot = new CMap();
     _version = 0;
     _delta = 0;
     get delta() {
@@ -491,11 +517,8 @@ class CacheMap extends EventEmitter {
     get(id) {
         return this._map.get(id);
     }
-    forEach(callbackfn, thisArg) {
-        return this._map.forEach(callbackfn, thisArg);
-    }
     snapshot() {
-        this._snapshot = new Map(this._map);
+        this._snapshot = new CMap(this._map);
     }
     dispose() {
         super.dispose();
@@ -560,10 +583,16 @@ class TrackBox extends CacheMap {
         this.dispatch(TRACK_BOX_CHANGE_EVENT_NAME, version);
     };
     _previousCollection;
+    _deletedItemsMap = {};
+    _crudDetected = false;
+    get crudDetected() { return this._crudDetected; }
     _debounceChanges = debounce(this._fireChanges, 0);
     fireChange() {
         this._debounceChanges.execute(this._version);
     }
+    _previousTotalSize = 0;
+    _scrollDelta = 0;
+    get scrollDelta() { return this._scrollDelta; }
     /**
      * Scans the collection for deleted items and flushes the deleted item cache.
      */
@@ -579,11 +608,13 @@ class TrackBox extends CacheMap {
      * Update the cache of items from the list
      */
     updateCache(previousCollection, currentCollection, itemSize) {
+        let crudDetected = false;
         if (!currentCollection || currentCollection.length === 0) {
             if (previousCollection) {
                 // deleted
                 for (let i = 0, l = previousCollection.length; i < l; i++) {
                     const item = previousCollection[i], id = item.id;
+                    crudDetected = true;
                     if (this._map.has(id)) {
                         this._map.delete(id);
                     }
@@ -595,8 +626,9 @@ class TrackBox extends CacheMap {
             if (currentCollection) {
                 // added
                 for (let i = 0, l = currentCollection.length; i < l; i++) {
+                    crudDetected = true;
                     const item = currentCollection[i], id = item.id;
-                    this._map.set(id, { x: 0, y: 0, width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
+                    this._map.set(id, { width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
                 }
             }
             return;
@@ -608,7 +640,7 @@ class TrackBox extends CacheMap {
                 collectionDict[item.id] = item;
             }
         }
-        const notChangedMap = {}, deletedMap = {}, updatedMap = {};
+        const notChangedMap = {}, deletedMap = {}, deletedItemsMap = {}, updatedMap = {};
         for (let i = 0, l = previousCollection.length; i < l; i++) {
             const item = previousCollection[i], id = item.id;
             if (item) {
@@ -616,18 +648,21 @@ class TrackBox extends CacheMap {
                     if (item === collectionDict[id]) {
                         // not changed
                         notChangedMap[item.id] = item;
-                        this._map.set(id, { ...(this._map.get(id) || { x: 0, y: 0, width: itemSize, height: itemSize }), method: ItemDisplayMethods.NOT_CHANGED });
+                        this._map.set(id, { ...(this._map.get(id) || { width: itemSize, height: itemSize }), method: ItemDisplayMethods.NOT_CHANGED });
                         continue;
                     }
                     else {
                         // updated
+                        crudDetected = true;
                         updatedMap[item.id] = item;
-                        this._map.set(id, { ...(this._map.get(id) || { x: 0, y: 0, width: itemSize, height: itemSize }), method: ItemDisplayMethods.UPDATE });
+                        this._map.set(id, { ...(this._map.get(id) || { width: itemSize, height: itemSize }), method: ItemDisplayMethods.UPDATE });
                         continue;
                     }
                 }
                 // deleted
+                crudDetected = true;
                 deletedMap[item.id] = item;
+                deletedItemsMap[i] = this._map.get(item.id);
                 this._map.delete(id);
             }
         }
@@ -635,32 +670,51 @@ class TrackBox extends CacheMap {
             const item = currentCollection[i], id = item.id;
             if (item && !deletedMap.hasOwnProperty(id) && !updatedMap.hasOwnProperty(id) && !notChangedMap.hasOwnProperty(id)) {
                 // added
-                this._map.set(id, { x: 0, y: 0, width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
+                crudDetected = true;
+                this._map.set(id, { width: itemSize, height: itemSize, method: ItemDisplayMethods.CREATE });
             }
         }
+        this._crudDetected = crudDetected;
+        this._deletedItemsMap = deletedItemsMap;
     }
     /**
      * Finds the position of a collection element by the given Id
      */
     getItemPosition(id, stickyMap, options) {
         const opt = { fromItemId: id, stickyMap, ...options };
-        const { scrollSize } = this.recalculateMetrics(opt);
+        const { scrollSize } = this.recalculateMetrics({
+            ...opt,
+            dynamicSize: this._crudDetected || opt.dynamicSize,
+            previousTotalSize: this._previousTotalSize,
+            crudDetected: this._crudDetected,
+            deletedItemsMap: this._deletedItemsMap,
+        });
         return scrollSize;
     }
     /**
      * Updates the collection of display objects
      */
     updateCollection(items, stickyMap, options) {
-        const opt = { stickyMap, ...options };
-        this.cacheElements();
+        const opt = { stickyMap, ...options }, crudDetected = this._crudDetected, deletedItemsMap = this._deletedItemsMap;
+        if (opt.dynamicSize) {
+            this.cacheElements();
+        }
         const metrics = this.recalculateMetrics({
             ...opt,
             collection: items,
+            previousTotalSize: this._previousTotalSize,
+            crudDetected: this._crudDetected,
+            deletedItemsMap,
         });
         this._delta += metrics.delta;
-        this.snapshot();
-        const displayItems = this.generateDisplayCollection(items, stickyMap, metrics);
-        return { displayItems, totalSize: metrics.totalSize, delta: metrics.delta };
+        this._previousTotalSize = metrics.totalSize;
+        this._deletedItemsMap = {};
+        this._crudDetected = false;
+        if (opt.dynamicSize) {
+            this.snapshot();
+        }
+        const displayItems = this.generateDisplayCollection(items, stickyMap, { ...metrics, });
+        return { displayItems, totalSize: metrics.totalSize, delta: metrics.delta, crudDetected };
     }
     /**
      * Finds the closest element in the collection by scrollSize
@@ -719,7 +773,7 @@ class TrackBox extends CacheMap {
      * Calculates list metrics
      */
     recalculateMetrics(options) {
-        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, stickyMap, enabledBufferOptimization } = options;
+        const { fromItemId, bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, stickyMap, enabledBufferOptimization, previousTotalSize, crudDetected, deletedItemsMap } = 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, map = this._map, snapshot = this._snapshot, checkOverscrollItemsLimit = Math.ceil(size / typicalItemSize), snippedPos = Math.floor(scrollSize), leftItemsWeights = [], isFromId = fromItemId !== undefined && (typeof fromItemId === 'number' && fromItemId > -1)
             || (typeof fromItemId === 'string' && fromItemId > '-1');
         let leftItemsOffset = 0, rightItemsOffset = 0;
@@ -744,32 +798,36 @@ class TrackBox extends CacheMap {
         else {
             leftItemsOffset = rightItemsOffset = itemsOffset;
         }
-        let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, leftHiddenItemsWeight = 0, totalItemsToDisplayEndWeight = 0, rightSizeOfAddedItems = 0, leftSizeOfAddedItems = 0, rightSizeOfUpdatedItems = 0, leftSizeOfUpdatedItems = 0, itemById = undefined, itemByIdPos = 0, targetDisplayItemIndex = -1, isTargetInOverscroll = false, actualScrollSize = itemByIdPos, totalSize = 0, startIndex;
+        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;
         // 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, stickyComponentIndex = -1;
+            let y = 0, stickyCollectionItem = undefined, stickyComponentSize = 0;
             for (let i = 0, l = collection.length; i < l; i++) {
                 const ii = i + 1, collectionItem = collection[i], id = collectionItem.id;
                 let componentSize = 0, componentSizeDelta = 0, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
                 if (map.has(id)) {
-                    const bounds = map.get(id) || { x: 0, y: 0, width: typicalItemSize, height: typicalItemSize };
+                    const bounds = map.get(id) || { width: typicalItemSize, height: typicalItemSize };
                     componentSize = bounds[sizeProperty];
                     itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
-                    if (itemDisplayMethod === ItemDisplayMethods.UPDATE) {
-                        const snapshotBounds = snapshot.get(id);
-                        const componentSnapshotSize = componentSize - (snapshotBounds ? snapshotBounds[sizeProperty] : typicalItemSize);
-                        componentSizeDelta = componentSnapshotSize;
-                        map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
-                    }
-                    if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
-                        componentSizeDelta = typicalItemSize;
-                        map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
+                    switch (itemDisplayMethod) {
+                        case ItemDisplayMethods.UPDATE: {
+                            const snapshotBounds = snapshot.get(id);
+                            const componentSnapshotSize = componentSize - (snapshotBounds ? snapshotBounds[sizeProperty] : typicalItemSize);
+                            componentSizeDelta = componentSnapshotSize;
+                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
+                            break;
+                        }
+                        case ItemDisplayMethods.CREATE: {
+                            componentSizeDelta = typicalItemSize;
+                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
+                            break;
+                        }
                     }
                 }
-                else {
-                    componentSize = typicalItemSize;
-                    if (snapshot.has(id)) {
-                        itemDisplayMethod = ItemDisplayMethods.DELETE;
+                if (this._deletedItemsMap.hasOwnProperty(i)) {
+                    const bounds = this._deletedItemsMap[i], size = bounds[sizeProperty] ?? typicalItemSize;
+                    if (y < scrollSize - size) {
+                        leftSizeOfDeletedItems += size;
                     }
                 }
                 totalSize += componentSize;
@@ -778,7 +836,6 @@ class TrackBox extends CacheMap {
                         if (id !== fromItemId && stickyMap && stickyMap[id] > 0) {
                             stickyComponentSize = componentSize;
                             stickyCollectionItem = collectionItem;
-                            stickyComponentIndex = i;
                         }
                         if (id === fromItemId) {
                             targetDisplayItemIndex = i;
@@ -821,22 +878,25 @@ class TrackBox extends CacheMap {
                         totalItemsToDisplayEndWeight += componentSize;
                         itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + rightItemsOffset;
                     }
-                    if (y > itemByIdPos + size + componentSize) {
-                        if (itemDisplayMethod === ItemDisplayMethods.UPDATE) {
-                            rightSizeOfAddedItems += componentSizeDelta;
-                        }
-                    }
                 }
                 else if (y < scrollSize + size + componentSize) {
                     itemsFromStartToDisplayEnd = ii;
                     totalItemsToDisplayEndWeight += componentSize;
                     itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + rightItemsOffset;
                     if (y < scrollSize - componentSize) {
-                        if (itemDisplayMethod === ItemDisplayMethods.UPDATE) {
-                            leftSizeOfUpdatedItems += componentSizeDelta;
-                        }
-                        if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
-                            leftSizeOfAddedItems += componentSizeDelta;
+                        switch (itemDisplayMethod) {
+                            case ItemDisplayMethods.CREATE: {
+                                leftSizeOfAddedItems += componentSizeDelta;
+                                break;
+                            }
+                            case ItemDisplayMethods.UPDATE: {
+                                leftSizeOfUpdatedItems += componentSizeDelta;
+                                break;
+                            }
+                            case ItemDisplayMethods.DELETE: {
+                                leftSizeOfDeletedItems += componentSizeDelta;
+                                break;
+                            }
                         }
                     }
                 }
@@ -844,12 +904,6 @@ class TrackBox extends CacheMap {
                     if (i < itemsFromDisplayEndToOffsetEnd) {
                         rightItemsWeight += componentSize;
                     }
-                    if (itemDisplayMethod === ItemDisplayMethods.UPDATE) {
-                        rightSizeOfUpdatedItems += componentSizeDelta;
-                    }
-                    if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
-                        rightSizeOfAddedItems += componentSizeDelta;
-                    }
                 }
                 y += componentSize;
             }
@@ -877,6 +931,43 @@ class TrackBox extends CacheMap {
         else 
         // Buffer optimization does not work on fast linear algorithm
         {
+            if (crudDetected) {
+                let y = 0;
+                for (let i = 0, l = collection.length; i < l; i++) {
+                    const collectionItem = collection[i], id = collectionItem.id;
+                    let componentSize = typicalItemSize, itemDisplayMethod = ItemDisplayMethods.NOT_CHANGED;
+                    if (map.has(id)) {
+                        const bounds = map.get(id);
+                        itemDisplayMethod = bounds?.method ?? ItemDisplayMethods.UPDATE;
+                        if (itemDisplayMethod === ItemDisplayMethods.CREATE) {
+                            map.set(id, { ...bounds, method: ItemDisplayMethods.NOT_CHANGED });
+                        }
+                    }
+                    if (this._deletedItemsMap.hasOwnProperty(i)) {
+                        const bounds = this._deletedItemsMap[i], size = bounds[sizeProperty] ?? typicalItemSize;
+                        if (y < scrollSize - size) {
+                            leftSizeOfDeletedItems += size;
+                        }
+                    }
+                    if (y < scrollSize - componentSize) {
+                        switch (itemDisplayMethod) {
+                            case ItemDisplayMethods.CREATE: {
+                                leftSizeOfUpdatedItems += componentSize;
+                                break;
+                            }
+                            case ItemDisplayMethods.UPDATE: {
+                                leftSizeOfUpdatedItems += componentSize;
+                                break;
+                            }
+                            case ItemDisplayMethods.DELETE: {
+                                leftSizeOfDeletedItems += componentSize;
+                                break;
+                            }
+                        }
+                    }
+                    y += componentSize;
+                }
+            }
             itemsFromStartToScrollEnd = Math.floor(scrollSize / typicalItemSize);
             itemsFromStartToDisplayEnd = Math.ceil((scrollSize + size) / typicalItemSize);
             leftItemLength = Math.min(itemsFromStartToScrollEnd, itemsOffset);
@@ -886,11 +977,12 @@ class TrackBox extends CacheMap {
             rightItemsWeight = rightItemLength * typicalItemSize,
                 leftHiddenItemsWeight = itemsFromStartToScrollEnd * typicalItemSize,
                 totalItemsToDisplayEndWeight = itemsFromStartToDisplayEnd * typicalItemSize;
-            actualScrollSize = scrollSize;
             totalSize = totalLength * typicalItemSize;
+            const k = totalSize !== 0 ? previousTotalSize / totalSize : 0;
+            actualScrollSize = scrollSize * k;
         }
         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 = leftSizeOfUpdatedItems + leftSizeOfAddedItems;
+        const itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight, itemsOnDisplayLength = itemsFromStartToDisplayEnd - itemsFromStartToScrollEnd, startPosition = leftHiddenItemsWeight - leftItemsWeight, renderItems = itemsOnDisplayLength + leftItemLength + rightItemLength, delta = leftSizeOfUpdatedItems + leftSizeOfAddedItems - leftSizeOfDeletedItems;
         const metrics = {
             delta,
             normalizedItemWidth: w,
@@ -912,7 +1004,6 @@ class TrackBox extends CacheMap {
             rightItemsWeight,
             scrollSize: actualScrollSize,
             leftSizeOfAddedItems,
-            rightSizeOfAddedItems,
             sizeProperty,
             snap,
             snippedPos,
@@ -925,8 +1016,6 @@ class TrackBox extends CacheMap {
         };
         return metrics;
     }
-    _scrollDelta = 0;
-    get scrollDelta() { return this._scrollDelta; }
     clearDeltaDirection() {
         this.clearScrollDirectionCache();
     }
@@ -1204,11 +1293,7 @@ class NgVirtualListComponent {
         this.clearScrollToRepeatExecutionTimeout();
         const container = this._container()?.nativeElement;
         if (container) {
-            const dynamicSize = this.dynamicSize(), delta = this._trackBox.delta, scrollSize = (this._isVertical ? container.scrollTop : container.scrollLeft);
-            let actualScrollSize = scrollSize, isScrollIUmmediate = false;
-            if (dynamicSize && delta !== 0) {
-                actualScrollSize = scrollSize + delta;
-            }
+            const scrollSize = (this._isVertical ? container.scrollTop : container.scrollLeft), actualScrollSize = scrollSize;
             this._scrollSize.set(actualScrollSize);
         }
     };
@@ -1254,7 +1339,7 @@ class NgVirtualListComponent {
             const { width, height } = bounds;
             let actualScrollSize = (this._isVertical ? this._container()?.nativeElement.scrollTop ?? 0 : this._container()?.nativeElement.scrollLeft) ?? 0;
             const opts = {
-                bounds: { width, height }, collection: items, dynamicSize, isVertical, itemSize,
+                bounds: { width, height }, dynamicSize, isVertical, itemSize,
                 itemsOffset, scrollSize: scrollSize, snap, enabledBufferOptimization,
             };
             const { displayItems, totalSize } = this._trackBox.updateCollection(items, stickyMap, {
@@ -1265,28 +1350,15 @@ class NgVirtualListComponent {
             this.tracking();
             const container = this._container();
             if (container) {
-                actualScrollSize = actualScrollSize + this._trackBox.delta;
+                const delta = this._trackBox.delta;
+                actualScrollSize = actualScrollSize + delta;
                 this._trackBox.clearDelta();
-                if (dynamicSize) {
-                    if (scrollSize !== actualScrollSize) {
-                        const params = {
-                            [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
-                            behavior: BEHAVIOR_INSTANT
-                        };
-                        container.nativeElement.scrollTo(params);
-                    }
-                }
-                else {
-                    if (scrollSize !== actualScrollSize) {
-                        const params = {
-                            [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
-                            behavior: BEHAVIOR_INSTANT
-                        };
-                        const container = this._container();
-                        if (container) {
-                            container.nativeElement.scrollTo(params);
-                        }
-                    }
+                if (scrollSize !== actualScrollSize) {
+                    const params = {
+                        [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: actualScrollSize,
+                        behavior: BEHAVIOR_INSTANT
+                    };
+                    container.nativeElement.scrollTo(params);
                 }
             }
             return of(displayItems);