@progress/kendo-angular-grid 19.3.1-develop.4 → 20.0.0-develop.1

package/esm2022/scrolling/row-height.service.mjs

@@ -2,26 +2,15 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-/**
- * @hidden
- */
-const update = (arr, idx, value) => ([
-    ...arr.slice(0, idx + 1),
-    ...(arr.slice(idx + 1).map(x => x + value))
-]);
 /**
  * @hidden
  */
 export class RowHeightService {
     total;
-    rowHeight;
-    detailRowHeight;
     offsets = [];
     heights = [];
-    constructor(total = 0, rowHeight, detailRowHeight) {
+    constructor(total = 0, rowHeight) {
         this.total = total;
-        this.rowHeight = rowHeight;
-        this.detailRowHeight = detailRowHeight;
         let agg = 0;
         for (let idx = 0; idx < total; idx++) {
             this.offsets.push(agg);
@@ -32,66 +21,35 @@ export class RowHeightService {
     height(rowIndex) {
         return this.heights[rowIndex];
     }
-    expandDetail(rowIndex) {
-        if (this.height(rowIndex) === this.rowHeight) {
-            this.updateRowHeight(rowIndex, this.detailRowHeight);
-        }
-    }
-    collapseDetail(rowIndex) {
-        if (this.height(rowIndex) > this.rowHeight) {
-            this.updateRowHeight(rowIndex, this.detailRowHeight * -1);
-        }
-    }
-    isExpanded(rowIndex) {
-        return this.height(rowIndex) > this.rowHeight;
-    }
     index(position) {
-        if (position < 0) {
-            return undefined;
-        }
-        const result = this.offsets.reduce((prev, current, idx) => {
-            if (prev !== undefined) {
-                return prev;
-            }
-            else if (current === position) {
-                return idx;
+        for (let i = 0; i < this.offsets.length; i++) {
+            if (position === this.offsets[i]) {
+                return i;
             }
-            else if (current > position) {
-                return idx - 1;
-            }
-            return undefined;
-        }, undefined);
-        return result === undefined ? this.total - 1 : result;
-    }
-    offset(rowIndex, adjustIndex = false) {
-        if (adjustIndex) {
-            let targetOffset = 0;
-            let targetIndex = 0;
-            for (let i = 0; i < rowIndex; i++) {
-                targetOffset += this.rowHeight;
-                targetIndex++;
-                if (targetIndex === rowIndex) {
-                    return targetOffset;
-                }
-                if (this.isExpanded(i)) {
-                    targetOffset += this.detailRowHeight;
-                    targetIndex++;
-                    if (targetIndex === rowIndex) {
-                        return targetOffset;
-                    }
-                }
+            if (position < this.offsets[i]) {
+                return i - 1;
             }
-            return targetOffset;
         }
+        return this.total - 1;
+    }
+    offset(rowIndex) {
         return this.offsets[rowIndex];
     }
     totalHeight() {
-        return this.heights.reduce((prev, curr) => prev + curr, 0);
-    }
-    updateRowHeight(rowIndex, value) {
-        if (this.total > 0) {
-            this.heights[rowIndex] += value;
-            this.offsets = update(this.offsets, rowIndex, value);
+        if (!this.offsets.length) {
+            return 0;
+        }
+        const lastOffset = this.offsets[this.offsets.length - 1];
+        const lastHeight = this.heights[this.heights.length - 1];
+        return lastOffset + lastHeight;
+    }
+    update(startIndex, rowHeights) {
+        let agg = this.offsets[startIndex];
+        for (let i = startIndex; i < this.heights.length; i++) {
+            this.offsets[i] = agg;
+            const currHeight = rowHeights[i - startIndex] || this.heights[i];
+            agg += currHeight;
+            this.heights[i] = currHeight;
         }
     }
 }

package/esm2022/scrolling/scroller.service.mjs

@@ -2,15 +2,17 @@
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
-import { isDocumentAvailable } from '@progress/kendo-angular-common';
+import { isFirefox, firefoxMaxHeight, isDocumentAvailable } from '@progress/kendo-angular-common';
 import { Observable, BehaviorSubject } from 'rxjs';
 /**
  * @hidden
  */
 export class ScrollAction {
     offset;
-    constructor(offset) {
+    changeVirtualData;
+    constructor(offset, changeVirtualData) {
         this.offset = offset;
+        this.changeVirtualData = changeVirtualData;
     }
 }
 /**
@@ -35,16 +37,29 @@ const SCROLL_BOTTOM_THRESHOLD = 2;
  */
 export class ScrollerService {
     scrollObservable;
-    firstLoaded = 0;
-    lastLoaded;
-    lastScrollTop;
-    take;
-    total;
+    ctx;
+    total = 0;
     rowHeightService;
+    table = null;
+    tableBody = null;
+    container = null;
+    scrollHeightContainer = null;
+    scrollableVirtual = false;
+    tableTransformOffset = 0;
+    virtualSkip = 0;
+    virtualPageSize = 0;
+    firstToLoad = 0;
+    lastLoaded = 0;
+    scrollSyncing = false;
+    take;
     scrollSubscription;
     subscription;
-    constructor(scrollObservable) {
+    lastScrollTop = 0;
+    firstLoaded = 0;
+    expandedRows = {};
+    constructor(scrollObservable, ctx) {
         this.scrollObservable = scrollObservable;
+        this.ctx = ctx;
     }
     create(rowHeightService, skip, take, total) {
         this.rowHeightService = rowHeightService;
@@ -53,13 +68,50 @@ export class ScrollerService {
         this.take = take;
         this.total = total;
         this.lastScrollTop = 0;
-        const subject = new BehaviorSubject(new ScrollAction(this.rowHeightService.offset(skip)));
+        const offset = this.rowHeightService.offset(skip);
+        const subject = new BehaviorSubject(new ScrollAction(offset, this.scrollableVirtual && (Boolean(this.ctx.grid?.pageable) || Boolean(this.ctx.grid?.group?.length))));
         this.subscription = Observable.create(observer => {
             this.unsubscribe();
             this.scrollSubscription = this.scrollObservable.subscribe(x => this.onScroll(x, observer));
         }).subscribe(x => subject.next(x));
         return subject;
     }
+    reset(skipScroll = false) {
+        if (!skipScroll) {
+            this.firstToLoad = 0;
+            this.firstLoaded = 0;
+            this.lastLoaded = 0;
+            this.virtualSkip = 0;
+        }
+        this.rowHeightService = undefined;
+        if (skipScroll) {
+            this.scrollSyncing = true;
+        }
+        if (!skipScroll && this.container && this.container.scrollTop !== 0) {
+            this.scrollSyncing = true;
+            this.container.scrollTop = 0;
+            this.lastScrollTop = 0;
+            this.translate(0, true);
+            this.tableTransformOffset = 0;
+        }
+    }
+    update(skipAdjust = false) {
+        const itemHeights = this.getItemHeights();
+        if (this.firstLoaded > this.firstToLoad) {
+            // Scrolled up
+            const count = Math.min(this.firstLoaded - this.firstToLoad, this.take);
+            const newItemsHeight = this.getTotalHeight(count, itemHeights);
+            const newItemsExpectedHeight = this.getExpectedTotalHeight(count);
+            const diff = newItemsHeight - newItemsExpectedHeight;
+            if (!skipAdjust && diff !== 0) {
+                this.adjustScroll(diff);
+            }
+        }
+        this.rowHeightService?.update(this.firstToLoad, itemHeights);
+        this.scrollHeightContainer && this.setScrollHeightContainerHeight();
+        this.firstLoaded = this.firstToLoad;
+        this.lastLoaded = this.firstLoaded + itemHeights.length - 1;
+    }
     destroy() {
         this.unsubscribe();
         if (this.subscription) {
@@ -67,42 +119,49 @@ export class ScrollerService {
         }
     }
     onScroll({ scrollTop, offsetHeight, scrollHeight, clientHeight }, observer) {
+        if (this.scrollSyncing) {
+            this.scrollSyncing = false;
+            return;
+        }
         if (!isDocumentAvailable() || (this.lastScrollTop === scrollTop)) {
             return;
         }
         const up = this.lastScrollTop >= scrollTop;
+        const down = !up;
         this.lastScrollTop = scrollTop;
         let firstItemIndex = this.rowHeightService.index(scrollTop);
-        let firstItemOffset = this.rowHeightService.offset(firstItemIndex);
         const lastItemIndex = this.rowHeightService.index(scrollTop + offsetHeight);
-        if (!up) {
-            if (lastItemIndex >= this.lastLoaded && this.lastLoaded < this.total) {
-                const overflow = (firstItemIndex + this.take) - this.total;
-                if (overflow > 0) {
-                    firstItemIndex = firstItemIndex - overflow;
-                    firstItemOffset = this.rowHeightService.offset(firstItemIndex);
-                }
-                this.firstLoaded = firstItemIndex;
-                observer.next(new ScrollAction(firstItemOffset));
-                let nextTake = this.firstLoaded + this.take;
-                this.lastLoaded = Math.min(nextTake, this.total);
-                nextTake = nextTake > this.total ? this.total - this.firstLoaded : this.take;
-                observer.next(new PageAction(this.firstLoaded, this.take));
-            }
-            else {
-                const atBottom = scrollHeight - clientHeight - scrollTop < SCROLL_BOTTOM_THRESHOLD;
-                if (atBottom) {
-                    observer.next(new ScrollBottomAction());
-                }
+        const overflow = Math.max(firstItemIndex + (this.virtualPageSize || this.take) - this.total, 0);
+        firstItemIndex = Math.max(firstItemIndex - overflow, 0);
+        if (lastItemIndex < this.lastLoaded) {
+            this.lastLoaded = lastItemIndex;
+        }
+        if (down) {
+            const atBottom = scrollHeight - clientHeight - scrollTop < SCROLL_BOTTOM_THRESHOLD;
+            if (atBottom) {
+                observer.next(new ScrollBottomAction());
             }
         }
-        if (up && firstItemIndex < this.firstLoaded) {
-            const nonVisibleBuffer = Math.floor(this.take * 0.3);
-            this.firstLoaded = Math.max(firstItemIndex - nonVisibleBuffer, 0);
-            observer.next(new ScrollAction(this.rowHeightService.offset(this.firstLoaded)));
-            this.lastLoaded = Math.min(this.firstLoaded + this.take, this.total);
-            observer.next(new PageAction(this.firstLoaded, this.take));
+        if (!this.scrollableVirtual) {
+            return;
+        }
+        if (down && lastItemIndex >= this.lastLoaded && this.lastLoaded < this.total - 1) {
+            this.firstToLoad = firstItemIndex;
+            this.loadPage(observer);
+        }
+        else if (up && firstItemIndex < this.firstLoaded) {
+            const nonVisibleBuffer = Math.max(Math.floor((this.virtualPageSize || this.take) * 0.3) - overflow, 0);
+            this.firstToLoad = Math.max(firstItemIndex - nonVisibleBuffer, 0);
+            this.loadPage(observer);
+        }
+    }
+    loadPage(observer) {
+        if (!this.rowHeightService) {
+            return;
         }
+        this.translate(this.rowHeightService.offset(this.firstToLoad));
+        observer.next(new ScrollAction(this.rowHeightService.offset(this.firstToLoad)));
+        this.virtualPageChange(this.firstToLoad, observer);
     }
     unsubscribe() {
         if (this.scrollSubscription) {
@@ -110,4 +169,85 @@ export class ScrollerService {
             this.scrollSubscription = undefined;
         }
     }
+    translate(dY, forceSet) {
+        if (this.scrollableVirtual && this.table) {
+            if (forceSet) {
+                this.table.style.transform = 'translateY(' + dY + 'px)';
+            }
+            else {
+                this.tableTransformOffset = dY;
+            }
+        }
+    }
+    adjustScroll(scrollOffset, initialAdjust = false) {
+        if (Number.isNaN(scrollOffset)) {
+            return;
+        }
+        this.scrollSyncing = true;
+        if (this.container) {
+            if (initialAdjust) {
+                this.container.scrollTop = scrollOffset;
+                this.translate(scrollOffset, true);
+                this.tableTransformOffset = scrollOffset;
+                this.firstToLoad = this.rowHeightService.index(scrollOffset);
+            }
+            else {
+                this.container.scrollTop += scrollOffset;
+            }
+        }
+    }
+    isExpanded(rowIndex) {
+        return this.expandedRows[rowIndex] || false;
+    }
+    resetVirtualSkip = () => {
+        if (this.scrollableVirtual && this.virtualSkip) {
+            this.virtualSkip = 0;
+        }
+    };
+    setScrollHeightContainerHeight() {
+        if (this.scrollableVirtual) {
+            let containerHeight = this.rowHeightService?.totalHeight() || 0;
+            containerHeight = isFirefox ? Math.min(firefoxMaxHeight, containerHeight) : containerHeight;
+            this.scrollHeightContainer.style.height = containerHeight + 'px';
+        }
+        else {
+            this.scrollHeightContainer.style.height = '0';
+        }
+    }
+    getItemHeights() {
+        const result = [];
+        if (this.tableBody) {
+            Array.from(this.tableBody.children).forEach((item, index) => {
+                const itemHeight = item.getBoundingClientRect().height;
+                if (item.classList.contains('k-detail-row')) {
+                    result[result.length - 1] += itemHeight;
+                    this.expandedRows[index] = true;
+                }
+                else {
+                    result.push(itemHeight);
+                }
+            });
+        }
+        return result;
+    }
+    getTotalHeight(count, itemHeights) {
+        return itemHeights.slice(0, count).reduce((sum, current) => sum + current, 0);
+    }
+    getExpectedTotalHeight(count) {
+        const service = this.rowHeightService;
+        if (!service) {
+            return 0;
+        }
+        const lastItemIndex = this.firstToLoad + (count - 1);
+        return service.offset(lastItemIndex) + service.height(lastItemIndex) - service.offset(this.firstToLoad);
+    }
+    virtualPageChange = (skip, observer) => {
+        if (this.ctx.grid.pageable || this.ctx.grid.group?.length) {
+            this.virtualSkip = skip;
+            observer.next(new ScrollAction(this.rowHeightService?.offset(skip) || 0, true));
+        }
+        else if (skip !== this.ctx.grid.skip) {
+            observer.next(new PageAction(Math.max(0, skip), this.take));
+        }
+    };
 }