@revolist/revogrid 3.3.1 → 3.4.0

package/custom-element/revo-grid.js

@@ -582,6 +582,21 @@ class DimensionProvider {
     this.viewports.stores[type].setViewport({ realCount });
     this.stores[type].setRealSize(realCount);
   }
+  /**
+   * 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, !keepOld ? this.stores[type].store.get('originItemSize') : undefined);
+  }
   /**
    * Sets dimension data and view port coordinate
    * @param items - data/column items
@@ -606,8 +621,9 @@ class DimensionProvider {
       this.stores[type].drop();
     }
   }
-  setColumns(type, sizes, noVirtual = false) {
-    this.stores[type].setDimensionSize(sizes);
+  setColumns(type, newLength, sizes, noVirtual = false) {
+    this.setRealSize(newLength, type);
+    this.setCustomSizes(type, sizes);
     if (noVirtual) {
       this.setNoVirtual(type);
     }
@@ -2576,7 +2592,7 @@ class ViewportService {
  * First we render vertical parts - pinned start, data, pinned end
  * Per each column we render data collections: headers, pinned top, center data, pinned bottom
  */
-const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onScroll }) => {
+const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onCancelEdit, onScroll }) => {
   const viewPortHtml = [];
   /** render viewports columns */
   for (let view of columns) {
@@ -2586,7 +2602,7 @@ const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns,
     ];
     view.dataPorts.forEach((data, j) => {
       const key = view.prop.key + (j + 1);
-      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onSetEdit: ({ detail }) => onEdit(detail) }),
+      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onCancelEdit: () => onCancelEdit(), onSetEdit: ({ detail }) => onEdit(detail) }),
         h("revogr-data", Object.assign({}, data, { [UUID]: data.uuid }, { key: key, readonly: readonly, range: range, rowClass: rowClass, rowSelectionStore: data.rowSelectionStore, slot: DATA_SLOT })),
         h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }),
         h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));
@@ -3336,8 +3352,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
     this.beforecolumnsset.emit(columnGather);
     for (let type of columnTypes) {
       const items = columnGather.columns[type];
-      this.dimensionProvider.setRealSize(items.length, type);
-      this.dimensionProvider.setColumns(type, ColumnDataProvider.getSizes(items), type !== 'rgCol');
+      this.dimensionProvider.setColumns(type, items.length, ColumnDataProvider.getSizes(items), type !== 'rgCol');
     }
     this.beforecolumnapplied.emit(columnGather);
     const columns = this.columnProvider.setColumns(columnGather);
@@ -3519,10 +3534,12 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class extends HTMLEle
       const anyView = this.viewport.columns[0];
       views.push(h("revogr-row-headers", { height: contentHeight, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, uiid: anyView.prop[UUID], rowHeaderColumn: typeof this.rowHeaders === 'object' ? this.rowHeaders : undefined, onScrollViewport: ({ detail: e }) => this.scrollingService.onScroll(e, 'headerRow'), onElementToScroll: ({ detail: e }) => this.scrollingService.registerElement(e, 'headerRow') }));
     }
-    views.push(h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onEdit: detail => {
+    views.push(h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onCancelEdit: () => {
+        this.selectionStoreConnector.setEdit(false);
+      }, onEdit: detail => {
         const event = this.beforeeditstart.emit(detail);
         if (!event.defaultPrevented) {
-          this.selectionStoreConnector.setEdit(detail.isCancel ? false : detail.val);
+          this.selectionStoreConnector.setEdit(detail.val);
         }
       }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), onScroll: details => this.scrollingService.onScroll(details) }));
     return (h(Host, Object.assign({}, { [`${UUID}`]: this.uuid }), h(RevoViewPort, { viewports: this.viewportProvider.stores, dimensions: this.dimensionProvider.stores, orderRef: e => (this.orderService = e), registerElement: (e, k) => this.scrollingService.registerElement(e, k), nakedClick: () => this.viewport.clearEdit(), onScroll: details => this.scrollingService.onScroll(details) }, views), this.extraElements));

