@revolist/revogrid 4.2.0-next.14 → 4.2.0-next.15

package/custom-element/dimension.helpers.js

@@ -234,26 +234,29 @@ var sortedIndex_1 = sortedIndex;
 
 /**
  * Pre-calculation
- * Dimension sizes for each cell
+ * Dimension custom sizes for each cell
+ * Keeps only changed sizes, skips origin size
  */
 function calculateDimensionData(originItemSize, newSizes = {}) {
   const positionIndexes = [];
   const positionIndexToItem = {};
   const indexToItem = {};
-  // combine all sizes
+  // combine all new sizes
   const sizes = Object.assign({}, newSizes);
   // prepare order sorted new sizes and calculate changed real size
   let newIndexes = [];
-  each(newSizes, (_, index) => {
-    newIndexes[sortedIndex_1(newIndexes, parseInt(index, 10))] = parseInt(index, 10);
+  each(newSizes, (_, i) => {
+    const index = parseInt(i, 10);
+    newIndexes[sortedIndex_1(newIndexes, index)] = index;
   });
-  // fill new coordinates
+  // fill new coordinates based on what is changed
   reduce_1(newIndexes, (previous, itemIndex, i) => {
     const newItem = {
       itemIndex,
       start: 0,
       end: 0,
     };
+    // if previous item was changed too
     if (previous) {
       const itemsBetween = (itemIndex - previous.itemIndex - 1) * originItemSize;
       newItem.start = itemsBetween + previous.end;

package/custom-element/revo-grid.js

@@ -624,6 +624,10 @@ 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
     sizes: {},
     // order in indexes[] to coordinate
@@ -631,7 +635,6 @@ function initialBase() {
     // initial element to coordinate ^
     indexToItem: {},
     positionIndexes: [],
-    trimmed: {}
   };
 }
 function initialState() {
@@ -665,6 +668,11 @@ class DimensionStore {
   drop() {
     setStore(this.store, initialBase());
   }
+  /**
+   * Set custom dimension sizes and overwrite old
+   * Generates new indexes based on sizes
+   * @param sizes - sizes to set
+   */
   setDimensionSize(sizes) {
     const dimensionData = calculateDimensionData(this.store.get('originItemSize'), sizes);
     setStore(this.store, dimensionData);
@@ -672,6 +680,10 @@ class DimensionStore {
   }
 }
 
+/**
+ * Dimension provider
+ * Stores dimension information and custom sizes
+ */
 class DimensionProvider {
   constructor(viewports, config) {
     this.viewports = viewports;
@@ -682,24 +694,46 @@ class DimensionProvider {
       return sources;
     }, {});
   }
+  /**
+   * Clear old sizes
+   * @param type - dimension type
+   * @param count - count of items
+   */
   clearSize(t, count) {
     this.stores[t].drop();
     // after we done with drop trigger viewport recalculaction
     this.viewports.stores[t].setOriginalSizes(this.stores[t].store.get('originItemSize'));
     this.setItemCount(count, t);
   }
-  setDimensionSize(type, sizes) {
-    this.stores[type].setDimensionSize(sizes);
-    this.viewports.stores[type].setViewPortDimension(sizes);
+  /**
+   * Apply new custom sizes to dimension and view port
+   * @param type - dimension type
+   * @param sizes - new custom sizes
+   * @param keepOld - keep old sizes merge new with old
+   */
+  setCustomSizes(type, sizes, keepOld = false) {
+    let newSizes = sizes;
+    if (keepOld) {
+      const oldSizes = this.stores[type].store.get('sizes');
+      newSizes = Object.assign(Object.assign({}, oldSizes), sizes);
+    }
+    this.stores[type].setDimensionSize(newSizes);
+    this.viewports.stores[type].setViewPortDimension(newSizes);
   }
   setItemCount(realCount, type) {
     this.viewports.stores[type].setViewport({ realCount });
     this.stores[type].setStore({ count: realCount });
   }
+  /**
+   * Apply trimmed items
+   * @param trimmed - trimmed items
+   * @param type
+   */
   setTrimmed(trimmed, type) {
     const allTrimmed = gatherTrimmedItems(trimmed);
-    this.stores[type].setStore({ trimmed: allTrimmed });
-    this.viewports.stores[type].setViewPortDimension(this.stores[type].store.get('sizes'));
+    const dimStoreType = this.stores[type];
+    dimStoreType.setStore({ trimmed: allTrimmed });
+    this.viewports.stores[type].setViewPortDimension(dimStoreType.store.get('sizes'));
   }
   /**
    * Sets dimension data and view port coordinate
@@ -713,10 +747,17 @@ class DimensionProvider {
     }
     this.updateViewport(type);
   }
+  /**
+   * Virtualization will get disabled
+   * @param type - dimension type
+   */
   setNoVirtual(type) {
     const dimension = this.stores[type].getCurrentState();
     this.viewports.stores[type].setViewport({ virtualSize: dimension.realSize });
   }
+  /**
+   * Drop all dimension data
+   */
   drop() {
     for (let type of columnTypes) {
       this.stores[type].drop();
@@ -736,7 +777,7 @@ class DimensionProvider {
   }
   setNewColumns(type, newLength, sizes, noVirtual = false) {
     this.setItemCount(newLength, type);
-    this.setDimensionSize(type, sizes);
+    this.setCustomSizes(type, sizes);
     if (noVirtual) {
       this.setNoVirtual(type);
     }
@@ -830,9 +871,9 @@ class AutoSizeColumn extends BasePlugin {
       const type = ColumnDataProvider.getColumnType(detail.column);
       const size = this.getColumnSize(detail.index, type);
       if (size) {
-        this.providers.dimensionProvider.setDimensionSize(type, {
+        this.providers.dimensionProvider.setCustomSizes(type, {
           [detail.index]: size,
-        });
+        }, true);
       }
     };
     this.addEventListener('beforecolumnsset', beforecolumnsset);
@@ -876,7 +917,7 @@ class AutoSizeColumn extends BasePlugin {
         // calculate size
         rgCol.size = sizes[rgCol.index] = source.reduce((prev, rgRow) => Math.max(prev, this.getLength(rgRow[rgCol.prop])), this.getLength(rgCol.name || ''));
       });
-      this.providers.dimensionProvider.setDimensionSize(type, sizes);
+      this.providers.dimensionProvider.setCustomSizes(type, sizes, true);
     });
   }
   getLength(len) {
@@ -920,7 +961,7 @@ class AutoSizeColumn extends BasePlugin {
           rgCol.size = sizes[rgCol.index] = size;
         }
       });
-      this.providers.dimensionProvider.setDimensionSize(type, sizes);
+      this.providers.dimensionProvider.setCustomSizes(type, sizes, true);
     });
   }
   afterEditAll(e) {
@@ -941,7 +982,7 @@ class AutoSizeColumn extends BasePlugin {
           }
         }
       });
-      this.providers.dimensionProvider.setDimensionSize(type, sizes);
+      this.providers.dimensionProvider.setCustomSizes(type, sizes, true);
     });
   }
   getColumnSize(index, type) {
@@ -2541,7 +2582,7 @@ class ViewportService {
   }
   onColumnResize(type, { detail }, store) {
     var _a;
-    (_a = this.sv.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setDimensionSize(type, detail);
+    (_a = this.sv.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(type, detail, true);
     const changedItems = lodash.reduce(detail || {}, (r, size, i) => {
       const index = parseInt(i, 10);
       const item = getSourceItem(store, index);
@@ -2856,7 +2897,7 @@ class StretchColumn extends BasePlugin {
     }
     const type = 'rgCol';
     const sizes = this.providers.dimensionProvider.stores[type].store.get('sizes');
-    this.providers.dimensionProvider.setDimensionSize(type, Object.assign(Object.assign({}, sizes), { [this.stretchedColumn.index]: this.stretchedColumn.size }));
+    this.providers.dimensionProvider.setCustomSizes(type, Object.assign(Object.assign({}, sizes), { [this.stretchedColumn.index]: this.stretchedColumn.size }), true);
   }
   /**
    * Apply stretch changes
@@ -3409,6 +3450,9 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.clickTrackForFocusClear = e.screenX + e.screenY;
   }
   mouseupHandle(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
     const target = e.target;
     const pos = e.screenX + e.screenY;
     // detect if mousemove then do nothing
@@ -3418,7 +3462,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     // check if action finished inside of the document
     // clear data which is outside of grid
     // if event prevented or it is current table don't clear focus
-    if (e.defaultPrevented || (target === null || target === void 0 ? void 0 : target.closest(`[${UUID}="${this.uuid}"]`))) {
+    if (target === null || target === void 0 ? void 0 : target.closest(`[${UUID}="${this.uuid}"]`)) {
       return;
     }
     this.clearFocus();
@@ -3431,7 +3475,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   /** DRAG AND DROP */
   onRowDragStarted(e) {
     var _a;
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     const dragStart = this.rowdragstart.emit(e.detail);
     if (dragStart.defaultPrevented) {
       e.preventDefault();
@@ -3449,11 +3493,11 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
   }
   onRowMouseMove(e) {
     var _a;
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.moveTip(e.detail);
   }
   async onBeforeEdit(e) {
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     const { defaultPrevented, detail } = this.beforeedit.emit(e.detail);
     await timeout();
     // apply data
@@ -3463,7 +3507,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     }
   }
   onBeforeRangeEdit(e) {
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     const { defaultPrevented, detail } = this.beforerangeedit.emit(e.detail);
     if (defaultPrevented) {
       e.preventDefault();
@@ -3472,7 +3516,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.afteredit.emit(detail);
   }
   onRangeChanged(e) {
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     const beforeange = this.beforeange.emit(e.detail);
     if (beforeange.defaultPrevented) {
       e.preventDefault();
@@ -3569,7 +3613,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     if (!newVal.length) {
       return;
     }
-    each(newRows, (r, k) => this.dimensionProvider.setDimensionSize(k, r.sizes || {}));
+    each(newRows, (r, k) => this.dimensionProvider.setCustomSizes(k, r.sizes || {}));
   }
   trimmedRowsChanged(newVal = {}) {
     this.addTrimmed(newVal);

package/custom-element/revogr-row-headers2.js

@@ -261,7 +261,9 @@ class ViewportStore {
   }
   /**
    * Update viewport sizes for existing items
-  */
+   * This method is generating new item positions based on custom sizes and original sizes
+   * @param sizes - custom sizes for each item
+   */
   setViewPortDimension(sizes) {
     const items = this.store.get('items');
     const count = items.length;

package/dist/cjs/revo-grid_11.cjs.entry.js

@@ -21454,26 +21454,29 @@ var sortedIndex_1 = sortedIndex;
 
 /**
  * Pre-calculation
- * Dimension sizes for each cell
+ * Dimension custom sizes for each cell
+ * Keeps only changed sizes, skips origin size
  */
 function calculateDimensionData(originItemSize, newSizes = {}) {
   const positionIndexes = [];
   const positionIndexToItem = {};
   const indexToItem = {};
-  // combine all sizes
+  // combine all new sizes
   const sizes = Object.assign({}, newSizes);
   // prepare order sorted new sizes and calculate changed real size
   let newIndexes = [];
-  each(newSizes, (_, index) => {
-    newIndexes[sortedIndex_1(newIndexes, parseInt(index, 10))] = parseInt(index, 10);
+  each(newSizes, (_, i) => {
+    const index = parseInt(i, 10);
+    newIndexes[sortedIndex_1(newIndexes, index)] = index;
   });
-  // fill new coordinates
+  // fill new coordinates based on what is changed
   reduce_1(newIndexes, (previous, itemIndex, i) => {
     const newItem = {
       itemIndex,
       start: 0,
       end: 0,
     };
+    // if previous item was changed too
     if (previous) {
       const itemsBetween = (itemIndex - previous.itemIndex - 1) * originItemSize;
       newItem.start = itemsBetween + previous.end;
@@ -21599,6 +21602,10 @@ 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
     sizes: {},
     // order in indexes[] to coordinate
@@ -21606,7 +21613,6 @@ function initialBase() {
     // initial element to coordinate ^
     indexToItem: {},
     positionIndexes: [],
-    trimmed: {}
   };
 }
 function initialState$1() {
@@ -21640,6 +21646,11 @@ class DimensionStore {
   drop() {
     setStore(this.store, initialBase());
   }
+  /**
+   * Set custom dimension sizes and overwrite old
+   * Generates new indexes based on sizes
+   * @param sizes - sizes to set
+   */
   setDimensionSize(sizes) {
     const dimensionData = calculateDimensionData(this.store.get('originItemSize'), sizes);
     setStore(this.store, dimensionData);
@@ -21669,6 +21680,10 @@ const EDIT_INPUT_WR = 'edit-input-wrapper';
 const DRAGG_TEXT = 'Draggable item';
 const GRID_INTERNALS = '__rvgr';
 
+/**
+ * Dimension provider
+ * Stores dimension information and custom sizes
+ */
 class DimensionProvider {
   constructor(viewports, config) {
     this.viewports = viewports;
@@ -21679,24 +21694,46 @@ class DimensionProvider {
       return sources;
     }, {});
   }
+  /**
+   * Clear old sizes
+   * @param type - dimension type
+   * @param count - count of items
+   */
   clearSize(t, count) {
     this.stores[t].drop();
     // after we done with drop trigger viewport recalculaction
     this.viewports.stores[t].setOriginalSizes(this.stores[t].store.get('originItemSize'));
     this.setItemCount(count, t);
   }
-  setDimensionSize(type, sizes) {
-    this.stores[type].setDimensionSize(sizes);
-    this.viewports.stores[type].setViewPortDimension(sizes);
+  /**
+   * Apply new custom sizes to dimension and view port
+   * @param type - dimension type
+   * @param sizes - new custom sizes
+   * @param keepOld - keep old sizes merge new with old
+   */
+  setCustomSizes(type, sizes, keepOld = false) {
+    let newSizes = sizes;
+    if (keepOld) {
+      const oldSizes = this.stores[type].store.get('sizes');
+      newSizes = Object.assign(Object.assign({}, oldSizes), sizes);
+    }
+    this.stores[type].setDimensionSize(newSizes);
+    this.viewports.stores[type].setViewPortDimension(newSizes);
   }
   setItemCount(realCount, type) {
     this.viewports.stores[type].setViewport({ realCount });
     this.stores[type].setStore({ count: realCount });
   }
+  /**
+   * Apply trimmed items
+   * @param trimmed - trimmed items
+   * @param type
+   */
   setTrimmed(trimmed, type) {
     const allTrimmed = gatherTrimmedItems(trimmed);
-    this.stores[type].setStore({ trimmed: allTrimmed });
-    this.viewports.stores[type].setViewPortDimension(this.stores[type].store.get('sizes'));
+    const dimStoreType = this.stores[type];
+    dimStoreType.setStore({ trimmed: allTrimmed });
+    this.viewports.stores[type].setViewPortDimension(dimStoreType.store.get('sizes'));
   }
   /**
    * Sets dimension data and view port coordinate
@@ -21710,10 +21747,17 @@ class DimensionProvider {
     }
     this.updateViewport(type);
   }
+  /**
+   * Virtualization will get disabled
+   * @param type - dimension type
+   */
   setNoVirtual(type) {
     const dimension = this.stores[type].getCurrentState();
     this.viewports.stores[type].setViewport({ virtualSize: dimension.realSize });
   }
+  /**
+   * Drop all dimension data
+   */
   drop() {
     for (let type of columnTypes) {
       this.stores[type].drop();
@@ -21733,7 +21777,7 @@ class DimensionProvider {
   }
   setNewColumns(type, newLength, sizes, noVirtual = false) {
     this.setItemCount(newLength, type);
-    this.setDimensionSize(type, sizes);
+    this.setCustomSizes(type, sizes);
     if (noVirtual) {
       this.setNoVirtual(type);
     }
@@ -22022,7 +22066,9 @@ class ViewportStore {
   }
   /**
    * Update viewport sizes for existing items
-  */
+   * This method is generating new item positions based on custom sizes and original sizes
+   * @param sizes - custom sizes for each item
+   */
   setViewPortDimension(sizes) {
     const items = this.store.get('items');
     const count = items.length;
@@ -22203,9 +22249,9 @@ class AutoSizeColumn extends BasePlugin {
       const type = ColumnDataProvider.getColumnType(detail.column);
       const size = this.getColumnSize(detail.index, type);
       if (size) {
-        this.providers.dimensionProvider.setDimensionSize(type, {
+        this.providers.dimensionProvider.setCustomSizes(type, {
           [detail.index]: size,
-        });
+        }, true);
       }
     };
     this.addEventListener('beforecolumnsset', beforecolumnsset);
@@ -22249,7 +22295,7 @@ class AutoSizeColumn extends BasePlugin {
         // calculate size
         rgCol.size = sizes[rgCol.index] = source.reduce((prev, rgRow) => Math.max(prev, this.getLength(rgRow[rgCol.prop])), this.getLength(rgCol.name || ''));
       });
-      this.providers.dimensionProvider.setDimensionSize(type, sizes);
+      this.providers.dimensionProvider.setCustomSizes(type, sizes, true);
     });
   }
   getLength(len) {
@@ -22293,7 +22339,7 @@ class AutoSizeColumn extends BasePlugin {
           rgCol.size = sizes[rgCol.index] = size;
         }
       });
-      this.providers.dimensionProvider.setDimensionSize(type, sizes);
+      this.providers.dimensionProvider.setCustomSizes(type, sizes, true);
     });
   }
   afterEditAll(e) {
@@ -22314,7 +22360,7 @@ class AutoSizeColumn extends BasePlugin {
           }
         }
       });
-      this.providers.dimensionProvider.setDimensionSize(type, sizes);
+      this.providers.dimensionProvider.setCustomSizes(type, sizes, true);
     });
   }
   getColumnSize(index, type) {
@@ -24483,7 +24529,7 @@ class ViewportService {
   }
   onColumnResize(type, { detail }, store) {
     var _a;
-    (_a = this.sv.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setDimensionSize(type, detail);
+    (_a = this.sv.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(type, detail, true);
     const changedItems = lodash.reduce(detail || {}, (r, size, i) => {
       const index = parseInt(i, 10);
       const item = getSourceItem(store, index);
@@ -24803,7 +24849,7 @@ class StretchColumn extends BasePlugin {
     }
     const type = 'rgCol';
     const sizes = this.providers.dimensionProvider.stores[type].store.get('sizes');
-    this.providers.dimensionProvider.setDimensionSize(type, Object.assign(Object.assign({}, sizes), { [this.stretchedColumn.index]: this.stretchedColumn.size }));
+    this.providers.dimensionProvider.setCustomSizes(type, Object.assign(Object.assign({}, sizes), { [this.stretchedColumn.index]: this.stretchedColumn.size }), true);
   }
   /**
    * Apply stretch changes
@@ -25368,6 +25414,9 @@ const RevoGridComponent = class {
     this.clickTrackForFocusClear = e.screenX + e.screenY;
   }
   mouseupHandle(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
     const target = e.target;
     const pos = e.screenX + e.screenY;
     // detect if mousemove then do nothing
@@ -25377,7 +25426,7 @@ const RevoGridComponent = class {
     // check if action finished inside of the document
     // clear data which is outside of grid
     // if event prevented or it is current table don't clear focus
-    if (e.defaultPrevented || (target === null || target === void 0 ? void 0 : target.closest(`[${UUID}="${this.uuid}"]`))) {
+    if (target === null || target === void 0 ? void 0 : target.closest(`[${UUID}="${this.uuid}"]`)) {
       return;
     }
     this.clearFocus();
@@ -25390,7 +25439,7 @@ const RevoGridComponent = class {
   /** DRAG AND DROP */
   onRowDragStarted(e) {
     var _a;
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     const dragStart = this.rowdragstart.emit(e.detail);
     if (dragStart.defaultPrevented) {
       e.preventDefault();
@@ -25408,11 +25457,11 @@ const RevoGridComponent = class {
   }
   onRowMouseMove(e) {
     var _a;
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.moveTip(e.detail);
   }
   async onBeforeEdit(e) {
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     const { defaultPrevented, detail } = this.beforeedit.emit(e.detail);
     await timeout();
     // apply data
@@ -25422,7 +25471,7 @@ const RevoGridComponent = class {
     }
   }
   onBeforeRangeEdit(e) {
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     const { defaultPrevented, detail } = this.beforerangeedit.emit(e.detail);
     if (defaultPrevented) {
       e.preventDefault();
@@ -25431,7 +25480,7 @@ const RevoGridComponent = class {
     this.afteredit.emit(detail);
   }
   onRangeChanged(e) {
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     const beforeange = this.beforeange.emit(e.detail);
     if (beforeange.defaultPrevented) {
       e.preventDefault();
@@ -25528,7 +25577,7 @@ const RevoGridComponent = class {
     if (!newVal.length) {
       return;
     }
-    each(newRows, (r, k) => this.dimensionProvider.setDimensionSize(k, r.sizes || {}));
+    each(newRows, (r, k) => this.dimensionProvider.setCustomSizes(k, r.sizes || {}));
   }
   trimmedRowsChanged(newVal = {}) {
     this.addTrimmed(newVal);

package/dist/collection/components/revoGrid/revo-grid.js

@@ -250,6 +250,9 @@ export class RevoGridComponent {
     this.clickTrackForFocusClear = e.screenX + e.screenY;
   }
   mouseupHandle(e) {
+    if (e.defaultPrevented) {
+      return;
+    }
     const target = e.target;
     const pos = e.screenX + e.screenY;
     // detect if mousemove then do nothing
@@ -259,7 +262,7 @@ export class RevoGridComponent {
     // check if action finished inside of the document
     // clear data which is outside of grid
     // if event prevented or it is current table don't clear focus
-    if (e.defaultPrevented || (target === null || target === void 0 ? void 0 : target.closest(`[${UUID}="${this.uuid}"]`))) {
+    if (target === null || target === void 0 ? void 0 : target.closest(`[${UUID}="${this.uuid}"]`)) {
       return;
     }
     this.clearFocus();
@@ -272,7 +275,7 @@ export class RevoGridComponent {
   /** DRAG AND DROP */
   onRowDragStarted(e) {
     var _a;
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     const dragStart = this.rowdragstart.emit(e.detail);
     if (dragStart.defaultPrevented) {
       e.preventDefault();
@@ -290,11 +293,11 @@ export class RevoGridComponent {
   }
   onRowMouseMove(e) {
     var _a;
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.moveTip(e.detail);
   }
   async onBeforeEdit(e) {
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     const { defaultPrevented, detail } = this.beforeedit.emit(e.detail);
     await timeout();
     // apply data
@@ -304,7 +307,7 @@ export class RevoGridComponent {
     }
   }
   onBeforeRangeEdit(e) {
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     const { defaultPrevented, detail } = this.beforerangeedit.emit(e.detail);
     if (defaultPrevented) {
       e.preventDefault();
@@ -313,7 +316,7 @@ export class RevoGridComponent {
     this.afteredit.emit(detail);
   }
   onRangeChanged(e) {
-    e.cancelBubble = true;
+    // e.cancelBubble = true;
     const beforeange = this.beforeange.emit(e.detail);
     if (beforeange.defaultPrevented) {
       e.preventDefault();
@@ -410,7 +413,7 @@ export class RevoGridComponent {
     if (!newVal.length) {
       return;
     }
-    each(newRows, (r, k) => this.dimensionProvider.setDimensionSize(k, r.sizes || {}));
+    each(newRows, (r, k) => this.dimensionProvider.setCustomSizes(k, r.sizes || {}));
   }
   trimmedRowsChanged(newVal = {}) {
     this.addTrimmed(newVal);

package/dist/collection/components/revoGrid/viewport.service.js

@@ -17,7 +17,7 @@ export default class ViewportService {
   }
   onColumnResize(type, { detail }, store) {
     var _a;
-    (_a = this.sv.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setDimensionSize(type, detail);
+    (_a = this.sv.dimensionProvider) === null || _a === void 0 ? void 0 : _a.setCustomSizes(type, detail, true);
     const changedItems = reduce(detail || {}, (r, size, i) => {
       const index = parseInt(i, 10);
       const item = getSourceItem(store, index);