@revolist/revogrid 4.22.1 → 4.23.0

package/dist/collection/serve/data.js

@@ -22,6 +22,8 @@ function naturalSort(prop, a, b) {
   return aValue.localeCompare(bValue, 'en', { numeric: true });
 }
 
+const DEFAULT_MAX_CELLS_PER_CHUNK = 50_000;
+
 const DEFAULT_CONFIG = {
   topPinned: [],
   groupedHeader: false,
@@ -34,168 +36,295 @@ const DEFAULT_CONFIG = {
   order: undefined,
 };
 
+function getConfig(config = {}) {
+  return {
+    ...DEFAULT_CONFIG,
+    ...config,
+  };
+}
+
+function createColumn(rgCol, {
+  colPinStart,
+  colPinEnd,
+  rowDrag,
+  order,
+}) {
+  const column = {
+    name: generateHeader(rgCol),
+    prop: rgCol,
+    sortable: true,
+    size: 100,
+    // custom sorting except of 0 row
+    cellCompare: !!rgCol && rgCol % 2 == 0 ? naturalSort : undefined,
+    cellProperties: ({ colIndex }) => ({
+      className: {
+        'first-column': colIndex === 0,
+      },
+      class: {
+        'first-column-class': colIndex === 0,
+      },
+    }),
+
+    // custom filter
+    // filter: 'myFilterType',
+  };
+
+  if (colPinStart.includes(rgCol)) {
+    column.pin = 'colPinStart';
+  }
+  if (colPinEnd.includes(rgCol)) {
+    column.pin = 'colPinEnd';
+  }
+  if (!rgCol) {
+    column.sortable = true;
+    column.cellProperties = ({ rowIndex }) => {
+      return {
+        'custom-row-index': rowIndex,
+      };
+    };
+    column.rowDrag = true;
+  }
+  if (rgCol === rowDrag) {
+    column.rowDrag = true;
+  }
+  if (rgCol === order) {
+    column.order = 'desc';
+  }
+
+  return column;
+}
+
+function createColumns(config) {
+  const columns = [];
+  for (let rgCol = 0; rgCol < config.cols; rgCol++) {
+    columns.push(createColumn(rgCol, config));
+  }
+  return columns;
+}
+
+function createRow(rgRow, cols) {
+  const row = {};
+
+  if (rgRow === 2) {
+    // highlighted
+    row['row-style'] = 'highlighted-row';
+  }
+
+  // apply different key for grouping
+  if (rgRow % 2) {
+    row.key = 'a';
+  } else {
+    row.key = 'b';
+  }
+  if (rgRow % 4) {
+    row.key2 = 'c';
+  } else if (rgRow % 3) {
+    row.key2 = 'd';
+  }
+
+  for (let rgCol = 0; rgCol < cols; rgCol++) {
+    row[rgCol] = `${rgRow}:${rgCol}`;
+  }
+
+  return row;
+}
+
+function applyGroupedHeaders(headers, groupedHeader) {
+  if (!groupedHeader || headers.length <= 2) {
+    return;
+  }
+
+  const grouped = headers.splice(1, Math.min(headers.length - 1, 30));
+  const grouped2 = grouped.splice(0, Math.min(headers.length - 1, 2));
+  grouped2.length && grouped.push({
+    name: 'Grouped2',
+    children: grouped2,
+    columnTemplate: (h, { value }) => {
+      return h('div', {
+        class: 'grouped-header',
+      }, 'Grouped2');
+    },
+  });
+  grouped.length && headers.splice(
+    6,
+    0,
+    ...[
+      {
+        name: 'Grouped',
+        children: grouped,
+      },
+    ],
+  );
+  const grouped4 = headers.splice(0, Math.min(headers.length - 1, 4));
+  grouped4.length && headers.splice(
+    0,
+    0,
+    ...[
+      {
+        name: 'Grouped3',
+        children: grouped4,
+      },
+    ],
+  );
+}
+
+function getPinnedSets(topPinned, bottomPinned) {
+  return {
+    topPinnedSet: new Set(topPinned),
+    bottomPinnedSet: new Set(bottomPinned),
+  };
+}
+
+function addRow({
+  row,
+  rgRow,
+  result,
+  pinnedTopRows,
+  pinnedBottomRows,
+  topPinnedSet,
+  bottomPinnedSet,
+}) {
+  if (topPinnedSet.has(rgRow)) {
+    pinnedTopRows.push({ ...row });
+    return;
+  }
+  if (bottomPinnedSet.has(rgRow)) {
+    pinnedBottomRows.push({ ...row });
+    return;
+  }
+  result.push(row);
+}
+
+function finishData({ result, pinnedTopRows, pinnedBottomRows, headers, groupedHeader }) {
+  applyGroupedHeaders(headers, groupedHeader);
+  return {
+    rows: result,
+    pinnedTopRows,
+    pinnedBottomRows,
+    headers,
+  };
+}
+
+function isCanceled(isCanceledFn) {
+  return typeof isCanceledFn === 'function' && isCanceledFn();
+}
+
+function yieldToBrowser() {
+  return new Promise(resolve => {
+    if (typeof requestIdleCallback === 'function') {
+      requestIdleCallback(() => resolve(), { timeout: 50 });
+      return;
+    }
+    setTimeout(resolve, 0);
+  });
+}
+
+function getChunkRows(cols, maxCellsPerChunk) {
+  if (!cols) {
+    return maxCellsPerChunk;
+  }
+  return Math.max(1, Math.floor(maxCellsPerChunk / cols));
+}
+
 export function generateFakeDataObject(config = {}) {
   const {
     topPinned,
     bottomPinned,
-    colPinStart,
-    colPinEnd,
     groupedHeader,
 
-    rowDrag,
     rows,
     cols,
-    order,
-  } = {
-    ...DEFAULT_CONFIG,
-    ...config,
-  };
+  } = getConfig(config);
 
-  let result = [];
-  const columns = {};
-  // all cells
-  const all = cols * rows;
-  for (let j = 0; j < all; j++) {
-    let rgCol = j % cols;
-    let rgRow = (j / cols) | 0;
-    if (!result[rgRow]) {
-      result[rgRow] = {};
-
-      if (rgRow === 2) {
-        // highlighted
-        result[rgRow]['row-style'] = 'highlighted-row';
-      }
-
-      // apply different key for grouping
-      if (rgRow % 2) {
-        result[rgRow].key = 'a';
-      } else {
-        result[rgRow].key = 'b';
-      }
-      if (rgRow % 4) {
-        result[rgRow].key2 = 'c';
-      } else if (rgRow % 3) {
-        result[rgRow].key2 = 'd';
-      }
-    }
-    if (!columns[rgCol]) {
-      columns[rgCol] = {
-        name: generateHeader(rgCol),
-        prop: rgCol,
-        sortable: true,
-        size: 100,
-        // custom sorting except of 0 row
-        cellCompare: !!rgCol && rgCol % 2 == 0 ? naturalSort : undefined,
-        cellProperties: ({ colIndex }) => ({
-          className: {
-            'first-column': colIndex === 0,
-          },
-          class: {
-            'first-column-class': colIndex === 0,
-          }
-        })
-
-        // custom filter
-        // filter: 'myFilterType',
-      };
+  const result = [];
+  const headers = createColumns(getConfig(config));
+  const pinnedTopRows = [];
+  const pinnedBottomRows = [];
+  const { topPinnedSet, bottomPinnedSet } = getPinnedSets(topPinned, bottomPinned);
 
-      // apply config
-      if (colPinStart.indexOf(j) > -1) {
-        columns[rgCol].pin = 'colPinStart';
-      }
-      // apply config
-      if (colPinEnd.indexOf(j) > -1) {
-        columns[rgCol].pin = 'colPinEnd';
-      }
-      if (!rgCol) {
-        columns[rgCol].order = 'desc';
-        columns[rgCol].sortable = true;
-      }
-    }
-    result[rgRow][rgCol] = `${rgRow}:${rgCol}`; // rgRow % 5 ? rgCol : rgRow % 3 ? (rgCol % 3 ? 2 : 3) : rgRow; // rgRow + ':' + rgCol;
-
-    if (rgCol === 0) {
-      columns[rgCol].cellProperties = ({ rowIndex }) => {
-        return {
-          'custom-row-index': rowIndex
-        };
-      }
-
-      columns[rgCol].rowDrag = true;
-      
-      // columns[rgCol].cellParser = () => 'a';
-      // columns[rgCol].cellTemplate = (h, { value }) => {
-      //   // delay
-      //   for(let i = 0; i < 10000000; i++) {
-      //     // do nothing, this is just to slow down to test performance
-      //   }
-      //   return value;
-      // }
-    }
-    // apply config
-    if (rgCol === rowDrag) {
-      columns[rgCol].rowDrag = true;
-    }
-    // apply config
-    if (rgCol === order) {
-      columns[rgCol].order = 'desc';
-    }
+  for (let rgRow = 0; rgRow < rows; rgRow++) {
+    addRow({
+      row: createRow(rgRow, cols),
+      rgRow,
+      result,
+      pinnedTopRows,
+      pinnedBottomRows,
+      topPinnedSet,
+      bottomPinnedSet,
+    });
   }
+
+  return finishData({
+    result,
+    pinnedTopRows,
+    pinnedBottomRows,
+    headers,
+    groupedHeader,
+  });
+}
+
+export async function generateFakeDataObjectAsync(config = {}, options = {}) {
+  const dataConfig = getConfig(config);
+  const {
+    rows,
+    cols,
+    topPinned,
+    bottomPinned,
+    groupedHeader,
+  } = dataConfig;
+  const {
+    maxCellsPerChunk = DEFAULT_MAX_CELLS_PER_CHUNK,
+    onProgress,
+    isCanceled: isCanceledFn,
+  } = options;
+
+  const result = [];
   const pinnedTopRows = [];
   const pinnedBottomRows = [];
-  if (topPinned?.length || bottomPinned?.length) {
-    result = result.filter((row, i) => {
-      if (topPinned.indexOf(i) > -1) {
-        pinnedTopRows.push({ ...row });
-        return false;
-      }
-      if (bottomPinned.indexOf(i) > -1) {
-        pinnedBottomRows.push({ ...row });
-        return false;
-      }
-      return true;
+  const headers = createColumns(dataConfig);
+  const { topPinnedSet, bottomPinnedSet } = getPinnedSets(topPinned, bottomPinned);
+  const chunkRows = getChunkRows(cols, maxCellsPerChunk);
+
+  for (let rgRow = 0; rgRow < rows; rgRow++) {
+    if (isCanceled(isCanceledFn)) {
+      return null;
+    }
+
+    addRow({
+      row: createRow(rgRow, cols),
+      rgRow,
+      result,
+      pinnedTopRows,
+      pinnedBottomRows,
+      topPinnedSet,
+      bottomPinnedSet,
     });
+
+    if ((rgRow + 1) % chunkRows === 0) {
+      onProgress?.({
+        rows: rgRow + 1,
+        totalRows: rows,
+      });
+      await yieldToBrowser();
+    }
   }
-  let headers = Object.keys(columns).map(k => columns[k]);
-
-  if (groupedHeader && headers.length > 2) {
-    const grouped = headers.splice(1, Math.min(headers.length - 1, 30));
-    const grouped2 = grouped.splice(0, Math.min(headers.length - 1, 2));
-    grouped2.length && grouped.push({
-      name: 'Grouped2',
-      children: grouped2,
-      columnTemplate: (h, { value }) => {
-        return h('div', {
-          class: 'grouped-header',
-        }, 'Grouped2');
-      },
+
+  if (isCanceled(isCanceledFn)) {
+    return null;
+  }
+
+  if (!rows || rows % chunkRows !== 0) {
+    onProgress?.({
+      rows,
+      totalRows: rows,
     });
-    grouped.length && headers.splice(
-      6,
-      0,
-      ...[
-        {
-          name: 'Grouped',
-          children: grouped,
-        },
-      ],
-    );
-    const grouped4 = headers.splice(0, Math.min(headers.length - 1, 4));
-    grouped4.length && headers.splice(
-      0,
-      0,
-      ...[
-        {
-          name: 'Grouped3',
-          children: grouped4,
-        },
-      ],
-    );
   }
-  return {
-    rows: result,
+
+  return finishData({
+    result,
     pinnedTopRows,
     pinnedBottomRows,
     headers,
-  };
+    groupedHeader,
+  });
 }

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

@@ -4,8 +4,9 @@
 import reduce from "lodash/reduce";
 import debounce from "lodash/debounce";
 import { RESIZE_INTERVAL } from "../utils/consts";
-import { columnTypes, rowTypes, getItemByIndex, DimensionStore, gatherTrimmedItems, } from "../store/index";
+import { columnTypes, rowTypes, getItemByIndex, DimensionStore, gatherTrimmedItems, clampViewportCoordinate, } from "../store/index";
 import { getColumnSizes } from "../utils/column.utils";
+import { getScrollDimension } from "./scroll.dimension.helpers";
 /**
  * Dimension provider
  * Stores dimension information and custom sizes
@@ -143,6 +144,20 @@ export default class DimensionProvider {
     }
     setViewPortCoordinate({ type, coordinate = this.viewports.stores[type].lastCoordinate, force = false, }) {
         const dimension = this.stores[type].getCurrentState();
+        const viewport = this.viewports.stores[type].store;
+        const clientSize = viewport.get('clientSize');
+        const viewportSize = viewport.get('virtualSize');
+        const scrollDimension = getScrollDimension({
+            contentSize: dimension.realSize,
+            clientSize,
+            virtualSize: viewportSize,
+        });
+        const renderCoordinate = clampViewportCoordinate(coordinate, dimension, viewportSize);
+        const renderOffset = clientSize && viewportSize
+            ? scrollDimension.getRenderOffset(renderCoordinate)
+            : 0;
+        this.stores[type].setStore({ renderOffset });
+        this.viewports.stores[type].setViewport({ renderOffset });
         this.viewports.stores[type].setViewPortCoordinate(coordinate, dimension, force);
     }
     getViewPortPos(e) {

package/dist/collection/services/local.scroll.service.js

@@ -1,7 +1,7 @@
 /*!
  * Built by Revolist OU ❤️
  */
-import { scaleValue } from "../utils";
+import { getScrollDimension } from "./scroll.dimension.helpers";
 const initialParams = {
     contentSize: 0,
     clientSize: 0,
@@ -14,10 +14,11 @@ const NO_COORDINATE = -1;
  * return full size
  */
 export function getContentSize(contentSize, clientSize, virtualSize = 0) {
-    if (virtualSize > contentSize) {
-        return 0;
-    }
-    return contentSize + (virtualSize ? clientSize - virtualSize : 0);
+    return getScrollDimension({
+        contentSize,
+        clientSize,
+        virtualSize,
+    }).physicalContentSize;
 }
 export default class LocalScrollService {
     constructor(cfg) {
@@ -31,14 +32,20 @@ export default class LocalScrollService {
             rgRow: NO_COORDINATE,
             rgCol: NO_COORDINATE,
         };
+        this.previousLogicalScroll = {
+            rgRow: 0,
+            rgCol: 0,
+        };
         this.params = {
             rgRow: Object.assign({}, initialParams),
             rgCol: Object.assign({}, initialParams),
         };
     }
     setParams(params, dimension) {
-        const virtualContentSize = getContentSize(params.contentSize, params.clientSize, params.virtualSize);
-        this.params[dimension] = Object.assign(Object.assign({}, params), { maxSize: virtualContentSize - params.clientSize, virtualContentSize });
+        const scrollDimension = getScrollDimension(params);
+        const virtualContentSize = scrollDimension.physicalContentSize;
+        this.params[dimension] = Object.assign(Object.assign({}, params), { maxSize: virtualContentSize - params.clientSize, virtualContentSize,
+            scrollDimension });
     }
     // apply scroll values after scroll done
     async setScroll(e) {
@@ -58,16 +65,27 @@ export default class LocalScrollService {
             await frameAnimation;
             const params = this.getParams(e.dimension);
             e.coordinate = Math.ceil(e.coordinate);
-            this.previousScroll[e.dimension] = this.wrapCoordinate(e.coordinate, params);
+            this.previousLogicalScroll[e.dimension] = this.wrapLogicalCoordinate(e.coordinate, params);
+            const physicalCoordinate = this.toPhysicalCoordinate(e.coordinate, params);
+            this.previousScroll[e.dimension] = this.wrapPhysicalCoordinate(physicalCoordinate, params);
             this.preventArtificialScroll[e.dimension] = null;
-            this.cfg.applyScroll(Object.assign(Object.assign({}, e), { coordinate: params.virtualSize
-                    ? this.convert(e.coordinate, params, false)
-                    : e.coordinate }));
+            this.cfg.applyScroll(Object.assign(Object.assign({}, e), { coordinate: physicalCoordinate }));
         }
         catch (id) {
             window.cancelAnimationFrame(id);
         }
     }
+    async setScrollByDelta(e, currentPhysicalCoordinate) {
+        var _a;
+        const params = this.getParams(e.dimension);
+        const baseCoordinate = this.previousScroll[e.dimension] === NO_COORDINATE
+            ? this.toLogicalCoordinate(currentPhysicalCoordinate, params)
+            : this.previousLogicalScroll[e.dimension];
+        const coordinate = this.wrapLogicalCoordinate(baseCoordinate + ((_a = e.delta) !== null && _a !== void 0 ? _a : 0), params);
+        const nextEvent = Object.assign(Object.assign({}, e), { coordinate });
+        await this.setScroll(nextEvent);
+        return nextEvent;
+    }
     /**
      * On scroll event started
      */
@@ -80,21 +98,21 @@ export default class LocalScrollService {
             return;
         }
         const param = this.getParams(dimension);
+        const logicalCoordinate = this.toLogicalScrollCoordinate(coordinate, dimension, param, delta);
         // let component know about scroll event started
         this.cfg.runScroll({
             dimension: dimension,
-            coordinate: param.virtualSize
-                ? this.convert(coordinate, param)
-                : coordinate,
+            coordinate: logicalCoordinate,
             delta,
             outside,
         });
+        this.previousLogicalScroll[dimension] = logicalCoordinate;
     }
     getParams(dimension) {
         return this.params[dimension];
     }
     // check if scroll outside of region to avoid looping
-    wrapCoordinate(c, param) {
+    wrapPhysicalCoordinate(c, param) {
         if (c < 0) {
             return NO_COORDINATE;
         }
@@ -103,21 +121,38 @@ export default class LocalScrollService {
         }
         return c;
     }
+    wrapLogicalCoordinate(c, param) {
+        var _a, _b;
+        if (c < 0) {
+            return 0;
+        }
+        return Math.min(c, (_b = (_a = param.scrollDimension) === null || _a === void 0 ? void 0 : _a.logicalScrollSize) !== null && _b !== void 0 ? _b : c);
+    }
     // prevent already started scroll, performance optimization
     cancelScroll(dimension) {
         var _a, _b;
         (_b = (_a = this.preventArtificialScroll)[dimension]) === null || _b === void 0 ? void 0 : _b.call(_a);
         this.preventArtificialScroll[dimension] = null;
     }
-    /* convert virtual to real and back, scale range */
-    convert(pos, param, toReal = true) {
-        var _a;
-        const minRange = param.clientSize;
-        const from = [0, ((_a = param.virtualContentSize) !== null && _a !== void 0 ? _a : minRange) - minRange];
-        const to = [0, param.contentSize - param.virtualSize];
-        if (toReal) {
-            return scaleValue(pos, from, to);
+    toLogicalScrollCoordinate(coordinate, dimension, param, delta) {
+        const scrollDimension = param.scrollDimension;
+        if (!scrollDimension) {
+            return coordinate;
         }
-        return scaleValue(pos, to, from);
+        if (typeof delta === 'number' && scrollDimension.isCompressed) {
+            const base = this.previousScroll[dimension] === NO_COORDINATE
+                ? scrollDimension.toLogicalCoordinate(coordinate - delta)
+                : this.previousLogicalScroll[dimension];
+            return scrollDimension.toLogicalCoordinate(scrollDimension.toPhysicalCoordinate(base + delta));
+        }
+        return scrollDimension.toLogicalCoordinate(coordinate);
+    }
+    toPhysicalCoordinate(coordinate, param) {
+        var _a, _b;
+        return (_b = (_a = param.scrollDimension) === null || _a === void 0 ? void 0 : _a.toPhysicalCoordinate(coordinate)) !== null && _b !== void 0 ? _b : coordinate;
+    }
+    toLogicalCoordinate(coordinate, param) {
+        var _a, _b;
+        return (_b = (_a = param.scrollDimension) === null || _a === void 0 ? void 0 : _a.toLogicalCoordinate(coordinate)) !== null && _b !== void 0 ? _b : coordinate;
     }
 }