@revolist/revogrid 4.23.3 → 4.23.4

package/dist/types/components/scroll/revogr-viewport-scroll.d.ts

@@ -90,6 +90,7 @@ export declare class RevogrViewportScroll implements ElementScroll {
     setScrollVisibility(type: DimensionType, size: number, innerContentSize: number): void;
     disconnectedCallback(): void;
     componentDidRender(): Promise<void>;
+    private setScrollParams;
     render(): any;
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

package/dist/types/services/scroll.dimension.helpers.d.ts

@@ -5,11 +5,30 @@ export type ScrollDimensionInput = {
     maxScrollSize?: number;
 };
 export type ScrollDimension = {
+    /**
+     * Real logical grid content size
+     * e.g. 1_000_000 rows * 46px = 46_000_000px.
+     */
     contentSize: number;
+    /**
+     * Visible viewport size provided by the browser
+     * e.g. 600px height of the scrollable container.
+     */
     clientSize: number;
     viewportSize: number;
+    /**
+     * Fake DOM scrollable size that RevoGrid gives the browser scrollbar.
+     * Grid maps between physical scrollbar coordinates and logical grid coordinates so rows still represent the full dataset.
+     */
     physicalContentSize: number;
+    /**
+     * How far the grid should be scrollable logically.
+     * contentSize - viewportSize, meaning the largest valid logical scroll coordinate.
+     */
     logicalScrollSize: number;
+    /**
+     * How far the browser scrollbar can actually move.
+     */
     physicalScrollSize: number;
     isCompressed: boolean;
     toLogicalCoordinate(coordinate: number): number;

package/dist/types/store/vp/viewport.helpers.d.ts

@@ -2,6 +2,29 @@ import type { DimensionSettingsState, PositionItem, ViewSettingSizeProp, Viewpor
 export type DimensionDataViewport = Pick<DimensionSettingsState, 'indexes' | 'positionIndexes' | 'positionIndexToItem' | 'sizes' | 'originItemSize' | 'realSize'>;
 export type ItemsToUpdate = Pick<ViewportStateItems, 'items' | 'start' | 'end'>;
 export declare function getViewportMaxCoordinate(dimension: Pick<DimensionSettingsState, 'realSize' | 'originItemSize'>, viewportSize: number, frameOffset?: number): number;
+/**
+ * Clamp the viewport coordinate within the valid range.
+ * Given a scroll position, pick a safe starting point for rendering visible items.
+ *
+ * Do not use it when you need the exact scroll position for positioning math.
+ *
+ * It does two things:
+ * 1. If the coordinate is below 0, use 0.
+ * 2. If the coordinate is too close to the very end, pull it back a bit.
+ *
+ * Example:
+ *
+ * content height: 1000px
+ * viewport height: 200px
+ * row height: 30px
+ * The real max scroll is:
+ *
+ * 1000 - 200 = 800
+ * But clampViewportCoordinate may clamp to:
+ *
+ * 1000 - 200 - 30 = 770
+ * Ask for 800 -> it returns 770.
+ */
 export declare function clampViewportCoordinate(coordinate: number, dimension: Pick<DimensionSettingsState, 'realSize' | 'originItemSize'>, viewportSize: number, frameOffset?: number): number;
 /**
  * Update items based on new scroll position

package/hydrate/index.js

@@ -12051,6 +12051,29 @@ function getViewportMaxCoordinate(dimension, viewportSize, frameOffset = 1) {
     }
     return Math.max(0, dimension.realSize - viewportSize - dimension.originItemSize * frameOffset);
 }
+/**
+ * Clamp the viewport coordinate within the valid range.
+ * Given a scroll position, pick a safe starting point for rendering visible items.
+ *
+ * Do not use it when you need the exact scroll position for positioning math.
+ *
+ * It does two things:
+ * 1. If the coordinate is below 0, use 0.
+ * 2. If the coordinate is too close to the very end, pull it back a bit.
+ *
+ * Example:
+ *
+ * content height: 1000px
+ * viewport height: 200px
+ * row height: 30px
+ * The real max scroll is:
+ *
+ * 1000 - 200 = 800
+ * But clampViewportCoordinate may clamp to:
+ *
+ * 1000 - 200 - 30 = 770
+ * Ask for 800 -> it returns 770.
+ */
 function clampViewportCoordinate(coordinate, dimension, viewportSize, frameOffset = 1) {
     return Math.min(Math.max(0, coordinate), getViewportMaxCoordinate(dimension, viewportSize, frameOffset));
 }
@@ -14946,7 +14969,16 @@ class DimensionProvider {
             clientSize,
             virtualSize: viewportSize,
         });
-        const renderCoordinate = clampViewportCoordinate(coordinate, dimension, viewportSize);
+        // Render offset must use the true logical scroll coordinate
+        // It is the logical scroll position that should be used for compressed-scroll offset math.
+        const renderCoordinate = Math.min(Math.max(0, coordinate), // prevents negative scroll positions
+        scrollDimension.logicalScrollSize); // prevents positions past the logical end
+        /**
+         * If viewport sizing is initialized (clientSize and viewportSize are truthy), calculate the offset needed for compressed scroll.
+         * Otherwise keep renderOffset at 0, because there is not enough measurement data yet.
+         *
+         * In normal scrolling, logical and physical coordinates are the same, so offset is 0.
+         */
         const renderOffset = clientSize && viewportSize
             ? scrollDimension.getRenderOffset(renderCoordinate)
             : 0;
@@ -21603,6 +21635,7 @@ class GridResizeService {
     }
     destroy() {
         var _a;
+        this.apply.cancel();
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = null;
     }
@@ -21747,6 +21780,10 @@ class RevogrViewportScroll {
                 scroll: this.horizontalScroll.scrollLeft,
                 noScroll: this.colType !== 'rgCol',
             };
+            this.setScrollParams({
+                rgRow: calculatedHeight,
+                rgCol: calculatedWidth,
+            });
             // Process changes in order: width first, then height
             const dimensions = ['rgCol', 'rgRow'];
             for (const dimension of dimensions) {
@@ -21803,24 +21840,30 @@ class RevogrViewportScroll {
     }
     async componentDidRender() {
         var _a, _b, _c, _d;
+        this.setScrollParams({
+            rgRow: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            rgCol: this.horizontalScroll.clientWidth,
+        });
+        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
+        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
+    }
+    setScrollParams(clientSize) {
         this.localScrollService.setParams({
             contentSize: this.contentHeight,
-            clientSize: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            clientSize: clientSize.rgRow,
             virtualSize: 0,
         }, 'rgRow');
         this.localScrollService.setParams({
             contentSize: this.contentWidth,
-            clientSize: this.horizontalScroll.clientWidth,
+            clientSize: clientSize.rgCol,
             virtualSize: 0,
         }, 'rgCol');
-        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
-        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
         var _a, _b;
         const physicalContentHeight = getContentSize(this.contentHeight, (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
         const physicalContentWidth = getContentSize(this.contentWidth, 0);
-        return (hAsync(Host, { key: 'e52df53dcdcac76f02160615399c558e78fe5825', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '6821c4472db2208c2d52da9d6d43a7e5343d15bb', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: '1916ec94af312621ed4d937c905ed745a23a7d3b', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '2348a566b127f27d969a4e2ff67fab4022501ceb', name: HEADER_SLOT })), hAsync("div", { key: 'd88eebb7b0028b350f5b0feb6b3893efbd3f645c', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: '1778856706d9d6bbc52882a150cb66c9b3f11e06', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '200bc8a9e692b6183ac2665b68961d28892f7cab', name: CONTENT_SLOT }))), hAsync("div", { key: 'dc812739b4ad829867dd1effe94a871be247979a', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '06e3b3a4f88c477dc33268ee317856820f2650e6', name: FOOTER_SLOT })))));
+        return (hAsync(Host, { key: 'ec8d907976c1d50f7aab3c263be3f0249a274df6', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'e35696a7993ac94261426b45c28d488cdc42b7f0', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: 'a6997451e01eacda1d27d4efa1d74e1748626218', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '1d401e87d32d5b1531c2211723b552bbc894f22c', name: HEADER_SLOT })), hAsync("div", { key: 'ceab6f9e812d6ca9a0aa376afcd2562a17f505e0', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'a9556578a23d6efddec2e982e863aec064042154', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '0ae01f9736b9740612e75261f6e3abebda533377', name: CONTENT_SLOT }))), hAsync("div", { key: '09c2565d4ed449a43820f92d97b6558fca3758e7', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '1ffb08ff8138a560cc09d82e3fe22a53e502aafe', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

package/hydrate/index.mjs

@@ -12049,6 +12049,29 @@ function getViewportMaxCoordinate(dimension, viewportSize, frameOffset = 1) {
     }
     return Math.max(0, dimension.realSize - viewportSize - dimension.originItemSize * frameOffset);
 }
+/**
+ * Clamp the viewport coordinate within the valid range.
+ * Given a scroll position, pick a safe starting point for rendering visible items.
+ *
+ * Do not use it when you need the exact scroll position for positioning math.
+ *
+ * It does two things:
+ * 1. If the coordinate is below 0, use 0.
+ * 2. If the coordinate is too close to the very end, pull it back a bit.
+ *
+ * Example:
+ *
+ * content height: 1000px
+ * viewport height: 200px
+ * row height: 30px
+ * The real max scroll is:
+ *
+ * 1000 - 200 = 800
+ * But clampViewportCoordinate may clamp to:
+ *
+ * 1000 - 200 - 30 = 770
+ * Ask for 800 -> it returns 770.
+ */
 function clampViewportCoordinate(coordinate, dimension, viewportSize, frameOffset = 1) {
     return Math.min(Math.max(0, coordinate), getViewportMaxCoordinate(dimension, viewportSize, frameOffset));
 }
@@ -14944,7 +14967,16 @@ class DimensionProvider {
             clientSize,
             virtualSize: viewportSize,
         });
