zmdms-webui 2.4.0 → 2.4.1

package/dist/es/canvastable/canvasTable.js

@@ -289,6 +289,7 @@ function CanvasTable(props) {
         containerHeight: containerHeight,
         scrollbarSize: SCROLLBAR_SIZE,
         canvasRef: canvasRef,
+        containerRef: containerRef,
         totalHeight: totalHeight,
         totalWidth: totalWidth,
         // 使用scrollbarMetrics的显示相关属性（需要随滚动更新）

package/dist/es/canvastable/hooks/useScroll.js

@@ -115,8 +115,17 @@ var useTableScroll = function (params) {
             e.stopPropagation();
             // 当鼠标在容器内任何位置（包括CellOverlay）时都能滚动
             // 累积滚动增量
-            pendingDeltaRef.current.deltaX += e.deltaX;
-            pendingDeltaRef.current.deltaY += e.deltaY;
+            // 支持 Shift + 鼠标滚轮进行水平滚动
+            if (e.shiftKey) {
+                // 按住 Shift 键时，将垂直滚动转换为水平滚动
+                pendingDeltaRef.current.deltaX += e.deltaY;
+                pendingDeltaRef.current.deltaY += 0;
+            }
+            else {
+                // 正常滚动逻辑
+                pendingDeltaRef.current.deltaX += e.deltaX;
+                pendingDeltaRef.current.deltaY += e.deltaY;
+            }
             // 如果已经有pending的动画帧，不需要再次请求
             if (rafIdRef.current !== null) {
                 return;
@@ -178,7 +187,128 @@ var useTableScroll = function (params) {
         setScrollState: setScrollState,
     };
 };
-// ==================== Hook 3: 滚动位置重置 ====================
+var useSelectionBoundaryScroll = function (params) {
+    var containerRef = params.containerRef, isSelecting = params.isSelecting, 
+    // scrollState,
+    setScrollState = params.setScrollState, maxScrollTop = params.maxScrollTop, maxScrollLeft = params.maxScrollLeft, onScroll = params.onScroll, getCellFromPosition = params.getCellFromPosition, updateSelection = params.updateSelection, columnRenderInfos = params.columnRenderInfos;
+    var scrollIntervalRef = useRef(null);
+    var currentMousePosRef = useRef(null);
+    var SCROLL_BOUNDARY_SIZE = 50; // 触发滚动的边界距离
+    var SCROLL_SPEED = 10; // 每次滚动的距离
+    // 检查边界滚动
+    var checkBoundaryScroll = useMemo(function () {
+        return function (mouseX, mouseY) {
+            if (!containerRef.current || !isSelecting)
+                return;
+            var rect = containerRef.current.getBoundingClientRect();
+            var containerWidth = rect.width;
+            var containerHeight = rect.height;
+            var scrollDeltaX = 0;
+            var scrollDeltaY = 0;
+            // 检查水平边界
+            if (mouseX < SCROLL_BOUNDARY_SIZE) {
+                // 接近左边界，向左滚动
+                scrollDeltaX = -SCROLL_SPEED;
+            }
+            else if (mouseX > containerWidth - SCROLL_BOUNDARY_SIZE) {
+                // 接近右边界，向右滚动
+                scrollDeltaX = SCROLL_SPEED;
+            }
+            // 检查垂直边界
+            if (mouseY < SCROLL_BOUNDARY_SIZE) {
+                // 接近顶部边界，向上滚动
+                scrollDeltaY = -SCROLL_SPEED;
+            }
+            else if (mouseY > containerHeight - SCROLL_BOUNDARY_SIZE) {
+                // 接近底部边界，向下滚动
+                scrollDeltaY = SCROLL_SPEED;
+            }
+            // 保存当前鼠标位置（用于滚动时更新框选）
+            currentMousePosRef.current = { x: mouseX, y: mouseY };
+            // 如果需要滚动
+            if (scrollDeltaX !== 0 || scrollDeltaY !== 0) {
+                // 清除之前的定时器
+                if (scrollIntervalRef.current) {
+                    clearInterval(scrollIntervalRef.current);
+                }
+                // 开始持续滚动
+                scrollIntervalRef.current = setInterval(function () {
+                    setScrollState(function (prev) {
+                        var _a;
+                        var newScrollLeft = Math.max(0, Math.min(maxScrollLeft, prev.scrollLeft + scrollDeltaX));
+                        var newScrollTop = Math.max(0, Math.min(maxScrollTop, prev.scrollTop + scrollDeltaY));
+                        if (newScrollLeft !== prev.scrollLeft ||
+                            newScrollTop !== prev.scrollTop) {
+                            onScroll === null || onScroll === void 0 ? void 0 : onScroll(newScrollLeft, newScrollTop);
+                            // 滚动后检查鼠标位置的单元格并更新框选
+                            if (getCellFromPosition &&
+                                updateSelection &&
+                                columnRenderInfos &&
+                                currentMousePosRef.current) {
+                                var _b = currentMousePosRef.current, x = _b.x, y = _b.y;
+                                var cell = getCellFromPosition(x, y);
+                                if (cell) {
+                                    // 检查是否在选择框列，如果是，则不更新框选
+                                    var isSelectionColumn = ((_a = columnRenderInfos[cell.col]) === null || _a === void 0 ? void 0 : _a.column.key) === "__selection__";
+                                    if (!isSelectionColumn) {
+                                        updateSelection(cell);
+                                    }
+                                }
+                            }
+                            return __assign(__assign({}, prev), { scrollLeft: newScrollLeft, scrollTop: newScrollTop });
+                        }
+                        return prev;
+                    });
+                }, 50); // 每50毫秒滚动一次
+            }
+            else {
+                // 停止滚动
+                if (scrollIntervalRef.current) {
+                    clearInterval(scrollIntervalRef.current);
+                    scrollIntervalRef.current = null;
+                }
+            }
+        };
+    }, [
+        containerRef,
+        isSelecting,
+        setScrollState,
+        maxScrollTop,
+        maxScrollLeft,
+        onScroll,
+        getCellFromPosition,
+        updateSelection,
+        columnRenderInfos,
+    ]);
+    // 停止边界滚动
+    var stopBoundaryScroll = useMemo(function () {
+        return function () {
+            if (scrollIntervalRef.current) {
+                clearInterval(scrollIntervalRef.current);
+                scrollIntervalRef.current = null;
+            }
+        };
+    }, []);
+    // 当框选结束时停止滚动
+    useEffect(function () {
+        if (!isSelecting) {
+            stopBoundaryScroll();
+        }
+    }, [isSelecting, stopBoundaryScroll]);
+    // 组件卸载时清理定时器
+    useEffect(function () {
+        return function () {
+            if (scrollIntervalRef.current) {
+                clearInterval(scrollIntervalRef.current);
+            }
+        };
+    }, []);
+    return {
+        checkBoundaryScroll: checkBoundaryScroll,
+        stopBoundaryScroll: stopBoundaryScroll,
+    };
+};
+// ==================== Hook 4: 滚动位置重置 ====================
 /**
  * 滚动位置重置 Hook
  *
@@ -236,4 +366,4 @@ var useScrollReset = function (params) {
     ]);
 };
 
-export { useScrollReset, useScrollbarMetrics, useTableScroll };
+export { useScrollReset, useScrollbarMetrics, useSelectionBoundaryScroll, useTableScroll };

package/dist/es/canvastable/hooks/useSummaryRow.js

@@ -22,6 +22,8 @@ var useSummaryRow = function (params) {
         if (!hasSummary)
             return null;
         var summaryRecord = {};
+        // 原始值，为转为千分符的
+        var summaryOriginalValues = {};
         // 找到第一个列（包括序号列、选择框列）
         var firstColIndex = leafColumns.length > 0 ? 0 : -1;
         leafColumns.forEach(function (column, colIndex) {
@@ -43,9 +45,11 @@ var useSummaryRow = function (params) {
                 calculatedSum = sum_1;
                 // 应用格式化（仅在没有自定义回调或回调返回数值时）
                 var formattedSum = calculatedSum;
+                summaryOriginalValues[dataIndex] = calculatedSum;
                 if (typeof calculatedSum === "number") {
                     if (column.precision !== undefined) {
                         formattedSum = exactRound(calculatedSum, column.precision);
+                        summaryOriginalValues[dataIndex] = calculatedSum;
                     }
                     if (column.thousand) {
                         formattedSum = addThousedSeparator(formattedSum);
@@ -64,7 +68,7 @@ var useSummaryRow = function (params) {
         leafColumns.forEach(function (column) {
             if (column.totalCalcCallback) {
                 var dataIndex = column.dataIndex || column.key;
-                summaryRecord[dataIndex] = column.totalCalcCallback(summaryRecord[dataIndex], summaryRecord);
+                summaryRecord[dataIndex] = column.totalCalcCallback(summaryOriginalValues[dataIndex], summaryOriginalValues);
             }
         });
         summaryRecord[IS_SUMMARY] = true;

package/dist/es/canvastable/hooks/useTableInteraction.js

@@ -1,6 +1,7 @@
 import { __assign, __spreadArray } from '../../_virtual/_tslib.js';
 import { useRef, useEffect } from 'react';
 import { useMemoizedFn } from 'ahooks';
+import { useSelectionBoundaryScroll } from './useScroll.js';
 import { FONT_SIZE, FONT_FAMILY } from '../utils/constants.js';
 import { isTextTruncated } from '../utils/canvasDrawHelpers.js';
 import { getMaxDepth, flattenHeaders, getLeafColumns } from '../utils/multiHeaderHelpers.js';
@@ -13,7 +14,7 @@ import { calculateSelectionState, toggleSelectAll, handleSortClick, calculateIco
  * 表格交互事件处理 Hook
  */
 var useTableInteraction = function (params) {
-    var state = params.state, setState = params.setState, scrollState = params.scrollState, setScrollState = params.setScrollState, processedDataSource = params.processedDataSource, columnRenderInfos = params.columnRenderInfos, _a = params.columns, columns = _a === void 0 ? [] : _a, rowSelection = params.rowSelection, rowHeight = params.rowHeight, headerHeight = params.headerHeight, containerWidth = params.containerWidth, containerHeight = params.containerHeight, scrollbarSize = params.scrollbarSize, canvasRef = params.canvasRef, needVerticalScrollbar = params.needVerticalScrollbar, needHorizontalScrollbar = params.needHorizontalScrollbar, verticalScrollbarTop = params.verticalScrollbarTop, verticalScrollbarHeight = params.verticalScrollbarHeight, horizontalScrollbarLeft = params.horizontalScrollbarLeft, horizontalScrollbarWidth = params.horizontalScrollbarWidth, maxScrollTop = params.maxScrollTop, maxScrollLeft = params.maxScrollLeft, totalHeight = params.totalHeight, totalWidth = params.totalWidth, dataAreaHeight = params.dataAreaHeight, onSortChange = params.onSortChange, onRowClick = params.onRowClick, getRowKey = params.getRowKey, startSelection = params.startSelection, updateSelection = params.updateSelection, extendSelection = params.extendSelection, checkResizeHandle = params.checkResizeHandle, startResize = params.startResize, updateResize = params.updateResize, endResize = params.endResize, setHoverResizeColumn = params.setHoverResizeColumn, resizeState = params.resizeState, _b = params.hasSummaryRow, hasSummaryRow = _b === void 0 ? false : _b, mergeCellMap = params.mergeCellMap, menuShow = params.menuShow, fixedRowsCount = params.fixedRowsCount, fixedRowsConfig = params.fixedRowsConfig, summaryFixed = params.summaryFixed;
+    var state = params.state, setState = params.setState, scrollState = params.scrollState, setScrollState = params.setScrollState, processedDataSource = params.processedDataSource, columnRenderInfos = params.columnRenderInfos, _a = params.columns, columns = _a === void 0 ? [] : _a, rowSelection = params.rowSelection, rowHeight = params.rowHeight, headerHeight = params.headerHeight, containerWidth = params.containerWidth, containerHeight = params.containerHeight, scrollbarSize = params.scrollbarSize, canvasRef = params.canvasRef, containerRef = params.containerRef, needVerticalScrollbar = params.needVerticalScrollbar, needHorizontalScrollbar = params.needHorizontalScrollbar, verticalScrollbarTop = params.verticalScrollbarTop, verticalScrollbarHeight = params.verticalScrollbarHeight, horizontalScrollbarLeft = params.horizontalScrollbarLeft, horizontalScrollbarWidth = params.horizontalScrollbarWidth, maxScrollTop = params.maxScrollTop, maxScrollLeft = params.maxScrollLeft, totalHeight = params.totalHeight, totalWidth = params.totalWidth, dataAreaHeight = params.dataAreaHeight, onSortChange = params.onSortChange, onRowClick = params.onRowClick, getRowKey = params.getRowKey, startSelection = params.startSelection, updateSelection = params.updateSelection, extendSelection = params.extendSelection, checkResizeHandle = params.checkResizeHandle, startResize = params.startResize, updateResize = params.updateResize, endResize = params.endResize, setHoverResizeColumn = params.setHoverResizeColumn, resizeState = params.resizeState, _b = params.hasSummaryRow, hasSummaryRow = _b === void 0 ? false : _b, mergeCellMap = params.mergeCellMap, menuShow = params.menuShow, fixedRowsCount = params.fixedRowsCount, fixedRowsConfig = params.fixedRowsConfig, summaryFixed = params.summaryFixed;
     // 获取鼠标位置对应的单元格
     var getCellFromPosition = useMemoizedFn(function (x, y) {
         var fixedTopRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || fixedRowsCount || 0;
@@ -464,6 +465,8 @@ var useTableInteraction = function (params) {
                     updateSelection(cell);
                 }
             }
+            // 检查边界滚动 - 当鼠标接近容器边界时自动滚动
+            checkBoundaryScroll(x, y);
             return;
         }
         // 检测列宽调整手柄hover状态
@@ -612,6 +615,8 @@ var useTableInteraction = function (params) {
         // 结束框选
         if (state.isSelecting) {
             setState(function (prev) { return (__assign(__assign({}, prev), { isSelecting: false })); });
+            // 停止边界滚动
+            stopBoundaryScroll();
         }
     });
     // 检查目标元素是否是Canvas内部渲染的元素
@@ -808,6 +813,8 @@ var useTableInteraction = function (params) {
             // 结束框选
             if (currentState.isSelecting) {
                 setState(function (prev) { return (__assign(__assign({}, prev), { isSelecting: false })); });
+                // 停止边界滚动
+                stopBoundaryScroll();
             }
             setScrollState(function (prev) { return (__assign(__assign({}, prev), { isDraggingVertical: false, isDraggingHorizontal: false })); });
         };
@@ -828,6 +835,21 @@ var useTableInteraction = function (params) {
         // updateResize, endResize, handleVerticalScrollDrag, handleHorizontalScrollDrag,
         // updateSelection, setState, getCellFromPosition, columnRenderInfos,
     ]);
+    // 边界滚动Hook - 用于框选时的自动滚动
+    var _c = useSelectionBoundaryScroll({
+        containerRef: containerRef,
+        isSelecting: state.isSelecting,
+        scrollState: scrollState,
+        setScrollState: setScrollState,
+        maxScrollTop: maxScrollTop,
+        maxScrollLeft: maxScrollLeft,
+        onScroll: function (scrollLeft, scrollTop) {
+            // 边界滚动时的回调，可以在这里添加额外的逻辑
+        },
+        getCellFromPosition: getCellFromPosition,
+        updateSelection: updateSelection,
+        columnRenderInfos: columnRenderInfos,
+    }), checkBoundaryScroll = _c.checkBoundaryScroll, stopBoundaryScroll = _c.stopBoundaryScroll;
     return {
         handleCanvasMouseDown: handleCanvasMouseDown,
         handleCanvasMouseMove: handleCanvasMouseMove,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zmdms-webui",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "private": false,
   "main": "dist/index.es.js",
   "module": "dist/index.es.js",