ng-virtual-list 20.10.6 → 20.10.7

package/README.md

@@ -732,19 +732,6 @@ Properties
 
 <br/>
 
-## 📦 Previous versions
-
-| Angular version | ng-virtual-list version | git | npm |
-|--|--|--|--|
-| 19.x | 19.10.1 | [19.x](https://github.com/DjonnyX/ng-virtual-list/tree/19.x) | [19.10.1](https://www.npmjs.com/package/ng-virtual-list/v/19.10.1) |
-| 18.x | 18.10.1 | [18.x](https://github.com/DjonnyX/ng-virtual-list/tree/18.x) | [18.10.1](https://www.npmjs.com/package/ng-virtual-list/v/18.10.1) |
-| 17.x | 17.10.1 | [17.x](https://github.com/DjonnyX/ng-virtual-list/tree/17.x) | [17.10.1](https://www.npmjs.com/package/ng-virtual-list/v/17.10.1) |
-| 16.x | 16.10.0 | [16.x](https://github.com/DjonnyX/ng-virtual-list/tree/16.x) | [16.10.0](https://www.npmjs.com/package/ng-virtual-list/v/16.10.0) |
-| 15.x | 15.10.0 | [15.x](https://github.com/DjonnyX/ng-virtual-list/tree/15.x) | [15.10.0](https://www.npmjs.com/package/ng-virtual-list/v/15.10.0) |
-| 14.x | 14.10.1 | [14.x](https://github.com/DjonnyX/ng-virtual-list/tree/14.x) | [14.10.1](https://www.npmjs.com/package/ng-virtual-list/v/14.10.1) |
-
-<br/>
-
 ## 🤝 Contributing
 
 PRs and feature requests are welcome!

package/fesm2022/ng-virtual-list.mjs

@@ -3099,6 +3099,9 @@ class NgScrollView {
     }
     _destroyRef = inject(DestroyRef);
     _isMoving = false;
+    get isMoving() {
+        return this._isMoving;
+    }
     _x = 0;
     set x(v) {
         this._x = this._actualX = v;
@@ -3113,7 +3116,7 @@ class NgScrollView {
     set totalSize(v) {
         this._totalSize = v;
     }
-    _prevTotalSize = this._totalSize;
+    _startPosition = this._totalSize;
     get actualScrollHeight() {
         const { height: viewportHeight } = this.viewportBounds(), totalSize = this._totalSize;
         if (this._inversion) {
@@ -3177,6 +3180,9 @@ class NgScrollView {
     _interactive = true;
     _inversion = inject(SCROLL_VIEW_INVERSION);
     _overscrollIteration = 0;
+    set delta(v) {
+        this._startPosition += v;
+    }
     constructor() {
         this._viewportResizeObserver = new ResizeObserver(this._onResizeViewportHandler);
         this._contentResizeObserver = new ResizeObserver(this._onResizeContentHandler);
@@ -3215,21 +3221,17 @@ class NgScrollView {
                 if (target.classList.contains(INTERACTIVE)) {
                     return of(undefined);
                 }
-                this._prevTotalSize = this._totalSize;
                 const inversion = this._inversion, isVertical = this.isVertical();
                 this._isMoving = true;
                 this.grabbing.set(true);
-                const startPos = isVertical ? this.y : this.x;
+                this._startPosition = (isVertical ? this.y : this.x);
                 let prevClientPosition = 0, startClientPos = isVertical ? e.clientY : e.clientX, offsets = new Array(), velocities = new Array(), startTime = Date.now();
                 return fromEvent(window, MOUSE_MOVE, { passive: false }).pipe(takeUntilDestroyed(this._destroyRef), takeUntil$1($mouseDragCancel), tap(e => {
                     this.checkOverscroll(e);
                 }), switchMap$1(e => {
-                    startClientPos += (this._totalSize - this._prevTotalSize);
-                    this._prevTotalSize = this._totalSize;
-                    const currentPos = (isVertical ? e.clientY : e.clientX), scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, delta = (inversion ? -1 : 1) * (startClientPos - currentPos), dp = startPos + delta, position = Math.round(dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp), endTime = Date.now(), timestamp = endTime - startTime, scrollDelta = prevClientPosition === 0 ? 0 : prevClientPosition - currentPos, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp);
-                    this.calculateAcceleration(velocities, v0, timestamp);
+                    const { position, currentPos, endTime, scrollDelta } = this.calculatePosition(isVertical, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities);
                     prevClientPosition = currentPos;
-                    this.move(isVertical, position, false, true);
+                    this.move(isVertical, position, true, true, true);
                     startTime = endTime;
                     return race([fromEvent(window, MOUSE_UP, { passive: false }), fromEvent(content, MOUSE_UP, { passive: false })]).pipe(takeUntilDestroyed(this._destroyRef), tap(e => {
                         this.cancelOverscroll();
@@ -3257,21 +3259,17 @@ class NgScrollView {
                 if (target.classList.contains(INTERACTIVE)) {
                     return of(undefined);
                 }
-                this._prevTotalSize = this._totalSize;
                 const inversion = this._inversion, isVertical = this.isVertical();
                 this._isMoving = true;
                 this.grabbing.set(true);
-                const startPos = isVertical ? this.y : this.x;
-                let prevClientPosition = 0, startClientPos = isVertical ? e.touches[e.touches.length - 1].clientY : e.touches[e.touches.length - 1].clientX, offsets = new Array(), velocities = new Array(), startTime = Date.now(), prevTotalSize = this._totalSize;
+                this._startPosition = (isVertical ? this.y : this.x);
+                let prevClientPosition = 0, startClientPos = isVertical ? e.touches[e.touches.length - 1].clientY : e.touches[e.touches.length - 1].clientX, offsets = new Array(), velocities = new Array(), startTime = Date.now();
                 return fromEvent(window, TOUCH_MOVE, { passive: false }).pipe(takeUntilDestroyed(this._destroyRef), takeUntil$1($touchCanceler), tap(e => {
                     this.checkOverscroll(e);
                 }), switchMap$1(e => {
-                    startClientPos += (this._totalSize - prevTotalSize);
-                    prevTotalSize = this._totalSize;
-                    const currentPos = isVertical ? e.touches[e.touches.length - 1].clientY : e.touches[e.touches.length - 1].clientX, scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, delta = (inversion ? -1 : 1) * (startClientPos - currentPos), dp = startPos + delta, position = Math.round(dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp), endTime = Date.now(), timestamp = endTime - startTime, scrollDelta = prevClientPosition === 0 ? 0 : prevClientPosition - currentPos, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp);
-                    this.calculateAcceleration(velocities, v0, timestamp);
+                    const { position, currentPos, endTime, scrollDelta } = this.calculatePosition(isVertical, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities);
                     prevClientPosition = currentPos;
-                    this.move(isVertical, position, false, true);
+                    this.move(isVertical, position, true, true, true);
                     startTime = endTime;
                     return race([fromEvent(window, TOUCH_END, { passive: false }), fromEvent(content, TOUCH_END, { passive: false })]).pipe(takeUntilDestroyed(this._destroyRef), tap(e => {
                         this.cancelOverscroll();
@@ -3287,6 +3285,14 @@ class NgScrollView {
             }));
         })).subscribe();
     }
+    calculatePosition(isVertical, e, inversion, startClientPos, startTime, prevClientPosition, offsets, velocities) {
+        const currentPos = isVertical ? e.touches?.[e.touches?.length - 1]?.clientY || e.clientY : e.touches?.[e.touches?.length - 1]?.clientX || e.clientX, scrollSize = isVertical ? this.scrollHeight : this.scrollWidth, delta = (inversion ? -1 : 1) * (startClientPos - currentPos), dp = this._startPosition + delta, position = Math.round(dp < 0 ? 0 : dp > scrollSize ? scrollSize : dp), endTime = Date.now(), timestamp = endTime - startTime, scrollDelta = prevClientPosition === 0 ? 0 : prevClientPosition - currentPos, { v0 } = this.calculateVelocity(offsets, scrollDelta, timestamp);
+        this.calculateAcceleration(velocities, v0, timestamp);
+        prevClientPosition = currentPos;
+        this.move(isVertical, position, true, true, true);
+        startTime = endTime;
+        return { position, currentPos, endTime, scrollDelta };
+    }
     cancelOverscroll() {
         if (!this.overscrollEnabled()) {
             return;
@@ -3370,7 +3376,6 @@ class NgScrollView {
     }
     move(isVertical, position, blending = false, userAction = false, fireUpdate = true) {
         this.scroll({ [isVertical ? TOP$1 : LEFT$1]: position, behavior: INSTANT$1, blending, userAction, fireUpdate });
-        this._prevTotalSize = this._totalSize;
     }
     moveWithAcceleration(isVertical, position, v0, v, a0) {
         if (a0 !== 0) {
@@ -5137,6 +5142,7 @@ class NgVirtualListComponent {
                 if (this._isSnappingMethodAdvanced) {
                     this.updateRegularRenderer();
                 }
+                scroller.delta = delta;
                 this._trackBox.clearDelta();
                 if ((snapScrollToBottom && this._trackBox.isSnappedToEnd) ||
                     (snapScrollToBottom && actualScrollSize > 0 &&
@@ -5154,7 +5160,7 @@ class NgVirtualListComponent {
                         const params = {
                             [isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: roundedMaxPositionAfterUpdate,
                             fireUpdate: false, behavior: BEHAVIOR_INSTANT,
-                            blending: false, duration: this.animationParams().scrollToItem,
+                            blending: scroller.isMoving, duration: this.animationParams().scrollToItem,
                         };
                         scroller?.scrollTo?.(params);
                         this._$update.next(this.getScrollStateVersion(totalSize, this._isVertical ? scroller.scrollTop : scroller.scrollLeft, cacheVersion));
@@ -5313,7 +5319,7 @@ class NgVirtualListComponent {
                 if (items && items.length) {
                     const dynamicSize = this.dynamicSize(), itemSize = this.itemSize();
                     if (dynamicSize) {
-                        const { width, height, x, y } = this._bounds() || { x: 0, y: 0, width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), items = this._actualItems(), isVertical = this._isVertical, currentScollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), delta = this._trackBox.delta, opts = {
+                        const { width, height, x, y } = this._bounds() || { x: 0, y: 0, width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, itemConfigMap = this.itemConfigMap(), items = this._actualItems(), isVertical = this._isVertical, currentScrollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), delta = this._trackBox.delta, opts = {
                             bounds: { width, height, x, y }, collection: items, dynamicSize, isVertical: this._isVertical, itemSize,
                             bufferSize: this.bufferSize(), maxBufferSize: this.maxBufferSize(),
                             scrollSize: (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft) + delta,
@@ -5341,7 +5347,7 @@ class NgVirtualListComponent {
                             return of([true, { id, blending, scroller: scrollerComponent, scrollCalled, cb }]);
                         }
                         this._$snapScrollToEndCanceller.next(true);
-                        const notChanged = actualScrollSize === currentScollSize;
+                        const notChanged = actualScrollSize === currentScrollSize;
                         scrollerComponent?.scrollTo?.(params);
                         if ((!notChanged && iteration < MAX_SCROLL_TO_ITERATIONS) || iteration < MAX_SCROLL_TO_ITERATIONS) {
                             this._$scrollTo.next(params);
@@ -5358,8 +5364,8 @@ class NgVirtualListComponent {
                     else {
                         const index = items.findIndex(item => item[trackBy] === id);
                         if (index > -1) {
-                            const isVertical = this._isVertical, currentScollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), scrollSize = index * this.itemSize();
-                            if (currentScollSize !== scrollSize) {
+                            const isVertical = this._isVertical, currentScrollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), scrollSize = index * this.itemSize();
+                            if (currentScrollSize !== scrollSize) {
                                 this._$snapScrollToEndCanceller.next(true);
                                 const params = {
                                     [this._isVertical ? TOP_PROP_NAME : LEFT_PROP_NAME]: scrollSize,
@@ -5457,8 +5463,8 @@ class NgVirtualListComponent {
     emitScrollEvent(isScrollEnd = false, update = true) {
         const scrollerEl = this._scroller()?.nativeElement, scrollerComponent = this._scrollerComponent();
         if (scrollerEl && scrollerComponent) {
-            const isVertical = this._isVertical, scrollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), bounds = this._bounds() || { x: 0, y: 0, width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, currentScollSize = this._scrollSize();
-            this._trackBox.deltaDirection = currentScollSize > scrollSize ? -1 : currentScollSize < scrollSize ? 1 : 0;
+            const isVertical = this._isVertical, scrollSize = (isVertical ? scrollerComponent.scrollTop : scrollerComponent.scrollLeft), bounds = this._bounds() || { x: 0, y: 0, width: DEFAULT_LIST_SIZE, height: DEFAULT_LIST_SIZE }, currentScrollSize = this._scrollSize();
+            this._trackBox.deltaDirection = currentScrollSize > scrollSize ? -1 : currentScrollSize < scrollSize ? 1 : 0;
             const itemsRange = formatActualDisplayItems(this._service.displayItems, this.scrollStartOffset(), this.scrollEndOffset(), scrollSize, isVertical, bounds), event = new ScrollEvent({
                 direction: this._trackBox.scrollDirection, container: scrollerEl,
                 list: this._list().nativeElement, delta: this._trackBox.delta,