ng-virtual-list 0.5.2 → 0.6.0

package/fesm2022/ng-virtual-list.mjs

@@ -3,7 +3,7 @@ import { signal, inject, ElementRef, ChangeDetectionStrategy, Component, viewChi
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import { toObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { filter, tap, map, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
+import { BehaviorSubject, filter, map, tap, combineLatest, distinctUntilChanged, switchMap, of } from 'rxjs';
 
 /**
  * Virtual list item component
@@ -23,18 +23,8 @@ class NgVirtualListItemComponent {
         if (this._data === v) {
             return;
         }
-        this._data = v;
-        this.data.set(v);
-    }
-    itemRenderer = signal(undefined);
-    set renderer(v) {
-        this.itemRenderer.set(v);
-    }
-    _elementRef = inject((ElementRef));
-    constructor() {
-        this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
-            ? 0 : NgVirtualListItemComponent.__nextId + 1;
-        toObservable(this.data).pipe(takeUntilDestroyed(), filter(data => !!data), tap(data => {
+        const data = this._data = v;
+        if (data) {
             const styles = this._elementRef.nativeElement.style;
             styles.zIndex = data.config.sticky;
             if (data.config.snapped) {
@@ -45,9 +35,23 @@ class NgVirtualListItemComponent {
                 styles.position = 'absolute';
                 styles.transform = `translate3d(${data.config.isVertical ? 0 : data.measures.x}px, ${data.config.isVertical ? data.measures.y : 0}px , 0)`;
             }
-            styles.height = data.config.isVertical ? `${data.measures.height}px` : '100%';
-            styles.width = data.config.isVertical ? '100%' : `${data.measures.width}px`;
-        })).subscribe();
+            styles.height = data.config.isVertical ? data.config.dynamic ? 'auto' : `${data.measures.height}px` : '100%';
+            styles.width = data.config.isVertical ? '100%' : data.config.dynamic ? 'auto' : `${data.measures.width}px`;
+        }
+        this.data.set(v);
+    }
+    itemRenderer = signal(undefined);
+    set renderer(v) {
+        this.itemRenderer.set(v);
+    }
+    _elementRef = inject((ElementRef));
+    constructor() {
+        this._id = NgVirtualListItemComponent.__nextId = NgVirtualListItemComponent.__nextId === Number.MAX_SAFE_INTEGER
+            ? 0 : NgVirtualListItemComponent.__nextId + 1;
+    }
+    getBounds() {
+        const el = this._elementRef.nativeElement, { width, height, left, top } = el.getBoundingClientRect();
+        return { width, height, x: left, y: top };
     }
     showIfNeed() {
         const styles = this._elementRef.nativeElement.style;
@@ -84,6 +88,8 @@ const DEFAULT_ITEMS_OFFSET = 2;
 const DEFAULT_LIST_SIZE = 400;
 const DEFAULT_SNAP = false;
 const DEFAULT_SNAP_TO_ITEM = false;
+const DEFAULT_DYNAMIC_SIZE = false;
+const TRACK_BY_PROPERTY_NAME = 'id';
 const DEFAULT_DIRECTION = Directions.VERTICAL;
 const DISPLAY_OBJECTS_LENGTH_MESUREMENT_ERROR = 1;
 
@@ -105,7 +111,450 @@ const toggleClassName = (el, className, remove = false) => {
 };
 
 /**
- * Virtual list component
+ * Tracks display items by property
+ * @homepage https://github.com/DjonnyX/ng-virtual-list/tree/main/projects/ng-virtual-list
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class Tracker {
+    /**
+     * display objects dictionary of indexes by id
+     */
+    _displayObjectIndexMapById = {};
+    set displayObjectIndexMapById(v) {
+        if (this._displayObjectIndexMapById === v) {
+            return;
+        }
+        this._displayObjectIndexMapById = v;
+    }
+    get displayObjectIndexMapById() {
+        return this._displayObjectIndexMapById;
+    }
+    /**
+     * Dictionary displayItems propertyNameId by items propertyNameId
+     */
+    _trackMap = {};
+    get trackMap() {
+        return this._trackMap;
+    }
+    _trackingPropertyName;
+    constructor(trackingPropertyName) {
+        this._trackingPropertyName = trackingPropertyName;
+    }
+    /**
+     * tracking by propName
+     */
+    track(items, components, afterComponentSetup) {
+        if (!items) {
+            return;
+        }
+        const idPropName = this._trackingPropertyName, untrackedItems = [...components];
+        for (let i = 0, l = items.length; i < l; i++) {
+            const item = items[i], itemTrackingProperty = item[idPropName];
+            if (this._trackMap) {
+                const diId = this._trackMap[itemTrackingProperty];
+                if (this._trackMap.hasOwnProperty(itemTrackingProperty)) {
+                    const lastIndex = this._displayObjectIndexMapById[diId], el = components[lastIndex];
+                    this._checkComponentProperty(el?.instance);
+                    const elId = el?.instance?.[itemTrackingProperty];
+                    if (el && elId === diId) {
+                        const indexByUntrackedItems = untrackedItems.findIndex(v => {
+                            this._checkComponentProperty(v.instance);
+                            return v.instance[itemTrackingProperty] === elId;
+                        });
+                        if (indexByUntrackedItems > -1) {
+                            el.instance.item = item;
+                            if (afterComponentSetup !== undefined) {
+                                afterComponentSetup(el.instance, item);
+                            }
+                            untrackedItems.splice(indexByUntrackedItems, 1);
+                            continue;
+                        }
+                    }
+                    delete this._trackMap[itemTrackingProperty];
+                }
+            }
+            if (untrackedItems.length > 0) {
+                const el = untrackedItems.shift(), item = items[i];
+                if (el) {
+                    el.instance.item = item;
+                    if (this._trackMap) {
+                        this._checkComponentProperty(el.instance);
+                        this._trackMap[itemTrackingProperty] = el.instance[itemTrackingProperty];
+                    }
+                    if (afterComponentSetup !== undefined) {
+                        afterComponentSetup(el.instance, item);
+                    }
+                }
+            }
+        }
+        if (untrackedItems.length) {
+            throw Error('Tracking by id caused an error.');
+        }
+    }
+    untrackComponentByIdProperty(component) {
+        if (!component) {
+            return;
+        }
+        const propertyIdName = this._trackingPropertyName;
+        this._checkComponentProperty(component);
+        if (this._trackMap && component[propertyIdName] !== undefined) {
+            delete this._trackMap[propertyIdName];
+        }
+    }
+    _checkComponentProperty(component) {
+        if (!component) {
+            return;
+        }
+        const propertyIdName = this._trackingPropertyName;
+        try {
+            component[propertyIdName];
+        }
+        catch (err) {
+            throw Error(`Property ${propertyIdName} does not exist.`);
+        }
+    }
+    dispose() {
+        this._trackMap = null;
+    }
+}
+
+/**
+ * Simple event emitter
+ * @homepage https://github.com/DjonnyX/ng-virtual-list/tree/main/projects/ng-virtual-list
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class EventEmitter {
+    _listeners = {};
+    _disposed = false;
+    constructor() { }
+    /**
+     * Emits the event
+     */
+    dispatch(event, ...args) {
+        const ctx = this;
+        const listeners = this._listeners[event];
+        if (Array.isArray(listeners)) {
+            for (let i = 0, l = listeners.length; i < l; i++) {
+                const listener = listeners[i];
+                if (listener) {
+                    listener.apply(ctx, args);
+                }
+            }
+        }
+    }
+    /**
+     * Emits the event async
+     */
+    dispatchAsync(event, ...args) {
+        queueMicrotask(() => {
+            if (this._disposed) {
+                return;
+            }
+            this.dispatch(event, ...args);
+        });
+    }
+    /**
+     * Returns true if the event listener is already subscribed.
+     */
+    hasEventListener(eventName, handler) {
+        const event = eventName;
+        if (this._listeners.hasOwnProperty(event)) {
+            const listeners = this._listeners[event];
+            const index = listeners.findIndex(v => v === handler);
+            if (index > -1) {
+                return true;
+            }
+        }
+        return false;
+    }
+    /**
+     * Add event listener
+     */
+    addEventListener(eventName, handler) {
+        const event = eventName;
+        if (!this._listeners.hasOwnProperty(event)) {
+            this._listeners[event] = [];
+        }
+        this._listeners[event].push(handler);
+    }
+    /**
+     * Remove event listener
+     */
+    removeEventListener(eventName, handler) {
+        const event = eventName;
+        if (!this._listeners.hasOwnProperty(event)) {
+            return;
+        }
+        const listeners = this._listeners[event], index = listeners.findIndex(v => v === handler);
+        if (index > -1) {
+            listeners.splice(index, 1);
+            if (listeners.length === 0) {
+                delete this._listeners[event];
+            }
+        }
+    }
+    /**
+     * Remove all listeners
+     */
+    removeAllListeners() {
+        const events = Object.keys(this._listeners);
+        while (events.length > 0) {
+            const event = events.pop();
+            if (event) {
+                const listeners = this._listeners[event];
+                if (Array.isArray(listeners)) {
+                    while (listeners.length > 0) {
+                        const listener = listeners.pop();
+                        if (listener) {
+                            this.removeEventListener(event, listener);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    dispose() {
+        this._disposed = true;
+        this.removeAllListeners();
+    }
+}
+
+/**
+ * Cache map.
+ * Emits a change event on each mutation.
+ * @homepage https://github.com/DjonnyX/ng-virtual-list/tree/main/projects/ng-virtual-list
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class CacheMap extends EventEmitter {
+    _map = new Map();
+    _version = 0;
+    get version() {
+        return this._version;
+    }
+    constructor() {
+        super();
+    }
+    bumpVersion() {
+        this._version = this._version === Number.MAX_SAFE_INTEGER ? 0 : this._version + 1;
+    }
+    fireChange() {
+        this.dispatch('change', this.version);
+    }
+    set(id, bounds) {
+        if (this._map.has(id) && JSON.stringify(this._map.get(id)) === JSON.stringify(bounds)) {
+            return this._map;
+        }
+        const v = this._map.set(id, bounds);
+        this.bumpVersion();
+        this.fireChange();
+        return v;
+    }
+    has(id) {
+        return this._map.has(id);
+    }
+    get(id) {
+        return this._map.get(id);
+    }
+    forEach(callbackfn, thisArg) {
+        return this._map.forEach(callbackfn, thisArg);
+    }
+    dispose() {
+        super.dispose();
+        this._map.clear();
+    }
+}
+
+/**
+ * An object that performs tracking, calculations and caching.
+ * @homepage https://github.com/DjonnyX/ng-virtual-list/tree/main/projects/ng-virtual-list
+ * @author Evgenii Grebennikov
+ * @email djonnyx@gmail.com
+ */
+class TrackBox extends CacheMap {
+    _tracker;
+    _items;
+    set items(v) {
+        if (this._items === v) {
+            return;
+        }
+        this._items = v;
+    }
+    _displayComponents;
+    set displayComponents(v) {
+        if (this._displayComponents === v) {
+            return;
+        }
+        this._displayComponents = v;
+    }
+    constructor(trackingPropertyName) {
+        super();
+        this._tracker = new Tracker(trackingPropertyName);
+    }
+    set(id, bounds) {
+        if (this._map.has(id) && JSON.stringify(this._map.get(id)) === JSON.stringify(bounds)) {
+            return this._map;
+        }
+        const v = this._map.set(id, bounds);
+        this.bumpVersion();
+        this.fireChange();
+        return v;
+    }
+    _fireChangeTimeouts = [];
+    fireChange() {
+        this.clearchangesTimeouts();
+        this._fireChangeTimeouts.push(setTimeout(() => { this.dispatchAsync('change', this._version); }));
+    }
+    clearchangesTimeouts() {
+        while (this._fireChangeTimeouts.length > 0) {
+            const timeout = this._fireChangeTimeouts.pop();
+            clearTimeout(timeout);
+        }
+    }
+    recalculateMetrics(options) {
+        const { bounds, collection, dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap, } = options;
+        const { width, height } = bounds, sizeProperty = isVertical ? 'height' : 'width', size = isVertical ? height : width, weightToDisplayEnd = scrollSize + height, totalLength = collection.length, typicalItemSize = dynamicSize ? this.getTypicalItemSize(isVertical, itemSize) || itemSize : itemSize, totalSize = dynamicSize ? this.getBoundsFromCache(collection, typicalItemSize, isVertical) : totalLength * typicalItemSize, snippedPos = Math.floor(scrollSize);
+        let itemsFromStartToScrollEnd = -1, itemsFromDisplayEndToOffsetEnd = 0, itemsFromStartToDisplayEnd = -1, leftItemLength = 0, rightItemLength = 0, leftItemsWeight = 0, rightItemsWeight = 0, startIndex;
+        if (dynamicSize) {
+            let y = 0;
+            for (let i = 0, l = collection.length; i < l; i++) {
+                const collectionItem = collection[i], map = this._map;
+                let itemSize = 0;
+                if (map.has(collectionItem.id)) {
+                    const bounds = map.get(collectionItem.id);
+                    itemSize = bounds ? bounds[sizeProperty] : typicalItemSize;
+                }
+                else {
+                    itemSize = typicalItemSize;
+                }
+                if (itemsFromStartToScrollEnd === -1 && y >= scrollSize && y <= scrollSize + itemSize) {
+                    leftItemsWeight += itemSize;
+                    itemsFromStartToScrollEnd = i;
+                }
+                if (itemsFromStartToDisplayEnd === -1) {
+                    if (y >= weightToDisplayEnd && y <= weightToDisplayEnd + itemSize) {
+                        itemsFromStartToDisplayEnd = i;
+                        itemsFromDisplayEndToOffsetEnd = itemsFromStartToDisplayEnd + itemsOffset;
+                    }
+                }
+                else {
+                    if (i <= itemsFromDisplayEndToOffsetEnd) {
+                        rightItemsWeight += itemSize;
+                    }
+                }
+                y += itemSize;
+            }
+            leftItemLength = Math.min(itemsFromStartToScrollEnd, itemsOffset);
+            rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalLength
+                ? totalLength - itemsFromStartToDisplayEnd : itemsOffset;
+            startIndex = itemsFromStartToScrollEnd - leftItemLength;
+        }
+        else {
+            itemsFromStartToScrollEnd = Math.ceil(scrollSize / typicalItemSize);
+            itemsFromStartToDisplayEnd = Math.ceil((scrollSize + size) / typicalItemSize);
+            leftItemLength = Math.min(itemsFromStartToScrollEnd, itemsOffset);
+            rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalLength
+                ? totalLength - itemsFromStartToDisplayEnd : itemsOffset;
+            startIndex = itemsFromStartToScrollEnd - leftItemLength;
+            leftItemsWeight = leftItemLength * typicalItemSize;
+            rightItemsWeight = rightItemLength * typicalItemSize;
+        }
+        const leftHiddenItemsWeight = itemsFromStartToScrollEnd * typicalItemSize, totalItemsToDisplayEndWeight = itemsFromStartToDisplayEnd * typicalItemSize, itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight;
+        const metrics = {
+            itemsFromStartToScrollEnd,
+            itemsFromStartToDisplayEnd,
+            itemsOnDisplay,
+            leftHiddenItemsWeight,
+            leftItemLength,
+            leftItemsWeight,
+            rightItemLength,
+            rightItemsWeight,
+            snippedPos,
+            totalItemsToDisplayEndWeight,
+            totalSize,
+            typicalItemSize,
+        };
+        return metrics;
+    }
+    /**
+     * Calculates and returns the maximum size of a repeating item
+     */
+    getTypicalItemSize(isVertical, defaultItemSize, fromIndex = 0, to = -1) {
+        const sizeProperty = isVertical ? 'height' : 'width', sizes = {};
+        let maxRepeatingSize = defaultItemSize, count = 0;
+        this._map.forEach(bound => {
+            const size = bound[sizeProperty];
+            if (sizes.hasOwnProperty(size)) {
+                sizes[size] += 1;
+            }
+            else {
+                sizes[size] = 1;
+            }
+            if (sizes[size] > count) {
+                count = sizes[size];
+                maxRepeatingSize = size;
+            }
+        });
+        return maxRepeatingSize;
+    }
+    /**
+     * tracking by propName
+     */
+    track(dynamicSize = false) {
+        if (!this._items || !this._displayComponents) {
+            return;
+        }
+        this._tracker.track(this._items, this._displayComponents, dynamicSize ? (component, item) => {
+            this.cacheElementBounds(component, item);
+        } : undefined);
+    }
+    setDisplayObjectIndexMapById(v) {
+        this._tracker.displayObjectIndexMapById = v;
+    }
+    untrackComponentByIdProperty(component) {
+        this._tracker.untrackComponentByIdProperty(component);
+    }
+    /**
+     * Stores the element bounds in _sizeCacheMap
+     */
+    cacheElementBounds(component, item) {
+        component.item = item;
+        const bounds = component.getBounds();
+        this.set(item.id, bounds);
+    }
+    /**
+     * Returns calculated bounds from cache
+     */
+    getBoundsFromCache(items, typicalItemSize, isVertical) {
+        const sizeProperty = isVertical ? 'height' : 'width', map = this._map;
+        let size = 0;
+        for (let i = 0, l = items.length; i < l; i++) {
+            const item = items[i];
+            if (map.has(item.id)) {
+                const bounds = map.get(item.id);
+                size += bounds ? bounds[sizeProperty] : typicalItemSize;
+            }
+            else {
+                size += typicalItemSize;
+            }
+        }
+        return size;
+    }
+    dispose() {
+        super.dispose();
+        this.clearchangesTimeouts();
+        if (this._tracker) {
+            this._tracker.dispose();
+        }
+    }
+}
+
+/**
+ * Virtual list component.
+ * Maximum performance for extremely large lists.
+ * It is based on algorithms for virtualization of screen objects.
  * @homepage https://github.com/DjonnyX/ng-virtual-list/tree/main/projects/ng-virtual-list
  * @author Evgenii Grebennikov
  * @email djonnyx@gmail.com
@@ -151,8 +600,14 @@ class NgVirtualListComponent {
     stickyMap = input({});
     /**
      * If direction = 'vertical', then the height of a typical element. If direction = 'horizontal', then the width of a typical element.
+     * Ignored if the dynamicSize property is true.
      */
     itemSize = input(DEFAULT_ITEM_SIZE);
+    /**
+     * If true then the items in the list can have different sizes and the itemSize property is ignored.
+     * If false then the items in the list have a fixed size specified by the itemSize property. The default value is false.
+     */
+    dynamicSize = input(DEFAULT_DYNAMIC_SIZE);
     /**
      * Determines the direction in which elements are placed. Default value is "vertical".
      */
@@ -186,40 +641,64 @@ class NgVirtualListComponent {
     _elementRef = inject((ElementRef));
     _initialized = signal(false);
     /**
-     * Dictionary displayItems id by IRenderVirtualListItem.id
-     */
-    _trackMap = {};
-    /**
-     * displayItems dictionary of indexes by id
+     * Dictionary of element sizes by their id
      */
-    _disMap = {};
-    // for dynamic item size
-    // private _sizeCacheMap = new Map<Id, IRect>();
+    _trackBox = new TrackBox(TRACK_BY_PROPERTY_NAME);
+    _onTrackBoxChangeHandler = (v) => {
+        this._$cacheVersion.next(v);
+    };
+    _$cacheVersion = new BehaviorSubject(-1);
+    get $cacheVersion() { return this._$cacheVersion.asObservable(); }
     constructor() {
         NgVirtualListComponent.__nextId = NgVirtualListComponent.__nextId + 1 === Number.MAX_SAFE_INTEGER
             ? 0 : NgVirtualListComponent.__nextId + 1;
         this._id = NgVirtualListComponent.__nextId;
-        const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = toObservable(this.itemsOffset).pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = toObservable(this.stickyMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION)), tap(v => {
+        this._trackBox.displayComponents = this._displayComponents;
+        const $bounds = toObservable(this._bounds).pipe(filter(b => !!b)), $items = toObservable(this.items).pipe(map(i => !i ? [] : i)), $scrollSize = toObservable(this._scrollSize), $itemSize = toObservable(this.itemSize).pipe(map(v => v <= 0 ? DEFAULT_ITEM_SIZE : v)), $itemsOffset = toObservable(this.itemsOffset).pipe(map(v => v < 0 ? DEFAULT_ITEMS_OFFSET : v)), $stickyMap = toObservable(this.stickyMap).pipe(map(v => !v ? {} : v)), $snap = toObservable(this.snap), $isVertical = toObservable(this.direction).pipe(map(v => this.getIsVertical(v || DEFAULT_DIRECTION))), $dynamicSize = toObservable(this.dynamicSize), $cacheVersion = this.$cacheVersion, $displayItems = toObservable(this._displayItems), $initialized = toObservable(this._initialized);
+        $isVertical.pipe(takeUntilDestroyed(), tap(v => {
             this._isVertical = v;
             const el = this._elementRef.nativeElement;
             toggleClassName(el, v ? 'vertical' : 'horizontal', true);
-        })), $initialized = toObservable(this._initialized);
-        combineLatest([$initialized, $bounds, $items, $stickyMap, $scrollSize, $itemSize, $itemsOffset, $snap, $isVertical]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), switchMap(([, bounds, items, stickyMap, scrollSize, itemSize, itemsOffset, snap, isVertical]) => {
-            const { width, height } = bounds, size = isVertical ? height : width;
-            const itemsFromStartToScrollEnd = Math.ceil(scrollSize / itemSize), itemsFromStartToDisplayEnd = Math.ceil((scrollSize + size) / itemSize), leftHiddenItemsWeight = itemsFromStartToScrollEnd * itemSize, totalItemsToDisplayEndWeight = itemsFromStartToDisplayEnd * itemSize, totalItems = items.length, totalSize = totalItems * itemSize, itemsOnDisplay = totalItemsToDisplayEndWeight - leftHiddenItemsWeight;
+        })).subscribe();
+        $dynamicSize.pipe(takeUntilDestroyed(), tap(dynamicSize => {
+            if (dynamicSize) {
+                if (!this._trackBox.hasEventListener('change', this._onTrackBoxChangeHandler)) {
+                    this._trackBox.addEventListener('change', this._onTrackBoxChangeHandler);
+                }
+            }
+            else {
+                if (this._trackBox.hasEventListener('change', this._onTrackBoxChangeHandler)) {
+                    this._trackBox.removeEventListener('change', this._onTrackBoxChangeHandler);
+                }
+            }
+        })).subscribe();
+        $displayItems.pipe(takeUntilDestroyed(), tap((displayItems) => {
+            this._trackBox.items = displayItems;
+        })).subscribe();
+        combineLatest([$initialized, $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, { itemsFromStartToScrollEnd, itemsOnDisplay, leftHiddenItemsWeight, leftItemLength, leftItemsWeight, rightItemsWeight, snippedPos, totalSize, typicalItemSize, } = this._trackBox.recalculateMetrics({
+                bounds: { width, height }, collection: items,
+                dynamicSize, isVertical, itemSize, itemsOffset, scrollSize, snap,
+            });
+            // Нужно сперва сделать корректные расчеты для dynamicSize. Сейчас количества элементов в облостях высчитывается не корректно!
+            // Необходима кореляция startDisplayObjectY с помощью дельты от высоты предыдущей и текущей размеченной области по версии кэша.
+            // TrackBox может расчитать дельту!
             return of({
-                items, stickyMap, itemsOffset, width, height, isVertical, scrollSize, itemsFromStartToScrollEnd,
-                itemsFromStartToDisplayEnd, itemsOnDisplay, leftHiddenItemsWeight, itemSize, totalSize, snap,
+                items, stickyMap, width, height, isVertical, scrollSize, itemsFromStartToScrollEnd,
+                itemsOnDisplay, leftHiddenItemsWeight, itemSize: typicalItemSize, totalSize, snap,
+                leftItemLength, leftItemsWeight, rightItemsWeight, snippedPos, dynamicSize,
             });
-        }), tap(({ items, stickyMap, itemsOffset, width, height, isVertical, scrollSize, itemsFromStartToScrollEnd, itemsFromStartToDisplayEnd, itemsOnDisplay, leftHiddenItemsWeight, itemSize, totalSize, snap, }) => {
+        }), tap(({ items, stickyMap, width, height, isVertical, scrollSize, itemsFromStartToScrollEnd, itemsOnDisplay, leftHiddenItemsWeight, leftItemLength, leftItemsWeight, rightItemsWeight, snippedPos, itemSize, totalSize, snap, dynamicSize: dynamic, }) => {
             const displayItems = [];
             if (items.length) {
-                const w = isVertical ? width : itemSize, h = isVertical ? itemSize : height, totalItems = items.length, leftItemLength = Math.min(itemsFromStartToScrollEnd, itemsOffset), rightItemLength = itemsFromStartToDisplayEnd + itemsOffset > totalItems
-                    ? totalItems - itemsFromStartToDisplayEnd : itemsOffset, leftItemsWeight = leftItemLength * itemSize, rightItemsWeight = rightItemLength * itemSize, startIndex = itemsFromStartToScrollEnd - leftItemLength, snippedPos = Math.floor(scrollSize);
-                let pos = leftHiddenItemsWeight - leftItemsWeight, renderWeight = itemsOnDisplay + leftItemsWeight + rightItemsWeight, stickyItem, nextSticky, stickyItemIndex = -1;
+                const sizeProperty = isVertical ? 'height' : 'width', w = isVertical ? width : itemSize, h = isVertical ? itemSize : height, totalItems = items.length, startIndex = itemsFromStartToScrollEnd - leftItemLength;
+                let pos = leftHiddenItemsWeight - leftItemsWeight, renderWeight = itemsOnDisplay + leftItemsWeight + rightItemsWeight, stickyItem, nextSticky, stickyItemIndex = -1, stickyItemSize = 0;
                 if (snap) {
                     for (let i = itemsFromStartToScrollEnd - 1; i >= 0; i--) {
                         const id = items[i].id, sticky = stickyMap[id];
+                        stickyItemSize = dynamic ? this._trackBox.get(id)?.[sizeProperty] || itemSize : itemSize;
                         if (sticky > 0) {
                             const measures = {
                                 x: isVertical ? 0 : snippedPos,
@@ -231,6 +710,7 @@ class NgVirtualListComponent {
                                 sticky,
                                 snap,
                                 snapped: true,
+                                dynamic,
                             };
                             const itemData = items[i];
                             stickyItem = { id, measures, data: itemData, config };
@@ -245,7 +725,7 @@ class NgVirtualListComponent {
                     if (i >= totalItems) {
                         break;
                     }
-                    const id = items[i].id;
+                    const id = items[i].id, size = dynamic ? this._trackBox.get(id)?.[sizeProperty] || itemSize : itemSize;
                     if (id !== stickyItem?.id) {
                         const snaped = snap && stickyMap[id] > 0 && pos <= scrollSize, measures = {
                             x: isVertical ? 0 : pos,
@@ -257,26 +737,25 @@ class NgVirtualListComponent {
                             sticky: stickyMap[id],
                             snap,
                             snapped: false,
+                            dynamic,
                         };
                         const itemData = items[i];
                         const item = { id, measures, data: itemData, config };
-                        if (!nextSticky && stickyItemIndex < i && snap && stickyMap[id] > 0 && pos <= scrollSize + itemSize) {
+                        if (!nextSticky && stickyItemIndex < i && snap && stickyMap[id] > 0 && pos <= scrollSize + size) {
                             item.measures.x = isVertical ? 0 : snaped ? snippedPos : pos;
                             item.measures.y = isVertical ? snaped ? snippedPos : pos : 0;
                             nextSticky = item;
                         }
                         displayItems.push(item);
-                        // for dynamic item size
-                        // this._sizeCacheMap.set(id, measures);
                     }
-                    renderWeight -= itemSize;
-                    pos += itemSize;
+                    renderWeight -= size;
+                    pos += size;
                     i++;
                 }
                 const axis = isVertical ? 'y' : 'x';
-                if (nextSticky && stickyItem && nextSticky.measures[axis] <= scrollSize + itemSize) {
+                if (nextSticky && stickyItem && nextSticky.measures[axis] <= scrollSize + stickyItemSize) {
                     if (nextSticky.measures[axis] > scrollSize) {
-                        stickyItem.measures[axis] = nextSticky.measures[axis] - itemSize;
+                        stickyItem.measures[axis] = nextSticky.measures[axis] - stickyItemSize;
                         stickyItem.config.snapped = nextSticky.config.snapped = false;
                         stickyItem.config.sticky = 1;
                     }
@@ -286,17 +765,14 @@ class NgVirtualListComponent {
                 }
             }
             this._displayItems.set(displayItems);
-            const l = this._list();
-            if (l) {
-                l.nativeElement.style[isVertical ? 'height' : 'width'] = `${totalSize}px`;
-            }
+            this.resetBoundsSize(isVertical, totalSize);
         })).subscribe();
         combineLatest([$initialized, toObservable(this.itemRenderer)]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, itemRenderer]) => {
             this.resetRenderers(itemRenderer);
         }));
-        combineLatest([$initialized, toObservable(this._displayItems)]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, displayItems]) => {
+        combineLatest([$initialized, $displayItems]).pipe(takeUntilDestroyed(), distinctUntilChanged(), filter(([initialized]) => !!initialized), tap(([, displayItems]) => {
             this.createDisplayComponentsIfNeed(displayItems);
-            this.tracking(displayItems);
+            this.tracking();
         })).subscribe();
     }
     ngOnInit() {
@@ -308,7 +784,7 @@ class NgVirtualListComponent {
     }
     createDisplayComponentsIfNeed(displayItems) {
         if (!displayItems || !this._listContainerRef) {
-            this._disMap = {};
+            this._trackBox.setDisplayObjectIndexMapById({});
             return;
         }
         const _listContainerRef = this._listContainerRef;
@@ -324,7 +800,7 @@ class NgVirtualListComponent {
             comp?.destroy();
             const id = comp?.instance.item?.id;
             if (id !== undefined) {
-                delete this._trackMap[id];
+                this._trackBox.untrackComponentByIdProperty(comp?.instance);
             }
         }
         this.resetRenderers();
@@ -336,40 +812,18 @@ class NgVirtualListComponent {
             item.instance.renderer = itemRenderer || this.itemRenderer();
             doMap[item.instance.id] = i;
         }
-        this._disMap = doMap;
+        this._trackBox.setDisplayObjectIndexMapById(doMap);
     }
     /**
      * tracking by id
      */
-    tracking(displayItems) {
-        if (!displayItems) {
-            return;
-        }
-        const untrackedItems = [...this._displayComponents];
-        for (let i = 0, l = displayItems.length; i < l; i++) {
-            const item = displayItems[i], diId = this._trackMap[item.id];
-            if (this._trackMap.hasOwnProperty(item.id)) {
-                const lastIndex = this._disMap[diId], el = this._displayComponents[lastIndex], elId = el?.instance.id;
-                if (el && elId === diId) {
-                    const indexByUntrackedItems = untrackedItems.findIndex(v => v.instance.id === elId);
-                    if (indexByUntrackedItems > -1) {
-                        el.instance.item = item;
-                        untrackedItems.splice(indexByUntrackedItems, 1);
-                        continue;
-                    }
-                }
-                delete this._trackMap[item.id];
-            }
-            if (untrackedItems.length > 0) {
-                const el = untrackedItems.shift(), item = displayItems[i];
-                if (el) {
-                    el.instance.item = item;
-                    this._trackMap[item.id] = el.instance.id;
-                }
-            }
-        }
-        if (untrackedItems.length) {
-            throw Error('tracking by id caused an error');
+    tracking() {
+        this._trackBox.track(this.dynamicSize());
+    }
+    resetBoundsSize(isVertical, totalSize) {
+        const l = this._list();
+        if (l) {
+            l.nativeElement.style[isVertical ? 'height' : 'width'] = `${totalSize}px`;
         }
     }
     /**
@@ -398,6 +852,9 @@ class NgVirtualListComponent {
         }
     }
     ngOnDestroy() {
+        if (this._trackBox) {
+            this._trackBox.dispose();
+        }
         const containerEl = this._container();
         if (containerEl) {
             containerEl.nativeElement.removeEventListener('scroll', this._onScrollHandler);
@@ -414,7 +871,7 @@ class NgVirtualListComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: NgVirtualListComponent, isStandalone: true, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, snapToItem: { classPropertyName: "snapToItem", publicName: "snapToItem", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, stickyMap: { classPropertyName: "stickyMap", publicName: "stickyMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, itemsOffset: { classPropertyName: "itemsOffset", publicName: "itemsOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div #container part=\"scroller\" class=\"ngvl__container\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__container{overflow:auto;width:100%;height:100%}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "19.2.14", type: NgVirtualListComponent, isStandalone: true, selector: "ng-virtual-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: true, transformFunction: null }, snap: { classPropertyName: "snap", publicName: "snap", isSignal: true, isRequired: false, transformFunction: null }, snapToItem: { classPropertyName: "snapToItem", publicName: "snapToItem", isSignal: true, isRequired: false, transformFunction: null }, itemRenderer: { classPropertyName: "itemRenderer", publicName: "itemRenderer", isSignal: true, isRequired: true, transformFunction: null }, stickyMap: { classPropertyName: "stickyMap", publicName: "stickyMap", isSignal: true, isRequired: false, transformFunction: null }, itemSize: { classPropertyName: "itemSize", publicName: "itemSize", isSignal: true, isRequired: false, transformFunction: null }, dynamicSize: { classPropertyName: "dynamicSize", publicName: "dynamicSize", isSignal: true, isRequired: false, transformFunction: null }, direction: { classPropertyName: "direction", publicName: "direction", isSignal: true, isRequired: false, transformFunction: null }, itemsOffset: { classPropertyName: "itemsOffset", publicName: "itemsOffset", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onScroll: "onScroll", onScrollEnd: "onScrollEnd" }, viewQueries: [{ propertyName: "_container", first: true, predicate: ["container"], descendants: true, isSignal: true }, { propertyName: "_list", first: true, predicate: ["list"], descendants: true, isSignal: true }, { propertyName: "_listContainerRef", first: true, predicate: ["renderersContainer"], descendants: true, read: ViewContainerRef }], ngImport: i0, template: "<div #container part=\"scroller\" class=\"ngvl__container\">\r\n  <ul #list part=\"list\" class=\"ngvl__list\">\r\n    <ng-container #renderersContainer></ng-container>\r\n  </ul>\r\n</div>", styles: [":host{display:block;width:400px;overflow:hidden}:host(.horizontal){height:48px}:host(.vertical){height:320px}.ngvl__container{overflow:auto;width:100%;height:100%}.ngvl__list{position:relative;list-style:none;padding:0;margin:0;width:100%;height:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.ShadowDom });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.14", ngImport: i0, type: NgVirtualListComponent, decorators: [{
             type: Component,