zmdms-webui 2.6.2 → 2.6.4

package/dist/es/canvastable/hooks/renderers/SelectionRenderer.js

@@ -0,0 +1,181 @@
+import { COLORS, SCROLLBAR_SIZE } from '../../utils/constants.js';
+import 'zmdms-utils';
+import 'dayjs';
+import '../../../_virtual/_tslib.js';
+
+/**
+ * 选择区域渲染�?
+ * 负责渲染单元格框选区�?
+ */
+var SelectionRenderer = /** @class */ (function () {
+    function SelectionRenderer() {
+        this.context = null;
+    }
+    SelectionRenderer.prototype.setContext = function (context) {
+        this.context = context;
+    };
+    /**
+     * 渲染单元格选择区域
+     */
+    SelectionRenderer.prototype.render = function () {
+        if (!this.context || !this.context.state.cellSelection)
+            return;
+        var _a = this.context, ctx = _a.ctx, state = _a.state, columnRenderInfos = _a.columnRenderInfos, processedDataSource = _a.processedDataSource, headerHeight = _a.headerHeight, rowHeight = _a.rowHeight, scrollState = _a.scrollState, displayWidth = _a.displayWidth, displayHeight = _a.displayHeight, needHorizontalScrollbar = _a.needHorizontalScrollbar, fixedRowsConfig = _a.fixedRowsConfig, fixedRowsCount = _a.fixedRowsCount, summaryFixed = _a.summaryFixed, hasSummaryRow = _a.hasSummaryRow, mergeCellMap = _a.mergeCellMap;
+        var _b = state.cellSelection, startRow = _b.startRow, endRow = _b.endRow, startCol = _b.startCol, endCol = _b.endCol;
+        // 计算选择区域的边�?
+        var minRow = Math.min(startRow, endRow);
+        var maxRow = Math.max(startRow, endRow);
+        var minCol = Math.min(startCol, endCol);
+        var maxCol = Math.max(startCol, endCol);
+        // 计算fixed列的右边�?
+        var fixedColumnsRightEdge = 0;
+        columnRenderInfos.forEach(function (info) {
+            if (info.fixed) {
+                var rightEdge = info.fixedLeft + info.width;
+                fixedColumnsRightEdge = Math.max(fixedColumnsRightEdge, rightEdge);
+            }
+        });
+        // 记录已绘制的合并单元�?
+        var drawnMergeCells = new Set();
+        // 记录选区的边界坐�?
+        var selectionTop = Infinity;
+        var selectionBottom = -Infinity;
+        var selectionLeft = Infinity;
+        var selectionRight = -Infinity;
+        // 计算固定行的范围
+        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;
+        var bottomRowsStartIndex = processedDataSource.length -
+            fixedBottomRowsCount -
+            (summaryFixed && hasSummaryRow ? 1 : 0);
+        var summaryRowIndex = hasSummaryRow
+            ? processedDataSource.length - 1
+            : -1;
+        // 绘制选中的单元格背景
+        for (var row = minRow; row <= maxRow; row++) {
+            var y = void 0;
+            var cellHeight = void 0;
+            var isFixedRow = false;
+            if (row === -1) {
+                // 表头�?
+                y = 0;
+                cellHeight = headerHeight;
+            }
+            else if (row < fixedTopRowsCount) {
+                // 固定顶部�?
+                y = headerHeight + row * rowHeight;
+                cellHeight = rowHeight;
+                isFixedRow = true;
+            }
+            else if (fixedBottomRowsCount > 0 &&
+                row >= bottomRowsStartIndex &&
+                row < bottomRowsStartIndex + fixedBottomRowsCount) {
+                // 固定底部�?
+                var relativeIndex = row - bottomRowsStartIndex;
+                var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
+                y =
+                    displayHeight -
+                        (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
+                        fixedSummaryHeight -
+                        fixedBottomRowsCount * rowHeight +
+                        relativeIndex * rowHeight;
+                cellHeight = rowHeight;
+                isFixedRow = true;
+            }
+            else if (summaryFixed && row === summaryRowIndex) {
+                // 固定合计�?
+                var summaryRowY = displayHeight -
+                    (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
+                    rowHeight;
+                y = summaryRowY;
+                cellHeight = rowHeight;
+                isFixedRow = true;
+            }
+            else {
+                // 普通数据行
+                var adjustedRow = row - fixedTopRowsCount;
+                y =
+                    headerHeight +
+                        fixedTopRowsCount * rowHeight +
+                        adjustedRow * rowHeight -
+                        scrollState.scrollTop;
+                cellHeight = rowHeight;
+                // 数据行的可见性检�?
+                if (y + cellHeight < headerHeight + fixedTopRowsCount * rowHeight ||
+                    y > displayHeight)
+                    continue;
+            }
+            for (var col = minCol; col <= maxCol; col++) {
+                var columnInfo = columnRenderInfos[col];
+                if (!columnInfo)
+                    continue;
+                // 表头行不处理合并单元�?
+                if (row !== -1) {
+                    var mergeCellKey = "".concat(row, "-").concat(col);
+                    var mergeInfo = mergeCellMap === null || mergeCellMap === void 0 ? void 0 : mergeCellMap.get(mergeCellKey);
+                    // 如果是被合并的单元格，跳�?
+                    if (mergeInfo && mergeInfo.skip) {
+                        continue;
+                    }
+                    // 如果是合并单元格的主单元格，检查是否已绘制
+                    if (mergeInfo && !mergeInfo.skip) {
+                        var mergeKey = "".concat(mergeInfo.rowIndex, "-").concat(mergeInfo.colIndex);
+                        if (drawnMergeCells.has(mergeKey)) {
+                            continue;
+                        }
+                        drawnMergeCells.add(mergeKey);
+                    }
+                    // 计算单元格高度（考虑合并�?
+                    if (mergeInfo && mergeInfo.rowSpan > 1) {
+                        cellHeight = rowHeight * mergeInfo.rowSpan;
+                    }
+                }
+                var x = columnInfo.x, width = columnInfo.width, fixed = columnInfo.fixed, fixedLeft = columnInfo.fixedLeft;
+                var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
+                var drawWidth = width;
+                if (!fixed && (drawX + width < 0 || drawX > displayWidth))
+                    continue;
+                // 对于非fixed列，需要裁剪掉被fixed列遮挡的部分
+                if (!fixed && drawX < fixedColumnsRightEdge) {
+                    var overlap = fixedColumnsRightEdge - drawX;
+                    if (overlap >= width) {
+                        continue;
+                    }
+                    drawX = fixedColumnsRightEdge;
+                    drawWidth = width - overlap;
+                }
+                // 绘制选中背景
+                ctx.fillStyle = COLORS.selectionBg;
+                var clipY = void 0;
+                var clipHeight = void 0;
+                if (row === -1 || isFixedRow) {
+                    clipY = y;
+                    clipHeight = cellHeight;
+                }
+                else {
+                    var minVisibleY = headerHeight + fixedTopRowsCount * rowHeight;
+                    clipY = Math.max(y, minVisibleY);
+                    var actualBottom = y + cellHeight;
+                    clipHeight = Math.max(0, Math.min(actualBottom - clipY, displayHeight - clipY));
+                }
+                if (clipHeight > 0) {
+                    ctx.fillRect(drawX, clipY, drawWidth, clipHeight);
+                    // 更新选区边界
+                    selectionTop = Math.min(selectionTop, clipY);
+                    selectionBottom = Math.max(selectionBottom, clipY + clipHeight);
+                    selectionLeft = Math.min(selectionLeft, drawX);
+                    selectionRight = Math.max(selectionRight, drawX + drawWidth);
+                }
+            }
+        }
+        // 绘制整个选区的外边框
+        if (selectionLeft !== Infinity && selectionTop !== Infinity) {
+            ctx.strokeStyle = COLORS.primary;
+            ctx.lineWidth = 2;
+            ctx.strokeRect(selectionLeft, selectionTop, selectionRight - selectionLeft, selectionBottom - selectionTop);
+        }
+    };
+    return SelectionRenderer;
+}());
+
+export { SelectionRenderer };

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

@@ -0,0 +1,185 @@
+import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useMemoizedFn } from 'ahooks';
+
+/**
+ * 树形展开 Hook
+ */
+var useExpandable = function (params) {
+    var dataSource = params.dataSource, expandable = params.expandable, rowKey = params.rowKey;
+    // 展开状态管理
+    var _a = useState(function () {
+        if (!expandable)
+            return new Set();
+        // 优先级：expandedRowKeys > defaultExpandedRowKeys > defaultExpandAllRows
+        if (expandable.expandedRowKeys && expandable.expandedRowKeys.length > 0) {
+            return new Set(expandable.expandedRowKeys);
+        }
+        if (expandable.defaultExpandedRowKeys) {
+            return new Set(expandable.defaultExpandedRowKeys);
+        }
+        if (expandable.defaultExpandAllRows) {
+            // 延迟到数据加载后执行
+            return new Set();
+        }
+        return new Set();
+    }), expandedKeys = _a[0], setExpandedKeys = _a[1];
+    // 获取行的key
+    var getRowKey = useCallback(function (record, index) {
+        var _a;
+        if (typeof rowKey === "function") {
+            return String(rowKey(record));
+        }
+        return String((_a = record[rowKey]) !== null && _a !== void 0 ? _a : index);
+    }, [rowKey]);
+    // 子节点字段名
+    var childrenColumnName = useMemo(function () {
+        return (expandable === null || expandable === void 0 ? void 0 : expandable.childrenColumnName) || "children";
+    }, [expandable]);
+    // 默认展开所有行的处理
+    useEffect(function () {
+        if ((expandable === null || expandable === void 0 ? void 0 : expandable.defaultExpandAllRows) &&
+            expandedKeys.size === 0 &&
+            dataSource.length > 0) {
+            // 递归获取所有有子节点的key
+            var collectExpandableKeys_1 = function (records, level) {
+                if (level === void 0) { level = 0; }
+                var keys = [];
+                records.forEach(function (record, index) {
+                    var key = getRowKey(record, index);
+                    var children = record[childrenColumnName];
+                    if (children && children.length > 0) {
+                        keys.push(key);
+                        // 递归展开子节点
+                        keys.push.apply(keys, collectExpandableKeys_1(children, level + 1));
+                    }
+                });
+                return keys;
+            };
+            var allKeys = collectExpandableKeys_1(dataSource);
+            setExpandedKeys(new Set(allKeys));
+        }
+    }, [
+        expandable === null || expandable === void 0 ? void 0 : expandable.defaultExpandAllRows,
+        dataSource,
+        expandedKeys.size,
+        getRowKey,
+        childrenColumnName,
+    ]);
+    // 同步外部传入的 expandedRowKeys
+    useEffect(function () {
+        if (expandable === null || expandable === void 0 ? void 0 : expandable.expandedRowKeys) {
+            setExpandedKeys(new Set(expandable.expandedRowKeys));
+        }
+    }, [expandable === null || expandable === void 0 ? void 0 : expandable.expandedRowKeys]);
+    /**
+     * 展平树形数据
+     */
+    var flattenedData = useMemo(function () {
+        if (!expandable) {
+            // 如果没有展开配置，直接返回原数据
+            return dataSource.map(function (record, index) { return ({
+                record: record,
+                level: 0,
+                hasChildren: false,
+                isExpanded: false,
+                key: getRowKey(record, index),
+                indexInParent: index + 1,
+            }); });
+        }
+        var result = [];
+        var flatten = function (records, level, parentKey) {
+            records.forEach(function (record, index) {
+                var key = getRowKey(record, index);
+                var children = record[childrenColumnName];
+                result.push({
+                    record: record,
+                    level: level,
+                    hasChildren: !!(children && children.length > 0),
+                    isExpanded: expandedKeys.has(key),
+                    parentKey: parentKey,
+                    key: key,
+                    indexInParent: index + 1, // 在当前层级的序号（从1开始）
+                });
+                // 如果该节点已展开，且有子节点，则递归展开子节点
+                var node = result[result.length - 1];
+                if (node.hasChildren && node.isExpanded && children) {
+                    flatten(children, level + 1, key);
+                }
+            });
+        };
+        flatten(dataSource, 0);
+        return result;
+    }, [dataSource, expandable, expandedKeys, getRowKey, childrenColumnName]);
+    /**
+     * 切换指定行的展开状态
+     */
+    var toggleExpand = useMemoizedFn(function (key) {
+        var newExpandedKeys = new Set(expandedKeys);
+        if (newExpandedKeys.has(key)) {
+            newExpandedKeys.delete(key);
+        }
+        else {
+            newExpandedKeys.add(key);
+        }
+        setExpandedKeys(newExpandedKeys);
+        // 调用外部回调
+        if (expandable === null || expandable === void 0 ? void 0 : expandable.onExpandedRowsChange) {
+            // 找到对应的record
+            var findRecordByKey_1 = function (records, targetKey) {
+                for (var _i = 0, records_1 = records; _i < records_1.length; _i++) {
+                    var record_1 = records_1[_i];
+                    var k = getRowKey(record_1, 0);
+                    if (k === targetKey) {
+                        return record_1;
+                    }
+                    var children = record_1[childrenColumnName];
+                    if (children) {
+                        var found = findRecordByKey_1(children, targetKey);
+                        if (found)
+                            return found;
+                    }
+                }
+                return null;
+            };
+            var record = findRecordByKey_1(dataSource, key);
+            if (record) {
+                var isExpanded = !expandedKeys.has(key);
+                expandable.onExpandedRowsChange(Array.from(newExpandedKeys), record, isExpanded ? "expand" : "collapse");
+            }
+        }
+    });
+    /**
+     * 展开指定行
+     */
+    var expandRow = useMemoizedFn(function (key) {
+        var newExpandedKeys = new Set(expandedKeys);
+        newExpandedKeys.add(key);
+        setExpandedKeys(newExpandedKeys);
+    });
+    /**
+     * 收起指定行
+     */
+    var collapseRow = useMemoizedFn(function (key) {
+        var newExpandedKeys = new Set(expandedKeys);
+        newExpandedKeys.delete(key);
+        setExpandedKeys(newExpandedKeys);
+    });
+    /**
+     * 设置展开状态
+     */
+    var setExpandedRowKeys = useMemoizedFn(function (keys) {
+        setExpandedKeys(new Set(keys));
+    });
+    return {
+        expandedKeys: expandedKeys,
+        flattenedData: flattenedData,
+        toggleExpand: toggleExpand,
+        expandRow: expandRow,
+        collapseRow: collapseRow,
+        setExpandedRowKeys: setExpandedRowKeys,
+        // 是否开启了展开功能
+        hasExpandable: !!expandable,
+    };
+};
+
+export { useExpandable };

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

@@ -14,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, 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 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, flattenedData = params.flattenedData, expandable = params.expandable, 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, onExpand = params.onExpand, 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;
@@ -398,6 +398,42 @@ var useTableInteraction = function (params) {
                     return;
                 }
             }
