@revolist/revogrid 4.9.41 → 4.10.1

package/hydrate/index.js

@@ -3299,29 +3299,6 @@ class FilterPanel {
     }; }
 }
 
-const MIN_COL_SIZE = 30;
-const RESIZE_INTERVAL = 40;
-const DATA_COL = 'data-rgCol';
-const DATA_ROW = 'data-rgRow';
-const DISABLED_CLASS = 'disabled';
-const CELL_CLASS = 'rgCell';
-const ROW_HEADER_TYPE = 'rowHeaders';
-const HEADER_CLASS = 'rgHeaderCell';
-const HEADER_SORTABLE_CLASS = 'sortable';
-const HEADER_ROW_CLASS = 'header-rgRow';
-const HEADER_ACTUAL_ROW_CLASS = 'actual-rgRow';
-const DRAG_ICON_CLASS = 'revo-drag-icon';
-const DRAGGABLE_CLASS = 'revo-draggable';
-const FOCUS_CLASS = 'focused-cell';
-const SELECTION_BORDER_CLASS = 'selection-border-range';
-const MOBILE_CLASS = 'mobile-handler';
-const TMP_SELECTION_BG_CLASS = 'temp-bg-range';
-const CELL_HANDLER_CLASS = 'autofill-handle';
-const EDIT_INPUT_WR = 'edit-input-wrapper';
-const DRAGG_TEXT = 'Draggable item';
-const GRID_INTERNALS = '__rvgr';
-const ROW_FOCUSED_CLASS = 'focused-rgRow';
-
 /**
  * Proxy plugin for data source.
  * This plugin is used to sort the data source.
@@ -6314,18 +6291,13 @@ const createStore = (defaultState, shouldUpdate) => {
 const trimmedPlugin$1 = (store) => ({
     set(k, newVal) {
         switch (k) {
-            case 'trimmed':
+            case 'trimmed': {
                 const proxy = store.get('proxyItems');
                 const trimmed = gatherTrimmedItems(newVal);
-                const newItems = proxy.reduce((result, v) => {
-                    // check if present in new trimmed remove from items (filter)
-                    if (!trimmed[v]) {
-                        result.push(v);
-                    }
-                    return result;
-                }, []);
+                const newItems = proxy.filter(v => !trimmed[v]);
                 store.set('items', newItems);
                 break;
+            }
         }
     },
 });
@@ -6801,10 +6773,8 @@ function calculateDimensionData(originItemSize, newSizes = {}) {
     const positionIndexes = [];
     const positionIndexToItem = {};
     const indexToItem = {};
-    // combine all new sizes
-    const sizes = Object.assign({}, newSizes);
     // prepare order sorted new sizes and calculate changed real size
-    const newIndexes = Object.keys(sizes).map(Number).sort((a, b) => a - b);
+    const newIndexes = Object.keys(newSizes).map(Number).sort((a, b) => a - b);
     // fill new coordinates based on what is changed
     newIndexes.reduce((previous, itemIndex, i) => {
         const newItem = {
@@ -6820,7 +6790,7 @@ function calculateDimensionData(originItemSize, newSizes = {}) {
         else {
             newItem.start = itemIndex * originItemSize;
         }
-        newItem.end = newItem.start + sizes[itemIndex];
+        newItem.end = newItem.start + newSizes[itemIndex];
         positionIndexes.push(newItem.start);
         indexToItem[itemIndex] = positionIndexToItem[i] = newItem;
         return newItem;
@@ -6830,7 +6800,6 @@ function calculateDimensionData(originItemSize, newSizes = {}) {
         positionIndexes: [...positionIndexes],
         positionIndexToItem: Object.assign({}, positionIndexToItem),
         indexToItem,
-        sizes,
     };
 }
 /**
@@ -6891,37 +6860,6 @@ function getItemByIndex(dimension, index) {
     return item;
 }
 
-/**
- * Storing pre-calculated
- * Dimension information and sizes
- */
-const trimmedPlugin = (store) => {
-    let trimmedSize = {};
-    const setTrimmed = (sizes, trimmed) => {
-        const newSize = Object.assign({}, sizes);
-        trimmedSize = {};
-        for (const [index, v] of Object.entries(trimmed)) {
-            const i = index;
-            if (v && newSize[i]) {
-                trimmedSize[i] = newSize[i];
-                delete newSize[i];
-            }
-        }
-        store.setDimensionSize(newSize);
-    };
-    return {
-        set(key, val) {
-            switch (key) {
-                case 'trimmed':
-                    const trim = val;
-                    const sizes = store.store.get('sizes');
-                    // recover trimmed, apply new trim
-                    setTrimmed(Object.assign(Object.assign({}, sizes), trimmedSize), trim);
-                    break;
-            }
-        },
-    };
-};
 /**
  * Plugin which recalculates realSize on changes of sizes, originItemSize and count
  */
