@revolist/revogrid 4.9.37 → 4.9.40

package/hydrate/index.js

@@ -3299,12 +3299,48 @@ 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';
+
 /**
- * All items
- * Used as proxy for sorting
- * Keep order but do not modify final source
+ * Proxy plugin for data source.
+ * This plugin is used to sort the data source.
+ * It keeps the order of the items but does not modify the final source.
+ * It is also used to filter the items in the data source.
+ * The `set` method takes a key and a new value as arguments.
+ * If the key is 'proxyItems' it will filter the items in the data source according to the new value.
+ * The new value should be an array of numbers representing the indexes of the items that should be visible.
+ * The method will return a new array of numbers with the indexes of the items that should be visible.
+ * The method will also update the 'items' property of the store with the new array.
  */
 const proxyPlugin = (store) => ({
+    /**
+     * Set the value of a property in the store.
+     * If the key is 'proxyItems' it will filter the items in the data source according to the new value.
+     * The new value should be an array of numbers representing the indexes of the items that should be visible.
+     * The method will return a new array of numbers with the indexes of the items that should be visible.
+     * The method will also update the 'items' property of the store with the new array.
+     */
     set(k, newVal) {
         if (!isProxy(k)) {
             return;
@@ -3314,15 +3350,15 @@ const proxyPlugin = (store) => ({
          * Mark indexes as visible
          */
         const oldItems = store.get('items').reduce((r, v) => {
-            r[v] = true;
+            r.add(v);
             return r;
-        }, {});
+        }, new Set());
         /**
          * Check if new values where present in items
          * Filter item collection according presense
          */
         const newItems = newVal.reduce((r, i) => {
-            if (oldItems[i]) {
+            if (oldItems.has(i)) {
                 r.push(i);
             }
             return r;
@@ -6363,6 +6399,9 @@ class DataStore {
         trimmed = Object.assign(Object.assign({}, trimmed), some);
         setStore(this.store, { trimmed });
     }
+    setSourceData(items, mutate = true) {
+        setSourceByVirtualIndex(this.store, items, mutate);
+    }
     // local data update
     setData(input) {
         const data = Object.assign({}, input);
@@ -7804,29 +7843,6 @@ 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;
@@ -7906,17 +7922,19 @@ class OrderEditor {
         this.rowDrag = createEvent(this, "rowdragmoveinit", 7);
         this.rowMouseMove = createEvent(this, "rowdragmousemove", 7);
         this.rowDropped = createEvent(this, "rowdropinit", 7);
+        this.rowOrderChange = createEvent(this, "roworderchange", 7);
         this.events = [];
         this.rowMoveFunc = debounce$1((y) => {
             const rgRow = this.rowOrderService.move(y, this.getData());
             if (rgRow !== null) {
-                this.rowDrag.emit(rgRow);
+                this.rowDrag.emit(Object.assign(Object.assign({}, rgRow), { rowType: this.rowType }));
             }
         }, 5);
         this.parent = undefined;
         this.dimensionRow = undefined;
         this.dimensionCol = undefined;
         this.dataStore = undefined;
+        this.rowType = undefined;
     }
     // #endregion
     // #region Methods
@@ -7934,6 +7952,7 @@ class OrderEditor {
             text: DRAGG_TEXT,
             pos,
             event: e.originalEvent,
+            rowType: this.rowType,
         });
         if (dragStartEvent.defaultPrevented) {
             return;
@@ -7964,28 +7983,28 @@ class OrderEditor {
         this.rowOrderService.clear();
         this.events.forEach(v => document.removeEventListener(v.name, v.listener));
         this.events.length = 0;
-        this.rowDragEnd.emit();
+        this.rowDragEnd.emit({ rowType: this.rowType });
     }
     // #endregion
     move({ x, y }) {
-        this.rowMouseMove.emit({ x, y });
+        this.rowMouseMove.emit({ x, y, rowType: this.rowType });
         this.rowMoveFunc(y);
     }
     connectedCallback() {
         this.rowOrderService = new RowOrderService({
-            positionChanged: (f, t) => this.onPositionChanged(f, t),
+            positionChanged: (from, to) => {
+                const dropEvent = this.rowDropped.emit({
+                    from,
+                    to,
+                    rowType: this.rowType,
+                });
+                if (dropEvent.defaultPrevented) {
+                    return;
+                }
+                this.rowOrderChange.emit(dropEvent.detail);
+            },
         });
     }
-    onPositionChanged(from, to) {
-        const dropEvent = this.rowDropped.emit({ from, to });
-        if (dropEvent.defaultPrevented) {
-            return;
-        }
-        const items = [...this.dataStore.get('items')];
-        const toMove = items.splice(from, 1);
-        items.splice(to, 0, ...toMove);
-        setItems(this.dataStore, items);
-    }
     getData() {
         return {
             el: this.parent,
@@ -8001,6 +8020,7 @@ class OrderEditor {
             "dimensionRow": [16],
             "dimensionCol": [16],
             "dataStore": [16],
+            "rowType": [1, "row-type"],
             "dragStart": [64],
             "endOrder": [64],
             "clearOrder": [64]
@@ -9577,10 +9597,10 @@ class OverlaySelection {
             }
             // Order
             if (this.canDrag) {
-                nodes.push(hAsync("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, onRowdragstartinit: e => this.rowDragStart(e) }));
+                nodes.push(hAsync("revogr-order-editor", { ref: e => (this.orderEditor = e), dataStore: this.dataStore, dimensionRow: this.dimensionRow, dimensionCol: this.dimensionCol, parent: this.element, rowType: this.types.rowType, onRowdragstartinit: e => this.rowDragStart(e) }));
             }
         }
-        return (hAsync(Host, { key: 'e48d9f7349a97c719120610b3839f5aff213547c', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, hAsync("slot", { key: 'c0a25578618d0025f784f188eb8db28159e92955', name: "data" })));
+        return (hAsync(Host, { key: '53847b6211a31f69b2f2df1b191544a3b6dfefd8', class: { mobile: this.isMobileDevice }, onDblClick: (e) => this.onElementDblClick(e), onMouseDown: (e) => this.onElementMouseDown(e), onTouchStart: (e) => this.onElementMouseDown(e, true) }, nodes, hAsync("slot", { key: '012c496c34954b7074a53a4d9e949ac9e3d072af', name: "data" })));
     }
     /**
      * Executes the focus operation on the specified range of cells.
@@ -10329,11 +10349,19 @@ class DataProvider {
         const store = this.stores[type].store;
         return getSourceItem(store, virtualIndex);
     }
+    changeOrder({ rowType = 'rgRow', from, to }) {
+        const service = this.stores[rowType];
+        const items = [...service.store.get('items')];
+        const prevItems = [...items];
+        const toMove = items.splice(from, 1);
+        items.splice(to, 0, ...toMove);
+        this.dimensionProvider.updateSizesPositionByNewDataIndexes(rowType, items, prevItems);
+        service.setData({ items });
+    }
     setCellData({ type, rowIndex, prop, val }, mutate = true) {
         const model = this.getModel(rowIndex, type);
         model[prop] = val;
-        // apply data to source
-        setSourceByVirtualIndex(this.stores[type].store, { [rowIndex]: model }, mutate);
+        this.stores[type].setSourceData({ [rowIndex]: model }, mutate);
     }
     setRangeData(data, type) {
         const items = {};
@@ -10346,8 +10374,7 @@ class DataProvider {
                 oldModel[prop] = data[rowIndex][prop];
             }
         }
-        // apply data to source
-        setSourceByVirtualIndex(this.stores[type].store, items);
+        this.stores[type].setSourceData(items);
     }
     refresh(type = 'all') {
         if (isRowType(type)) {
@@ -10522,6 +10549,28 @@ class DimensionProvider {
             this.stores[s].setStore(data);
         }
     }
+    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));
+            }
+        }
+    }
 }
 
 class ViewportProvider {
@@ -11550,9 +11599,9 @@ function size$1(collection) {
  * Note: If you prevent an event, it will not proceed to the subsequent steps.
  */
 class SortingPlugin extends BasePlugin {
-    async runSorting(order, comparison) {
+    runSorting(order, comparison) {
         var _a;
-        await this.sort(order, comparison);
+        this.sort(order, comparison);
         (_a = this.sortingPromise) === null || _a === void 0 ? void 0 : _a.call(this);
         this.sortingPromise = null;
     }
@@ -11560,8 +11609,8 @@ class SortingPlugin extends BasePlugin {
         super(revogrid, providers);
         this.revogrid = revogrid;
         this.sortingPromise = null;
-        this.postponeSort = debounce$1(async (order, comparison) => this.runSorting(order, comparison), 50);
-        const beforeanysource = async ({ detail: { type }, }) => {
+        this.postponeSort = debounce$1((order, comparison) => this.runSorting(order, comparison), 50);
+        const beforeanysource = ({ detail: { type }, }) => {
             // if sorting was provided - sort data
             if (!!this.sorting && this.sortingFunc) {
                 const beforeEvent = this.emit('beforesorting', { type });
@@ -11571,8 +11620,8 @@ class SortingPlugin extends BasePlugin {
                 this.startSorting(this.sorting, this.sortingFunc);
             }
         };
-        const aftercolumnsset = async ({ detail: { order }, }) => {
-            const columns = (await this.revogrid.getColumns());
+        const aftercolumnsset = ({ detail: { order }, }) => {
+            const columns = this.providers.column.getColumns();
             const sortingFunc = {};
             for (let prop in order) {
                 const cmp = this.getComparer(getColumnByProp(columns, prop), order[prop]);
@@ -11580,7 +11629,7 @@ class SortingPlugin extends BasePlugin {
             }
             this.runSorting(order, sortingFunc);
         };
-        const headerclick = async (e) => {
+        const headerclick = (e) => {
             var _a, _b;
             if (e.defaultPrevented) {
                 return;
@@ -11617,7 +11666,7 @@ class SortingPlugin extends BasePlugin {
      * Apply sorting to data on header click
      * If additive - add to existing sorting, multiple columns can be sorted
      */
-    async headerclick(column, index, additive) {
+    headerclick(column, index, additive) {
         var _a, _b;
         let order = this.getNextOrder(column.order);
         const beforeEvent = this.emit('beforesorting', { column, order, additive });
@@ -11625,7 +11674,7 @@ class SortingPlugin extends BasePlugin {
             return;
         }
         order = beforeEvent.detail.order;
-        const newCol = await this.revogrid.updateColumnSorting(beforeEvent.detail.column, index, order, additive);
+        const newCol = this.providers.column.updateColumnSorting(beforeEvent.detail.column, index, order, additive);
         // apply sort data
         const beforeApplyEvent = this.emit('beforesortingapply', {
             column: newCol,
@@ -11673,38 +11722,37 @@ class SortingPlugin extends BasePlugin {
      * @param sorting - per column sorting
      * @param data - this.stores['rgRow'].store.get('source')
      */
-    async sort(sorting, sortingFunc, types = ['rgRow', 'rowPinStart', 'rowPinEnd']) {
+    sort(sorting, sortingFunc, types = rowTypes) {
         // if no sorting - reset
         if (!size$1(sorting)) {
             this.sorting = undefined;
             this.sortingFunc = undefined;
             for (let type of types) {
-                const store = await this.revogrid.getSourceStore(type);
+                const storeService = this.providers.data.stores[type];
                 // row data
-                const source = store.get('source');
+                const source = storeService.store.get('source');
                 // row indexes
-                const proxyItems = range$1(0, source.length);
-                setStore(store, {
-                    proxyItems,
-                    source: [...source],
-                });
+                const proxyItems = storeService.store.get('proxyItems');
+                // row indexes
+                const newItemsOrder = storeService.store.get('items'); // recover indexes range(0, source.length)
+                this.providers.dimension.updateSizesPositionByNewDataIndexes(type, newItemsOrder, proxyItems);
+                storeService.setData({ proxyItems: newItemsOrder, source: [...source] });
             }
         }
         else {
             // set sorting
             this.sorting = sorting;
             this.sortingFunc = sortingFunc;
-            // by default it'll sort by rgRow store
-            // todo: support multiple stores
             for (let type of types) {
-                const store = await this.revogrid.getSourceStore(type);
+                const storeService = this.providers.data.stores[type];
                 // row data
-                const source = store.get('source');
+                const source = storeService.store.get('source');
                 // row indexes
-                const proxyItems = store.get('proxyItems');
-                const data = this.sortIndexByItems([...proxyItems], source, sortingFunc);
-                setStore(store, {
-                    proxyItems: data,
+                const proxyItems = storeService.store.get('proxyItems');
+                const newItemsOrder = this.sortIndexByItems([...proxyItems], source, sortingFunc);
+                this.providers.dimension.updateSizesPositionByNewDataIndexes(type, newItemsOrder, proxyItems);
+                storeService.setData({
+                    proxyItems: newItemsOrder,
                     source: [...source],
                 });
             }
@@ -14003,6 +14051,10 @@ class RevoGridComponent {
         var _a;
         (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.end();
     }
+    onRowOrderChange(e) {
+        var _a;
+        (_a = this.dataProvider) === null || _a === void 0 ? void 0 : _a.changeOrder(e.detail);
+    }
     onRowDrag({ detail }) {
         var _a;
         (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.move(detail);
@@ -14562,7 +14614,7 @@ class RevoGridComponent {
             "getContentSize": [64],
             "getSelectedRange": [64]
         },
-        "$listeners$": [[5, "touchstart", "mousedownHandle"], [5, "mousedown", "mousedownHandle"], [5, "touchend", "mouseupHandle"], [5, "mouseup", "mouseupHandle"], [0, "rowdragstartinit", "onRowDragStarted"], [0, "rowdragendinit", "onRowDragEnd"], [0, "rowdragmoveinit", "onRowDrag"], [0, "rowdragmousemove", "onRowMouseMove"], [0, "celleditapply", "onCellEdit"], [0, "rangeeditapply", "onRangeEdit"], [0, "selectionchangeinit", "onRangeChanged"], [0, "rowdropinit", "onRowDropped"], [0, "beforeheaderclick", "onHeaderClick"], [0, "beforecellfocusinit", "onCellFocus"]],
+        "$listeners$": [[5, "touchstart", "mousedownHandle"], [5, "mousedown", "mousedownHandle"], [5, "touchend", "mouseupHandle"], [5, "mouseup", "mouseupHandle"], [0, "rowdragstartinit", "onRowDragStarted"], [0, "rowdragendinit", "onRowDragEnd"], [0, "roworderchange", "onRowOrderChange"], [0, "rowdragmoveinit", "onRowDrag"], [0, "rowdragmousemove", "onRowMouseMove"], [0, "celleditapply", "onCellEdit"], [0, "rangeeditapply", "onRangeEdit"], [0, "selectionchangeinit", "onRangeChanged"], [0, "rowdropinit", "onRowDropped"], [0, "beforeheaderclick", "onHeaderClick"], [0, "beforecellfocusinit", "onCellFocus"]],
         "$lazyBundleId$": "-",
         "$attrsToReflect$": [["theme", "theme"], ["rowClass", "row-class"]]
     }; }