package/custom-element/revogr-edit2.js

@@ -332,7 +332,11 @@ const Edit = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.closeEdit = createEvent(this, "closeEdit", 3);
     this.currentEditor = null;
   }
-  /** Callback triggered on cell editor save */
+  /**
+   * Callback triggered on cell editor save
+   * Closes editor when called
+   * @param preventFocus - if true editor will not be closed and next cell will not be focused
+   */
   onSave(val, preventFocus) {
     if (this.editCell) {
       this.cellEdit.emit({

package/custom-element/revogr-overlay-selection2.js

@@ -76,7 +76,7 @@ class KeyboardService {
     if (this.sv.selectionStoreService.edited) {
       switch (e.code) {
         case codesLetter.ESCAPE:
-          this.sv.doEdit(undefined, true);
+          this.sv.cancelEdit();
           break;
       }
       return;
@@ -466,6 +466,7 @@ const OverlaySelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.internalCellEdit = createEvent(this, "internalCellEdit", 7);
     this.internalFocusCell = createEvent(this, "internalFocusCell", 7);
     this.setEdit = createEvent(this, "setEdit", 3);
+    this.cancelEdit = createEvent(this, "cancelEdit", 7);
     this.setRange = createEvent(this, "setRange", 7);
     this.setTempRange = createEvent(this, "setTempRange", 7);
     this.focusCell = createEvent(this, "focusCell", 3);
@@ -528,7 +529,8 @@ const OverlaySelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
     this.keyboardService = new KeyboardService({
       selectionStoreService: this.selectionStoreService,
       selectionStore: s,
-      doEdit: (v, c) => this.doEdit(v, c),
+      doEdit: (v) => this.doEdit(v),
+      cancelEdit: () => this.closeEdit(),
       clearCell: () => this.clearCell(),
       getData: () => this.getData(),
       internalPaste: () => this.internalPaste.emit()
@@ -628,17 +630,20 @@ const OverlaySelection = /*@__PURE__*/ proxyCustomElement(class extends HTMLElem
       this.autoFillService.selectionStart(e, data);
     }
   }
-  doEdit(val = '', isCancel = false) {
+  doEdit(val = '') {
     var _a;
     if (this.canEdit()) {
       const editCell = this.selectionStore.get('focus');
       const data = this.columnService.getSaveData(editCell.y, editCell.x);
-      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { isCancel,
-        val }));
+      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
     }
   }
+  /**
+   * Close editor event triggered
+   * @param details - if requires focus next
+   */
   closeEdit(e) {
-    this.doEdit(undefined, true);
+    this.cancelEdit.emit();
     if (e === null || e === void 0 ? void 0 : e.detail) {
       this.focusNext();
     }

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

@@ -188,6 +188,41 @@ function getFirstItem(s) {
 function getLastItem(s) {
   return s.items[s.end];
 }
+/**
+ * Set items sizes from start index to end
+ * @param vpItems
+ * @param start
+ * @param size
+ * @param lastCoordinate
+ * @returns
+ */
+function setItemSizes(vpItems, initialIndex, size, lastCoordinate) {
+  const items = [...vpItems];
+  const count = items.length;
+  let pos = lastCoordinate;
+  let i = 0;
+  let start = initialIndex;
+  // viewport not inited
+  if (!count) {
+    return [];
+  }
+  // loop through array from initial item after recombination
+  while (i < count) {
+    const item = items[start];
+    item.start = pos;
+    item.size = size;
+    item.end = item.start + size;
+    pos = item.end;
+    // loop by start index
+    start++;
+    i++;
+    // if start index out of array, reset it
+    if (start === count) {
+      start = 0;
+    }
+  }
+  return items;
+}
 
 /**
  * Store is responsible for visible
@@ -258,8 +293,8 @@ class ViewportStore {
     }
   }
   /** Update viewport sizes */
-  setViewPortDimension(sizes) {
-    const items = this.store.get('items');
+  setViewPortDimension(sizes, dropToOriginalSize) {
+    let items = this.store.get('items');
     const count = items.length;
     // viewport not inited
     if (!count) {
@@ -268,6 +303,10 @@ class ViewportStore {
     let changedCoordinate = 0;
     let i = 0;
     let start = this.store.get('start');
+    // drop to original size if requested
+    if (dropToOriginalSize) {
+      items = setItemSizes(items, start, dropToOriginalSize, this.store.get('lastCoordinate'));
+    }
     // loop through array from initial item after recombination
     while (i < count) {
       const item = items[start];

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

@@ -4430,6 +4430,21 @@ class DimensionProvider {
     this.viewports.stores[type].setViewport({ realCount });
     this.stores[type].setRealSize(realCount);
   }
+  /**
+   * 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, !keepOld ? this.stores[type].store.get('originItemSize') : undefined);
+  }
   /**
    * Sets dimension data and view port coordinate
    * @param items - data/column items
@@ -4454,8 +4469,9 @@ class DimensionProvider {
       this.stores[type].drop();
     }
   }
-  setColumns(type, sizes, noVirtual = false) {
-    this.stores[type].setDimensionSize(sizes);
+  setColumns(type, newLength, sizes, noVirtual = false) {
+    this.setRealSize(newLength, type);
+    this.setCustomSizes(type, sizes);
     if (noVirtual) {
       this.setNoVirtual(type);
     }
@@ -4668,6 +4684,41 @@ function getFirstItem(s) {
 function getLastItem(s) {
   return s.items[s.end];
 }
+/**
+ * Set items sizes from start index to end
+ * @param vpItems
+ * @param start
+ * @param size
+ * @param lastCoordinate
+ * @returns
+ */
+function setItemSizes(vpItems, initialIndex, size, lastCoordinate) {
+  const items = [...vpItems];
+  const count = items.length;
+  let pos = lastCoordinate;
+  let i = 0;
+  let start = initialIndex;
+  // viewport not inited
+  if (!count) {
+    return [];
+  }
+  // loop through array from initial item after recombination
+  while (i < count) {
+    const item = items[start];
+    item.start = pos;
+    item.size = size;
+    item.end = item.start + size;
+    pos = item.end;
+    // loop by start index
+    start++;
+    i++;
+    // if start index out of array, reset it
+    if (start === count) {
+      start = 0;
+    }
+  }
+  return items;
+}
 
 /**
  * Store is responsible for visible
@@ -4738,8 +4789,8 @@ class ViewportStore {
     }
   }
   /** Update viewport sizes */
-  setViewPortDimension(sizes) {
-    const items = this.store.get('items');
+  setViewPortDimension(sizes, dropToOriginalSize) {
+    let items = this.store.get('items');
     const count = items.length;
     // viewport not inited
     if (!count) {
@@ -4748,6 +4799,10 @@ class ViewportStore {
     let changedCoordinate = 0;
     let i = 0;
     let start = this.store.get('start');
+    // drop to original size if requested
+    if (dropToOriginalSize) {
+      items = setItemSizes(items, start, dropToOriginalSize, this.store.get('lastCoordinate'));
+    }
     // loop through array from initial item after recombination
     while (i < count) {
       const item = items[start];
@@ -24433,7 +24488,7 @@ class ViewportService {
  * First we render vertical parts - pinned start, data, pinned end
  * Per each column we render data collections: headers, pinned top, center data, pinned bottom
  */
-const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onScroll }) => {
+const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onCancelEdit, onScroll }) => {
   const viewPortHtml = [];
   /** render viewports columns */
   for (let view of columns) {
@@ -24443,7 +24498,7 @@ const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns,
     ];
     view.dataPorts.forEach((data, j) => {
       const key = view.prop.key + (j + 1);
-      const dataView = (index.h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onSetEdit: ({ detail }) => onEdit(detail) }),
+      const dataView = (index.h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onCancelEdit: () => onCancelEdit(), onSetEdit: ({ detail }) => onEdit(detail) }),
         index.h("revogr-data", Object.assign({}, data, { [UUID]: data.uuid }, { key: key, readonly: readonly, range: range, rowClass: rowClass, rowSelectionStore: data.rowSelectionStore, slot: DATA_SLOT })),
         index.h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }),
         index.h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));
@@ -25205,8 +25260,7 @@ const RevoGridComponent = class {
     this.beforecolumnsset.emit(columnGather);
     for (let type of columnTypes) {
       const items = columnGather.columns[type];
-      this.dimensionProvider.setRealSize(items.length, type);
-      this.dimensionProvider.setColumns(type, ColumnDataProvider.getSizes(items), type !== 'rgCol');
+      this.dimensionProvider.setColumns(type, items.length, ColumnDataProvider.getSizes(items), type !== 'rgCol');
     }
     this.beforecolumnapplied.emit(columnGather);
     const columns = this.columnProvider.setColumns(columnGather);
@@ -25388,10 +25442,12 @@ const RevoGridComponent = class {
       const anyView = this.viewport.columns[0];
       views.push(index.h("revogr-row-headers", { height: contentHeight, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, uiid: anyView.prop[UUID], rowHeaderColumn: typeof this.rowHeaders === 'object' ? this.rowHeaders : undefined, onScrollViewport: ({ detail: e }) => this.scrollingService.onScroll(e, 'headerRow'), onElementToScroll: ({ detail: e }) => this.scrollingService.registerElement(e, 'headerRow') }));
     }
-    views.push(index.h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onEdit: detail => {
+    views.push(index.h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onCancelEdit: () => {
+        this.selectionStoreConnector.setEdit(false);
+      }, onEdit: detail => {
         const event = this.beforeeditstart.emit(detail);
         if (!event.defaultPrevented) {
-          this.selectionStoreConnector.setEdit(detail.isCancel ? false : detail.val);
+          this.selectionStoreConnector.setEdit(detail.val);
         }
       }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), onScroll: details => this.scrollingService.onScroll(details) }));
     return (index.h(index.Host, Object.assign({}, { [`${UUID}`]: this.uuid }), index.h(RevoViewPort, { viewports: this.viewportProvider.stores, dimensions: this.dimensionProvider.stores, orderRef: e => (this.orderService = e), registerElement: (e, k) => this.scrollingService.registerElement(e, k), nakedClick: () => this.viewport.clearEdit(), onScroll: details => this.scrollingService.onScroll(details) }, views), this.extraElements));
@@ -26087,7 +26143,11 @@ const Edit = class {
     this.closeEdit = index.createEvent(this, "closeEdit", 3);
     this.currentEditor = null;
   }
-  /** Callback triggered on cell editor save */
+  /**
+   * Callback triggered on cell editor save
+   * Closes editor when called
+   * @param preventFocus - if true editor will not be closed and next cell will not be focused
+   */
   onSave(val, preventFocus) {
     if (this.editCell) {
       this.cellEdit.emit({
@@ -27029,7 +27089,7 @@ class KeyboardService {
     if (this.sv.selectionStoreService.edited) {
       switch (e.code) {
         case codesLetter.ESCAPE:
-          this.sv.doEdit(undefined, true);
+          this.sv.cancelEdit();
           break;
       }
       return;
@@ -27418,6 +27478,7 @@ const OverlaySelection = class {
     this.internalCellEdit = index.createEvent(this, "internalCellEdit", 7);
     this.internalFocusCell = index.createEvent(this, "internalFocusCell", 7);
     this.setEdit = index.createEvent(this, "setEdit", 3);
+    this.cancelEdit = index.createEvent(this, "cancelEdit", 7);
     this.setRange = index.createEvent(this, "setRange", 7);
     this.setTempRange = index.createEvent(this, "setTempRange", 7);
     this.focusCell = index.createEvent(this, "focusCell", 3);
@@ -27480,7 +27541,8 @@ const OverlaySelection = class {
     this.keyboardService = new KeyboardService({
       selectionStoreService: this.selectionStoreService,
       selectionStore: s,
-      doEdit: (v, c) => this.doEdit(v, c),
+      doEdit: (v) => this.doEdit(v),
+      cancelEdit: () => this.closeEdit(),
       clearCell: () => this.clearCell(),
       getData: () => this.getData(),
       internalPaste: () => this.internalPaste.emit()
@@ -27580,17 +27642,20 @@ const OverlaySelection = class {
       this.autoFillService.selectionStart(e, data);
     }
   }
-  doEdit(val = '', isCancel = false) {
+  doEdit(val = '') {
     var _a;
     if (this.canEdit()) {
       const editCell = this.selectionStore.get('focus');
       const data = this.columnService.getSaveData(editCell.y, editCell.x);
-      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { isCancel,
-        val }));
+      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
     }
   }
+  /**
+   * Close editor event triggered
+   * @param details - if requires focus next
+   */
   closeEdit(e) {
-    this.doEdit(undefined, true);
+    this.cancelEdit.emit();
     if (e === null || e === void 0 ? void 0 : e.detail) {
       this.focusNext();
     }

package/dist/collection/components/overlay/keyboard.service.js

@@ -29,7 +29,7 @@ export class KeyboardService {
     if (this.sv.selectionStoreService.edited) {
       switch (e.code) {
         case codesLetter.ESCAPE:
-          this.sv.doEdit(undefined, true);
+          this.sv.cancelEdit();
           break;
       }
       return;

package/dist/collection/components/overlay/revogr-edit.js

@@ -8,7 +8,11 @@ export class Edit {
   constructor() {
     this.currentEditor = null;
   }
-  /** Callback triggered on cell editor save */
+  /**
+   * Callback triggered on cell editor save
+   * Closes editor when called
+   * @param preventFocus - if true editor will not be closed and next cell will not be focused
+   */
   onSave(val, preventFocus) {
     if (this.editCell) {
       this.cellEdit.emit({
@@ -150,7 +154,7 @@ export class Edit {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Close editor event"
+        "text": "Close editor event\npass true if requires focus next"
       },
       "complexType": {
         "original": "boolean | undefined",

package/dist/collection/components/overlay/revogr-overlay-selection.js

@@ -71,7 +71,8 @@ export class OverlaySelection {
     this.keyboardService = new KeyboardService({
       selectionStoreService: this.selectionStoreService,
       selectionStore: s,
-      doEdit: (v, c) => this.doEdit(v, c),
+      doEdit: (v) => this.doEdit(v),
+      cancelEdit: () => this.closeEdit(),
       clearCell: () => this.clearCell(),
       getData: () => this.getData(),
       internalPaste: () => this.internalPaste.emit()
@@ -173,17 +174,20 @@ export class OverlaySelection {
       this.autoFillService.selectionStart(e, data);
     }
   }
-  doEdit(val = '', isCancel = false) {
+  doEdit(val = '') {
     var _a;
     if (this.canEdit()) {
       const editCell = this.selectionStore.get('focus');
       const data = this.columnService.getSaveData(editCell.y, editCell.x);
-      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { isCancel,
-        val }));
+      (_a = this.setEdit) === null || _a === void 0 ? void 0 : _a.emit(Object.assign(Object.assign({}, data), { val }));
     }
   }
+  /**
+   * Close editor event triggered
+   * @param details - if requires focus next
+   */
   closeEdit(e) {
-    this.doEdit(undefined, true);
+    this.cancelEdit.emit();
     if (e === null || e === void 0 ? void 0 : e.detail) {
       this.focusNext();
     }
@@ -563,7 +567,7 @@ export class OverlaySelection {
       },
       "complexType": {
         "original": "Edition.BeforeEdit",
-        "resolved": "{ isCancel: boolean; } & BeforeSaveDataDetails",
+        "resolved": "{ prop: ColumnProp; model: DataType; val?: string; rowIndex: number; type: DimensionRows; }",
         "references": {
           "Edition": {
             "location": "import",
@@ -571,6 +575,21 @@ export class OverlaySelection {
           }
         }
       }
+    }, {
+      "method": "cancelEdit",
+      "name": "cancelEdit",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Used for editors support when close requested"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
     }, {
       "method": "setRange",
       "name": "setRange",

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

@@ -392,8 +392,7 @@ export class RevoGridComponent {
     this.beforecolumnsset.emit(columnGather);
     for (let type of columnTypes) {
       const items = columnGather.columns[type];
-      this.dimensionProvider.setRealSize(items.length, type);
-      this.dimensionProvider.setColumns(type, ColumnDataProvider.getSizes(items), type !== 'rgCol');
+      this.dimensionProvider.setColumns(type, items.length, ColumnDataProvider.getSizes(items), type !== 'rgCol');
     }
     this.beforecolumnapplied.emit(columnGather);
     const columns = this.columnProvider.setColumns(columnGather);
@@ -575,10 +574,12 @@ export class RevoGridComponent {
       const anyView = this.viewport.columns[0];
       views.push(h("revogr-row-headers", { height: contentHeight, resize: this.resize, dataPorts: anyView.dataPorts, headerProp: anyView.headerProp, uiid: anyView.prop[UUID], rowHeaderColumn: typeof this.rowHeaders === 'object' ? this.rowHeaders : undefined, onScrollViewport: ({ detail: e }) => this.scrollingService.onScroll(e, 'headerRow'), onElementToScroll: ({ detail: e }) => this.scrollingService.registerElement(e, 'headerRow') }));
     }
-    views.push(h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onEdit: detail => {
+    views.push(h(ViewPortSections, { columnFilter: !!this.filter, resize: this.resize, readonly: this.readonly, range: this.range, rowClass: this.rowClass, editors: this.editors, useClipboard: this.useClipboard, columns: this.viewport.columns, onCancelEdit: () => {
+        this.selectionStoreConnector.setEdit(false);
+      }, onEdit: detail => {
         const event = this.beforeeditstart.emit(detail);
         if (!event.defaultPrevented) {
-          this.selectionStoreConnector.setEdit(detail.isCancel ? false : detail.val);
+          this.selectionStoreConnector.setEdit(detail.val);
         }
       }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), onScroll: details => this.scrollingService.onScroll(details) }));
     return (h(Host, Object.assign({}, { [`${UUID}`]: this.uuid }),

package/dist/collection/components/revo-grid/viewport.section.js

@@ -9,7 +9,7 @@ import { DATA_SLOT, HEADER_SLOT } from './viewport.helpers';
  * First we render vertical parts - pinned start, data, pinned end
  * Per each column we render data collections: headers, pinned top, center data, pinned bottom
  */
-export const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onScroll }) => {
+export const ViewPortSections = ({ resize, editors, rowClass, readonly, range, columns, useClipboard, columnFilter, registerElement, onEdit, onCancelEdit, onScroll }) => {
   const viewPortHtml = [];
   /** render viewports columns */
   for (let view of columns) {
@@ -19,7 +19,7 @@ export const ViewPortSections = ({ resize, editors, rowClass, readonly, range, c
     ];
     view.dataPorts.forEach((data, j) => {
       const key = view.prop.key + (j + 1);
-      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onSetEdit: ({ detail }) => onEdit(detail) }),
+      const dataView = (h("revogr-overlay-selection", Object.assign({}, data, { slot: data.slot, selectionStore: data.segmentSelectionStore, editors: editors, readonly: readonly, range: range, useClipboard: useClipboard, onCancelEdit: () => onCancelEdit(), onSetEdit: ({ detail }) => onEdit(detail) }),
         h("revogr-data", Object.assign({}, data, { [UUID]: data.uuid }, { key: key, readonly: readonly, range: range, rowClass: rowClass, rowSelectionStore: data.rowSelectionStore, slot: DATA_SLOT })),
         h("revogr-temp-range", { selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol }),
         h("revogr-focus", { colData: data.colData, dataStore: data.dataStore, selectionStore: data.segmentSelectionStore, dimensionRow: data.dimensionRow, dimensionCol: data.dimensionCol })));

package/dist/collection/services/dimension.provider.js

@@ -21,6 +21,21 @@ export default class DimensionProvider {
     this.viewports.stores[type].setViewport({ realCount });
     this.stores[type].setRealSize(realCount);
   }
+  /**
+   * 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, !keepOld ? this.stores[type].store.get('originItemSize') : undefined);
+  }
   /**
    * Sets dimension data and view port coordinate
    * @param items - data/column items
@@ -45,8 +60,9 @@ export default class DimensionProvider {
       this.stores[type].drop();
     }
   }
-  setColumns(type, sizes, noVirtual = false) {
-    this.stores[type].setDimensionSize(sizes);
+  setColumns(type, newLength, sizes, noVirtual = false) {
+    this.setRealSize(newLength, type);
+    this.setCustomSizes(type, sizes);
     if (noVirtual) {
       this.setNoVirtual(type);
     }

package/dist/collection/store/viewPort/viewport.helpers.js

@@ -181,3 +181,38 @@ export function getFirstItem(s) {
 export function getLastItem(s) {
   return s.items[s.end];
 }
+/**
+ * Set items sizes from start index to end
+ * @param vpItems
+ * @param start
+ * @param size
+ * @param lastCoordinate
+ * @returns
+ */
+export function setItemSizes(vpItems, initialIndex, size, lastCoordinate) {
+  const items = [...vpItems];
+  const count = items.length;
+  let pos = lastCoordinate;
+  let i = 0;
+  let start = initialIndex;
+  // viewport not inited
+  if (!count) {
+    return [];
+  }
+  // loop through array from initial item after recombination
+  while (i < count) {
+    const item = items[start];
+    item.start = pos;
+    item.size = size;
+    item.end = item.start + size;
+    pos = item.end;
+    // loop by start index
+    start++;
+    i++;
+    // if start index out of array, reset it
+    if (start === count) {
+      start = 0;
+    }
+  }
+  return items;
+}

package/dist/collection/store/viewPort/viewport.store.js

@@ -7,7 +7,7 @@
  * Redraw items during scrolling
  */
 import { createStore } from '@stencil/store';
-import { addMissingItems, getFirstItem, getLastItem, getUpdatedItemsByPosition, isActiveRange, updateMissingAndRange } from './viewport.helpers';
+import { addMissingItems, getFirstItem, getLastItem, getUpdatedItemsByPosition, isActiveRange, setItemSizes, updateMissingAndRange } from './viewport.helpers';
 import { setStore } from '../../utils/store.utils';
 function initialState() {
   return {
@@ -73,8 +73,8 @@ export default class ViewportStore {
     }
   }
   /** Update viewport sizes */
-  setViewPortDimension(sizes) {
-    const items = this.store.get('items');
+  setViewPortDimension(sizes, dropToOriginalSize) {
+    let items = this.store.get('items');
     const count = items.length;
     // viewport not inited
     if (!count) {
@@ -83,6 +83,10 @@ export default class ViewportStore {
     let changedCoordinate = 0;
     let i = 0;
     let start = this.store.get('start');
+    // drop to original size if requested
+    if (dropToOriginalSize) {
+      items = setItemSizes(items, start, dropToOriginalSize, this.store.get('lastCoordinate'));
+    }
     // loop through array from initial item after recombination
     while (i < count) {
       const item = items[start];