@revolist/revogrid 4.6.0-next.7 → 4.6.0-next.8

package/custom-element/revo-grid.js

@@ -546,10 +546,12 @@ class DataProvider {
       return sources;
     }, {});
   }
-  setData(data, type = 'rgRow', grouping, silent = false) {
+  setData(data, type = 'rgRow', disableVirtualRows = false, grouping, silent = false) {
     // set rgRow data
     this.stores[type].updateData([...data], grouping, silent);
-    this.dimensionProvider.setData(data.length, type, type !== 'rgRow');
+    // for pinned row no need virtual data
+    const noVirtual = type !== 'rgRow' || disableVirtualRows;
+    this.dimensionProvider.setData(data.length, type, noVirtual);
     return data;
   }
   getModel(virtualIndex, type = 'rgRow') {
@@ -2465,9 +2467,9 @@ class GroupingRowPlugin extends BasePlugin {
      * Group again
      * @param oldNewIndexMap - provides us mapping with new indexes vs old indexes
      */
-    const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({ prevExpanded }, options));
+    const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({ prevExpanded }, options));
     // setup source
-    this.providers.dataProvider.setData(sourceWithGroups, GROUPING_ROW_TYPE, { depth, customRenderer: options === null || options === void 0 ? void 0 : options.groupLabelTemplate }, true);
+    this.providers.dataProvider.setData(sourceWithGroups, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, { depth, customRenderer: options === null || options === void 0 ? void 0 : options.groupLabelTemplate }, true);
     this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexes, oldNewIndexMap);
   }
   /**
@@ -2482,7 +2484,7 @@ class GroupingRowPlugin extends BasePlugin {
     }
     const source = data.source.filter(s => !isGrouping(s));
     const expanded = this.revogrid.grouping || {};
-    const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({}, (expanded || {})));
+    const { sourceWithGroups, depth, trimmed, oldNewIndexMap, childrenByGroup, } = gatherGrouping(source, ((_a = this.options) === null || _a === void 0 ? void 0 : _a.props) || [], Object.assign({}, (expanded || {})));
     data.source = sourceWithGroups;
     this.providers.dataProvider.setGrouping({ depth });
     this.updateTrimmed(trimmed, childrenByGroup, oldNewIndexMap);
@@ -2531,7 +2533,7 @@ class GroupingRowPlugin extends BasePlugin {
     });
     // clear rows
     const { source, oldNewIndexes } = this.getSource(true);
-    this.providers.dataProvider.setData(source, GROUPING_ROW_TYPE, undefined, true);
+    this.providers.dataProvider.setData(source, GROUPING_ROW_TYPE, this.revogrid.disableVirtualY, undefined, true);
     this.updateTrimmed(undefined, undefined, oldNewIndexes);
   }
   updateTrimmed(trimmedGroup = {}, _childrenByGroup = {}, firstLevelMap, secondLevelMap) {
@@ -2614,36 +2616,52 @@ const RevoViewPort = ({ viewports, dimensions, orderRef, nakedClick, registerEle
   ];
 };
 
+/** Collect Column data */
+function gatherColumnData(data) {
+  const parent = data.uuid;
+  const colDimension = data.dimensions[data.colType].store;
+  const realWidth = colDimension.get('realSize');
+  const prop = {
+    contentWidth: realWidth,
+    class: data.colType,
+    [`${UUID}`]: data.uuid,
+    contentHeight: data.contentHeight,
+    key: data.colType,
+    onResizeViewport: data.onResizeViewport,
+  };
+  // set viewport size to real size
+  if (data.fixWidth) {
+    prop.style = { minWidth: `${realWidth}px` };
+  }
+  const headerProp = {
+    parent,
+    colData: getVisibleSourceItem(data.colStore),
+    dimensionCol: colDimension,
+    groups: data.colStore.get('groups'),
+    groupingDepth: data.colStore.get('groupingDepth'),
+    resizeHandler: data.colType === 'colPinEnd' ? ['l'] : undefined,
+    onHeaderresize: data.onHeaderresize,
+  };
+  return {
+    prop,
+    type: data.colType,
+    position: data.position,
+    headerProp,
+    parent,
+    viewportCol: data.viewports[data.colType].store,
+  };
+}
 class ViewportService {
-  constructor(sv, contentHeight) {
+  constructor(config, contentHeight) {
     var _a, _b;
-    this.sv = sv;
-    (_a = this.sv.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeUpdate();
-    this.columns = this.getViewportColumnData(contentHeight);
-    (_b = this.sv.scrollingService) === null || _b === void 0 ? void 0 : _b.unregister();
-  }
-  onColumnResize(type, { detail }, store) {
-    var _a;
-    (_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);
-      if (item) {
-        r[index] = Object.assign(Object.assign({}, item), { size });
-      }
-      return r;
-    }, {});
-    this.sv.resize(changedItems);
-  }
-  /**
-   * Transform data from stores and apply it to different components
-   * Handle columns
-   */
-  getViewportColumnData(contentHeight) {
+    this.config = config;
+    (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.beforeUpdate();
+    // ----------- Handle columns ----------- //
+    // Transform data from stores and apply it to different components
     const columns = [];
     let x = 0; // we increase x only if column present
     columnTypes.forEach(val => {
-      const colStore = this.sv.columnProvider.stores[val].store;
+      const colStore = config.columnProvider.stores[val].store;
       // only columns that have data show
       if (!colStore.get('items').length) {
         return;
@@ -2652,18 +2670,30 @@ class ViewportService {
         colType: val,
         position: { x, y: 1 },
         contentHeight,
+        // only central column has dynamic width
         fixWidth: val !== 'rgCol',
-        uuid: `${this.sv.uuid}-${x}`,
-        viewports: this.sv.viewportProvider.stores,
-        dimensions: this.sv.dimensionProvider.stores,
-        rowStores: this.sv.dataProvider.stores,
+        uuid: `${config.uuid}-${x}`,
+        viewports: config.viewportProvider.stores,
+        dimensions: config.dimensionProvider.stores,
+        rowStores: config.dataProvider.stores,
         colStore,
         onHeaderresize: e => this.onColumnResize(val, e, colStore),
       };
       if (val === 'rgCol') {
-        column.onResizeViewport = (e) => { var _a; return (_a = this.sv.viewportProvider) === null || _a === void 0 ? void 0 : _a.setViewport(e.detail.dimension, { virtualSize: e.detail.size }); };
+        column.onResizeViewport = (e) => {
+          var _a;
+          if (config.disableVirtualY && e.detail.dimension === 'rgRow') {
+            return;
+          }
+          else if (config.disableVirtualX && e.detail.dimension === 'rgCol') {
+            return;
+          }
+          (_a = config.viewportProvider) === null || _a === void 0 ? void 0 : _a.setViewport(e.detail.dimension, {
+            virtualSize: e.detail.size,
+          });
+        };
       }
-      const colData = this.gatherColumnData(column);
+      const colData = gatherColumnData(column);
       const columnSelectionStore = this.registerCol(colData.position.x, val);
       // render per each column data collections vertically
       const dataPorts = this.dataViewPort(column).reduce((r, rgRow) => {
@@ -2672,14 +2702,14 @@ class ViewportService {
         segmentSelection.setLastCell(rgRow.lastCell);
         // register selection store for Row
         const rowSelectionStore = this.registerRow(rgRow.position.y, rgRow.type);
-        const rowDef = Object.assign(Object.assign({}, rgRow), { rowSelectionStore, segmentSelectionStore: segmentSelection.store, ref: (e) => this.sv.selectionStoreConnector.registerSection(e), onSetRange: e => {
+        const rowDef = Object.assign(Object.assign({}, rgRow), { rowSelectionStore, segmentSelectionStore: segmentSelection.store, ref: (e) => config.selectionStoreConnector.registerSection(e), onSetRange: e => {
             segmentSelection.setRangeArea(e.detail);
           }, onSetTempRange: e => {
             segmentSelection.setTempArea(e.detail);
           }, onFocusCell: e => {
             // todo: multi focus
             segmentSelection.clearFocus();
-            this.sv.selectionStoreConnector.focus(segmentSelection, e.detail);
+            config.selectionStoreConnector.focus(segmentSelection, e.detail);
           } });
         r.push(rowDef);
         return r;
@@ -2688,52 +2718,34 @@ class ViewportService {
         dataPorts }));
       x++;
     });
-    return columns;
+    this.columns = columns;
+    // ----------- Handle columns end ----------- //
+    (_b = this.config.scrollingService) === null || _b === void 0 ? void 0 : _b.unregister();
+  }
+  onColumnResize(type, { detail }, store) {
+    var _a;
+    (_a = this.config.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);
+      if (item) {
+        r[index] = Object.assign(Object.assign({}, item), { size });
+      }
+      return r;
+    }, {});
+    this.config.resize(changedItems);
   }
   /** register selection store for Segment */
   registerSegment(position) {
-    return this.sv.selectionStoreConnector.register(position);
+    return this.config.selectionStoreConnector.register(position);
   }
   /** register selection store for Row */
   registerRow(y, type) {
-    return this.sv.selectionStoreConnector.registerRow(y, type).store;
+    return this.config.selectionStoreConnector.registerRow(y, type).store;
   }
   /** register selection store for Column */
   registerCol(x, type) {
-    return this.sv.selectionStoreConnector.registerColumn(x, type).store;
-  }
-  /** Collect Column data */
-  gatherColumnData(data) {
-    const parent = data.uuid;
-    const realSize = data.dimensions[data.colType].store.get('realSize');
-    const prop = {
-      contentWidth: realSize,
-      class: data.colType,
-      [`${UUID}`]: data.uuid,
-      contentHeight: data.contentHeight,
-      key: data.colType,
-      onResizeViewport: data.onResizeViewport,
-    };
-    if (data.fixWidth) {
-      prop.style = { minWidth: `${realSize}px` };
-    }
-    const headerProp = {
-      parent,
-      colData: getVisibleSourceItem(data.colStore),
-      dimensionCol: data.dimensions[data.colType].store,
-      groups: data.colStore.get('groups'),
-      groupingDepth: data.colStore.get('groupingDepth'),
-      resizeHandler: data.colType === 'colPinEnd' ? ['l'] : undefined,
-      onHeaderresize: data.onHeaderresize,
-    };
-    return {
-      prop,
-      type: data.colType,
-      position: data.position,
-      headerProp,
-      parent,
-      viewportCol: data.viewports[data.colType].store,
-    };
+    return this.config.selectionStoreConnector.registerColumn(x, type).store;
   }
   /** Collect Row data */
   dataViewPort(data) {
@@ -2769,38 +2781,43 @@ class ViewportService {
       dataStore: data.rowStores[type].store,
       dimensionCol: data.dimensions[data.colType].store,
       dimensionRow: data.dimensions[type].store,
-      style: fixed ? { height: `${data.dimensions[type].store.get('realSize')}px` } : undefined,
+      style: fixed
+        ? { height: `${data.dimensions[type].store.get('realSize')}px` }
+        : undefined,
     };
   }
   scrollToCell(cell) {
     for (let key in cell) {
       const coordinate = cell[key];
-      this.sv.scrollingService.scrollService({ dimension: key === 'x' ? 'rgCol' : 'rgRow', coordinate });
+      this.config.scrollingService.scrollService({
+        dimension: key === 'x' ? 'rgCol' : 'rgRow',
+        coordinate,
+      });
     }
   }
   /**
    * Clear current grid focus
    */
   clearFocused() {
-    this.sv.selectionStoreConnector.clearAll();
+    this.config.selectionStoreConnector.clearAll();
   }
   clearEdit() {
-    this.sv.selectionStoreConnector.setEdit(false);
+    this.config.selectionStoreConnector.setEdit(false);
   }
   /**
    * Collect focused element data
    */
   getFocused() {
-    const focused = this.sv.selectionStoreConnector.focusedStore;
+    const focused = this.config.selectionStoreConnector.focusedStore;
     if (!focused) {
       return null;
     }
     // get column data
-    const colType = this.sv.selectionStoreConnector.storesXToType[focused.position.x];
-    const column = this.sv.columnProvider.getColumn(focused.cell.x, colType);
+    const colType = this.config.selectionStoreConnector.storesXToType[focused.position.x];
+    const column = this.config.columnProvider.getColumn(focused.cell.x, colType);
     // get row data
-    const rowType = this.sv.selectionStoreConnector.storesYToType[focused.position.y];
-    const model = this.sv.dataProvider.getModel(focused.cell.y, rowType);
+    const rowType = this.config.selectionStoreConnector.storesYToType[focused.position.y];
+    const model = this.config.dataProvider.getModel(focused.cell.y, rowType);
     return {
       column,
       model,
@@ -2810,7 +2827,7 @@ class ViewportService {
     };
   }
   getStoreCoordinateByType(colType, rowType) {
-    const stores = this.sv.selectionStoreConnector.storesByType;
+    const stores = this.config.selectionStoreConnector.storesByType;
     const storeCoordinate = {
       x: stores[colType],
       y: stores[rowType],
@@ -2819,14 +2836,14 @@ class ViewportService {
   }
   setFocus(colType, rowType, start, end) {
     var _a;
-    (_a = this.sv.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.focusByCell(this.getStoreCoordinateByType(colType, rowType), start, end);
+    (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.focusByCell(this.getStoreCoordinateByType(colType, rowType), start, end);
   }
   getSelectedRange() {
-    return this.sv.selectionStoreConnector.selectedRange;
+    return this.config.selectionStoreConnector.selectedRange;
   }
   setEdit(rowIndex, colIndex, colType, rowType) {
     var _a;
-    (_a = this.sv.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEditByCell(this.getStoreCoordinateByType(colType, rowType), { x: colIndex, y: rowIndex });
+    (_a = this.config.selectionStoreConnector) === null || _a === void 0 ? void 0 : _a.setEditByCell(this.getStoreCoordinateByType(colType, rowType), { x: colIndex, y: rowIndex });
   }
 }
 
@@ -3360,6 +3377,8 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
     this.grouping = undefined;
     this.stretch = true;
     this.additionalData = {};
+    this.disableVirtualX = false;
+    this.disableVirtualY = false;
     this.extraElements = [];
   }
   // --------------------------------------------------------------------------
@@ -3590,7 +3609,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
     var _a;
     (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.end();
   }
-  onRowDrag({ detail }) {
+  onRowDrag({ detail, }) {
     var _a;
     (_a = this.orderService) === null || _a === void 0 ? void 0 : _a.move(detail);
   }
@@ -3662,7 +3681,9 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
     this.beforecolumnsset.emit(columnGather);
     for (let type of columnTypes) {
       const items = columnGather.columns[type];
-      this.dimensionProvider.setNewColumns(type, items.length, ColumnDataProvider.getSizes(items), type !== 'rgCol');
+      // for pinned col no need virtual data
+      const noVirtual = type !== 'rgCol' || this.disableVirtualX;
+      this.dimensionProvider.setNewColumns(type, items.length, ColumnDataProvider.getSizes(items), noVirtual);
     }
     this.beforecolumnapplied.emit(columnGather);
     const columns = this.columnProvider.setColumns(columnGather);
@@ -3671,9 +3692,16 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
       order: this.columnProvider.order,
     });
   }
+  disableVirtualXChanged(newVal = false, prevVal = false) {
+    if (newVal === prevVal) {
+      return;
+    }
+    this.columnChanged(this.columns);
+  }
   rowSizeChanged(s) {
+    // clear existing data
     this.dimensionProvider.setSettings({ originItemSize: s }, 'rgRow');
-    rowTypes.forEach((t) => {
+    rowTypes.forEach(t => {
       this.dimensionProvider.clearSize(t, this.dataProvider.stores[t].store.get('source').length);
       this.dimensionProvider.setCustomSizes(t, {}, true);
     });
@@ -3707,7 +3735,7 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
       source: newVal,
     });
     const newSource = [...beforesourceset.detail.source];
-    this.dataProvider.setData(newSource, type);
+    this.dataProvider.setData(newSource, type, this.disableVirtualY);
     /** applied for source only for cross compatability between plugins */
     if (watchName === 'source') {
       this.aftersourceset.emit({
@@ -3720,10 +3748,16 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
       source: newVal,
     });
   }
+  disableVirtualYChanged(newVal = false, prevVal = false) {
+    if (newVal === prevVal) {
+      return;
+    }
+    this.dataSourceChanged(this.source, this.source, 'source');
+  }
   rowDefChanged(after, before) {
-    const { detail: { vals: newVal, oldVals: oldVal } } = this.beforerowdefinition.emit({
+    const { detail: { vals: newVal, oldVals: oldVal }, } = this.beforerowdefinition.emit({
       vals: after,
-      oldVals: before
+      oldVals: before,
     });
     // apply new vals
     const newRows = rowDefinitionByType(newVal);
@@ -3816,7 +3850,9 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
         dataProvider: this.dataProvider,
         columnProvider: this.columnProvider,
         dimensionProvider: this.dimensionProvider,
-      }, typeof this.autoSizeColumn === 'object' ? this.autoSizeColumn : undefined));
+      }, typeof this.autoSizeColumn === 'object'
+        ? this.autoSizeColumn
+        : undefined));
     }
     if (this.filter) {
       this.internalPlugins.push(new FilterPlugin(this.element, this.uuid, typeof this.filter === 'object' ? this.filter : undefined));
@@ -3870,6 +3906,8 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
       scrollingService: this.scrollingService,
       orderService: this.orderService,
       selectionStoreConnector: this.selectionStoreConnector,
+      disableVirtualX: this.disableVirtualX,
+      disableVirtualY: this.disableVirtualY,
       resize: c => this.aftercolumnresize.emit(c),
     }, contentHeight);
     const views = [];
@@ -3887,17 +3925,19 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
       }, onCancelEdit: () => {
         this.selectionStoreConnector.setEdit(false);
       }, registerElement: (e, k) => this.scrollingService.registerElement(e, k), scrollSection: (details, k) => this.scrollingService.scrollService(details, k), scrollSectionSilent: (details, k) => this.scrollingService.scrollSilentService(details, k), focusTemplate: this.focusTemplate }));
