zmdms-webui 3.2.6 → 3.2.7

package/dist/es/canvastable/components/HeaderOverlay.js

@@ -3,6 +3,7 @@ import { jsx, Fragment } from 'react/jsx-runtime';
 
 var HeaderOverlay = function (_a) {
     var overlays = _a.overlays;
+    var horizontalPadding = 16;
     return (jsx(Fragment, { children: overlays.map(function (overlay) { return (jsx("div", __assign({ className: "canvas-table-header-overlay", style: {
                 position: "absolute",
                 left: overlay.x,
@@ -12,11 +13,17 @@ var HeaderOverlay = function (_a) {
                 pointerEvents: "none",
                 display: "flex",
                 alignItems: "center",
-                paddingLeft: "16px",
-                paddingRight: "16px",
+                paddingLeft: "".concat(horizontalPadding, "px"),
+                paddingRight: "".concat(horizontalPadding, "px"),
                 boxSizing: "border-box",
                 overflow: "hidden",
-            } }, { children: jsx("div", __assign({ style: { pointerEvents: "auto" } }, { children: overlay.content })) }), overlay.columnKey)); }) }));
+                zIndex: overlay.isFixed ? 10 : 1,
+            } }, { children: jsx("div", __assign({ style: {
+                    position: "absolute",
+                    left: -overlay.offsetLeft + horizontalPadding,
+                    width: Math.max(overlay.originalWidth - horizontalPadding * 2, 0),
+                    pointerEvents: "auto",
+                } }, { children: overlay.content })) }), overlay.columnKey)); }) }));
 };
 
 export { HeaderOverlay as default };

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

