@revolist/revogrid 4.22.0 → 4.22.1

package/hydrate/index.js

@@ -6800,8 +6800,8 @@ class Clipboard {
             return;
         }
         const data = this.getData(beforeCopy.detail.event);
-        this.copyRegion.emit(data || undefined);
         e.preventDefault();
+        this.copyRegion.emit(data || undefined);
     }
     /**
      * Listen to copy event and emit copy region event
@@ -11289,6 +11289,26 @@ function isAll(event) {
     return ((event.ctrlKey && event.code === 'KeyA') || // Ctrl + A on Windows
         (event.metaKey && event.code === 'KeyA')); // Cmd + A on Mac
 }
+/**
+ * Returns true when a keyboard event represents a shortcut modifier that
+ * should not start cell editing from printable `event.key` input.
+ *
+ * AltGr is intentionally excluded because many Windows/Linux layouts expose
+ * printable AltGr characters as Ctrl+Alt key events.
+ */
+function isShortcutModifier(event) {
+    var _a;
+    if ((_a = event.getModifierState) === null || _a === void 0 ? void 0 : _a.call(event, 'AltGraph')) {
+        return false;
+    }
+    if (event.ctrlKey &&
+        event.altKey &&
+        !event.metaKey &&
+        event.key.length === 1) {
+        return false;
+    }
+    return event.ctrlKey || event.metaKey;
+}
 
 const LETTER_BLOCK_SIZE$1 = 10;
 const calculateRowHeaderSize = (itemsLength, rowHeaderColumn, minWidth = 50) => {
@@ -13384,7 +13404,7 @@ class KeyboardService {
             return;
         }
         // pressed letter key
-        if (e.key.length === 1) {
+        if (!isShortcutModifier(e) && e.key.length === 1) {
             this.sv.change(e.key);
             return;
         }
@@ -18160,11 +18180,11 @@ const HeaderCellRenderer = ({ data, props, additionalData }, children) => {
  * Plugin for column manual move
  */
 const COLUMN_CLICK = ON_COLUMN_CLICK;
-const MOVE = 'columndragmousemove';
-const DRAG_END = 'columndragend';
-const BEFORE_DRAG_END = 'beforecolumndragend';
+const COLUMN_DRAG_MOVE_EVENT = 'columndragmousemove';
+const COLUMN_DRAG_END_EVENT = 'columndragend';
+const BEFORE_COLUMN_DRAG_END_EVENT = 'beforecolumndragend';
 // use this event subscription to drop D&D for particular columns
-const DRAG_START = 'columndragstart';
+const COLUMN_DRAG_START_EVENT = 'columndragstart';
 class ColumnMovePlugin extends BasePlugin {
     constructor(revogrid, providers) {
         super(revogrid, providers);
@@ -18194,7 +18214,7 @@ class ColumnMovePlugin extends BasePlugin {
         if (event.defaultPrevented) {
             return;
         }
-        const { defaultPrevented } = dispatch(this.revogrid, DRAG_START, data);
+        const { defaultPrevented } = dispatch(this.revogrid, COLUMN_DRAG_START_EVENT, data);
         // check if allowed to drag particulat column
         if (defaultPrevented) {
             return;
@@ -18225,7 +18245,7 @@ class ColumnMovePlugin extends BasePlugin {
             gridEl: this.revogrid,
             cols,
         };
-        this.dragData = this.getData(this.staticDragData);
+        this.dragData = this.getData(this.staticDragData, []);
         mousemove.target.addEventListener('mousemove', mousemove.callback);
         this.orderUi.start(event, Object.assign(Object.assign({}, this.dragData), this.staticDragData));
     }
@@ -18233,7 +18253,7 @@ class ColumnMovePlugin extends BasePlugin {
         if (!this.staticDragData) {
             return;
         }
-        const dragData = (this.dragData = this.getData(this.staticDragData));
+        const dragData = (this.dragData = this.getData(this.staticDragData, []));
         if (!dragData) {
             return;
         }
@@ -18250,7 +18270,7 @@ class ColumnMovePlugin extends BasePlugin {
         }
     }
     move(e) {
-        dispatch(this.revogrid, MOVE, e);
+        dispatch(this.revogrid, COLUMN_DRAG_MOVE_EVENT, e);
         // then do move
         this.moveFunc(e);
     }
@@ -18266,9 +18286,10 @@ class ColumnMovePlugin extends BasePlugin {
             }
             const newPosition = getItemByPosition(this.staticDragData.cols, relativePos);
             const store = this.providers.column.stores[this.dragData.type].store;
+            const source = store.get('source');
             const newItems = [...store.get('items')];
             // prevent position change if needed
-            const { defaultPrevented: stopDrag } = dispatch(this.revogrid, BEFORE_DRAG_END, Object.assign(Object.assign({}, this.staticDragData), { startPosition: this.staticDragData.startItem, newPosition, newItem: store.get('source')[newItems[this.staticDragData.startItem.itemIndex]] }));
+            const { defaultPrevented: stopDrag } = dispatch(this.revogrid, BEFORE_COLUMN_DRAG_END_EVENT, Object.assign(Object.assign({}, this.staticDragData), { startPosition: this.staticDragData.startItem, newPosition, newItem: source[newItems[this.staticDragData.startItem.itemIndex]] }));
             if (!stopDrag) {
                 const prevItems = [...newItems];
                 // todo: if move item out of group remove item from group
@@ -18277,7 +18298,7 @@ class ColumnMovePlugin extends BasePlugin {
                 store.set('items', newItems);
                 this.providers.dimension.updateSizesPositionByNewDataIndexes(this.dragData.type, newItems, prevItems);
             }
-            dispatch(this.revogrid, DRAG_END, this.dragData);
+            dispatch(this.revogrid, COLUMN_DRAG_END_EVENT, this.getData(this.staticDragData, newItems, source));
         }
         this.clearOrder();
     }
@@ -18297,13 +18318,15 @@ class ColumnMovePlugin extends BasePlugin {
         super.clearSubscriptions();
         this.clearLocalSubscriptions();
     }
-    getData({ gridEl, dataEl, pin, }) {
+    getData({ gridEl, dataEl, pin }, order, source = []) {
         const gridRect = gridEl.getBoundingClientRect();
         const elRect = dataEl.getBoundingClientRect();
         const scrollOffset = elRect.left - gridRect.left;
         return {
+            columns: order.map(index => source[index]).filter(Boolean),
             elRect,
             gridRect,
+            order,
             type: pin || 'rgCol',
             scrollOffset,
         };
@@ -20392,126 +20415,8 @@ class RevogrFocus {
     }; }
 }
 
-var defineProperty = (function() {
-  try {
-    var func = getNative(Object, 'defineProperty');
-    func({}, '', {});
-    return func;
-  } catch (e) {}
-}());
-
-/**
- * The base implementation of `assignValue` and `assignMergeValue` without
- * value checks.
- *
- * @private
- * @param {Object} object The object to modify.
- * @param {string} key The key of the property to assign.
- * @param {*} value The value to assign.
- */
-function baseAssignValue(object, key, value) {
-  if (key == '__proto__' && defineProperty) {
-    defineProperty(object, key, {
-      'configurable': true,
-      'enumerable': true,
-      'value': value,
-      'writable': true
-    });
-  } else {
-    object[key] = value;
-  }
-}
-
-/**
- * A specialized version of `baseAggregator` for arrays.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} setter The function to set `accumulator` values.
- * @param {Function} iteratee The iteratee to transform keys.
- * @param {Object} accumulator The initial aggregated object.
- * @returns {Function} Returns `accumulator`.
- */
-function arrayAggregator(array, setter, iteratee, accumulator) {
-  var index = -1,
-      length = array == null ? 0 : array.length;
-
-  while (++index < length) {
-    var value = array[index];
-    setter(accumulator, value, iteratee(value), array);
-  }
-  return accumulator;
-}
-
-/**
- * Aggregates elements of `collection` on `accumulator` with keys transformed
- * by `iteratee` and values set by `setter`.
- *
- * @private
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} setter The function to set `accumulator` values.
- * @param {Function} iteratee The iteratee to transform keys.
- * @param {Object} accumulator The initial aggregated object.
- * @returns {Function} Returns `accumulator`.
- */
-function baseAggregator(collection, setter, iteratee, accumulator) {
-  baseEach(collection, function(value, key, collection) {
-    setter(accumulator, value, iteratee(value), collection);
-  });
-  return accumulator;
-}
-
-/**
- * Creates a function like `_.groupBy`.
- *
- * @private
- * @param {Function} setter The function to set accumulator values.
- * @param {Function} [initializer] The accumulator object initializer.
- * @returns {Function} Returns the new aggregator function.
- */
-function createAggregator(setter, initializer) {
-  return function(collection, iteratee) {
-    var func = isArray(collection) ? arrayAggregator : baseAggregator,
-        accumulator = {};
-
-    return func(collection, setter, baseIteratee(iteratee), accumulator);
-  };
-}
-
-/**
- * Creates an object composed of keys generated from the results of running
- * each element of `collection` thru `iteratee`. The corresponding value of
- * each key is the last element responsible for generating the key. The
- * iteratee is invoked with one argument: (value).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Collection
- * @param {Array|Object} collection The collection to iterate over.
- * @param {Function} [iteratee=_.identity] The iteratee to transform keys.
- * @returns {Object} Returns the composed aggregate object.
- * @example
- *
- * var array = [
- *   { 'dir': 'left', 'code': 97 },
- *   { 'dir': 'right', 'code': 100 }
- * ];
- *
- * _.keyBy(array, function(o) {
- *   return String.fromCharCode(o.code);
- * });
- * // => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }
- *
- * _.keyBy(array, 'dir');
- * // => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }
- */
-var keyBy = createAggregator(function(result, value, key) {
-  baseAssignValue(result, key, value);
-});
-
 const HeaderRenderer = (p) => {
-    var _a, _b, _c, _d, _e;
+    var _a, _b, _c, _d, _e, _f, _g;
     const cellClass = {
         [HEADER_CLASS]: true,
         [HEADER_SORTABLE_CLASS]: !!((_a = p.data) === null || _a === void 0 ? void 0 : _a.sortable),
@@ -20520,10 +20425,11 @@ const HeaderRenderer = (p) => {
         cellClass[p.data.order] = true;
     }
     const dataProps = {
+        key: String((_d = (_c = p.data) === null || _c === void 0 ? void 0 : _c.prop) !== null && _d !== void 0 ? _d : p.column.itemIndex),
         [DATA_COL]: p.column.itemIndex,
         canResize: p.canResize,
-        minWidth: ((_c = p.data) === null || _c === void 0 ? void 0 : _c.minSize) || MIN_COL_SIZE,
-        maxWidth: (_d = p.data) === null || _d === void 0 ? void 0 : _d.maxSize,
+        minWidth: ((_e = p.data) === null || _e === void 0 ? void 0 : _e.minSize) || MIN_COL_SIZE,
+        maxWidth: (_f = p.data) === null || _f === void 0 ? void 0 : _f.maxSize,
         active: p.active || ['r'],
         class: cellClass,
         style: {
@@ -20559,11 +20465,12 @@ const HeaderRenderer = (p) => {
             }
         }
     }
-    return (hAsync(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hAsync(SortingSign, { column: p.data }), p.canFilter && ((_e = p.data) === null || _e === void 0 ? void 0 : _e.filter) !== false ? (hAsync(FilterButton, { column: p.data })) : ('')));
+    return (hAsync(HeaderCellRenderer, { data: p.data, props: dataProps, additionalData: p.additionalData }, hAsync(SortingSign, { column: p.data }), p.canFilter && ((_g = p.data) === null || _g === void 0 ? void 0 : _g.filter) !== false ? (hAsync(FilterButton, { column: p.data })) : ('')));
 };
 
 const HeaderGroupRenderer = (p) => {
     const groupProps = {
+        key: `${p.group.name}-${p.group.indexes.join('-')}`,
         canResize: p.canResize,
         minWidth: p.group.indexes.length * MIN_COL_SIZE,
         maxWidth: 0,
@@ -20613,13 +20520,10 @@ class RevogrHeaderComponent {
     }
     onResizeGroup(changedX, startIndex, endIndex) {
         const sizes = {};
-        const cols = keyBy(this.viewportCol.get('items'), 'itemIndex');
         const change = changedX / (endIndex - startIndex + 1);
         for (let i = startIndex; i <= endIndex; i++) {
-            const item = cols[i];
-            if (item) {
-                sizes[i] = item.size + change;
-            }
+            const item = getItemByIndex(this.dimensionCol.state, i);
+            sizes[i] = item.end - item.start + change;
         }
         this.headerresize.emit(sizes);
     }
@@ -20633,12 +20537,12 @@ class RevogrHeaderComponent {
         const { cells } = this.renderHeaderColumns(cols, range);
         const groupRow = this.renderGroupingColumns();
         return [
-            hAsync("div", { key: 'a8d57270f4758b454fb4900808453e0c4663c91c', class: "group-rgRow" }, groupRow),
-            hAsync("div", { key: '41a270ff6bde9943a81d9c46482f2a40312afb50', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
+            hAsync("div", { key: '3cc466db6bc4df0cd61c47a22c3a0473318e5dd8', class: "group-rgRow" }, groupRow),
+            hAsync("div", { key: '9742a3fa4d4b75073aef5544806f42386ebffdea', class: `${HEADER_ROW_CLASS} ${HEADER_ACTUAL_ROW_CLASS}` }, cells),
         ];
     }
     renderHeaderColumns(cols, range) {
-        const cells = [];
+        const columnsToRender = [];
         for (let rgCol of cols) {
             const colData = this.colData[rgCol.itemIndex];
             const props = {
@@ -20655,45 +20559,105 @@ class RevogrHeaderComponent {
             };
             const event = this.beforeHeaderRender.emit(props);
             if (!event.defaultPrevented) {
-                cells.push(hAsync(HeaderRenderer, Object.assign({}, event.detail)));
+                columnsToRender.push(event.detail);
             }
         }
+        const duplicateProps = this.getDuplicateHeaderProps(columnsToRender);
+        const cells = columnsToRender.map(detail => hAsync(HeaderRenderer, Object.assign({ key: this.getHeaderCellKey(detail.data, this.type, duplicateProps) }, detail)));
         return { cells };
     }
     renderGroupingColumns() {
+        const visibleGroupRange = this.getVisibleGroupRange();
+        return Array.from({ length: this.groupingDepth }, (_, level) => this.renderGroupRow(level, visibleGroupRange)).flat();
+    }
+    renderGroupRow(level, visibleGroupRange) {
+        const groupCells = (this.groups[level] || [])
+            .map(group => this.renderGroupColumn(group, level, visibleGroupRange))
+            .filter((cell) => !!cell);
+        return [
+            ...groupCells,
+            hAsync('div', {
+                key: `group-row-${level}`,
+                class: {
+                    [HEADER_ROW_CLASS]: true,
+                    group: true,
+                },
+            }),
+        ];
+    }
+    renderGroupColumn(group, level, visibleGroupRange) {
         var _a;
-        const groupRow = [];
-        for (let i = 0; i < this.groupingDepth; i++) {
-            if (this.groups[i]) {
-                for (let group of this.groups[i]) {
-                    const groupStartIndex = (_a = group.indexes[0]) !== null && _a !== void 0 ? _a : -1;
-                    if (groupStartIndex > -1) {
-                        const groupEndIndex = groupStartIndex + group.indexes.length - 1;
-                        const groupStart = getItemByIndex(this.dimensionCol.state, groupStartIndex).start;
-                        const groupEnd = getItemByIndex(this.dimensionCol.state, groupEndIndex).end;
-                        const props = {
-                            providers: this.providers,
-                            start: groupStart,
-                            end: groupEnd,
-                            group,
-                            active: this.resizeHandler,
-                            canResize: this.canResize,
-                            additionalData: this.additionalData,
-                            onResize: e => {
-                                var _a;
-                                return this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupStartIndex, groupEndIndex);
-                            },
-                        };
-                        const event = this.beforeGroupHeaderRender.emit(props);
-                        if (!event.defaultPrevented) {
-                            groupRow.push(hAsync(HeaderGroupRenderer, Object.assign({}, event.detail)));
-                        }
-                    }
+        const groupStartIndex = (_a = group.indexes[0]) !== null && _a !== void 0 ? _a : -1;
+        if (groupStartIndex < 0) {
+            return;
+        }
+        const groupEndIndex = groupStartIndex + group.indexes.length - 1;
+        if (!visibleGroupRange ||
+            !isGroupInVisibleRange(groupStartIndex, groupEndIndex, visibleGroupRange)) {
+            return;
+        }
+        const groupStart = getItemByIndex(this.dimensionCol.state, groupStartIndex).start;
+        const groupEnd = getItemByIndex(this.dimensionCol.state, groupEndIndex).end;
+        const props = {
+            providers: this.providers,
+            start: groupStart,
+            end: groupEnd,
+            group,
+            active: this.resizeHandler,
+            canResize: this.canResize,
+            additionalData: this.additionalData,
+            onResize: e => {
+                var _a;
+                return this.onResizeGroup((_a = e.changedX) !== null && _a !== void 0 ? _a : 0, groupStartIndex, groupEndIndex);
+            },
+        };
+        const event = this.beforeGroupHeaderRender.emit(props);
+        if (event.defaultPrevented) {
+            return;
+        }
+        return hAsync(HeaderGroupRenderer, Object.assign({ key: this.getGroupHeaderCellKey(event.detail.group, level) }, event.detail));
+    }
+    getVisibleGroupRange() {
+        const visibleColumns = this.viewportCol.get('items');
+        if (!visibleColumns.length) {
+            return;
+        }
+        return visibleColumns.reduce((range, column) => ({
+            start: Math.min(range.start, column.itemIndex),
+            end: Math.max(range.end, column.itemIndex),
+        }), {
+            start: visibleColumns[0].itemIndex,
+            end: visibleColumns[0].itemIndex,
+        });
+    }
+    getHeaderCellKey(column, type, duplicateProps) {
+        if ((column === null || column === void 0 ? void 0 : column.prop) === undefined) {
+            return `${type}-${String(column === null || column === void 0 ? void 0 : column.index)}`;
+        }
+        const propKey = String(column.prop);
+        if (duplicateProps.has(propKey)) {
+            return `${type}-${propKey}-${String(column.index)}`;
+        }
+        return `${type}-${propKey}`;
+    }
+    getDuplicateHeaderProps(columns) {
+        const seenProps = new Set();
+        const duplicateProps = new Set();
+        columns.forEach(({ data }) => {
+            if ((data === null || data === void 0 ? void 0 : data.prop) !== undefined) {
+                const propKey = String(data.prop);
+                if (seenProps.has(propKey)) {
+                    duplicateProps.add(propKey);
+                }
+                else {
+                    seenProps.add(propKey);
                 }
             }
-            groupRow.push(hAsync("div", { class: `${HEADER_ROW_CLASS} group` }));
-        }
-        return groupRow;
+        });
+        return duplicateProps;
+    }
+    getGroupHeaderCellKey(group, level) {
+        return `group-${level}-${group.name}-${group.indexes.join('-')}`;
     }
     get providers() {
         return {
@@ -20729,6 +20693,10 @@ class RevogrHeaderComponent {
         "$attrsToReflect$": []
     }; }
 }
+function isGroupInVisibleRange(groupStartIndex, groupEndIndex, visibleRange) {
+    return (groupStartIndex <= visibleRange.end &&
+        groupEndIndex >= visibleRange.start);
+}
 
 const RowHeaderRender = s => (__, { rowIndex: i }) => s + i;