beautiful-grid 1.0.2 → 1.0.4

package/cjs/components/selection/CellSelectionOverlayLayer.js

@@ -37,15 +37,15 @@ exports.CellSelectionOverlayLayer = CellSelectionOverlayLayer;
 var React = __importStar(require("react"));
 var cellSelectionGeometry_1 = require("../../utils/cellSelectionGeometry");
 function CellSelectionOverlayLayer(_a) {
-    var quadrant = _a.quadrant, selectionFragments = _a.selectionFragments, activeFragments = _a.activeFragments, activeFill = _a.activeFill, activeRing = _a.activeRing, viewport = _a.viewport;
+    var quadrant = _a.quadrant, selectionFragments = _a.selectionFragments, activeFragments = _a.activeFragments, activeFill = _a.activeFill, activeRing = _a.activeRing, viewport = _a.viewport, _b = _a.offsetTop, offsetTop = _b === void 0 ? 0 : _b;
     var quadrantSelectionFragments = getVisibleFragments(selectionFragments, quadrant, viewport);
     var quadrantActiveFragments = getVisibleFragments(activeFragments, quadrant, viewport);
     if (quadrantSelectionFragments.length === 0 && quadrantActiveFragments.length === 0)
         return null;
     return (React.createElement("div", { className: 'bgrid-cell-selection-overlay-layer', "data-bgrid-selection-quadrant": quadrant, "aria-hidden": 'true' },
-        quadrantSelectionFragments.map(function (fragment) { return (React.createElement("div", { key: "selection-".concat(fragment.rangeIndex), className: 'bgrid-cell-selection-fragment', "data-bgrid-selection-fragment": 'true', "data-bgrid-selection-range-index": fragment.rangeIndex, "data-edge-top": fragment.edges.top ? 'true' : undefined, "data-edge-right": fragment.edges.right ? 'true' : undefined, "data-edge-bottom": fragment.edges.bottom ? 'true' : undefined, "data-edge-left": fragment.edges.left ? 'true' : undefined, style: getFragmentStyle(fragment) })); }),
+        quadrantSelectionFragments.map(function (fragment) { return (React.createElement("div", { key: "selection-".concat(fragment.rangeIndex), className: 'bgrid-cell-selection-fragment', "data-bgrid-selection-fragment": 'true', "data-bgrid-selection-range-index": fragment.rangeIndex, "data-edge-top": fragment.edges.top ? 'true' : undefined, "data-edge-right": fragment.edges.right ? 'true' : undefined, "data-edge-bottom": fragment.edges.bottom ? 'true' : undefined, "data-edge-left": fragment.edges.left ? 'true' : undefined, style: getFragmentStyle(fragment, offsetTop) })); }),
         (activeFill || activeRing) &&
-            quadrantActiveFragments.map(function (fragment) { return (React.createElement("div", { key: "active-".concat(fragment.rangeIndex), className: 'bgrid-cell-active-fragment', "data-bgrid-active-fragment": 'true', "data-active-fill": activeFill ? 'true' : undefined, "data-active-ring": activeRing ? 'true' : undefined, style: getFragmentStyle(fragment) })); })));
+            quadrantActiveFragments.map(function (fragment) { return (React.createElement("div", { key: "active-".concat(fragment.rangeIndex), className: 'bgrid-cell-active-fragment', "data-bgrid-active-fragment": 'true', "data-active-fill": activeFill ? 'true' : undefined, "data-active-ring": activeRing ? 'true' : undefined, style: getFragmentStyle(fragment, offsetTop) })); })));
 }
 function getVisibleFragments(fragments, quadrant, viewport) {
     return fragments.flatMap(function (fragment) {
@@ -55,10 +55,10 @@ function getVisibleFragments(fragments, quadrant, viewport) {
         return visibleFragment ? [visibleFragment] : [];
     });
 }
-function getFragmentStyle(fragment) {
+function getFragmentStyle(fragment, offsetTop) {
     return {
         left: fragment.left,
-        top: fragment.top,
+        top: fragment.top - offsetTop,
         width: fragment.width,
         height: fragment.height,
     };

package/cjs/utils/coordinate.js

@@ -53,10 +53,10 @@ function getRowBottom(rowIndex, rowHeight) {
     return (rowIndex + 1) * rowHeight;
 }
 function ensureCellVisible(_a) {
-    var _b, _c, _d, _e, _f, _g;
-    var cell = _a.cell, scrollContainer = _a.scrollContainer, _h = _a.frozenColumnCount, frozenColumnCount = _h === void 0 ? 0 : _h, _j = _a.frozenRowCount, frozenRowCount = _j === void 0 ? 0 : _j, columns = _a.columns, rowHeight = _a.rowHeight, viewportInsets = _a.viewportInsets;
-    var currentScrollTop = (_b = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) !== null && _b !== void 0 ? _b : 0;
-    var currentScrollLeft = (_c = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollLeft) !== null && _c !== void 0 ? _c : 0;
+    var _b, _c, _d, _e, _f, _g, _h, _j;
+    var cell = _a.cell, scrollContainer = _a.scrollContainer, _k = _a.frozenColumnCount, frozenColumnCount = _k === void 0 ? 0 : _k, _l = _a.frozenRowCount, frozenRowCount = _l === void 0 ? 0 : _l, columns = _a.columns, rowHeight = _a.rowHeight, verticalScrollState = _a.verticalScrollState, viewportInsets = _a.viewportInsets;
+    var currentScrollTop = (_c = (_b = verticalScrollState === null || verticalScrollState === void 0 ? void 0 : verticalScrollState.scrollTop) !== null && _b !== void 0 ? _b : scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollTop) !== null && _c !== void 0 ? _c : 0;
+    var currentScrollLeft = (_d = scrollContainer === null || scrollContainer === void 0 ? void 0 : scrollContainer.scrollLeft) !== null && _d !== void 0 ? _d : 0;
     var nextScrollTop = currentScrollTop;
     var nextScrollLeft = currentScrollLeft;
     // Vertical scroll calculation
@@ -65,11 +65,11 @@ function ensureCellVisible(_a) {
         var rowTop = getRowTop(targetRowIndex, rowHeight);
         var rowBottom = getRowBottom(targetRowIndex, rowHeight);
         var clientHeight = scrollContainer.clientHeight;
-        var scrollHeight = scrollContainer.scrollHeight;
+        var scrollHeight = (_e = verticalScrollState === null || verticalScrollState === void 0 ? void 0 : verticalScrollState.scrollHeight) !== null && _e !== void 0 ? _e : scrollContainer.scrollHeight;
         var maxScrollTop = Math.max(0, scrollHeight - clientHeight);
         if (clientHeight > 0) {
-            var topInset = clamp((_d = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.top) !== null && _d !== void 0 ? _d : 0, 0, clientHeight);
-            var bottomInset = clamp((_e = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.bottom) !== null && _e !== void 0 ? _e : 0, 0, Math.max(clientHeight - topInset, 0));
+            var topInset = clamp((_f = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.top) !== null && _f !== void 0 ? _f : 0, 0, clientHeight);
+            var bottomInset = clamp((_g = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.bottom) !== null && _g !== void 0 ? _g : 0, 0, Math.max(clientHeight - topInset, 0));
             var viewportTop = currentScrollTop + topInset;
             var viewportBottom = currentScrollTop + clientHeight - bottomInset;
             if (rowTop < viewportTop) {
@@ -90,8 +90,8 @@ function ensureCellVisible(_a) {
         var scrollWidth = scrollContainer.scrollWidth;
         var maxScrollLeft = Math.max(0, scrollWidth - clientWidth);
         if (clientWidth > 0) {
-            var leftInset = clamp((_f = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.left) !== null && _f !== void 0 ? _f : 0, 0, clientWidth);
-            var rightInset = clamp((_g = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.right) !== null && _g !== void 0 ? _g : 0, 0, Math.max(clientWidth - leftInset, 0));
+            var leftInset = clamp((_h = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.left) !== null && _h !== void 0 ? _h : 0, 0, clientWidth);
+            var rightInset = clamp((_j = viewportInsets === null || viewportInsets === void 0 ? void 0 : viewportInsets.right) !== null && _j !== void 0 ? _j : 0, 0, Math.max(clientWidth - leftInset, 0));
             var viewportLeft = currentScrollLeft + leftInset;
             var viewportRight = currentScrollLeft + clientWidth - rightInset;
             var visibleWidth = Math.max(clientWidth - leftInset - rightInset, 0);
@@ -108,7 +108,7 @@ function ensureCellVisible(_a) {
     var didScrollLeft = nextScrollLeft !== currentScrollLeft;
     var didScroll = didScrollTop || didScrollLeft;
     if (scrollContainer) {
-        if (didScrollTop) {
+        if (didScrollTop && !verticalScrollState) {
             scrollContainer.scrollTop = nextScrollTop;
         }
         if (didScrollLeft) {

package/cjs/utils/index.js

@@ -31,6 +31,7 @@ __exportStar(require("./scrollbar"), exports);
 __exportStar(require("./number"), exports);
 __exportStar(require("./buildHeaderMatrix"), exports);
 __exportStar(require("./getVisibleScrollableRowRange"), exports);
+__exportStar(require("./virtualScrollWindow"), exports);
 __exportStar(require("./cellEditState"), exports);
 __exportStar(require("./getCellSelectionAxisState"), exports);
 __exportStar(require("./mergedCells"), exports);

package/cjs/utils/virtualScrollWindow.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BGRID_MAX_PHYSICAL_SCROLL_HEIGHT = void 0;
+exports.getVirtualScrollWindowMetrics = getVirtualScrollWindowMetrics;
+exports.getLogicalScrollTop = getLogicalScrollTop;
+exports.getVirtualScrollWindowPosition = getVirtualScrollWindowPosition;
+exports.rebaseVirtualScrollWindow = rebaseVirtualScrollWindow;
+exports.BGRID_MAX_PHYSICAL_SCROLL_HEIGHT = 1000000;
+function getVirtualScrollWindowMetrics(_a) {
+    var logicalContentHeight = _a.logicalContentHeight, viewportHeight = _a.viewportHeight, enabled = _a.enabled, _b = _a.maxPhysicalHeight, maxPhysicalHeight = _b === void 0 ? exports.BGRID_MAX_PHYSICAL_SCROLL_HEIGHT : _b;
+    var safeViewportHeight = Math.max(viewportHeight, 0);
+    var safeLogicalContentHeight = Math.max(logicalContentHeight, safeViewportHeight);
+    var safeMaxPhysicalHeight = Math.max(maxPhysicalHeight, safeViewportHeight);
+    var windowingEnabled = enabled && safeLogicalContentHeight > safeMaxPhysicalHeight;
+    var physicalContentHeight = windowingEnabled ? safeMaxPhysicalHeight : safeLogicalContentHeight;
+    return {
+        enabled: windowingEnabled,
+        logicalContentHeight: safeLogicalContentHeight,
+        physicalContentHeight: physicalContentHeight,
+        logicalMaxScroll: Math.max(safeLogicalContentHeight - safeViewportHeight, 0),
+        physicalMaxScroll: Math.max(physicalContentHeight - safeViewportHeight, 0),
+    };
+}
+function getLogicalScrollTop(base, physicalScrollTop, metrics) {
+    return clamp(base + physicalScrollTop, 0, metrics.logicalMaxScroll);
+}
+function getVirtualScrollWindowPosition(logicalScrollTop, metrics) {
+    var logicalTop = clamp(logicalScrollTop, 0, metrics.logicalMaxScroll);
+    if (!metrics.enabled) {
+        return {
+            base: 0,
+            physicalScrollTop: logicalTop,
+            logicalScrollTop: logicalTop,
+        };
+    }
+    var preferredPhysicalTop = metrics.physicalMaxScroll / 2;
+    var maxBase = Math.max(metrics.logicalMaxScroll - metrics.physicalMaxScroll, 0);
+    var base = clamp(logicalTop - preferredPhysicalTop, 0, maxBase);
+    return {
+        base: base,
+        physicalScrollTop: logicalTop - base,
+        logicalScrollTop: logicalTop,
+    };
+}
+function rebaseVirtualScrollWindow(base, physicalScrollTop, metrics) {
+    var logicalScrollTop = getLogicalScrollTop(base, physicalScrollTop, metrics);
+    if (!metrics.enabled || metrics.physicalMaxScroll <= 0) {
+        return getVirtualScrollWindowPosition(logicalScrollTop, metrics);
+    }
+    var lowerGuard = metrics.physicalMaxScroll * 0.25;
+    var upperGuard = metrics.physicalMaxScroll * 0.75;
+    var maxBase = Math.max(metrics.logicalMaxScroll - metrics.physicalMaxScroll, 0);
+    var canMoveBackward = base > 0;
+    var canMoveForward = base < maxBase;
+    if ((physicalScrollTop < lowerGuard && canMoveBackward) ||
+        (physicalScrollTop > upperGuard && canMoveForward)) {
+        return getVirtualScrollWindowPosition(logicalScrollTop, metrics);
+    }
+    return {
+        base: base,
+        physicalScrollTop: clamp(physicalScrollTop, 0, metrics.physicalMaxScroll),
+        logicalScrollTop: logicalScrollTop,
+    };
+}
+function clamp(value, min, max) {
+    return Math.min(Math.max(value, min), max);
+}

package/esm/BGrid.js

@@ -2,7 +2,7 @@ import * as React from 'react';
 import Table from './components/Table';
 import { createPivotData, buildHeaderMatrix, findDuplicateColumnIds, getCellValueByRowKey, getColumnId, getColumnKeyToken, getFrozenColumnsWidth, processDataQuery, resolveStatusOptions, resolvePaginationViewOptions, resolveScrollbarOptions, shouldRenderBottomBar, } from './utils';
 import { AppStoreProvider } from './store';
-export function BGrid({ width, height, headerHeight = 30, footerHeight, summaryHeight = 30, itemHeight = 15, itemPadding = 7, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex = 0, frozenRowCount = 0, data = [], page, scrollbar, status, pagination, bottomBarHeight, scrollTop = 0, scrollLeft = 0, className, style, rowChecked, sort, onClick, loading = false, spinning, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger = 'dblclick', cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, searchOptions, contextMenuOptions, }) {
+export function BGrid({ ref, width, height, headerHeight = 30, footerHeight, summaryHeight = 30, itemHeight = 15, itemPadding = 7, columns, columnsGroup, columnGroups, onChangeColumns, frozenColumnIndex = 0, frozenRowCount = 0, data = [], page, scrollbar, status, pagination, bottomBarHeight, scrollTop = 0, scrollLeft = 0, className, style, rowChecked, sort, onClick, loading = false, spinning, rowKey, selectedRowKey, editable, onChangeData, showLineNumber, msg, getRowClassName, editTrigger = 'dblclick', cellMergeOptions, cellSelectionOptions, cellNavigationOptions, variant, summary, columnSortable, reorder, pivot, dataControl, icons, searchOptions, contextMenuOptions, }) {
     const warnedSearchControlledRef = React.useRef({ open: false, query: false, pivotContextMenu: false });
     const pivotData = React.useMemo(() => {
         return createPivotData({
@@ -410,7 +410,7 @@ export function BGrid({ width, height, headerHeight = 30, footerHeight, summaryH
         initialShowBottomBar,
     ]);
     return (React.createElement(AppStoreProvider, { initialState: initialStoreState },
-        React.createElement(Table, { columns: computedColumns,
+        React.createElement(Table, { ref: ref, columns: computedColumns,
             columnsGroup: resolvedColumnsGroup,
             columnGroups: resolvedColumnGroups,
             onChangeColumns: resolvedOnChangeColumns,