-    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.scrollService(details) }, h("slot", { name: 'viewport' }), views), this.extraElements));
+    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.scrollService(details) }, h("slot", { name: "viewport" }), views), this.extraElements));
   }
   get element() { return this; }
   static get watchers() { return {
     "columnTypes": ["columnTypesChanged"],
     "columns": ["columnChanged"],
+    "disableVirtualX": ["disableVirtualXChanged"],
     "rowSize": ["rowSizeChanged"],
     "theme": ["themeChanged"],
     "source": ["dataSourceChanged"],
     "pinnedBottomSource": ["dataSourceChanged"],
     "pinnedTopSource": ["dataSourceChanged"],
+    "disableVirtualY": ["disableVirtualYChanged"],
     "rowDefinitions": ["rowDefChanged"],
     "trimmedRows": ["trimmedRowsChanged"],
     "grouping": ["groupingChanged"],
@@ -3936,6 +3976,8 @@ const RevoGridComponent = /*@__PURE__*/ proxyCustomElement(class RevoGridCompone
     "grouping": [16],
     "stretch": [8],
     "additionalData": [8, "additional-data"],
+    "disableVirtualX": [4, "disable-virtual-x"],
+    "disableVirtualY": [4, "disable-virtual-y"],
     "extraElements": [32],
     "refresh": [64],
     "scrollToRow": [64],