zmdms-webui 2.3.0 → 2.3.1

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

@@ -0,0 +1,804 @@
+import { __assign, __spreadArray } from '../../_virtual/_tslib.js';
+import { useEffect } from 'react';
+import { useMemoizedFn } from 'ahooks';
+import { FONT_SIZE, FONT_FAMILY } from '../utils/constants.js';
+import { isTextTruncated } from '../utils/canvasDrawHelpers.js';
+import { getMaxDepth, flattenHeaders, getLeafColumns } from '../utils/multiHeaderHelpers.js';
+import { getCellFromMousePosition, extractCellText } from '../utils/cellHelpers.js';
+import 'dayjs';
+import { calculateSelectionState, toggleSelectAll, handleSortClick, calculateIconArea, isClickInIconArea, calculateScrollPosition, calculatePopoverPosition, isPointInTriangle } from '../utils/interactionHelpers.js';
+
+/**
+ * 表格交互事件处理 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, fixedSummaryRow = params.fixedSummaryRow;
+    // 获取鼠标位置对应的单元格
+    var getCellFromPosition = useMemoizedFn(function (x, y) {
+        var fixedTopRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || fixedRowsCount || 0;
+        var fixedBottomRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.bottomCount) || 0;
+        return getCellFromMousePosition({
+            x: x,
+            y: y,
+            headerHeight: headerHeight,
+            rowHeight: rowHeight,
+            scrollTop: scrollState.scrollTop,
+            scrollLeft: scrollState.scrollLeft,
+            columnRenderInfos: columnRenderInfos,
+            dataLength: processedDataSource.length,
+            fixedTopRowsCount: fixedTopRowsCount,
+            fixedBottomRowsCount: fixedBottomRowsCount,
+            hasSummaryRow: hasSummaryRow,
+            fixedSummaryRow: fixedSummaryRow,
+            displayHeight: containerHeight,
+            needHorizontalScrollbar: needHorizontalScrollbar,
+            scrollbarSize: scrollbarSize,
+        });
+    });
+    // 处理选择框列的全选点击
+    var handleSelectAllClick = useMemoizedFn(function () {
+        var _a;
+        var selectionState = calculateSelectionState(processedDataSource, state.selectedRowKeys, getRowKey, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps);
+        var newSelectedKeys = toggleSelectAll(processedDataSource, selectionState.isAllSelected, getRowKey, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps);
+        setState(function (prev) { return (__assign(__assign({}, prev), { selectedRowKeys: newSelectedKeys })); });
+        var newSelectedRows = selectionState.isAllSelected
+            ? []
+            : processedDataSource.filter(function (record) {
+                var _a;
+                var checkboxProps = ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps) === null || _a === void 0 ? void 0 : _a.call(rowSelection, record)) || {};
+                return !checkboxProps.disabled;
+            });
+        (_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onChange) === null || _a === void 0 ? void 0 : _a.call(rowSelection, newSelectedKeys, newSelectedRows);
+    });
+    // 处理筛选图标点击
+    var handleFilterIconClick = useMemoizedFn(function (columnKey, drawX, width) {
+        var popoverPosition = calculatePopoverPosition(drawX, width, containerWidth, headerHeight);
+        setState(function (prev) { return (__assign(__assign({}, prev), { filterPopover: {
+                visible: true,
+                columnKey: columnKey,
+                position: popoverPosition,
+            } })); });
+    });
+    // 处理排序图标点击
+    var handleSortIconClick = useMemoizedFn(function (columnKey, clickedUpper) {
+        var sortResult = handleSortClick(clickedUpper, state.sortField, state.sortOrder, columnKey);
+        setState(function (prev) { return (__assign(__assign({}, prev), { sortField: sortResult.sortField, sortOrder: sortResult.sortOrder })); });
+        onSortChange === null || onSortChange === void 0 ? void 0 : onSortChange(columnKey, sortResult.sortOrder);
+    });
+    // 处理单个表头单元格的点击事件
+    var handleHeaderCellClick = useMemoizedFn(function (column, x, y, drawX, width, cellHeight, cellY) {
+        if (cellY === void 0) { cellY = 0; }
+        // 点击选择框列
+        if (column.key === "__selection__") {
+            handleSelectAllClick();
+            return true;
+        }
+        // 计算图标区域
+        var iconArea = calculateIconArea(column, width);
+        var relativeX = x - drawX;
+        // 点击筛选图标
+        if (isClickInIconArea(relativeX, iconArea, "filter")) {
+            handleFilterIconClick(column.key, drawX, width);
+            return true;
+        }
+        // 点击排序图标
+        if (isClickInIconArea(relativeX, iconArea, "sort")) {
+            var relativeY = y - cellY;
+            var clickedUpper = relativeY < cellHeight / 2;
+            handleSortIconClick(column.key, clickedUpper);
+            return true;
+        }
+        return false;
+    });
+    // 处理表头点击
+    var handleHeaderClick = useMemoizedFn(function (x, y) {
+        // 判断是否是多级表头
+        var maxDepth = getMaxDepth(columns);
+        var isMultiHeader = maxDepth > 1;
+        if (isMultiHeader) {
+            // 多级表头处理
+            var flattenedHeaderRows = flattenHeaders(columns);
+            var rowHeight_1 = headerHeight / maxDepth;
+            var clickedRowIndex = Math.floor(y / rowHeight_1);
+            if (clickedRowIndex < 0 ||
+                clickedRowIndex >= flattenedHeaderRows.length) {
+                return;
+            }
+            var leafColumns = getLeafColumns(columns);
+            // 找到被点击的表头单元格
+            var foundCell = false;
+            for (var rowIdx = 0; rowIdx <= clickedRowIndex && !foundCell; rowIdx++) {
+                var headerRow = flattenedHeaderRows[rowIdx];
+                for (var _i = 0, headerRow_1 = headerRow; _i < headerRow_1.length; _i++) {
+                    var headerCell = headerRow_1[_i];
+                    var column = headerCell.column, colSpan = headerCell.colSpan, rowSpan = headerCell.rowSpan, colIndex = headerCell.colIndex;
+                    // 计算该表头单元格的位置和宽度
+                    var cellX = 0;
+                    var cellWidth = 0;
+                    var isFixed = false;
+                    var fixedLeft = 0;
+                    for (var i = 0; i < leafColumns.length; i++) {
+                        var leafInfo = columnRenderInfos[i];
+                        if (i < colIndex) {
+                            cellX += leafInfo.width;
+                        }
+                        else if (i < colIndex + colSpan) {
+                            cellWidth += leafInfo.width;
+                            if (leafInfo.fixed) {
+                                isFixed = true;
+                                if (i === colIndex) {
+                                    fixedLeft = leafInfo.fixedLeft;
+                                }
+                            }
+                        }
+                    }
+                    var drawX = isFixed ? fixedLeft : cellX - scrollState.scrollLeft;
+                    var cellY = rowIdx * rowHeight_1;
+                    var cellHeight = rowSpan * rowHeight_1;
+                    // 检查点击是否在该单元格内
+                    var inYRange = y >= cellY && y < cellY + cellHeight;
+                    if (inYRange && x >= drawX && x < drawX + cellWidth) {
+                        foundCell = true;
+                        // 判断是否是最末级表头且非特殊列
+                        var isLastLevel = rowIdx + rowSpan === maxDepth;
+                        var isSpecialColumn = column.key === "__selection__" || column.key === "__index__";
+                        // 只有最末级且非特殊列才能排序和筛选
+                        if (column.key === "__selection__" ||
+                            (isLastLevel && !isSpecialColumn)) {
+                            handleHeaderCellClick(column, x, y, drawX, cellWidth, cellHeight, cellY);
+                        }
+                        break;
+                    }
+                }
+            }
+        }
+        else {
+            // 单层表头处理
+            for (var _a = 0, columnRenderInfos_1 = columnRenderInfos; _a < columnRenderInfos_1.length; _a++) {
+                var info = columnRenderInfos_1[_a];
+                var column = info.column, fixed = info.fixed, fixedLeft = info.fixedLeft, width = info.width;
+                var drawX = fixed ? fixedLeft : info.x - scrollState.scrollLeft;
+                if (x >= drawX && x < drawX + width) {
+                    handleHeaderCellClick(column, x, y, drawX, width, headerHeight);
+                    break;
+                }
+            }
+        }
+    });
+    // 检查是否点击了badge
+    var checkBadgeClick = useMemoizedFn(function (x, y, cell, clientX, clientY) {
+        var row = cell.row, col = cell.col;
+        var record = processedDataSource[row];
+        if (!record)
+            return false;
+        // 跳过合计行的badge点击
+        var isSummaryRow = hasSummaryRow && row === processedDataSource.length - 1;
+        if (isSummaryRow)
+            return false;
+        var columnInfo = columnRenderInfos[col];
+        if (!columnInfo)
+            return false;
+        var column = columnInfo.column, width = columnInfo.width, fixed = columnInfo.fixed, fixedLeft = columnInfo.fixedLeft, colX = columnInfo.x;
+        // 检查该列是否有badge配置
+        if (!column.badge)
+            return false;
+        // 获取badge配置
+        var badgeProps = typeof column.badge === "function"
+            ? column.badge(record)
+            : column.badge;
+        if (!badgeProps || !badgeProps.text)
+            return false;
+        // 计算单元格的位置和大小
+        var cellX = fixed ? fixedLeft : colX - scrollState.scrollLeft;
+        var cellY = headerHeight + row * rowHeight - scrollState.scrollTop;
+        var cellWidth = width;
+        var cellHeight = rowHeight;
+        var position = badgeProps.position || "top-right";
+        // 使用工具函数判断点击位置是否在三角形区域内
+        var isInTriangle = isPointInTriangle(x, y, cellX, cellY, cellWidth, cellHeight, position);
+        if (isInTriangle) {
+            // 如果已经显示相同内容的弹框，则关闭；否则显示新弹框
+            setState(function (prev) {
+                if (prev.badgePopover.visible &&
+                    prev.badgePopover.content === badgeProps.text) {
+                    return __assign(__assign({}, prev), { badgePopover: {
+                            visible: false,
+                            content: "",
+                            position: { x: 0, y: 0 },
+                        } });
+                }
+                else {
+                    return __assign(__assign({}, prev), { badgePopover: {
+                            visible: true,
+                            content: badgeProps.text,
+                            position: { x: clientX + 10, y: clientY + 10 },
+                        } });
+                }
+            });
+            return true;
+        }
+        return false;
+    });
+    // 处理行点击
+    var handleRowClick = useMemoizedFn(function (x, y) {
+        var _a, _b;
+        var adjustedY = y + scrollState.scrollTop - headerHeight;
+        var rowIndex = Math.floor(adjustedY / rowHeight);
+        if (rowIndex < 0 || rowIndex >= processedDataSource.length)
+            return;
+        // 检查是否点击选择框列
+        var selectionColumn = columnRenderInfos.find(function (info) { return info.column.key === "__selection__"; });
+        if (selectionColumn) {
+            var drawX = selectionColumn.fixed
+                ? selectionColumn.fixedLeft
+                : selectionColumn.x - scrollState.scrollLeft;
+            if (x >= drawX && x < drawX + selectionColumn.width) {
+                // 处理合并单元格的情况：如果点击的是被合并的单元格，需要找到主单元格
+                var selectionColIndex = columnRenderInfos.indexOf(selectionColumn);
+                var mergeCellKey = "".concat(rowIndex, "-").concat(selectionColIndex);
+                var mergeInfo = mergeCellMap === null || mergeCellMap === void 0 ? void 0 : mergeCellMap.get(mergeCellKey);
+                // 如果是被合并的单元格，找到对应的主单元格
+                if (mergeInfo && mergeInfo.skip) {
+                    // 向上查找主单元格
+                    for (var i = rowIndex - 1; i >= 0; i--) {
+                        var mainCellKey = "".concat(i, "-").concat(selectionColIndex);
+                        var mainMergeInfo = mergeCellMap === null || mergeCellMap === void 0 ? void 0 : mergeCellMap.get(mainCellKey);
+                        if (mainMergeInfo && !mainMergeInfo.skip) {
+                            // 检查这个主单元格是否覆盖了当前点击的位置
+                            var mainCellEndRow = i + mainMergeInfo.rowSpan - 1;
+                            if (rowIndex <= mainCellEndRow) {
+                                rowIndex = i; // 使用主单元格的行索引
+                                break;
+                            }
+                        }
+                    }
+                }
+                var record_1 = processedDataSource[rowIndex];
+                var recordKey_1 = getRowKey(record_1, rowIndex);
+                var checkboxProps = ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps) === null || _a === void 0 ? void 0 : _a.call(rowSelection, record_1)) || {};
+                if (!checkboxProps.disabled) {
+                    var isSelected = state.selectedRowKeys.includes(recordKey_1);
+                    var newSelectedKeys_1 = isSelected
+                        ? state.selectedRowKeys.filter(function (key) { return key !== recordKey_1; })
+                        : __spreadArray(__spreadArray([], state.selectedRowKeys, true), [recordKey_1], false);
+                    setState(function (prev) { return (__assign(__assign({}, prev), { selectedRowKeys: newSelectedKeys_1 })); });
+                    var newSelectedRows = processedDataSource.filter(function (r, i) {
+                        return newSelectedKeys_1.includes(getRowKey(r, i));
+                    });
+                    (_b = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.onChange) === null || _b === void 0 ? void 0 : _b.call(rowSelection, newSelectedKeys_1, newSelectedRows);
+                }
+                return;
+            }
+        }
+        var record = processedDataSource[rowIndex];
+        onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(record, rowIndex);
+    });
+    // Canvas 鼠标按下事件
+    var handleCanvasMouseDown = useMemoizedFn(function (e) {
+        var _a, _b;
+        // 忽略右键点击，避免影响框选
+        if (e.button === 2)
+            return;
+        var canvas = e.currentTarget;
+        var rect = canvas.getBoundingClientRect();
+        var x = e.clientX - rect.left;
+        var y = e.clientY - rect.top;
+        // 检查是否点击了垂直滚动条
+        if (needVerticalScrollbar &&
+            x >= containerWidth - scrollbarSize &&
+            y >= headerHeight &&
+            y <
+                (needHorizontalScrollbar
+                    ? containerHeight - scrollbarSize
+                    : containerHeight)) {
+            var scrollbarRelativeY = y - headerHeight;
+            var scrollbarTop = verticalScrollbarTop;
+            // 点击滚动条滑块
+            if (scrollbarRelativeY >= scrollbarTop &&
+                scrollbarRelativeY <= scrollbarTop + verticalScrollbarHeight) {
+                setScrollState(function (prev) { return (__assign(__assign({}, prev), { isDraggingVertical: true, dragStartY: y, dragStartScrollTop: prev.scrollTop })); });
+            }
+            else {
+                // 点击滚动条轨道
+                var clickRatio = scrollbarRelativeY / dataAreaHeight;
+                var newScrollTop_1 = Math.max(0, Math.min(maxScrollTop, clickRatio * (totalHeight - headerHeight)));
+                setScrollState(function (prev) { return (__assign(__assign({}, prev), { scrollTop: newScrollTop_1 })); });
+            }
+            return;
+        }
+        // 检查是否点击了水平滚动条
+        if (needHorizontalScrollbar &&
+            y >= containerHeight - scrollbarSize &&
+            x <
+                (needVerticalScrollbar
+                    ? containerWidth - scrollbarSize
+                    : containerWidth)) {
+            // 点击滚动条滑块
+            if (x >= horizontalScrollbarLeft &&
+                x <= horizontalScrollbarLeft + horizontalScrollbarWidth) {
+                setScrollState(function (prev) { return (__assign(__assign({}, prev), { isDraggingHorizontal: true, dragStartX: x, dragStartScrollLeft: prev.scrollLeft })); });
+            }
+            else {
+                // 点击滚动条轨道
+                var clickRatio = x /
+                    (needVerticalScrollbar
+                        ? containerWidth - scrollbarSize
+                        : containerWidth);
+                var newScrollLeft_1 = Math.max(0, Math.min(maxScrollLeft, clickRatio * totalWidth - containerWidth / 2));
+                setScrollState(function (prev) { return (__assign(__assign({}, prev), { scrollLeft: newScrollLeft_1 })); });
+            }
+            return;
+        }
+        // 检查是否点击了列宽调整手柄
+        if (checkResizeHandle) {
+            var resizeColumnIndex = checkResizeHandle(x, y);
+            if (resizeColumnIndex !== null && startResize) {
+                startResize(resizeColumnIndex, x);
+                return;
+            }
+        }
+        // 点击表头
+        if (y < headerHeight) {
+            // 先检查是否点击了功能区域（排序、筛选、选择框）
+            var isClickOnHeaderFunction = false;
+            for (var _i = 0, columnRenderInfos_2 = columnRenderInfos; _i < columnRenderInfos_2.length; _i++) {
+                var info = columnRenderInfos_2[_i];
+                var column = info.column, fixed = info.fixed, fixedLeft = info.fixedLeft, width = info.width;
+                var drawX = fixed ? fixedLeft : info.x - scrollState.scrollLeft;
+                if (x >= drawX && x < drawX + width) {
+                    // 点击选择框列
+                    if (column.key === "__selection__") {
+                        isClickOnHeaderFunction = true;
+                        break;
+                    }
+                    // 检查是否点击图标区域
+                    var iconArea = calculateIconArea(column, width);
+                    var relativeX = x - drawX;
+                    if (isClickInIconArea(relativeX, iconArea, "filter") ||
+                        isClickInIconArea(relativeX, iconArea, "sort")) {
+                        isClickOnHeaderFunction = true;
+                        break;
+                    }
+                    break;
+                }
+            }
+            if (isClickOnHeaderFunction) {
+                // 点击了功能区域，执行原有的表头点击逻辑
+                handleHeaderClick(x, y);
+            }
+            else {
+                // 点击了表头的非功能区域，启动框选
+                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) {
+                        if (!e.shiftKey) {
+                            startSelection(cell);
+                        }
+                        else if (state.cellSelection) {
+                            extendSelection(cell);
+                        }
+                    }
+                }
+            }
+        }
+        else {
+            // 检查是否点击了badge
+            var cell = getCellFromPosition(x, y);
+            if (cell) {
+                var badgeClicked = checkBadgeClick(x, y, cell, e.clientX, e.clientY);
+                if (badgeClicked) {
+                    // badge被点击，已处理，不继续其他逻辑
+                    return;
+                }
+            }
+            // 检查是否点击了选择框列，如果是，则不启用框选
+            var isSelectionColumn = cell && ((_b = columnRenderInfos[cell.col]) === null || _b === void 0 ? void 0 : _b.column.key) === "__selection__";
+            if (cell && !e.shiftKey && !isSelectionColumn) {
+                startSelection(cell);
+            }
+            else if (cell &&
+                e.shiftKey &&
+                state.cellSelection &&
+                !isSelectionColumn) {
+                extendSelection(cell);
+            }
+            else if (!isSelectionColumn) {
+                handleRowClick(x, y);
+            }
+            else {
+                // 如果点击的是选择框列，直接处理行点击（勾选逻辑）
+                handleRowClick(x, y);
+            }
+        }
+    });
+    // 处理垂直滚动条拖拽
+    var handleVerticalScrollDrag = useMemoizedFn(function (deltaY) {
+        var newScrollTop = calculateScrollPosition(deltaY, scrollState.dragStartScrollTop, maxScrollTop, totalHeight - headerHeight, scrollState.dragStartY, dataAreaHeight - verticalScrollbarHeight);
+        setScrollState(function (prev) { return (__assign(__assign({}, prev), { scrollTop: newScrollTop })); });
+    });
+    // 处理水平滚动条拖拽
+    var handleHorizontalScrollDrag = useMemoizedFn(function (deltaX) {
+        var scrollableWidth = needVerticalScrollbar
+            ? containerWidth - scrollbarSize - horizontalScrollbarWidth
+            : containerWidth - horizontalScrollbarWidth;
+        var newScrollLeft = calculateScrollPosition(deltaX, scrollState.dragStartScrollLeft, maxScrollLeft, totalWidth, scrollState.dragStartX, scrollableWidth);
+        setScrollState(function (prev) { return (__assign(__assign({}, prev), { scrollLeft: newScrollLeft })); });
+    });
+    // Canvas 鼠标移动事件
+    var handleCanvasMouseMove = useMemoizedFn(function (e) {
+        var _a;
+        var canvas = e.currentTarget;
+        var rect = canvas.getBoundingClientRect();
+        var x = e.clientX - rect.left;
+        var y = e.clientY - rect.top;
+        // 处理列宽调整拖拽
+        if ((resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing) && updateResize) {
+            canvas.style.cursor = "col-resize";
+            updateResize(x);
+            return;
+        }
+        // 处理垂直滚动条拖拽
+        if (scrollState.isDraggingVertical) {
+            canvas.style.cursor = "grabbing";
+            handleVerticalScrollDrag(y - scrollState.dragStartY);
+            return;
+        }
+        // 处理水平滚动条拖拽
+        if (scrollState.isDraggingHorizontal) {
+            canvas.style.cursor = "grabbing";
+            handleHorizontalScrollDrag(x - scrollState.dragStartX);
+            return;
+        }
+        // 处理框选
+        if (state.isSelecting) {
+            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;
+        }
+        // 检测列宽调整手柄hover状态
+        if (checkResizeHandle && setHoverResizeColumn) {
+            var resizeColumnIndex = checkResizeHandle(x, y);
+            setHoverResizeColumn(resizeColumnIndex);
+            // 如果鼠标在调整手柄上，改变鼠标样式
+            if (resizeColumnIndex !== null) {
+                canvas.style.cursor = "col-resize";
+                return; // 优先处理列宽调整
+            }
+        }
+        // 检测鼠标是否悬浮在排序/过滤图标上
+        var isHoveringHeaderIcon = false;
+        if (y < headerHeight) {
+            for (var _i = 0, columnRenderInfos_3 = columnRenderInfos; _i < columnRenderInfos_3.length; _i++) {
+                var info = columnRenderInfos_3[_i];
+                var column = info.column, fixed = info.fixed, fixedLeft = info.fixedLeft, width = info.width;
+                var drawX = fixed ? fixedLeft : info.x - scrollState.scrollLeft;
+                if (x >= drawX && x < drawX + width) {
+                    var iconArea = calculateIconArea(column, width);
+                    var relativeX = x - drawX;
+                    // 检查是否在图标区域内
+                    if (isClickInIconArea(relativeX, iconArea, "filter") ||
+                        isClickInIconArea(relativeX, iconArea, "sort")) {
+                        isHoveringHeaderIcon = true;
+                        break;
+                    }
+                    break;
+                }
+            }
+        }
+        // 根据检测结果设置鼠标样式
+        canvas.style.cursor = isHoveringHeaderIcon ? "pointer" : "default";
+        // Hover 行高亮 & Tooltip
+        if (y > headerHeight &&
+            y <
+                (needHorizontalScrollbar
+                    ? containerHeight - scrollbarSize
+                    : containerHeight)) {
+            var adjustedY = y + scrollState.scrollTop - headerHeight;
+            var rowIndex_1 = Math.floor(adjustedY / rowHeight);
+            if (rowIndex_1 >= 0 && rowIndex_1 < processedDataSource.length) {
+                setState(function (prev) {
+                    if (prev.hoverRowIndex !== rowIndex_1) {
+                        return __assign(__assign({}, prev), { hoverRowIndex: rowIndex_1 });
+                    }
+                    return prev;
+                });
+                // 检测tooltip
+                var cell_1 = getCellFromPosition(x, y);
+                if (cell_1 && cell_1.row >= 0 && cell_1.col >= 0) {
+                    var columnInfo = columnRenderInfos[cell_1.col];
+                    if (columnInfo && columnInfo.column.key !== "__selection__") {
+                        var record = processedDataSource[cell_1.row];
+                        var column = columnInfo.column;
+                        // 检查是否有render函数返回自定义组件（这种情况不显示tooltip）
+                        var shouldShowTooltip = true;
+                        if (column.render) {
+                            var dataIndex = column.dataIndex || column.key;
+                            var cellValue = record[dataIndex];
+                            var rendered = column.render(cellValue, record, cell_1.row);
+                            if (typeof rendered !== "string" &&
+                                typeof rendered !== "number" &&
+                                rendered !== null &&
+                                rendered !== undefined) {
+                                shouldShowTooltip = false;
+                            }
+                        }
+                        if (shouldShowTooltip) {
+                            var dataIndex = column.dataIndex || column.key;
+                            var cellValue = record[dataIndex];
+                            var cellText_1 = extractCellText({
+                                cellValue: cellValue,
+                                record: record,
+                                rowIndex: cell_1.row,
+                                renderFn: column.render,
+                            });
+                            // 检查是否启用了ellipsis（默认为true）且文本被截断
+                            var ellipsis = column.ellipsis !== false;
+                            if (ellipsis && cellText_1) {
+                                // 创建临时canvas来测量文本
+                                var tempCanvas = document.createElement("canvas");
+                                var tempCtx = tempCanvas.getContext("2d");
+                                if (tempCtx) {
+                                    tempCtx.font = "".concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
+                                    var maxWidth = columnInfo.width - 32;
+                                    var isTruncated = isTextTruncated(tempCtx, cellText_1, maxWidth);
+                                    if (isTruncated) {
+                                        // 显示tooltip
+                                        setState(function (prev) { return (__assign(__assign({}, prev), { tooltip: {
+                                                visible: true,
+                                                content: cellText_1,
+                                                position: { x: e.clientX + 10, y: e.clientY + 10 },
+                                                cellInfo: { rowIndex: cell_1.row, colIndex: cell_1.col },
+                                            } })); });
+                                        return;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+                // 如果到这里，说明不需要显示tooltip，隐藏它
+                setState(function (prev) {
+                    if (prev.tooltip.visible) {
+                        return __assign(__assign({}, prev), { tooltip: {
+                                visible: false,
+                                content: "",
+                                position: { x: 0, y: 0 },
+                                cellInfo: null,
+                            } });
+                    }
+                    return prev;
+                });
+            }
+        }
+        else {
+            setState(function (prev) {
+                var updates = {};
+                if (prev.hoverRowIndex !== null) {
+                    updates.hoverRowIndex = null;
+                }
+                if (prev.tooltip.visible) {
+                    updates.tooltip = {
+                        visible: false,
+                        content: "",
+                        position: { x: 0, y: 0 },
+                        cellInfo: null,
+                    };
+                }
+                if (Object.keys(updates).length > 0) {
+                    return __assign(__assign({}, prev), updates);
+                }
+                return prev;
+            });
+        }
+    });
+    // Canvas 鼠标抬起事件
+    var handleCanvasMouseUp = useMemoizedFn(function () {
+        // 结束列宽调整
+        if ((resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing) && endResize) {
+            endResize();
+        }
+        setScrollState(function (prev) { return (__assign(__assign({}, prev), { isDraggingVertical: false, isDraggingHorizontal: false })); });
+        // 结束框选
+        if (state.isSelecting) {
+            setState(function (prev) { return (__assign(__assign({}, prev), { isSelecting: false })); });
+        }
+    });
+    // 检查目标元素是否是Canvas内部渲染的元素
+    var isCanvasInternalElement = useMemoizedFn(function (element) {
+        var _a;
+        // 严格类型检查
+        if (!element || !(element instanceof Node)) {
+            return false;
+        }
+        // 获取Canvas容器
+        var canvasContainer = (_a = canvasRef.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+        if (!canvasContainer)
+            return false;
+        // Canvas内部渲染的覆盖层元素选择器
+        var canvasInternalSelectors = [
+            ".canvas-table-header-overlay",
+            ".canvas-table-cell-overlay",
+            ".canvas-table-cell-content",
+            ".canvas-table-filter-popover",
+            ".canvas-table-tooltip",
+            ".canvas-table-badge-popover",
+            ".canvas-table-menu",
+            ".canvas-table--exit-fullscreen",
+            ".canvas-table-empty",
+            ".react-contexify",
+            ".react-contexify__item", // 菜单项
+        ];
+        // Antd组件选择器（这些可能渲染到body中）
+        var antdSelectors = [
+            ".ant-select-dropdown",
+            ".ant-checkbox",
+            ".ant-input",
+            ".ant-btn",
+            ".ant-tabs",
+            ".ant-tab-pane",
+            ".ant-checkbox-wrapper", // 复选框容器
+        ];
+        try {
+            // 检查是否在Canvas容器内
+            if (!canvasContainer.contains(element)) {
+                return false;
+            }
+            // 合并所有选择器进行检查
+            var allSelectors = __spreadArray(__spreadArray([], canvasInternalSelectors, true), antdSelectors, true);
+            // 检查元素本身或其父元素是否匹配选择器
+            var currentElement = element;
+            while (currentElement &&
+                currentElement instanceof Node &&
+                canvasContainer.contains(currentElement)) {
+                // 确保 currentElement 是 Element 类型才调用 matches
+                if (currentElement instanceof Element) {
+                    for (var _i = 0, allSelectors_1 = allSelectors; _i < allSelectors_1.length; _i++) {
+                        var selector = allSelectors_1[_i];
+                        try {
+                            if (currentElement.matches(selector)) {
+                                return true;
+                            }
+                        }
+                        catch (e) {
+                            // 忽略无效选择器错误
+                        }
+                    }
+                }
+                currentElement = currentElement.parentElement;
+            }
+        }
+        catch (e) {
+            // 如果出现任何错误，返回false以确保稳定性
+            console.warn("Error in isCanvasInternalElement:", e);
+            return false;
+        }
+        return false;
+    });
+    // Canvas 鼠标离开事件
+    var handleCanvasMouseLeave = useMemoizedFn(function (e) {
+        var canvas = e.currentTarget;
+        // 如果正在拖拽滚动条或调整列宽，不做任何处理
+        // 让document级别的监听器继续处理，直到mouseup
+        if (scrollState.isDraggingVertical ||
+            scrollState.isDraggingHorizontal ||
+            (resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing)) {
+            return;
+        }
+        // 检查鼠标移动的目标元素
+        var relatedTarget = e.relatedTarget;
+        // 如果鼠标移动到Canvas内部渲染的元素，不停止框选
+        if (isCanvasInternalElement(relatedTarget)) {
+            return;
+        }
+        // 重置光标样式
+        canvas.style.cursor = "default";
+        // 清理状态
+        setState(function (prev) {
+            var updates = {};
+            // 结束框选
+            if (prev.isSelecting) {
+                updates.isSelecting = false;
+            }
+            // 清理 hover
+            if (prev.hoverRowIndex !== null) {
+                updates.hoverRowIndex = null;
+            }
+            // 清理 tooltip
+            if (prev.tooltip.visible) {
+                updates.tooltip = {
+                    visible: false,
+                    content: "",
+                    position: { x: 0, y: 0 },
+                    cellInfo: null,
+                };
+            }
+            if (Object.keys(updates).length > 0) {
+                return __assign(__assign({}, prev), updates);
+            }
+            return prev;
+        });
+    });
+    // Canvas 右键菜单事件
+    var handleCanvasContextMenu = useMemoizedFn(function (e) {
+        if (!menuShow)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+        // 显示右键菜单
+        menuShow({ event: e });
+    });
+    // 在document上监听拖拽事件，以支持鼠标移出canvas后继续拖拽
+    useEffect(function () {
+        var isDragging = scrollState.isDraggingVertical ||
+            scrollState.isDraggingHorizontal ||
+            (resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing);
+        if (!isDragging)
+            return;
+        var handleDocumentMouseMove = function (e) {
+            // 获取当前实例的canvas
+            var canvas = canvasRef.current;
+            if (!canvas)
+                return;
+            var rect = canvas.getBoundingClientRect();
+            var x = e.clientX - rect.left;
+            var y = e.clientY - rect.top;
+            // 处理列宽调整拖拽
+            if ((resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing) && updateResize) {
+                updateResize(x);
+                return;
+            }
+            // 处理垂直滚动条拖拽
+            if (scrollState.isDraggingVertical) {
+                handleVerticalScrollDrag(y - scrollState.dragStartY);
+                return;
+            }
+            // 处理水平滚动条拖拽
+            if (scrollState.isDraggingHorizontal) {
+                handleHorizontalScrollDrag(x - scrollState.dragStartX);
+            }
+        };
+        var handleDocumentMouseUp = function () {
+            // 结束列宽调整
+            if ((resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing) && endResize) {
+                endResize();
+            }
+            setScrollState(function (prev) { return (__assign(__assign({}, prev), { isDraggingVertical: false, isDraggingHorizontal: false })); });
+        };
+        document.addEventListener("mousemove", handleDocumentMouseMove);
+        document.addEventListener("mouseup", handleDocumentMouseUp);
+        return function () {
+            document.removeEventListener("mousemove", handleDocumentMouseMove);
+            document.removeEventListener("mouseup", handleDocumentMouseUp);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        scrollState.isDraggingVertical,
+        scrollState.isDraggingHorizontal,
+        resizeState === null || resizeState === void 0 ? void 0 : resizeState.isResizing,
+        updateResize,
+        endResize,
+        handleVerticalScrollDrag,
+        handleHorizontalScrollDrag,
+        canvasRef,
+    ]);
+    return {
+        handleCanvasMouseDown: handleCanvasMouseDown,
+        handleCanvasMouseMove: handleCanvasMouseMove,
+        handleCanvasMouseUp: handleCanvasMouseUp,
+        handleCanvasMouseLeave: handleCanvasMouseLeave,
+        handleCanvasContextMenu: handleCanvasContextMenu,
+        handleHeaderClick: handleHeaderClick,
+        handleRowClick: handleRowClick,
+        getCellFromPosition: getCellFromPosition,
+    };
+};
+
+export { useTableInteraction };