@revolist/revogrid 4.17.2 → 4.18.0

package/standalone/revo-grid.js

@@ -2,7 +2,7 @@
  * Built by Revolist OU ❤️
  */
 import { h, proxyCustomElement, HTMLElement as HTMLElement$1, createEvent, Host } from '@stencil/core/internal/client';
-import { K as reduce, L as baseEach, D as getColumnType, c as columnTypes, M as toInteger, v as isGrouping, u as getGroupingName, r as rowTypes, C as getCellDataParsed, B as getCellRaw, J as getColumnByProp, j as GROUP_EXPANDED, y as getParsedGroup, z as isSameGroup, G as GROUP_DEPTH, f as PSEUDO_GROUP_ITEM_VALUE, e as PSEUDO_GROUP_ITEM_ID, p as GROUPING_ROW_TYPE, q as getSource, h as PSEUDO_GROUP_COLUMN, t as gatherGrouping, o as GROUP_EXPAND_EVENT, w as isGroupingColumn, s as getExpanded, F as isColGrouping, i as isRowType, E as getColumnSizes, N as EMPTY_INDEX, H as getColumns, O as SelectionStoreConnector } from './column.service.js';
+import { J as reduce, g as getRange, K as baseEach, C as getColumnType, c as columnTypes, L as toInteger, u as isGrouping, t as getGroupingName, r as rowTypes, B as getCellDataParsed, A as getCellRaw, I as getColumnByProp, h as GROUP_EXPANDED, x as getParsedGroup, y as isSameGroup, G as GROUP_DEPTH, e as PSEUDO_GROUP_ITEM_VALUE, d as PSEUDO_GROUP_ITEM_ID, o as GROUPING_ROW_TYPE, p as getSource, f as PSEUDO_GROUP_COLUMN, s as gatherGrouping, m as GROUP_EXPAND_EVENT, v as isGroupingColumn, q as getExpanded, E as isColGrouping, i as isRowType, D as getColumnSizes, a as cropCellToMax, n as nextCell, F as getColumns } from './column.service.js';
 import { j as createStore, i as setStore, k as identity, l as isArray, b as getSourceItem, m as baseProperty, n as isArrayLike, o as getTag, q as baseKeys, g as getPhysical, e as setItems, D as DataStore, f as getSourceItemVirtualIndexByProp, d as setSourceByPhysicalIndex, s as setSourceByVirtualIndex, a as getVisibleSourceItem, h as gatherTrimmedItems } from './data.store.js';
 import { d as debounce } from './debounce.js';
 import { R as RESIZE_INTERVAL } from './consts.js';
@@ -281,6 +281,85 @@ class DimensionStore {
     }
 }
 