@@ -10,33 +10,16 @@ import '../../node_modules/exceljs/dist/exceljs.min.js';
 import 'dayjs';
 
 /**
- * 覆盖层管理 Hook - 统一管理所有覆盖层相关逻辑
- *
- * 包含功能：
- * 1. 单元格覆盖层管理（useTableCellOverlay）
- * 2. 表头覆盖层管理（useHeaderOverlay）
- *
- * 覆盖层用于在 Canvas 表格上方渲染自定义的 DOM 内容，支持用户交互
- */
-// ==================== Hook 1: 单元格覆盖层管理 ====================
-/**
- * 单元格覆盖层管理 Hook
- *
- * 功能：
- * - 计算可见单元格的位置信息
- * - 处理边界裁剪（上下左右）
- * - 处理fixed列的遮挡
- * - 只渲染React元素类型的内容（字符串和数字在Canvas中直接绘制）
+ * 覆盖层管理 Hook
+ * 1. useTableCellOverlay: 单元格自定义 DOM 覆盖层
+ * 2. useHeaderOverlay: 表头 ReactNode 覆盖层
  */
 var useTableCellOverlay = function (params) {
     var processedDataSource = params.processedDataSource, columnRenderInfos = params.columnRenderInfos, scrollState = params.scrollState, containerWidth = params.containerWidth, containerHeight = params.containerHeight, headerHeight = params.headerHeight, rowHeight = params.rowHeight, needHorizontalScrollbar = params.needHorizontalScrollbar, needVerticalScrollbar = params.needVerticalScrollbar, scrollbarSize = params.scrollbarSize, fixedRowsCount = params.fixedRowsCount, fixedRowsConfig = params.fixedRowsConfig, _a = params.hasSummaryRow, hasSummaryRow = _a === void 0 ? false : _a, _b = params.summaryFixed, summaryFixed = _b === void 0 ? false : _b;
-    // 计算可见的单元格覆盖层信息
     var cellOverlays = useMemo(function () {
         var overlays = [];
-        // 计算固定行数量
         var fixedTopRowsCount = fixedRowsCount || (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || 0;
         var fixedBottomRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.bottomCount) || 0;
-        // 计算fixed列的右边界，用于裁剪非fixed列的覆盖层
         var fixedColumnsRightEdge = columnRenderInfos.reduce(function (maxEdge, info) {
             if (info.fixed) {
                 var rightEdge = info.fixedLeft + info.width;
@@ -44,18 +27,13 @@ var useTableCellOverlay = function (params) {
             }
             return maxEdge;
         }, 0);
-        // 计算有效容器尺寸
         var effectiveWidth = needVerticalScrollbar
             ? containerWidth - scrollbarSize
             : containerWidth;
-        // 计算可用高度，需要为固定合计行预留空间
         var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
         var effectiveHeight = (needHorizontalScrollbar
             ? containerHeight - scrollbarSize
             : containerHeight) - fixedSummaryHeight;
-        /**
-         * 通用的单元格覆盖层处理函数
-         */
         var processCell = function (rowIndex, y, isFixedRow) {
             if (isFixedRow === void 0) { isFixedRow = false; }
             var record = processedDataSource[rowIndex];
@@ -63,110 +41,88 @@ var useTableCellOverlay = function (params) {
                 return;
             columnRenderInfos.forEach(function (info, colIndex) {
                 var column = info.column, x = info.x, width = info.width, fixed = info.fixed, fixedLeft = info.fixedLeft;
-                // 跳过选择框列
                 if (column.key === "__selection__") {
                     return;
                 }
-                // 检查该列是否有 render 函数
                 if (!column.render) {
                     return;
                 }
-                // 跳过合计行的 render 函数处理
                 if (record[IS_SUMMARY]) {
                     return;
                 }
                 var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
-                // 跳过不在可视区域的列
                 if (!fixed && (drawX + width < 0 || drawX > effectiveWidth)) {
                     return;
                 }
-                // 对于非fixed列，检查是否被fixed列完全遮挡
                 if (!fixed &&
                     fixedColumnsRightEdge > 0 &&
                     drawX < fixedColumnsRightEdge) {
-                    // 如果完全被遮挡，跳过
                     if (drawX + width <= fixedColumnsRightEdge) {
                         return;
                     }
                 }
-                // 需要处理左右边界的裁剪
                 var effectiveCellWidth = width;
                 var effectiveDrawX = drawX;
-                var offsetLeft = 0; // 记录左侧被裁剪的宽度
+                var offsetLeft = 0;
                 if (!fixed) {
-                    // 处理左边界：如果单元格部分在左边界外
                     if (drawX < 0) {
-                        offsetLeft = -drawX; // 左侧被裁剪的宽度
-                        effectiveCellWidth = width + drawX; // 减少宽度
-                        effectiveDrawX = 0; // 从容器左边界开始绘制
+                        offsetLeft = -drawX;
+                        effectiveCellWidth = width + drawX;
+                        effectiveDrawX = 0;
                         if (effectiveCellWidth <= 0)
                             return;
                     }
-                    // 处理被fixed列遮挡的情况
                     if (fixedColumnsRightEdge > 0 &&
                         effectiveDrawX < fixedColumnsRightEdge) {
                         var overlap = fixedColumnsRightEdge - effectiveDrawX;
                         if (overlap < effectiveCellWidth) {
-                            offsetLeft += overlap; // 增加左侧裁剪量
-                            effectiveCellWidth -= overlap; // 减少宽度
-                            effectiveDrawX = fixedColumnsRightEdge; // 从fixed列右边界开始绘制
+                            offsetLeft += overlap;
+                            effectiveCellWidth -= overlap;
+                            effectiveDrawX = fixedColumnsRightEdge;
                         }
                     }
                 }
-                // 处理右边界：如果单元格部分在右边界外（fixed 和非 fixed 列都需要处理）
                 if (effectiveDrawX + effectiveCellWidth > effectiveWidth) {
                     effectiveCellWidth = effectiveWidth - effectiveDrawX;
                     if (effectiveCellWidth <= 0)
                         return;
                 }
-                // 获取单元格值
                 var dataIndex = column.dataIndex || column.key;
                 var cellValue = record[dataIndex];
-                // 调用 render 函数获取内容
                 var renderedContent = column.render(cellValue, record, rowIndex);
-                // 只有返回的不是字符串或数字时，才需要渲染到覆盖层
-                // 字符串和数字会在 Canvas 中直接绘制
                 if (typeof renderedContent !== "string" &&
                     typeof renderedContent !== "number" &&
                     renderedContent !== null &&
                     renderedContent !== undefined) {
-                    // 处理 y 轴的边界裁剪，类似于 x 轴的处理
                     var effectiveCellHeight = rowHeight;
                     var effectiveDrawY = y;
-                    var offsetTop = 0; // 记录上方被裁剪的高度
-                    // 处理上边界：根据行类型进行不同的边界检查
-                    var minTopY = headerHeight; // 默认最小Y为表头高度
+                    var offsetTop = 0;
+                    var minTopY = headerHeight;
                     if (!isFixedRow) {
-                        // 非固定行还需要避开固定顶部行区域
                         minTopY = headerHeight + fixedTopRowsHeight;
                     }
                     if (y < minTopY) {
-                        offsetTop = minTopY - y; // 上方被裁剪的高度
-                        effectiveCellHeight = rowHeight - offsetTop; // 减少高度
-                        effectiveDrawY = minTopY; // 从允许的最小Y开始绘制
+                        offsetTop = minTopY - y;
+                        effectiveCellHeight = rowHeight - offsetTop;
+                        effectiveDrawY = minTopY;
                         if (effectiveCellHeight <= 0)
                             return;
                     }
-                    // 处理下边界：根据行类型进行不同的边界检查
                     var maxBottomY = void 0;
                     if (isFixedRow) {
-                        // 固定行使用完整的容器高度（减去滚动条）
                         maxBottomY = needHorizontalScrollbar
                             ? containerHeight - scrollbarSize
                             : containerHeight;
                     }
                     else {
-                        // 非固定行需要严格避开所有固定行区域
                         var currentFixedBottomHeight = fixedBottomRowsCount * rowHeight;
                         var currentFixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
-                        // 计算可滚动区域的严格边界
                         var scrollableAreaBottom = containerHeight -
                             (needHorizontalScrollbar ? scrollbarSize : 0) -
                             currentFixedBottomHeight -
                             currentFixedSummaryHeight;
                         maxBottomY = Math.min(effectiveHeight, scrollableAreaBottom);
                     }
-                    // 如果单元格部分在底部边界外
                     if (effectiveDrawY + effectiveCellHeight > maxBottomY) {
                         effectiveCellHeight = maxBottomY - effectiveDrawY;
                         if (effectiveCellHeight <= 0)
@@ -193,58 +149,45 @@ var useTableCellOverlay = function (params) {
                 }
             });
         };
-        // 1. 处理固定顶部行
         if (fixedTopRowsCount > 0) {
             for (var i = 0; i < fixedTopRowsCount; i++) {
                 var y = headerHeight + i * rowHeight;
                 processCell(i, y, true);
             }
         }
-        // 2. 处理可滚动区域的行
         var fixedTopRowsHeight = fixedTopRowsCount * rowHeight;
         var fixedBottomRowsHeight = fixedBottomRowsCount * rowHeight;
-        // 计算可滚动数据区域的高度
         var scrollableAreaHeight = containerHeight -
             headerHeight -
             fixedTopRowsHeight -
             fixedBottomRowsHeight -
             fixedSummaryHeight -
             (needHorizontalScrollbar ? scrollbarSize : 0);
-        // 计算可见的滚动行范围
         var scrollStartRow = Math.floor(scrollState.scrollTop / rowHeight);
-        var scrollEndRow = Math.min(Math.ceil((scrollState.scrollTop + scrollableAreaHeight) / rowHeight), processedDataSource.length - fixedBottomRowsCount
-        // 注意：不再减去合计行数量，因为合计行的空间已在 scrollableAreaHeight 中考虑
-        );
-        // 调整行索引，从固定顶部行之后开始
+        var scrollEndRow = Math.min(Math.ceil((scrollState.scrollTop + scrollableAreaHeight) / rowHeight), processedDataSource.length - fixedBottomRowsCount);
         var adjustedStartRow = fixedTopRowsCount + scrollStartRow;
         var adjustedEndRow = fixedTopRowsCount + scrollEndRow;
         for (var rowIndex = adjustedStartRow; rowIndex < adjustedEndRow; rowIndex++) {
             if (rowIndex < 0 || rowIndex >= processedDataSource.length)
                 continue;
-            // 计算相对于滚动区域的位置
             var relativeRowIndex = rowIndex - fixedTopRowsCount;
             var y = headerHeight +
                 fixedTopRowsHeight +
                 relativeRowIndex * rowHeight -
                 scrollState.scrollTop;
-            // 检查是否在可见区域内，并确保不会与固定行重叠
             var minVisibleY = headerHeight + fixedTopRowsHeight;
             var maxVisibleY = minVisibleY + scrollableAreaHeight;
-            // 额外检查：确保不会延伸到固定底部行或固定合计行区域
             var maxAllowedY = containerHeight -
                 (needHorizontalScrollbar ? scrollbarSize : 0) -
                 fixedBottomRowsHeight -
                 fixedSummaryHeight;
-            // 可见性检查：允许部分可见的行（被固定行遮挡的情况）
             if (y + rowHeight <= minVisibleY ||
                 y >= maxVisibleY ||
-                y >= maxAllowedY // 只检查行顶部是否超出边界，允许底部被遮挡
-            ) {
+                y >= maxAllowedY) {
                 continue;
             }
             processCell(rowIndex, y, false);
         }
-        // 3. 处理固定底部行
         if (fixedBottomRowsCount > 0) {
             var bottomRowsStartIndex = processedDataSource.length -
                 fixedBottomRowsCount -
@@ -259,7 +202,6 @@ var useTableCellOverlay = function (params) {
                 processCell(rowIndex, y, true);
             }
         }
-        // 4. 处理固定合计行
         if (summaryFixed && hasSummaryRow) {
             var summaryRowIndex = processedDataSource.length - 1;
             var summaryY = containerHeight -
@@ -267,25 +209,22 @@ var useTableCellOverlay = function (params) {
                 rowHeight;
             processCell(summaryRowIndex, summaryY, true);
         }
-        // 排序覆盖层：优先级顺序 - 确保固定合计行有最高优先级
         return overlays.sort(function (a, b) {
-            // 计算优先级（数值越大优先级越高）
             var getPriority = function (overlay) {
-                // 检查是否是固定合计行（最后一行且固定合计行开启）
                 var isSummaryRow = summaryFixed &&
                     hasSummaryRow &&
                     overlay.rowIndex === processedDataSource.length - 1;
                 if (isSummaryRow && overlay.isFixed)
-                    return 6; // 固定合计行固定列（最高优先级）
+                    return 6;
                 if (isSummaryRow && !overlay.isFixed)
-                    return 5; // 固定合计行非固定列
+                    return 5;
                 if (overlay.isFixedRow && overlay.isFixed)
-                    return 4; // 其他固定行固定列
+                    return 4;
                 if (overlay.isFixedRow && !overlay.isFixed)
-                    return 3; // 其他固定行非固定列
+                    return 3;
                 if (!overlay.isFixedRow && overlay.isFixed)
-                    return 2; // 非固定行固定列
-                return 1; // 非固定行非固定列（最低优先级）
+                    return 2;
+                return 1;
             };
             return getPriority(a) - getPriority(b);
         });
@@ -310,15 +249,6 @@ var useTableCellOverlay = function (params) {
         cellOverlays: cellOverlays,
     };
 };
-// ==================== Hook 2: 表头覆盖层管理 ====================
-/**
- * 表头覆盖层管理 Hook
- *
- * 功能：
- * - 计算需要渲染为 React 组件的表头位置信息
- * - 只处理 title 为 React 元素的列
- * - 支持列宽调整时的临时宽度
- */
 var useHeaderOverlay = function (params) {
     var columnRenderInfos = params.columnRenderInfos, scrollLeft = params.scrollLeft, headerHeight = params.headerHeight, containerWidth = params.containerWidth, needVerticalScrollbar = params.needVerticalScrollbar, scrollbarSize = params.scrollbarSize, getColumnWidth = params.getColumnWidth;
     var headerOverlays = useMemo(function () {
@@ -326,26 +256,62 @@ var useHeaderOverlay = function (params) {
         var displayWidth = needVerticalScrollbar
             ? containerWidth - scrollbarSize
             : containerWidth;
+        var fixedColumnsRightEdge = columnRenderInfos.reduce(function (maxEdge, info, index) {
+            if (!info.fixed) {
+                return maxEdge;
+            }
+            var currentWidth = getColumnWidth ? getColumnWidth(index) : info.width;
+            return Math.max(maxEdge, info.fixedLeft + currentWidth);
+        }, 0);
         columnRenderInfos.forEach(function (info, index) {
             var column = info.column, x = info.x, fixed = info.fixed, fixedLeft = info.fixedLeft;
-            // 只处理 title 为 React 元素的列
             if (!isValidElement(column.title)) {
                 return;
             }
-            // 使用 getColumnWidth 获取列宽（考虑拖拽时的临时宽度）
             var width = getColumnWidth ? getColumnWidth(index) : info.width;
             var drawX = fixed ? fixedLeft : x - scrollLeft;
-            // 跳过不在可视区域的列
             if (!fixed && (drawX + width < 0 || drawX > displayWidth)) {
                 return;
             }
+            var effectiveWidth = width;
+            var effectiveDrawX = drawX;
+            var offsetLeft = 0;
+            if (!fixed) {
+                if (drawX < 0) {
+                    offsetLeft = -drawX;
+                    effectiveWidth = width + drawX;
+                    effectiveDrawX = 0;
+                    if (effectiveWidth <= 0) {
+                        return;
+                    }
+                }
+                if (fixedColumnsRightEdge > 0 &&
+                    effectiveDrawX < fixedColumnsRightEdge) {
+                    var overlap = fixedColumnsRightEdge - effectiveDrawX;
+                    if (overlap >= effectiveWidth) {
+                        return;
+                    }
+                    offsetLeft += overlap;
+                    effectiveWidth -= overlap;
+                    effectiveDrawX = fixedColumnsRightEdge;
+                }
+            }
+            if (effectiveDrawX + effectiveWidth > displayWidth) {
+                effectiveWidth = displayWidth - effectiveDrawX;
+                if (effectiveWidth <= 0) {
+                    return;
+                }
+            }
             overlays.push({
                 columnKey: column.key,
-                x: drawX,
+                x: effectiveDrawX,
                 y: 0,
-                width: width,
+                width: effectiveWidth,
                 height: headerHeight,
                 content: column.title,
+                isFixed: fixed || false,
+                offsetLeft: offsetLeft,
+                originalWidth: width,
             });
         });
         return overlays;

package/package.json

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