+            // 检查是否点击了展开图标（树形展开功能）
+            if (expandable &&
+                flattenedData &&
+                cell &&
+                cell.col === (expandable.expandIconColumnIndex || 0)) {
+                var flattenedRow = flattenedData[cell.row];
+                if (flattenedRow && flattenedRow.hasChildren) {
+                    var level = flattenedRow.level;
+                    // 计算展开图标的位置
+                    var columnInfo = columnRenderInfos[cell.col];
+                    if (columnInfo) {
+                        var drawX = columnInfo.fixed
+                            ? columnInfo.fixedLeft
+                            : columnInfo.x - scrollState.scrollLeft;
+                        var iconX = drawX + 8 + level * 20; // TEXT_PADDING + level * 缩进
+                        var iconY = headerHeight +
+                            (fixedRowsCount || (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || 0) * rowHeight +
+                            (cell.row -
+                                (fixedRowsCount || (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || 0)) *
+                                rowHeight -
+                            scrollState.scrollTop +
+                            rowHeight / 2;
+                        // 检查点击位置是否在展开图标范围内
+                        var iconRadius = 8;
+                        var distance = Math.sqrt(Math.pow(x - iconX, 2) + Math.pow(y - iconY, 2));
+                        if (distance <= iconRadius + 3) {
+                            // 点击了展开图标，切换展开状态
+                            var rowKey = getRowKey(processedDataSource[cell.row], cell.row);
+                            if (onExpand) {
+                                onExpand(rowKey);
+                            }
+                            return; // 点击了展开图标，不继续其他逻辑
+                        }
+                    }
+                }
+            }
             // 检查是否点击了选择框列，如果是，则不启用框选
             var isSelectionColumn = cell && ((_b = columnRenderInfos[cell.col]) === null || _b === void 0 ? void 0 : _b.column.key) === "__selection__";
             if (cell && !e.shiftKey && !isSelectionColumn) {