+/**
+ * Selection store
+ */
+function defaultState() {
+    return {
+        range: null,
+        tempRange: null,
+        tempRangeType: null,
+        focus: null,
+        edit: null,
+        lastCell: null,
+        nextFocus: null,
+    };
+}
+class SelectionStore {
+    constructor() {
+        this.unsubscribe = [];
+        this.store = createStore(defaultState());
+        this.store.on('set', (key, newVal) => {
+            if (key === 'tempRange' && !newVal) {
+                this.store.set('tempRangeType', null);
+            }
+        });
+    }
+    onChange(propName, cb) {
+        this.unsubscribe.push(this.store.onChange(propName, cb));
+    }
+    clearFocus() {
+        setStore(this.store, { focus: null, range: null, edit: null, tempRange: null });
+    }
+    setFocus(focus, end) {
+        if (!end) {
+            setStore(this.store, { focus });
+        }
+        else {
+            setStore(this.store, {
+                focus,
+                range: getRange(focus, end),
+                edit: null,
+                tempRange: null,
+            });
+        }
+    }
+    setNextFocus(focus) {
+        setStore(this.store, { nextFocus: focus });
+    }
+    setTempArea(range) {
+        setStore(this.store, { tempRange: range === null || range === void 0 ? void 0 : range.area, tempRangeType: range === null || range === void 0 ? void 0 : range.type, edit: null });
+    }
+    clearTemp() {
+        setStore(this.store, { tempRange: null });
+    }
+    /** Can be applied from selection change or from simple keyboard change clicks */
+    setRangeArea(range) {
+        setStore(this.store, { range, edit: null, tempRange: null });
+    }
+    setRange(start, end) {
+        const range = getRange(start, end);
+        this.setRangeArea(range);
+    }
+    setLastCell(lastCell) {
+        setStore(this.store, { lastCell });
+    }
+    setEdit(val) {
+        const focus = this.store.get('focus');
+        if (focus && typeof val === 'string') {
+            setStore(this.store, {
+                edit: { x: focus.x, y: focus.y, val },
+            });
+            return;
+        }
+        setStore(this.store, { edit: null });
+    }
+    dispose() {
+        this.unsubscribe.forEach(f => f());
+        this.store.dispose();
+    }
+}
+
 /**
  * Base layer for plugins
  * Provide minimal starting core for plugins to work
@@ -3011,10 +3090,9 @@ function gatherColumnData(data) {
 }
 class ViewportService {
     constructor(config, contentHeight) {
-        var _a, _b;
-        this.config = config;
-        (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeUpdate();
         // ----------- Handle columns ----------- //
+        var _a;
+        this.config = config;
         // Transform data from stores and apply it to different components
         const columns = [];
         let x = 0; // we increase x only if column present
@@ -3055,11 +3133,10 @@ class ViewportService {
             // render per each column data collections vertically
             const dataPorts = this.dataViewPort(column).reduce((r, rgRow) => {
                 // register selection store for Segment
-                const segmentSelection = this.registerSegment(rgRow.position);
-                segmentSelection.setLastCell(rgRow.lastCell);
+                const segmentSelection = this.registerSegment(rgRow.position, rgRow.lastCell);
                 // register selection store for Row
                 const rowSelectionStore = this.registerRow(rgRow.position.y, rgRow.type);
-                const rowDef = Object.assign(Object.assign({ colType: val }, rgRow), { rowSelectionStore, selectionStore: segmentSelection.store, ref: (e) => config.selectionStoreConnector.registerSection(e), onSetrange: e => {
+                const rowDef = Object.assign(Object.assign({ colType: val }, rgRow), { rowSelectionStore, selectionStore: segmentSelection.store, onSetrange: e => {
                         segmentSelection.setRangeArea(e.detail);
                     }, onSettemprange: e => segmentSelection.setTempArea(e.detail), onFocuscell: e => {
                         // todo: multi focus
@@ -3075,7 +3152,7 @@ class ViewportService {
         });
         this.columns = columns;
         // ----------- Handle columns end ----------- //
-        (_b = this.config.scrollingService) === null || _b === void 0 ? void 0 : _b.unregister();
+        (_a = this.config.scrollingService) === null || _a === void 0 ? void 0 : _a.unregister();
     }
     onColumnResize(type, { detail }, store) {
         var _a;
@@ -3093,8 +3170,10 @@ class ViewportService {
         this.config.resize(changedItems);
     }
     /** register selection store for Segment */
