@revolist/revogrid 4.22.1 → 4.23.0

package/dist/collection/serve/controller.js

@@ -1,15 +1,15 @@
-import { generateFakeDataObject } from './data.js';
+import { generateFakeDataObjectAsync } from './data.js';
 
 /**
  * Map of prevented events
  */
-window.eventsPrevented = {};
+globalThis.eventsPrevented = {};
 
 /**
  * Toggle row headers visibility
  * @param {boolean} isShow - Show row headers if true, hide otherwise
  */
-window.showRowHeaders = function (isShow) {
+globalThis.showRowHeaders = function (isShow) {
   const grid = document.querySelector('revo-grid');
   grid.rowHeaders = isShow;
 };
@@ -18,8 +18,8 @@ window.showRowHeaders = function (isShow) {
  * Toggle column grouping visibility
  * @param {boolean} isShow - Show column grouping if true, hide otherwise
  */
-window.showColGrouping = function (isShow) {
-  setData({
+globalThis.showColGrouping = function (isShow) {
+  globalThis.setData({
     groupedHeader: isShow,
   });
 };
@@ -28,17 +28,30 @@ window.showColGrouping = function (isShow) {
  * Set row size
  * @param {number} s - Row size
  */
-window.setRowSize = function (s) {
+globalThis.setRowSize = function (s) {
   const grid = document.querySelector('revo-grid');
   grid.rowSize = s;
 };
 
+/**
+ * Apply several custom row sizes.
+ */
+globalThis.setCustomRowSizes = function () {
+  const grid = document.querySelector('revo-grid');
+  grid.rowDefinitions = [
+    { type: 'rgRow', index: 1, size: 64 },
+    { type: 'rgRow', index: 3, size: 96 },
+    { type: 'rgRow', index: 6, size: 48 },
+    { type: 'rgRow', index: 10, size: 120 },
+  ];
+};
+
 /**
  * Start editing cell
  * @param {number} rgRow - Row index
  * @param {string} prop - Column property
  */
-window.setEdit = function (rgRow, prop) {
+globalThis.setEdit = function (rgRow, prop) {
   const grid = document.querySelector('revo-grid');
   grid.setCellEdit(rgRow, prop);
 };
@@ -47,7 +60,7 @@ window.setEdit = function (rgRow, prop) {
  * Scroll to column
  * @param {number} [x=30] - Column index
  */
-window.scrollToCol = function (x = 30) {
+globalThis.scrollToCol = function (x = 30) {
   const grid = document.querySelector('revo-grid');
   grid.scrollToColumnProp(x);
 };
@@ -55,7 +68,7 @@ window.scrollToCol = function (x = 30) {
 /**
  * Clear grouping
  */
-window.clearGrouping = function () {
+globalThis.clearGrouping = function () {
   const grid = document.querySelector('revo-grid');
   grid.grouping = {};
 };
@@ -65,7 +78,7 @@ window.clearGrouping = function () {
  * @param {Array} props - Array of properties to group by
  * @param {boolean} expandedAll - Expand all groups if true, collapse otherwise
  */
-window.setGrouping = function (props = [], expandedAll = false) {
+globalThis.setGrouping = function (props = [], expandedAll = false) {
   const grid = document.querySelector('revo-grid');
   grid.grouping = {
     props,
@@ -82,7 +95,7 @@ window.setGrouping = function (props = [], expandedAll = false) {
  * Set trimmed rows
  * @param {Array} rows - Array of row indexes to trim
  */
-window.setTrimmed = function (rows = []) {
+globalThis.setTrimmed = function (rows = []) {
   const grid = document.querySelector('revo-grid');
   grid.trimmedRows = rows.reduce((r, v) => {
     r[v] = true;
@@ -94,7 +107,7 @@ window.setTrimmed = function (rows = []) {
  * Export grid
  * @param {string} [filename='new file'] - File name
  */
-window.exportGrid = function (filename = 'new file') {
+globalThis.exportGrid = function (filename = 'new file') {
   const grid = document.querySelector('revo-grid');
   grid.getPlugins().then(plugins => {
     plugins.forEach(p => {
@@ -116,31 +129,78 @@ let defaultData = {
   colPinStart: [],
 };
 
+let dataGenerationId = 0;
+
+function formatNumber(value) {
+  return new Intl.NumberFormat('en').format(value);
+}
+
+function setLoader(text, visible = true) {
+  const $loader = document.querySelector('.loader');
+  if (!$loader) {
+    return;
+  }
+  $loader.textContent = text;
+  $loader.style.display = visible ? 'block' : 'none';
+}
+
+function cancelDataGeneration() {
+  dataGenerationId++;
+  setLoader('', false);
+}
+
 /**
  * Set data
  * @param {Object} [config={}] - Data configuration
  */
-window.setData = function (config = {}) {
+globalThis.setData = async function (config = {}) {
   defaultData = { ...defaultData, ...config };
-  const $loader = document.querySelector('.loader');
-  $loader.style.display = 'block';
-  setTimeout(() => {
+  const generationId = ++dataGenerationId;
+  const totalCells = defaultData.rows * defaultData.cols;
+  setLoader(`Preparing ${formatNumber(defaultData.rows)} rows x ${formatNumber(defaultData.cols)} columns...`);
+
+  try {
+    // Let the loader paint before data generation starts.
+    await new Promise(resolve => setTimeout(resolve, 0));
+    const data = await generateFakeDataObjectAsync(defaultData, {
+      isCanceled: () => generationId !== dataGenerationId,
+      onProgress: ({ rows, totalRows }) => {
+        if (generationId !== dataGenerationId) {
+          return;
+        }
+        setLoader(
+          `Generated ${formatNumber(rows)} / ${formatNumber(totalRows)} rows (${formatNumber(totalCells)} cells)...`,
+        );
+      },
+    });
+
+    if (generationId !== dataGenerationId || !data) {
+      return;
+    }
+
     const grid = document.querySelector('revo-grid');
-    const data = generateFakeDataObject(defaultData);
+    if (!grid) {
+      return;
+    }
 
     grid.columns = data.headers;
     grid.source = data.rows;
 
     grid.pinnedTopSource = data.pinnedTopRows;
     grid.pinnedBottomSource = data.pinnedBottomRows;
-    $loader.style.display = 'none';
-  }, 0);
+    setLoader('', false);
+  } catch (error) {
+    if (generationId === dataGenerationId) {
+      setLoader(`Data generation failed: ${error?.message || error}`);
+      throw error;
+    }
+  }
 };
 
-window.setRtl = function (checked) {
+globalThis.setRtl = function (checked) {
   const grid = document.querySelector('revo-grid');
   grid.rtl = checked;
-  window.document.dir = checked ? 'rtl' : 'ltr';
+  globalThis.document.dir = checked ? 'rtl' : 'ltr';
 };
 
 /**
@@ -148,7 +208,7 @@ window.setRtl = function (checked) {
  * @param {string} type - Type of pinned rows/columns
  * @param {boolean} checked - True if rows/columns are pinned, false otherwise
  */
-window.setPinned = function (type, checked) {
+globalThis.setPinned = function (type, checked) {
   const val = [];
   if (checked) {
     switch (type) {
@@ -166,7 +226,7 @@ window.setPinned = function (type, checked) {
         break;
     }
   }
-  setData({
+  globalThis.setData({
     [type]: val,
   });
 };
@@ -176,8 +236,8 @@ window.setPinned = function (type, checked) {
  * @param {string} name - Event name
  * @param {boolean} checked - True if event should be prevented, false otherwise
  */
-window.preventEvent = function (name, checked) {
-  eventsPrevented[name] = checked;
+globalThis.preventEvent = function (name, checked) {
+  globalThis.eventsPrevented[name] = checked;
 };
 
 let keys = 2;
@@ -187,7 +247,7 @@ let attrs = {};
  * Toggle visibility of grid
  * @param {boolean} checked - True if grid is visible, false otherwise
  */
-window.toggleVisibility = function (checked) {
+globalThis.toggleVisibility = function (checked) {
   if (!checked) {
     const grid = document.querySelector('revo-grid');
     attrs = {};
@@ -209,7 +269,7 @@ window.toggleVisibility = function (checked) {
     });
     grid.setAttribute('key', keys++);
     holder.appendChild(grid);
-    setData();
+    globalThis.setData();
   }
 };
 
@@ -220,7 +280,7 @@ let timerUpdateInterval;
  * @param {boolean} checked - True if timer should be updated, false otherwise
  * @param {number} [inteval=3] - Update interval in seconds
  */
-window.timerUpdate = function (checked, inteval = 3) {
+globalThis.timerUpdate = function (checked, inteval = 3) {
   clearInterval(timerUpdateInterval);
   if (checked) {
     timerUpdateInterval = setInterval(() => {
@@ -234,9 +294,9 @@ window.timerUpdate = function (checked, inteval = 3) {
  * Set theme
  * @param {string} theme - Theme name
  */
-window.theme = function (theme) {
+globalThis.theme = function (theme) {
   const grid = document.querySelector('revo-grid');
-  if (theme && theme.indexOf('dark') > -1) {
+  if (theme?.includes('dark')) {
     document.documentElement.setAttribute('data-bs-theme', 'dark');
   } else {
     document.documentElement.removeAttribute('data-bs-theme');
@@ -244,26 +304,26 @@ window.theme = function (theme) {
   grid.theme = theme || 'default';
 };
 
-window.onload = onLoad;
+globalThis.onload = onLoad;
 
-window.clearFilter = () => {
+globalThis.clearFilter = () => {
   const grid = document.querySelector('revo-grid');
   grid.filter = {};
 };
 
-window.sortColumn = (columnProp= 0, additive = false) => {
+globalThis.sortColumn = (columnProp= 0, additive = false) => {
   const grid = document.querySelector('revo-grid');
   grid.updateColumnSorting({
     prop: columnProp,
   }, 'asc', additive);
 };
 
-window.clearSorting = () => {
+globalThis.clearSorting = () => {
   const grid = document.querySelector('revo-grid');
   grid.clearSorting();
 };
 
-window.setFilter = () => {
+globalThis.setFilter = () => {
   const grid = document.querySelector('revo-grid');
   const filterFunc = (cellValue, extraValue) => {
     if (!cellValue) {
@@ -304,7 +364,8 @@ window.setFilter = () => {
  * Deep groups should align with a1/a2/a3/b1/b2/b3.
  * https://github.com/revolist/revogrid/issues/828
  */
-window.setColumnGroupOffsetBugDemo = () => {
+globalThis.setColumnGroupOffsetBugDemo = () => {
+  cancelDataGeneration();
   const grid = document.querySelector('revo-grid');
 
   grid.columns = [
@@ -390,7 +451,7 @@ function onLoad() {
   const events = ['aftercolumnresize'];
   events.forEach(e => {
     grid.addEventListener(e, $e => {
-      if (window.eventsPrevented[e]) {
+      if (globalThis.eventsPrevented[e]) {
         $e.preventDefault();
       }
       console.log(