@@ -6937,7 +6875,7 @@ const recalculateRealSizePlugin = (storeService) => {
             switch (k) {
                 case 'count':
                 case 'sizes':
-                case 'originItemSize':
+                case 'originItemSize': {
                     // recalculate realSize
                     let realSize = 0;
                     const count = storeService.store.get('count');
@@ -6948,19 +6886,81 @@ const recalculateRealSizePlugin = (storeService) => {
                     }
                     storeService.setStore({ realSize });
                     break;
+                }
             }
         },
     };
 };
+
+/**
+ * Plugin for trimming
+ *
+ * 1.a. Retrieves the previous sizes value. Saves the resulting trimmed data as a new sizes value.
+ * 1.b. Stores a reference to the trimmed data to prevent further changes.
+ * 2. Removes multiple and shifts the data based on the trimmed value.
+ */
+const trimmedPlugin = (storeService) => {
+    let trimmingObject = null;
+    let trimmedPreviousSizes = null;
+    return {
+        set(key, val) {
+            switch (key) {
+                case 'sizes': {
+                    // prevent changes after trimming
+                    if (trimmingObject && trimmingObject === val) {
+                        trimmingObject = null;
+                        return;
+                    }
+                    trimmedPreviousSizes = null;
+                    break;
+                }
+                case 'trimmed': {
+                    const trim = val;
+                    if (!trimmedPreviousSizes) {
+                        trimmedPreviousSizes = storeService.store.get('sizes');
+                    }
+                    trimmingObject = removeMultipleAndShift(trimmedPreviousSizes, trim || {});
+                    // save a reference to the trimmed object to prevent changes after trimming
+                    storeService.setSizes(trimmingObject);
+                    break;
+                }
+            }
+        },
+    };
+};
+function removeMultipleAndShift(items, toRemove) {
+    const newItems = {};
+    const sortedIndexes = Object.keys(items || {})
+        .map(Number)
+        .sort((a, b) => a - b);
+    const lastIndex = sortedIndexes[sortedIndexes.length - 1];
+    let shift = 0;
+    for (let i = 0; i <= lastIndex; i++) {
+        if (toRemove[i] !== undefined) {
+            shift++;
+            // skip already removed
+            if (items[i] !== undefined) {
+                continue;
+            }
+        }
+        if (items[i] !== undefined) {
+            newItems[i - shift] = items[i];
+        }
+    }
+    return newItems;
+}
+
+/**
+ * Storing pre-calculated
+ * Dimension information and sizes
+ */
 function initialBase() {
     return {
         indexes: [],
         count: 0,
-        // plugin support
-        trimmed: {},
-        // size operations, this provider stores only changed sizes, not all of them
-        // same as indexes but for sizes and positions
-        // item index to size
+        // hidden items
+        trimmed: null,
+        // virtual item index to size
         sizes: {},
         // order in indexes[] to coordinate
         positionIndexToItem: {},
@@ -6980,8 +6980,14 @@ class DimensionStore {
     constructor(type) {
         this.type = type;
         this.store = createStore(initialState$1());
-        this.store.use(trimmedPlugin(this));
-        this.store.use(recalculateRealSizePlugin(this));
+        this.store.use(trimmedPlugin({
+            store: this.store,
+            setSizes: this.setDimensionSize.bind(this),
+        }));
+        this.store.use(recalculateRealSizePlugin({
+            store: this.store,
+            setStore: this.setStore.bind(this),
+        }));
     }
     getCurrentState() {
         const state = initialState$1();
@@ -7006,9 +7012,40 @@ class DimensionStore {
      * Generates new indexes based on sizes
      * @param sizes - sizes to set
      */
-    setDimensionSize(sizes) {
+    setDimensionSize(sizes = {}) {
         const dimensionData = calculateDimensionData(this.store.get('originItemSize'), sizes);
-        setStore(this.store, dimensionData);
+        setStore(this.store, Object.assign(Object.assign({}, dimensionData), { sizes }));
+    }
+    updateSizesPositionByIndexes(newItemsOrder, prevItemsOrder = []) {
+        // Move custom sizes to new order
+        const customSizes = Object.assign({}, this.store.get('sizes'));
+        if (!Object.keys(customSizes).length) {
+            return;
+        }
+        // Step 1: Create a map of original indices, but allow duplicates by storing arrays of indices
+        const originalIndices = {};
+        prevItemsOrder.forEach((physIndex, virtIndex) => {
+            if (!originalIndices[physIndex]) {
+                originalIndices[physIndex] = [];
+            }
+            originalIndices[physIndex].push(virtIndex); // Store all indices for each value
+        });
+        // Step 2: Create new sizes based on new item order
+        const newSizes = {};
+        newItemsOrder.forEach((physIndex, virtIndex) => {
+            const indices = originalIndices[physIndex]; // Get all original indices for this value
+            if (indices && indices.length > 0) {
+                const originalIndex = indices.shift(); // Get the first available original index
+                if (originalIndex !== undefined && originalIndex !== virtIndex && customSizes[originalIndex]) {
+                    newSizes[virtIndex] = customSizes[originalIndex];
+                    delete customSizes[originalIndex];
+                }
+            }
+        });
+        // Step 3: Set new sizes if there are changes
+        if (Object.keys(newSizes).length) {
+            this.setDimensionSize(Object.assign(Object.assign({}, customSizes), newSizes));
+        }
     }
 }
 
@@ -7843,6 +7880,29 @@ function isRowType(type) {
     return rowTypes.indexOf(type) > -1;
 }
 
+const MIN_COL_SIZE = 30;
+const RESIZE_INTERVAL = 40;
+const DATA_COL = 'data-rgCol';
+const DATA_ROW = 'data-rgRow';
+const DISABLED_CLASS = 'disabled';
+const CELL_CLASS = 'rgCell';
+const ROW_HEADER_TYPE = 'rowHeaders';
+const HEADER_CLASS = 'rgHeaderCell';
+const HEADER_SORTABLE_CLASS = 'sortable';
+const HEADER_ROW_CLASS = 'header-rgRow';
+const HEADER_ACTUAL_ROW_CLASS = 'actual-rgRow';
+const DRAG_ICON_CLASS = 'revo-drag-icon';
+const DRAGGABLE_CLASS = 'revo-draggable';
+const FOCUS_CLASS = 'focused-cell';
+const SELECTION_BORDER_CLASS = 'selection-border-range';
+const MOBILE_CLASS = 'mobile-handler';
+const TMP_SELECTION_BG_CLASS = 'temp-bg-range';
+const CELL_HANDLER_CLASS = 'autofill-handle';
+const EDIT_INPUT_WR = 'edit-input-wrapper';
+const DRAGG_TEXT = 'Draggable item';
+const GRID_INTERNALS = '__rvgr';
+const ROW_FOCUSED_CLASS = 'focused-rgRow';
+
 class RowOrderService {
     constructor(config) {
         this.config = config;
@@ -7953,6 +8013,7 @@ class OrderEditor {
             pos,
             event: e.originalEvent,
             rowType: this.rowType,
+            model: getSourceItem(this.dataStore, pos.itemIndex),
         });
         if (dragStartEvent.defaultPrevented) {
             return;
@@ -10476,11 +10537,13 @@ class DimensionProvider {
      * @param columns - new columns data
      * @param disableVirtualX - disable virtual data for X axis
      */
-    applyNewColumns(columns, disableVirtualX) {
+    applyNewColumns(columns, disableVirtualX, keepOld = false) {
         // Apply new columns to dimension provider
         for (let type of columnTypes) {
-            // Clear existing data in the dimension provider
-            this.stores[type].drop();
+            if (!keepOld) {
+                // Clear existing data in the dimension provider
+                this.stores[type].drop();
+            }
             // Get the new columns for the current type
             const items = columns[type];
             // Determine if virtual data should be disabled for the current type
@@ -10551,25 +10614,8 @@ class DimensionProvider {
     }
     updateSizesPositionByNewDataIndexes(type, newItemsOrder, prevItemsOrder = []) {
         // Move custom sizes to new order
-        const dimService = this.stores[type];
-        const customSizes = Object.assign({}, dimService.store.get('sizes'));
-        if (Object.keys(customSizes).length) {
-            const originalIndices = new Map();
-            prevItemsOrder.forEach((value, index) => {
-                originalIndices.set(value, index);
-            });
-            const newSizes = {};
-            newItemsOrder.forEach((value, newIndex) => {
-                const originalIndex = originalIndices.get(value);
-                if (originalIndex !== newIndex && customSizes[originalIndex]) {
-                    newSizes[newIndex] = customSizes[originalIndex];
-                    delete customSizes[originalIndex];
-                }
-            });
-            if (Object.keys(newSizes).length) {
-                this.setCustomSizes(type, Object.assign(Object.assign({}, customSizes), newSizes));
-            }
-        }
+        this.stores[type].updateSizesPositionByIndexes(newItemsOrder, prevItemsOrder);
+        this.updateViewport(type, true);
     }
 }
 
@@ -11146,6 +11192,9 @@ class FilterPlugin extends BasePlugin {
                     }
                 });
             }
+            if (Object.keys(this.multiFilterItems).length === 0) {
+                return;
+            }
             await this.runFiltering(this.multiFilterItems);
         };
         this.addEventListener('headerclick', (e) => this.headerclick(e));
@@ -11684,9 +11733,8 @@ class SortingPlugin extends BasePlugin {
         if (beforeApplyEvent.defaultPrevented) {
             return;
         }
-        order = beforeApplyEvent.detail.order;
-        const cmp = this.getComparer(column, order);
-        if (additive && this.sorting) {
+        const cmp = this.getComparer(beforeApplyEvent.detail.column, beforeApplyEvent.detail.order);
+        if (beforeApplyEvent.detail.additive && this.sorting) {
             const sorting = {};
             const sortingFunc = {};
             this.sorting = Object.assign(Object.assign({}, this.sorting), sorting);
@@ -11750,11 +11798,15 @@ class SortingPlugin extends BasePlugin {
                 // row indexes
                 const proxyItems = storeService.store.get('proxyItems');
                 const newItemsOrder = this.sortIndexByItems([...proxyItems], source, sortingFunc);
-                this.providers.dimension.updateSizesPositionByNewDataIndexes(type, newItemsOrder, proxyItems);
+                // take row indexes before trim applied and proxy items
+                const prevItems = storeService.store.get('items');
                 storeService.setData({
                     proxyItems: newItemsOrder,
                     source: [...source],
                 });
+                // take currently visible row indexes
+                const newItems = storeService.store.get('items');
+                this.providers.dimension.updateSizesPositionByNewDataIndexes(type, newItems, prevItems);
             }
         }
         this.emit('aftersortingapply');
@@ -14128,7 +14180,7 @@ class RevoGridComponent {
         // Column format change will trigger column structure update
         this.columnChanged(this.columns);
     }
-    columnChanged(newVal = []) {
+    columnChanged(newVal = [], _prevVal = undefined, __watchName = 'columns', init = false) {
         if (!this.dimensionProvider || !this.columnProvider) {
             return;
         }
@@ -14137,7 +14189,7 @@ class RevoGridComponent {
         if (beforeSetEvent.defaultPrevented) {
             return;
         }
-        this.dimensionProvider.applyNewColumns(beforeSetEvent.detail.columns, this.disableVirtualX);
+        this.dimensionProvider.applyNewColumns(beforeSetEvent.detail.columns, this.disableVirtualX, init);
         const beforeApplyEvent = this.beforecolumnapplied.emit(columnGather);
         if (beforeApplyEvent.defaultPrevented) {
             return;
@@ -14426,7 +14478,7 @@ class RevoGridComponent {
         // set data
         this.applyStretch(this.stretch);
         this.themeChanged(this.theme, undefined, undefined, true);
-        this.columnChanged(this.columns);
+        this.columnChanged(this.columns, undefined, undefined, true);
         this.dataSourceChanged(this.source, undefined, 'source');
         this.dataSourceChanged(this.pinnedTopSource, undefined, 'pinnedTopSource');
         this.dataSourceChanged(this.pinnedBottomSource, undefined, 'pinnedBottomSource');
@@ -14434,7 +14486,10 @@ class RevoGridComponent {
             this.trimmedRowsChanged(this.trimmedRows);
         }
         this.rowDefChanged(this.rowDefinitions);
-        this.groupingChanged(this.grouping);
+        // init grouping
+        if (this.grouping && Object.keys(this.grouping).length > 0) {
+            this.groupingChanged(this.grouping);
+        }
         // init scrolling service
         this.scrollingService = new GridScrollingService((e) => {
             var _a;
@@ -14807,6 +14862,7 @@ class RevogrData {
         this.beforerowrender = createEvent(this, "beforerowrender", 7);
         this.afterrender = createEvent(this, "afterrender", 7);
         this.beforeCellRender = createEvent(this, "beforecellrender", 7);
+        this.beforeDataRender = createEvent(this, "beforedatarender", 7);
         this.dragStartCell = createEvent(this, "dragstartcell", 7);
         /**
          * Rendered rows - virtual index vs vnode
@@ -14872,7 +14928,11 @@ class RevogrData {
         (_b = this.rangeUnsubscribe) === null || _b === void 0 ? void 0 : _b.call(this);
     }
     async componentWillRender() {
-        return Promise.all(this.jobsBeforeRender);
+        this.beforeDataRender.emit({
+            rowType: this.type,
+            colType: this.colType,
+        });
+        return Promise.all(this.jobsBeforeRender.map(p => typeof p === 'function' ? p() : p));
     }
     componentDidRender() {
         this.afterrender.emit({ type: this.type });
@@ -16215,7 +16275,8 @@ class RevogrViewportScroll {
         this.scrollchange.emit({ type, hasScroll });
     }
     disconnectedCallback() {
-        this.resizeService.destroy();
+        var _a;
+        (_a = this.resizeService) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     async componentDidRender() {
         var _a, _b, _c, _d;
@@ -16243,7 +16304,7 @@ class RevogrViewportScroll {
         this.setScrollVisibility('rgCol', this.horizontalScroll.clientWidth, this.contentWidth);
     }
     render() {
-        return (hAsync(Host, { key: '5a7d07c999e59a8b96a99c87e50103acb4f18406', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '09ac58def608c3bc169ce12e09dd2dc2df1f90a2', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: 'c370a3b8d5d2f4925b77020ac85d5f4d06b876e0', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: 'c5feeeaf90e42715bbf13619b2341d23257447fb', name: HEADER_SLOT })), hAsync("div", { key: '7c04ffd6e7893db57f883a736d0a4932743863ea', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'da5db752025ddaaf626411b445b3b90b5b81cdc8', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: 'c5404f4628b68b4b18a6e9143c70e72c50616f9d', name: CONTENT_SLOT }))), hAsync("div", { key: 'ee9e1b5dd297f220aed3efef4b53b4dd74a11837', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '5ff132da3009d959a6e87fbbe3d22930f322c486', name: FOOTER_SLOT })))));
+        return (hAsync(Host, { key: '2bd41b077bb8baff6405cf6d071b48f22928879c', onWheel: this.horizontalMouseWheel, onScroll: (e) => this.applyScroll('rgCol', e) }, hAsync("div", { key: '84367a3fc244706e2d027f8c9e59ea3a6f8fc984', class: "inner-content-table", style: { width: `${this.contentWidth}px` } }, hAsync("div", { key: 'cbb8a1fa15139f07f9061f81e79218d00c14b8e6', class: "header-wrapper", ref: e => (this.header = e) }, hAsync("slot", { key: '521618b45cf787bcc160532d01e9e1fcdd06823b', name: HEADER_SLOT })), hAsync("div", { key: '2b381270fe97e949fb876603be364cc647ebc2d5', class: "vertical-inner", ref: el => (this.verticalScroll = el), onWheel: this.verticalMouseWheel, onScroll: (e) => this.applyScroll('rgRow', e) }, hAsync("div", { key: 'a0a13d79b5d329132421571fdf2ab7b2e36e440e', class: "content-wrapper", style: { height: `${this.contentHeight}px` } }, hAsync("slot", { key: '10279a0876aa194959da09309f914e6ce39b94fd', name: CONTENT_SLOT }))), hAsync("div", { key: '619446ea77a713a8e157ff0f1a9afd0e5dfa356f', class: "footer-wrapper", ref: e => (this.footer = e) }, hAsync("slot", { key: '43966ad2fde89f09c606173abf837672d8d4f822', name: FOOTER_SLOT })))));
     }
     /**
      * Extra layer for scroll event monitoring, where MouseWheel event is not passing
@@ -16286,11 +16347,18 @@ class RevogrViewportScroll {
      * @param e
      */
     onVerticalMouseWheel(type, delta, e) {
-        var _a, _b, _c, _d;
-        (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
-        const scrollTop = (_c = (_b = this.verticalScroll) === null || _b === void 0 ? void 0 : _b.scrollTop) !== null && _c !== void 0 ? _c : 0;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        const scrollTop = (_b = (_a = this.verticalScroll) === null || _a === void 0 ? void 0 : _a.scrollTop) !== null && _b !== void 0 ? _b : 0;
+        const clientHeight = (_d = (_c = this.verticalScroll) === null || _c === void 0 ? void 0 : _c.clientHeight) !== null && _d !== void 0 ? _d : 0;
+        const scrollHeight = (_f = (_e = this.verticalScroll) === null || _e === void 0 ? void 0 : _e.scrollHeight) !== null && _f !== void 0 ? _f : 0;
+        // Detect if the user has reached the bottom
+        const atBottom = (scrollTop + clientHeight >= scrollHeight) && e.deltaY > 0;
+        const atTop = scrollTop === 0 && e.deltaY < 0;
+        if (!atBottom && !atTop) {
+            (_g = e.preventDefault) === null || _g === void 0 ? void 0 : _g.call(e);
+        }
         const pos = scrollTop + e[delta];
-        (_d = this.localScrollService) === null || _d === void 0 ? void 0 : _d.scroll(pos, type, undefined, e[delta]);
+        (_h = this.localScrollService) === null || _h === void 0 ? void 0 : _h.scroll(pos, type, undefined, e[delta]);
         this.localScrollTimer.latestScrollUpdate(type);
     }
     /**
@@ -16301,8 +16369,18 @@ class RevogrViewportScroll {
      */
     onHorizontalMouseWheel(type, delta, e) {
         var _a, _b;
-        (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
-        const pos = this.horizontalScroll.scrollLeft + e[delta];
+        if (!e.deltaX) {
+            return;
+        }
+        const { scrollLeft, scrollWidth, clientWidth } = this.horizontalScroll;
+        // Detect if the user has reached the right end
+        const atRight = (scrollLeft + clientWidth >= scrollWidth) && e.deltaX > 0;
+        // Detect if the user has reached the left end
+        const atLeft = scrollLeft === 0 && e.deltaX < 0;
+        if (!atRight && !atLeft) {
+            (_a = e.preventDefault) === null || _a === void 0 ? void 0 : _a.call(e);
+        }
+        const pos = scrollLeft + e[delta];
         (_b = this.localScrollService) === null || _b === void 0 ? void 0 : _b.scroll(pos, type, undefined, e[delta]);
         this.localScrollTimer.latestScrollUpdate(type);
     }