-    registerSegment(position) {
-        return this.config.selectionStoreConnector.register(position);
+    registerSegment(position, lastCell) {
+        const store = this.config.selectionStoreConnector.register(position);
+        store.setLastCell(lastCell);
+        return store;
     }
     /** register selection store for Row */
     registerRow(y, type) {
@@ -3114,14 +3193,10 @@ class ViewportService {
         // y position for selection
         let y = 0;
         return rowTypes.reduce((result, type) => {
-            // filter out empty sources, we still need to return source to keep slot working
-            const isPresent = data.viewports[type].store.get('realCount') || type === 'rgRow';
-            const rgCol = Object.assign(Object.assign({}, data), { position: Object.assign(Object.assign({}, data.position), { y: isPresent ? y : EMPTY_INDEX }) });
+            const rgCol = Object.assign(Object.assign({}, data), { position: Object.assign(Object.assign({}, data.position), { y }) });
             const partition = viewportDataPartition(rgCol, type, slots[type], type !== 'rgRow');
             result.push(partition);
-            if (isPresent) {
-                y++;
-            }
+            y++;
             return result;
         }, []);
     }
@@ -3295,6 +3370,276 @@ class GridScrollingService {
     }
 }
 
+class SelectionStoreConnector {
+    constructor() {
+        this.stores = {};
+        this.columnStores = {};
+        this.rowStores = {};
+        /**
+         * Helpers for data conversion
+         */
+        this.storesByType = {};
+        this.storesXToType = {};
+        this.storesYToType = {};
+    }
+    get focusedStore() {
+        var _a;
+        for (let y in this.stores) {
+            for (let x in this.stores[y]) {
+                const focused = (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.store.get('focus');
+                if (focused) {
+                    return {
+                        entity: this.stores[y][x],
+                        cell: focused,
+                        position: {
+                            x: parseInt(x, 10),
+                            y: parseInt(y, 10),
+                        },
+                    };
+                }
+            }
+        }
+        return null;
+    }
+    get edit() {
+        var _a;
+        return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('edit');
+    }
+    get focused() {
+        var _a;
+        return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('focus');
+    }
+    get selectedRange() {
+        var _a;
+        return (_a = this.focusedStore) === null || _a === void 0 ? void 0 : _a.entity.store.get('range');
+    }
+    registerColumn(x, type) {
+        if (this.columnStores[x]) {
+            return this.columnStores[x];
+        }
+        this.columnStores[x] = new SelectionStore();
+        // build cross-linking type to position
+        this.storesByType[type] = x;
+        this.storesXToType[x] = type;
+        return this.columnStores[x];
+    }
+    registerRow(y, type) {
+        if (this.rowStores[y]) {
+            return this.rowStores[y];
+        }
+        this.rowStores[y] = new SelectionStore();
+        // build cross linking type to position
+        this.storesByType[type] = y;
+        this.storesYToType[y] = type;
+        return this.rowStores[y];
+    }
+    /**
+     * Cross store proxy, based on multiple dimensions
+     */
+    register({ x, y }) {
+        if (!this.stores[y]) {
+            this.stores[y] = {};
+        }
+        let store = this.stores[y][x];
+        if (store) {
+            // Store already registered. Do not register twice
+            return store;
+        }
+        this.stores[y][x] = store = new SelectionStore();
+        // proxy update, column store trigger only range area
+        store.onChange('range', c => {
+            this.columnStores[x].setRangeArea(c);
+            this.rowStores[y].setRangeArea(c);
+        });
+        // clean up on remove
+        store.store.on('dispose', () => this.destroy(x, y));
+        return store;
+    }
+    destroy(x, y) {
+        var _a, _b;
+        (_a = this.columnStores[x]) === null || _a === void 0 ? void 0 : _a.dispose();
+        (_b = this.rowStores[y]) === null || _b === void 0 ? void 0 : _b.dispose();
+        delete this.rowStores[y];
+        delete this.columnStores[x];
+        // clear x cross-link
+        if (this.storesXToType[x]) {
+            const type = this.storesXToType[x];
+            delete this.storesXToType[x];
+            delete this.storesByType[type];
+        }
+        // clear y cross-link
+        if (this.storesYToType[y]) {
+            const type = this.storesYToType[y];
+            delete this.storesYToType[y];
+            delete this.storesByType[type];
+        }
+        if (this.stores[y]) {
+            delete this.stores[y][x];
+        }
+        // clear empty rows
+        if (!Object.keys(this.stores[y] || {}).length) {
+            delete this.stores[y];
+        }
+    }
+    setEditByCell(storePos, editCell) {
+        this.focusByCell(storePos, editCell, editCell);
+        this.setEdit('');
+    }
+    /**
+     * Sets the next focus cell before the current one.
+     *
+     * @param focus - The cell to set as the next focus.
+     */
+    beforeNextFocusCell(focus) {
+        var _a;
+        // If there is no focused store, return early.
+        if (!this.focusedStore) {
+            return;
+        }
+        // Get the next store based on the current focus and the last cell.
+        const lastCell = this.focusedStore.entity.store.get('lastCell');
+        const next = lastCell && this.getNextStore(focus, this.focusedStore.position, lastCell);
+        // Set the next focus cell in the store.
+        (_a = next === null || next === void 0 ? void 0 : next.store) === null || _a === void 0 ? void 0 : _a.setNextFocus(Object.assign(Object.assign({}, focus), next.item));
+    }
+    focusByCell(storePos, start, end) {
+        const store = this.stores[storePos.y][storePos.x];
+        this.focus(store, { focus: start, end });
+    }
+    focus(store, { focus, end }) {
+        const currentStorePointer = this.getCurrentStorePointer(store);
+        if (!currentStorePointer) {
+            return null;
+        }
+        // check for the focus in nearby store/viewport
+        const lastCell = store.store.get('lastCell');
+        const next = lastCell && this.getNextStore(focus, currentStorePointer, lastCell);
+        // if next store present - update
+        if (next === null || next === void 0 ? void 0 : next.store) {
+            const item = Object.assign(Object.assign({}, focus), next.item);
+            this.focus(next.store, { focus: item, end: item });
+            return null;
+        }
+        if (lastCell) {
+            focus = cropCellToMax(focus, lastCell);
+            end = cropCellToMax(end, lastCell);
+        }
+        store.setFocus(focus, end);
+        return focus;
+    }
+    /**
+     * Retrieves the current store pointer based on the active store.
+     * Clears focus from all stores except the active one.
+     */
+    getCurrentStorePointer(store) {
+        let currentStorePointer;
+        // Iterate through all stores
+        for (let y in this.stores) {
+            for (let x in this.stores[y]) {
+                const s = this.stores[y][x];
+                // Clear focus from stores other than the active one
+                if (s !== store) {
+                    s.clearFocus();
+                }
+                else {
+                    // Update the current store pointer with the active store coordinates
+                    currentStorePointer = {
+                        x: parseInt(x, 10),
+                        y: parseInt(y, 10)
+                    };
+                }
+            }
+        }
+        return currentStorePointer;
+    }
+    /**
+     * Retrieves the next store based on the focus cell and current store pointer.
+     * If the next store exists, returns an object with the next store and the item in the new store.
+     * If the next store does not exist, returns null.
+     */
+    getNextStore(focus, currentStorePointer, lastCell) {
+        // item in new store
+        const nextItem = nextCell(focus, lastCell);
+        let nextStore;
+        if (nextItem) {
+            Object.entries(nextItem).forEach(([type, nextItemCoord]) => {
+                let stores;
+                switch (type) {
+                    case 'x':
+                        // Get the X stores for the current Y coordinate of the current store pointer
+                        stores = this.getXStores(currentStorePointer.y);
+                        break;
+                    case 'y':
+                        // Get the Y stores for the current X coordinate of the current store pointer
+                        stores = this.getYStores(currentStorePointer.x);
+                        break;
+                }
+                // Get the next store based on the item in the new store
+                if (nextItemCoord >= 0) {
+                    nextStore = stores[++currentStorePointer[type]];
+                }
+                else {
+                    nextStore = stores[--currentStorePointer[type]];
+                    const nextLastCell = nextStore === null || nextStore === void 0 ? void 0 : nextStore.store.get('lastCell');
+                    if (nextLastCell) {
+                        nextItem[type] = nextLastCell[type] + nextItemCoord;
+                    }
+                }
+            });
+        }
+        // if last cell is empty store is empty, no next store
+        const lastCellNext = nextStore === null || nextStore === void 0 ? void 0 : nextStore.store.get('lastCell');
+        if (!(lastCellNext === null || lastCellNext === void 0 ? void 0 : lastCellNext.x) || !(lastCellNext === null || lastCellNext === void 0 ? void 0 : lastCellNext.y)) {
+            nextStore = undefined;
+        }
+        return {
+            store: nextStore,
+            item: nextItem,
+        };
+    }
+    clearAll() {
+        var _a;
+        for (let y in this.stores) {
+            for (let x in this.stores[y]) {
+                (_a = this.stores[y][x]) === null || _a === void 0 ? void 0 : _a.clearFocus();
+            }
+        }
+    }
+    setEdit(val) {
+        if (!this.focusedStore) {
+            return;
+        }
+        this.focusedStore.entity.setEdit(val);
+    }
+    /**
+     * Select all cells across all stores
+     */
+    selectAll() {
+        for (let y in this.stores) {
+            for (let x in this.stores[y]) {
+                const store = this.stores[y][x];
+                if (!store) {
+                    continue;
+                }
+                const lastCell = store.store.get('lastCell');
+                if (lastCell) {
+                    store.setRange({ x: 0, y: 0 }, { x: lastCell.x - 1, y: lastCell.y - 1 });
+                }
+            }
+        }
+    }
+    getXStores(y) {
+        return this.stores[y];
+    }
+    getYStores(x) {
+        const stores = {};
+        for (let i in this.stores) {
+            stores[i] = this.stores[i][x];
+        }
+        return stores;
+    }
+}
+
 /**
  * Draw drag
  */
@@ -4847,7 +5192,7 @@ function defineCustomElement$1() {
 const RevoGrid = RevoGridComponent;
 const defineCustomElement = defineCustomElement$1;
 
-export { AutoSizeColumnPlugin as A, BasePlugin as B, ColumnMovePlugin as C, DimensionStore as D, ExportFilePlugin as E, FILTER_TRIMMED_TYPE as F, GroupingRowPlugin as G, RevoGrid, StretchColumn as S, ExportCsv as a, FILTER_CONFIG_CHANGED_EVENT as b, FILTE_PANEL as c, FilterPlugin as d, defineCustomElement, filterTypes as e, filterCoreFunctionsIndexedByType as f, getTheme as g, filterNames as h, isStretchPlugin as i, doCollapse as j, doExpand as k, getLeftRelative as l, SortingPlugin as m, defaultCellCompare as n, descCellCompare as o, getNextOrder as p, getComparer as q, sortIndexByItems as s };
+export { AutoSizeColumnPlugin as A, BasePlugin as B, ColumnMovePlugin as C, DimensionStore as D, ExportFilePlugin as E, FILTER_TRIMMED_TYPE as F, GroupingRowPlugin as G, RevoGrid, SelectionStore as S, StretchColumn as a, ExportCsv as b, FILTER_CONFIG_CHANGED_EVENT as c, FILTE_PANEL as d, defineCustomElement, FilterPlugin as e, filterCoreFunctionsIndexedByType as f, getTheme as g, filterTypes as h, isStretchPlugin as i, filterNames as j, doCollapse as k, doExpand as l, getLeftRelative as m, SortingPlugin as n, defaultCellCompare as o, descCellCompare as p, getNextOrder as q, getComparer as r, sortIndexByItems as s };
 //# sourceMappingURL=revo-grid.js.map
 
 //# sourceMappingURL=revo-grid.js.map