@revolist/revogrid 4.14.7 → 4.14.8

package/dist/types/components/scrollable/revogr-scroll-virtual.d.ts

@@ -1,6 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-import type { DimensionType, ViewportState, DimensionSettingsState, ViewPortScrollEvent } from "../../types/index";
-import { type Observable } from '../../utils';
+import type { DimensionType, ViewPortScrollEvent } from "../../types/index";
 /**
  * Virtual scroll component
  */
@@ -10,13 +9,17 @@ export declare class RevogrScrollVirtual {
      */
     dimension: DimensionType;
     /**
-     * Viewport
+     * Dimensions
      */
-    viewportStore: Observable<ViewportState>;
+    realSize: number;
     /**
-     * Dimensions
+     * Virtual size
+     */
+    virtualSize: number;
+    /**
+     * Client size
      */
-    dimensionStore: Observable<DimensionSettingsState>;
+    clientSize: number;
     /**
      * Scroll event
      */
@@ -31,8 +34,6 @@ export declare class RevogrScrollVirtual {
      * Update if `delta` exists in case we don't know current position or if it's external change
      */
     changeScroll(e: ViewPortScrollEvent): Promise<ViewPortScrollEvent>;
-    set size(s: number);
-    get size(): number;
     connectedCallback(): void;
     disconnectedCallback(): void;
     componentWillLoad(): void;

package/dist/types/components.d.ts

@@ -674,6 +674,10 @@ export namespace Components {
           * Update if `delta` exists in case we don't know current position or if it's external change
          */
         "changeScroll": (e: ViewPortScrollEvent) => Promise<ViewPortScrollEvent>;
+        /**
+          * Client size
+         */
+        "clientSize": number;
         /**
           * Scroll dimension (`X` - `rgCol` or `Y` - `rgRow`)
          */
@@ -681,12 +685,12 @@ export namespace Components {
         /**
           * Dimensions
          */
-        "dimensionStore": Observable<DimensionSettingsState>;
+        "realSize": number;
         "setScroll": (e: ViewPortScrollEvent) => Promise<void>;
         /**
-          * Viewport
+          * Virtual size
          */
-        "viewportStore": Observable<ViewportState>;
+        "virtualSize": number;
     }
     /**
      * Temporary range selection component. Shows temporary range selection.
@@ -2250,21 +2254,25 @@ declare namespace LocalJSX {
      */
     interface RevogrScrollVirtual {
         /**
-          * Scroll dimension (`X` - `rgCol` or `Y` - `rgRow`)
+          * Client size
          */
-        "dimension"?: DimensionType;
+        "clientSize": number;
         /**
-          * Dimensions
+          * Scroll dimension (`X` - `rgCol` or `Y` - `rgRow`)
          */
-        "dimensionStore": Observable<DimensionSettingsState>;
+        "dimension"?: DimensionType;
         /**
           * Scroll event
          */
         "onScrollvirtual"?: (event: RevogrScrollVirtualCustomEvent<ViewPortScrollEvent>) => void;
         /**
-          * Viewport
+          * Dimensions
+         */
+        "realSize": number;
+        /**
+          * Virtual size
          */
-        "viewportStore": Observable<ViewportState>;
+        "virtualSize": number;
     }
     /**
      * Temporary range selection component. Shows temporary range selection.

package/dist/types/services/local.scroll.timer.d.ts

@@ -19,8 +19,14 @@ export declare class LocalScrollTimer {
      * Remember last mw event time
      */
     latestScrollUpdate(dimension: DimensionType): void;
+    isReady(type: DimensionType, coordinate: number): boolean;
+    private verifyChange;
     /**
      * Check if scroll is ready to accept new value
+     * this is an edge case for scroll events
+     * when we need to apply scroll after throttling
      */
-    isReady(type: DimensionType, coordinate: number): boolean;
+    private lastScrollUpdateCallbacks;
+    private clearLastScrollUpdate;
+    throttleLastScrollUpdate(type: DimensionType, coordinate: number, lastScrollUpdate: () => void): void;
 }

package/hydrate/index.js

@@ -15191,12 +15191,14 @@ class RevoGridComponent {
         const typeCol = 'rgCol';
         const viewports = this.viewportProvider.stores;
         const dimensions = this.dimensionProvider.stores;
+        const verticalScroll = (hAsync("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, clientSize: viewports[typeRow].store.get('clientSize'), virtualSize: viewports[typeRow].store.get('virtualSize'), realSize: dimensions[typeRow].store.get('realSize'), ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }));
+        const horizontalScroll = (hAsync("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, clientSize: viewports[typeCol].store.get('clientSize'), virtualSize: viewports[typeCol].store.get('virtualSize'), realSize: dimensions[typeCol].store.get('realSize'), ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }));
         return (hAsync(Host, null, this.hideAttribution ? null : (hAsync("revogr-attribution", { class: "attribution" })), hAsync("slot", { name: "header" }), hAsync("div", { class: "main-viewport", onClick: (e) => {
                 var _a;
                 if (e.currentTarget === e.target) {
                     (_a = this.viewport) === null || _a === void 0 ? void 0 : _a.clearEdit();
                 }
-            } }, hAsync("div", { class: "viewports" }, hAsync("slot", { name: "viewport" }), viewportSections, hAsync("revogr-scroll-virtual", { class: "vertical", dimension: typeRow, viewportStore: viewports[typeRow].store, dimensionStore: dimensions[typeRow].store, ref: el => this.scrollingService.registerElement(el, 'rowScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync(OrderRenderer, { ref: e => (this.orderService = e) }))), hAsync("revogr-scroll-virtual", { class: "horizontal", dimension: typeCol, viewportStore: viewports[typeCol].store, dimensionStore: dimensions[typeCol].store, ref: el => this.scrollingService.registerElement(el, 'colScroll'), onScrollvirtual: e => this.scrollingService.proxyScroll(e.detail) }), hAsync("revogr-extra", { ref: el => (this.extraService = el), nodes: this.extraElements }), hAsync("slot", { name: "footer" })));
+            } }, hAsync("div", { class: "viewports" }, hAsync("slot", { name: "viewport" }), viewportSections, verticalScroll, hAsync(OrderRenderer, { ref: e => (this.orderService = e) }))), horizontalScroll, hAsync("revogr-extra", { ref: el => (this.extraService = el), nodes: this.extraElements }), hAsync("slot", { name: "footer" })));
     }
     disconnectedCallback() {
         // Remove all plugins, to avoid memory leaks
@@ -16542,6 +16544,12 @@ class LocalScrollTimer {
             rgCol: 0,
             rgRow: 0,
         };
+        /**
+         * Check if scroll is ready to accept new value
+         * this is an edge case for scroll events
+         * when we need to apply scroll after throttling
+         */
+        this.lastScrollUpdateCallbacks = {};
     }
     setCoordinate(e) {
         this.lastKnownScrollCoordinate[e.dimension] = e.coordinate;
@@ -16552,14 +16560,47 @@ class LocalScrollTimer {
     latestScrollUpdate(dimension) {
         this.mouseWheelScrollTimestamp[dimension] = new Date().getTime();
     }
-    /**
-     * Check if scroll is ready to accept new value
-     */
     isReady(type, coordinate) {
-        const change = new Date().getTime() - this.mouseWheelScrollTimestamp[type];
+        // if there is a callback, clear it
+        if (this.lastScrollUpdateCallbacks[type]) {
+            this.clearLastScrollUpdate(type);
+        }
         // apply after throttling
-        return (change > this.scrollThrottling &&
-            coordinate !== this.lastKnownScrollCoordinate[type]);
+        return this.verifyChange(type, coordinate);
+    }
+    verifyChange(type, coordinate) {
+        const now = new Date().getTime();
+        const change = now - this.mouseWheelScrollTimestamp[type];
+        return change > this.scrollThrottling &&
+            coordinate !== this.lastKnownScrollCoordinate[type];
+    }
+    clearLastScrollUpdate(type) {
+        var _a, _b;
+        clearTimeout((_b = (_a = this.lastScrollUpdateCallbacks[type]) === null || _a === void 0 ? void 0 : _a.timeout) !== null && _b !== void 0 ? _b : 0);
+        delete this.lastScrollUpdateCallbacks[type];
+    }
+    throttleLastScrollUpdate(type, coordinate, lastScrollUpdate) {
+        // if scrollThrottling is set
+        // we need to throttle the last scroll event
+        if (this.scrollThrottling) {
+            this.clearLastScrollUpdate(type);
+            // save lastScrollUpdate callback
+            const callback = this.lastScrollUpdateCallbacks[type] = {
+                callback: lastScrollUpdate,
+                timestamp: new Date().getTime(),
+                coordinate,
+                timeout: 0,
+            };
+            callback.timeout = setTimeout(() => {
+                // clear timeout
+                this.clearLastScrollUpdate(type);
+                // if scrollThrottling is set, and the last scroll event happened before the timeout started
+                // we need to throttle the last scroll event
+                if (this.mouseWheelScrollTimestamp[type] < callback.timestamp && this.verifyChange(type, callback.coordinate)) {
+                    callback.callback();
+                }
+            }, this.scrollThrottling + 50);
+        }
     }
 }
 
@@ -16575,8 +16616,9 @@ class RevogrScrollVirtual {
         this.scrollVirtual = createEvent(this, "scrollvirtual", 7);
         this.scrollSize = 0;
         this.dimension = 'rgRow';
-        this.viewportStore = undefined;
-        this.dimensionStore = undefined;
+        this.realSize = undefined;
+        this.virtualSize = undefined;
+        this.clientSize = undefined;
     }
     async setScroll(e) {
         var _a;
@@ -16588,8 +16630,8 @@ class RevogrScrollVirtual {
         if (e.coordinate) {
             this.autohideScrollPlugin.checkScroll({
                 scrollSize: this.scrollSize,
-                contentSize: this.dimensionStore.get('realSize'),
-                virtualSize: this.viewportStore.get('virtualSize'),
+                contentSize: this.realSize,
+                virtualSize: this.virtualSize,
             });
         }
     }
@@ -16610,20 +16652,6 @@ class RevogrScrollVirtual {
         }
         return e;
     }
-    set size(s) {
-        this.autohideScrollPlugin.setScrollSize(s);
-        if (this.dimension === 'rgRow') {
-            this.element.style.minWidth = `${s}px`;
-            return;
-        }
-        this.element.style.minHeight = `${s}px`;
-    }
-    get size() {
-        if (this.dimension === 'rgRow') {
-            return this.element.clientHeight;
-        }
-        return this.element.clientWidth;
-    }
     connectedCallback() {
         this.autohideScrollPlugin = new AutohideScrollPlugin(this.element);
         this.localScrollTimer = new LocalScrollTimer('ontouchstart' in document.documentElement ? 0 : 10);
@@ -16644,37 +16672,23 @@ class RevogrScrollVirtual {
         this.scrollSize = getScrollbarSize(document);
     }
     componentDidRender() {
-        const type = this.dimension === 'rgRow' ? 'scrollHeight' : 'scrollWidth';
-        // Get scrollbar size once during component initialization
-        const scrollbarSize = this.scrollSize;
-        // Calculate if content exceeds viewport size
-        // Add scrollbar size to the comparison to account for other dimension's scrollbar
-        const hasScroll = this.element[type] > this.size + scrollbarSize;
-        // Set scroll size based on whether scroll is needed
-        this.size = hasScroll ? this.scrollSize : 0;
-        let additionalScrollbarSize = 0;
+        let scrollSize = 0;
         if (this.dimension === 'rgRow') {
-            additionalScrollbarSize =
-                this.element.scrollWidth > this.element.clientWidth
-                    ? scrollbarSize
-                    : 0;
+            scrollSize = this.element.scrollHeight > this.element.clientHeight ? this.scrollSize : 0;
+            this.element.style.minWidth = `${scrollSize}px`;
         }
         else {
-            additionalScrollbarSize =
-                this.element.scrollHeight > this.element.clientHeight
-                    ? scrollbarSize
-                    : 0;
+            scrollSize = this.element.scrollWidth > this.element.clientWidth ? this.scrollSize : 0;
+            this.element.style.minHeight = `${scrollSize}px`;
         }
-        const clientSize = this.size + additionalScrollbarSize;
+        this.autohideScrollPlugin.setScrollSize(scrollSize);
         this.localScrollService.setParams({
-            contentSize: this.dimensionStore.get('realSize'),
-            // Add scrollbar size to clientSize if other dimension has scroll
-            clientSize,
-            virtualSize: this.viewportStore.get('clientSize'),
+            contentSize: this.realSize,
+            clientSize: this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth,
+            virtualSize: this.clientSize,
         }, this.dimension);
     }
     onScroll(e) {
-        var _a;
         if (!(e.target instanceof Element)) {
             return;
         }
@@ -16683,16 +16697,22 @@ class RevogrScrollVirtual {
         if (this.dimension === 'rgRow') {
             type = 'scrollTop';
         }
-        // apply after throttling
-        if (this.localScrollTimer.isReady(this.dimension, target[type] || 0)) {
+        const setScroll = () => {
+            var _a;
             (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.scroll(target[type] || 0, this.dimension);
+        };
+        // apply after throttling
+        if (this.localScrollTimer.isReady(this.dimension, target[type])) {
+            setScroll();
+        }
+        else {
+            this.localScrollTimer.throttleLastScrollUpdate(this.dimension, target[type] || 0, () => setScroll());
         }
     }
     render() {
-        const sizeType = this.dimension === 'rgRow' ? 'height' : 'width';
-        const size = getContentSize(this.dimensionStore.get('realSize'), this.size, this.viewportStore.get('clientSize'));
-        return (hAsync(Host, { key: '94ccf82880ca9a3b0b1a87e94553f3c6ea6e885a', onScroll: (e) => this.onScroll(e) }, hAsync("div", { key: '3518b4db297114195e4ef9bd3555d08bae08daa9', style: {
-                [sizeType]: `${size}px`,
+        const size = getContentSize(this.realSize, this.dimension === 'rgRow' ? this.element.clientHeight : this.element.clientWidth, this.clientSize);
+        return (hAsync(Host, { key: '57f81ec9deb2395e96b283338c03b9ad44f1e929', onScroll: (e) => this.onScroll(e) }, hAsync("div", { key: '1a8c869adab53b362c351dae8d53664f33c4212c', style: {
+                [this.dimension === 'rgRow' ? 'height' : 'width']: `${size}px`,
             } })));
     }
     get element() { return getElement(this); }
@@ -16702,8 +16722,9 @@ class RevogrScrollVirtual {
         "$tagName$": "revogr-scroll-virtual",
         "$members$": {
             "dimension": [1],
-            "viewportStore": [16],
-            "dimensionStore": [16],
+            "realSize": [2, "real-size"],
+            "virtualSize": [2, "virtual-size"],
+            "clientSize": [2, "client-size"],
             "setScroll": [64],
             "changeScroll": [64]
         },
@@ -16739,7 +16760,10 @@ class GridResizeService {
             };
             (_a = this.resize) === null || _a === void 0 ? void 0 : _a.call(this, entry, this.previousSize);
             this.previousSize = entry;
-        }, 10);
+        }, 40, {
+            leading: false,
+            trailing: true,
+        });
         this.init(el);
     }
     async init(el) {
@@ -16870,30 +16894,37 @@ class RevogrViewportScroll {
         this.resizeService = new GridResizeService(this.horizontalScroll, (entry, previousSize) => {
             var _a, _b, _c, _d, _e, _f, _g, _h;
             const els = {};
+            let calculatedHeight = 0;
             if (entry.height !== previousSize.height) {
-                let height = entry.height || 0;
-                if (height) {
-                    height -=
+                calculatedHeight = entry.height || 0;
+                if (calculatedHeight) {
+                    calculatedHeight -=
                         ((_b = (_a = this.header) === null || _a === void 0 ? void 0 : _a.clientHeight) !== null && _b !== void 0 ? _b : 0) +
                             ((_d = (_c = this.footer) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0);
                 }
                 els.rgRow = {
-                    size: height,
+                    size: calculatedHeight,
                     contentSize: this.contentHeight,
                     scroll: (_f = (_e = this.verticalScroll) === null || _e === void 0 ? void 0 : _e.scrollTop) !== null && _f !== void 0 ? _f : 0,
                     noScroll: false,
                 };
             }
+            let calculatedWidth = 0;
             if (entry.width !== previousSize.width) {
+                calculatedWidth = entry.width || 0;
                 els.rgCol = {
-                    size: entry.width || 0,
+                    size: calculatedWidth,
                     contentSize: this.contentWidth,
                     scroll: this.horizontalScroll.scrollLeft,
                     noScroll: this.colType !== 'rgCol',
                 };
             }
-            for (const [dim, item] of Object.entries(els)) {
-                const dimension = dim;
+            // Process changes in order: width first, then height
+            const dimensions = ['rgCol', 'rgRow'];
+            for (const dimension of dimensions) {
+                const item = els[dimension];
+                if (!item)
+                    continue;
                 this.resizeViewport.emit({
                     dimension,
                     size: item.size,
@@ -16958,7 +16989,7 @@ class RevogrViewportScroll {
         this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
-        return (hAsync(Host, { key: 'c8c94171231164105fad7a6f53743db615dc123a', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: 'd33774605170a5ba43e41e3d3133130eeda1a6fb', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: '3cf14b0fd2fce937f5f28b205fbd2402d0de3cb4', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '14ce896ee001c614553744c2e4d8d680bf4e6d15', name: HEADER_SLOT })), hAsync("div", { key: '46b937e0fc75a71f983b739e0c8179c2dc8115ac', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'cf775690b0eef973f205659973ea23e376bc64d6', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: '63b50bb02edda40839829e7b54825953d3634906', name: CONTENT_SLOT }))), hAsync("div", { key: 'c28e2f9d0524a8d0adc86d6a7d78b1ce15831edd', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: 'bd24b24482d201ad91c279d09f3bcc0f2bc58370', name: FOOTER_SLOT })))));
+        return (hAsync(Host, { key: '08e10c135ea0a9089463ae5d81a4a7dc7f9c028c', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '2ff353b190f088a005f0fca3ad3eddf9f6728734', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: '17d95d8baa8cef75f2b2373d283948b62b891fb3', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: 'cd8606829aaccbb2edad9a2dbe03600284f0af86', name: HEADER_SLOT })), hAsync("div", { key: '77ffa873bb313a8940ef0032f938ce66e8e83e10', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'cbf25a96eb5e71eed34f68ec341a8758e0bf213c', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: '5818ff4be234171f0759fcadf70e0bed6fd74f31', name: CONTENT_SLOT }))), hAsync("div", { key: '7ab569e4451fb381f48cc4e03b103866a47b35b6', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: 'ce1860fa42d6661dd78fe1609cf50ed93da0c5f7', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing
@@ -16988,10 +17019,16 @@ class RevogrViewportScroll {
      * Applies change on scroll event only if mousewheel event happened some time ago
      */
     applyOnScroll(type, coordinate, outside = false) {
-        var _a;
+        const lastScrollUpdate = () => {
+            var _a;
+            (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.scroll(coordinate, type, undefined, undefined, outside);
+        };
         // apply after throttling
         if (this.localScrollTimer.isReady(type, coordinate)) {
-            (_a = this.localScrollService) === null || _a === void 0 ? void 0 : _a.scroll(coordinate, type, undefined, undefined, outside);
+            lastScrollUpdate();
+        }
+        else {
+            this.localScrollTimer.throttleLastScrollUpdate(type, coordinate, () => lastScrollUpdate());
         }
     }
     /**