-        const renderCoordinate = clampViewportCoordinate(coordinate, dimension, viewportSize);
+        // Render offset must use the true logical scroll coordinate
+        // It is the logical scroll position that should be used for compressed-scroll offset math.
+        const renderCoordinate = Math.min(Math.max(0, coordinate), // prevents negative scroll positions
+        scrollDimension.logicalScrollSize); // prevents positions past the logical end
+        /**
+         * If viewport sizing is initialized (clientSize and viewportSize are truthy), calculate the offset needed for compressed scroll.
+         * Otherwise keep renderOffset at 0, because there is not enough measurement data yet.
+         *
+         * In normal scrolling, logical and physical coordinates are the same, so offset is 0.
+         */
         const renderOffset = clientSize && viewportSize
             ? scrollDimension.getRenderOffset(renderCoordinate)
             : 0;
@@ -21601,6 +21633,7 @@ class GridResizeService {
     }
     destroy() {
         var _a;
+        this.apply.cancel();
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
         this.resizeObserver = null;
     }
@@ -21745,6 +21778,10 @@ class RevogrViewportScroll {
                 scroll: this.horizontalScroll.scrollLeft,
                 noScroll: this.colType !== 'rgCol',
             };
+            this.setScrollParams({
+                rgRow: calculatedHeight,
+                rgCol: calculatedWidth,
+            });
             // Process changes in order: width first, then height
             const dimensions = ['rgCol', 'rgRow'];
             for (const dimension of dimensions) {
@@ -21801,24 +21838,30 @@ class RevogrViewportScroll {
     }
     async componentDidRender() {
         var _a, _b, _c, _d;
+        this.setScrollParams({
+            rgRow: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            rgCol: this.horizontalScroll.clientWidth,
+        });
+        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
+        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
+    }
+    setScrollParams(clientSize) {
         this.localScrollService.setParams({
             contentSize: this.contentHeight,
-            clientSize: (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0,
+            clientSize: clientSize.rgRow,
             virtualSize: 0,
         }, 'rgRow');
         this.localScrollService.setParams({
             contentSize: this.contentWidth,
-            clientSize: this.horizontalScroll.clientWidth,
+            clientSize: clientSize.rgCol,
             virtualSize: 0,
         }, 'rgCol');
-        this.setScrollVisibility('rgRow', (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0, this.contentHeight);
-        this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
         var _a, _b;
         const physicalContentHeight = getContentSize(this.contentHeight, (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0);
         const physicalContentWidth = getContentSize(this.contentWidth, 0);
-        return (hAsync(Host, { key: 'e52df53dcdcac76f02160615399c558e78fe5825', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '6821c4472db2208c2d52da9d6d43a7e5343d15bb', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: '1916ec94af312621ed4d937c905ed745a23a7d3b', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '2348a566b127f27d969a4e2ff67fab4022501ceb', name: HEADER_SLOT })), hAsync("div", { key: 'd88eebb7b0028b350f5b0feb6b3893efbd3f645c', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: '1778856706d9d6bbc52882a150cb66c9b3f11e06', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '200bc8a9e692b6183ac2665b68961d28892f7cab', name: CONTENT_SLOT }))), hAsync("div", { key: 'dc812739b4ad829867dd1effe94a871be247979a', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '06e3b3a4f88c477dc33268ee317856820f2650e6', name: FOOTER_SLOT })))));
+        return (hAsync(Host, { key: 'ec8d907976c1d50f7aab3c263be3f0249a274df6', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'e35696a7993ac94261426b45c28d488cdc42b7f0', class: "inner-content-table", style: { width: `${physicalContentWidth}px` } }, hAsync("div", { key: 'a6997451e01eacda1d27d4efa1d74e1748626218', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '1d401e87d32d5b1531c2211723b552bbc894f22c', name: HEADER_SLOT })), hAsync("div", { key: 'ceab6f9e812d6ca9a0aa376afcd2562a17f505e0', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'a9556578a23d6efddec2e982e863aec064042154', class: "content-wrapper", style: { height: `${physicalContentHeight}px` } }, hAsync("slot", { key: '0ae01f9736b9740612e75261f6e3abebda533377', name: CONTENT_SLOT }))), hAsync("div", { key: '09c2565d4ed449a43820f92d97b6558fca3758e7', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '1ffb08ff8138a560cc09d82e3fe22a53e502aafe', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revolist/revogrid",
-  "version": "4.23.3",
+  "version": "4.23.4",
   "type": "module",
   "description": "Virtual reactive data grid spreadsheet component - RevoGrid.",
   "license": "MIT",