zmdms-webui 2.6.2 → 2.6.3

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

@@ -0,0 +1,358 @@
+import { COLORS, FONT_WEIGHT, FONT_SIZE, FONT_FAMILY, SCROLLBAR_SIZE, TEXT_PADDING } from '../../utils/constants.js';
+import { drawCheckbox, wrapText, truncateText } from '../../utils/canvasDrawHelpers.js';
+import { extractCellText } from '../../utils/cellHelpers.js';
+import { formatCellValue } from '../../utils/formatHelpers.js';
+import '../../../_virtual/_tslib.js';
+import { setupCellClip, drawCellBackground, shouldRenderInCanvas } from '../../utils/renderHelpers.js';
+import { IS_SUMMARY } from '../../../table/constant.js';
+import { BadgeRenderer } from './BadgeRenderer.js';
+import { ExpandIconRenderer } from './ExpandIconRenderer.js';
+
+/**
+ * 数据行渲染器
+ * 负责渲染表格的数据行
+ */
+var DataRowRenderer = /** @class */ (function () {
+    function DataRowRenderer() {
+        this.context = null;
+        this.badgeRenderer = new BadgeRenderer();
+        this.expandIconRenderer = new ExpandIconRenderer();
+    }
+    DataRowRenderer.prototype.setContext = function (context) {
+        this.context = context;
+        this.badgeRenderer.setContext(context);
+        this.expandIconRenderer.setContext(context);
+    };
+    /**
+     * 渲染单行数据
+     */
+    DataRowRenderer.prototype.renderRow = function (rowIndex, onlyFixed) {
+        var _this = this;
+        if (onlyFixed === void 0) { onlyFixed = false; }
+        if (!this.context) {
+            throw new Error("DataRowRenderer: Context not set");
+        }
+        var _a = this.context, processedDataSource = _a.processedDataSource, rowHeight = _a.rowHeight, headerHeight = _a.headerHeight, scrollState = _a.scrollState, state = _a.state, getRowKey = _a.getRowKey, displayHeight = _a.displayHeight, needHorizontalScrollbar = _a.needHorizontalScrollbar, fixedRowsCount = _a.fixedRowsCount, fixedRowsConfig = _a.fixedRowsConfig, summaryFixed = _a.summaryFixed, hasSummaryRow = _a.hasSummaryRow, mergeCellMap = _a.mergeCellMap, columnRenderInfos = _a.columnRenderInfos;
+        var record = processedDataSource[rowIndex];
+        if (!record)
+            return;
+        // 计算固定行数�?
+        var fixedTopCount = fixedRowsCount || (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.topCount) || 0;
+        // 计算Y坐标
+        var y = headerHeight +
+            fixedTopCount * rowHeight +
+            (rowIndex - fixedTopCount) * rowHeight -
+            scrollState.scrollTop;
+        // 计算实际可用的渲染区域高�?
+        var fixedBottomRowsCount = (fixedRowsConfig === null || fixedRowsConfig === void 0 ? void 0 : fixedRowsConfig.bottomCount) || 0;
+        var fixedBottomHeight = fixedBottomRowsCount * rowHeight;
+        var fixedSummaryHeight = summaryFixed && hasSummaryRow ? rowHeight : 0;
+        var effectiveHeight = displayHeight -
+            (needHorizontalScrollbar ? SCROLLBAR_SIZE : 0) -
+            fixedBottomHeight -
+            fixedSummaryHeight;
+        // 提前检查这一行是否有合并单元格，找出最大的rowSpan
+        var maxRowSpanInRow = 1;
+        if (mergeCellMap) {
+            columnRenderInfos.forEach(function (_, colIndex) {
+                var mergeCellKey = "".concat(rowIndex, "-").concat(colIndex);
+                var mergeInfo = mergeCellMap.get(mergeCellKey);
+                if (mergeInfo &&
+                    !mergeInfo.skip &&
+                    mergeInfo.rowSpan > maxRowSpanInRow) {
+                    maxRowSpanInRow = mergeInfo.rowSpan;
+                }
+            });
+        }
+        // 计算这一行的实际高度（考虑合并单元格）
+        var actualRowHeight = rowHeight * maxRowSpanInRow;
+        // 跳过不在可视区域的行
+        if (y + actualRowHeight < headerHeight || y >= effectiveHeight) {
+            return;
+        }
+        var recordKey = getRowKey(record, rowIndex);
+        var isSelected = state.selectedRowKeys.includes(recordKey);
+        var isHover = state.hoverRowIndex === rowIndex;
+        // 计算fixed列的右边�?
+        var fixedColumnsRightEdge = 0;
+        if (!onlyFixed) {
+            columnRenderInfos.forEach(function (info) {
+                if (info.fixed) {
+                    var actualWidth = _this.context.getColumnWidth
+                        ? _this.context.getColumnWidth(columnRenderInfos.indexOf(info))
+                        : info.width;
+                    var rightEdge = info.fixedLeft + actualWidth;
+                    fixedColumnsRightEdge = Math.max(fixedColumnsRightEdge, rightEdge);
+                }
+            });
+        }
+        // 绘制单元�?
+        columnRenderInfos.forEach(function (info, colIndex) {
+            _this.renderCell(info, colIndex, rowIndex, record, y, isSelected, isHover, fixedColumnsRightEdge, effectiveHeight, onlyFixed);
+        });
+    };
+    /**
+     * 渲染单个单元�?
+     */
+    DataRowRenderer.prototype.renderCell = function (info, colIndex, rowIndex, record, y, isSelected, isHover, fixedColumnsRightEdge, effectiveHeight, onlyFixed) {
+        if (!this.context)
+            return;
+        var _a = this.context, ctx = _a.ctx, scrollState = _a.scrollState, displayWidth = _a.displayWidth, headerHeight = _a.headerHeight, rowHeight = _a.rowHeight, mergeCellMap = _a.mergeCellMap, getColumnWidth = _a.getColumnWidth;
+        var column = info.column, x = info.x, fixed = info.fixed, fixedLeft = info.fixedLeft;
+        // 根据 onlyFixed 参数过滤
+        if (onlyFixed && !fixed)
+            return;
+        if (!onlyFixed && fixed)
+            return;
+        // 检查合并单元格
+        var mergeCellKey = "".concat(rowIndex, "-").concat(colIndex);
+        var mergeInfo = mergeCellMap === null || mergeCellMap === void 0 ? void 0 : mergeCellMap.get(mergeCellKey);
+        // 如果是被合并的单元格，跳过渲�?
+        if (mergeInfo && mergeInfo.skip) {
+            return;
+        }
+        var width = getColumnWidth ? getColumnWidth(colIndex) : info.width;
+        var drawX = fixed ? fixedLeft : x - scrollState.scrollLeft;
+        // 跳过不在可视区域的列
+        if (!fixed && (drawX + width < 0 || drawX > displayWidth)) {
+            return;
+        }
+        // 对于非fixed列，检查是否被fixed列遮�?
+        if (!fixed && fixedColumnsRightEdge > 0 && drawX < fixedColumnsRightEdge) {
+            if (drawX + width <= fixedColumnsRightEdge) {
+                return;
+            }
+        }
+        // 计算单元格高度（考虑合并�?
+        var cellHeight = mergeInfo && mergeInfo.rowSpan > 1
+            ? rowHeight * mergeInfo.rowSpan
+            : rowHeight;
+        ctx.save();
+        // 设置裁剪区域
+        var _b = setupCellClip({
+            ctx: ctx,
+            drawX: drawX,
+            y: y,
+            width: width,
+            cellHeight: cellHeight,
+            headerHeight: headerHeight,
+            effectiveHeight: effectiveHeight,
+            fixedColumnsRightEdge: !fixed ? fixedColumnsRightEdge : undefined,
+            isFixed: fixed,
+        }), clipX = _b.clipX, clipY = _b.clipY, clipWidth = _b.clipWidth, clipHeight = _b.clipHeight;
+        // 绘制单元格背�?
+        var isSummaryRow = record[IS_SUMMARY];
+        drawCellBackground({
+            ctx: ctx,
+            clipX: clipX,
+            clipY: clipY,
+            clipWidth: clipWidth,
+            clipHeight: clipHeight,
+            isSelected: isSelected,
+            isHover: isHover,
+            isSummaryRow: isSummaryRow,
+            isStriped: this.context.striped,
+            rowIndex: rowIndex,
+        });
+        // 渲染单元格内�?
+        this.renderCellContent(column, colIndex, rowIndex, record, drawX, y, width, cellHeight, isSummaryRow);
+        ctx.restore();
+    };
+    /**
+     * 渲染单元格内�?
+     */
+    DataRowRenderer.prototype.renderCellContent = function (column, colIndex, rowIndex, record, drawX, y, width, cellHeight, isSummaryRow) {
+        if (!this.context)
+            return;
+        if (column.key === "__selection__") {
+            this.renderSelectionCell(record, rowIndex, column, drawX, y, width, cellHeight, isSummaryRow);
+        }
+        else if (column.key === "__index__") {
+            // 处理序号列
+            this.renderIndexCell(rowIndex, drawX, y, width, cellHeight);
+        }
+        else {
+            this.renderDataCell(column, colIndex, rowIndex, record, drawX, y, width, cellHeight, isSummaryRow);
+        }
+    };
+    /**
+     * 渲染序号单元格
+     */
+    DataRowRenderer.prototype.renderIndexCell = function (rowIndex, drawX, y, width, cellHeight) {
+        if (!this.context)
+            return;
+        var _a = this.context, ctx = _a.ctx, flattenedData = _a.flattenedData, expandable = _a.expandable;
+        var indexText = String(rowIndex + 1); // 默认使用行索引
+        if (flattenedData && flattenedData[rowIndex]) {
+            var flattenedRow = flattenedData[rowIndex];
+            // 使用 indexInParent 作为显示序号
+            indexText = String(flattenedRow.indexInParent);
+        }
+        // 检查是否需要在序号列中渲染展开图标
+        var expandIconWidth = 0;
+        var expandIconColumnIndex = (expandable === null || expandable === void 0 ? void 0 : expandable.expandIconColumnIndex) || 0;
+        // 如果展开图标列索引是0（第一列），且当前是序号列，则需要渲染展开图标
+        if (expandable && flattenedData && expandIconColumnIndex === 0) {
+            var flattenedRow = flattenedData[rowIndex];
+            if (flattenedRow) {
+                var level = flattenedRow.level, hasChildren = flattenedRow.hasChildren;
+                // 使用 ExpandIconRenderer 渲染展开图标（colIndex传0因为这是第一列）
+                this.expandIconRenderer.render(0, rowIndex, drawX, y, cellHeight);
+                // 计算展开图标占用的宽度（包括图标和5px间距）
+                if (hasChildren) {
+                    // 基础边距 + 层级缩进 + 图标宽度 + 5px间距
+                    expandIconWidth = 8 + level * 20 + 12 + 5;
+                }
+                else if (level > 0) {
+                    // 子节点但没有子级，也需要缩进对齐
+                    expandIconWidth = 8 + level * 20 + 5;
+                }
+            }
+        }
+        // 绘制序号，位置向右偏移以避开展开图标
+        ctx.fillStyle = COLORS.text;
+        ctx.font = "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
+        ctx.textBaseline = "middle";
+        ctx.textAlign = "left";
+        var textX = drawX + TEXT_PADDING + expandIconWidth;
+        var textY = y + cellHeight / 2;
+        ctx.fillText(indexText, textX, textY);
+    };
+    /**
+     * 渲染选择框单元格
+     */
+    DataRowRenderer.prototype.renderSelectionCell = function (record, rowIndex, column, drawX, y, width, cellHeight, isSummaryRow) {
+        var _a;
+        if (!this.context)
+            return;
+        var _b = this.context, ctx = _b.ctx, state = _b.state, rowSelection = _b.rowSelection, getRowKey = _b.getRowKey;
+        if (!isSummaryRow) {
+            var checkboxProps = ((_a = rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.getCheckboxProps) === null || _a === void 0 ? void 0 : _a.call(rowSelection, record)) || {};
+            var disabled = checkboxProps.disabled || false;
+            var recordKey = getRowKey(record, rowIndex);
+            var isSelected = state.selectedRowKeys.includes(recordKey);
+            drawCheckbox(ctx, drawX + width / 2, y + cellHeight / 2, isSelected, disabled, false);
+        }
+        else {
+            // 合计行选择框列显示文本
+            var dataIndex = column.dataIndex || column.key;
+            var cellValue = record[dataIndex];
+            var cellText = formatCellValue(cellValue, column, true);
+            if (cellText) {
+                ctx.fillStyle = COLORS.text;
+                ctx.font = "bold ".concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
+                ctx.textBaseline = "middle";
+                ctx.textAlign = "center";
+                var textX = drawX + width / 2;
+                var textY = y + cellHeight / 2;
+                ctx.fillText(cellText, textX, textY);
+            }
+        }
+    };
+    /**
+     * 渲染数据单元�?
+     */
+    DataRowRenderer.prototype.renderDataCell = function (column, colIndex, rowIndex, record, drawX, y, width, cellHeight, isSummaryRow) {
+        if (!this.context)
+            return;
+        var ctx = this.context.ctx;
+        var dataIndex = column.dataIndex || column.key;
+        var cellValue = record[dataIndex];
+        // 检查是否应该在 Canvas 中渲�?
+        if (!shouldRenderInCanvas(column.render, cellValue, record, rowIndex, isSummaryRow)) {
+            return;
+        }
+        // 应用格式�?
+        var cellText;
+        if (isSummaryRow && column.key !== "__index__") {
+            cellText = formatCellValue(cellValue, column);
+        }
+        else {
+            cellText = extractCellText({
+                cellValue: cellValue,
+                record: record,
+                rowIndex: rowIndex,
+                renderFn: column.render,
+            });
+            if (!column.render) {
+                cellText = formatCellValue(cellValue, column);
+            }
+        }
+        // 绘制文本
+        ctx.fillStyle = COLORS.text;
+        ctx.font = isSummaryRow
+            ? "bold ".concat(FONT_SIZE, "px ").concat(FONT_FAMILY)
+            : "".concat(FONT_WEIGHT, " ").concat(FONT_SIZE, "px ").concat(FONT_FAMILY);
+        ctx.textBaseline = "middle";
+        var align = column.align || "left";
+        var textX = drawX + TEXT_PADDING;
+        if (align === "center") {
+            ctx.textAlign = "center";
+            textX = drawX + width / 2;
+        }
+        else if (align === "right") {
+            ctx.textAlign = "right";
+            textX = drawX + width - TEXT_PADDING;
+        }
+        else {
+            ctx.textAlign = "left";
+        }
+        // 绘制展开图标并获取文本缩进偏移量
+        var indentOffset = this.expandIconRenderer.render(colIndex, rowIndex, drawX, y, cellHeight);
+        textX += indentOffset;
+        // 处理文本显示
+        this.renderTextContent(ctx, cellText, textX, y, width, cellHeight, column.ellipsis !== false, column.wrap === true);
+        // 绘制角标
+        if (column.badge && !isSummaryRow) {
+            var badgeProps = typeof column.badge === "function"
+                ? column.badge(record)
+                : column.badge;
+            if (badgeProps) {
+                this.badgeRenderer.render(badgeProps, drawX, y, width, cellHeight);
+            }
+        }
+    };
+    /**
+     * 渲染文本内容（处�?ellipsis/wrap�?
+     */
+    DataRowRenderer.prototype.renderTextContent = function (ctx, text, textX, y, width, cellHeight, ellipsis, wrap) {
+        var maxWidth = width - TEXT_PADDING * 2;
+        if (wrap) {
+            // 换行显示，最多显�?�?
+            var allLines = wrapText(ctx, text, maxWidth);
+            var maxLines = 2;
+            var lines = allLines.slice(0, maxLines);
+            // 如果超过2行，在第2行末尾强制添加省略号
+            if (allLines.length > maxLines && lines.length === maxLines) {
+                var lastLine = lines[maxLines - 1];
+                var ellipsisText = "...";
+                while (lastLine.length > 0 &&
+                    ctx.measureText(lastLine + ellipsisText).width > maxWidth) {
+                    lastLine = lastLine.slice(0, -1);
+                }
+                lines[maxLines - 1] = lastLine + ellipsisText;
+            }
+            var lineHeight_1 = FONT_SIZE + 5;
+            var totalHeight = lines.length * lineHeight_1;
+            var startY_1 = y + (cellHeight - totalHeight) / 2 + lineHeight_1 / 2;
+            lines.forEach(function (line, lineIndex) {
+                var lineY = startY_1 + lineIndex * lineHeight_1;
+                if (lineY >= y && lineY <= y + cellHeight) {
+                    ctx.fillText(line, textX, lineY);
+                }
+            });
+        }
+        else if (ellipsis) {
+            var textY = y + cellHeight / 2;
+            var truncatedText = truncateText(ctx, text, maxWidth);
+            ctx.fillText(truncatedText, textX, textY);
+        }
+        else {
+            var textY = y + cellHeight / 2;
+            ctx.fillText(text, textX, textY);
+        }
+    };
+    return DataRowRenderer;
+}());
+
+export { DataRowRenderer };

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

@@ -0,0 +1,97 @@
+import { TEXT_PADDING } from '../../utils/constants.js';
+import 'zmdms-utils';
+import 'dayjs';
+import '../../../_virtual/_tslib.js';
+
+/**
+ * 展开图标渲染器
+ * 负责绘制树形表格的展开/收起图标
+ */
+var ExpandIconRenderer = /** @class */ (function () {
+    function ExpandIconRenderer() {
+        this.context = null;
+    }
+    ExpandIconRenderer.prototype.setContext = function (context) {
+        this.context = context;
+    };
+    /**
+     * 渲染展开图标
+     * @param colIndex 当前列索引
+     * @param rowIndex 当前行索引
+     * @param drawX 绘制起始X坐标
+     * @param y 绘制起始Y坐标
+     * @param cellHeight 单元格高度
+     * @returns 文本缩进偏移量
+     */
+    ExpandIconRenderer.prototype.render = function (colIndex, rowIndex, drawX, y, cellHeight) {
+        if (!this.context) {
+            throw new Error("ExpandIconRenderer: Context not set");
+        }
+        var _a = this.context, expandable = _a.expandable, flattenedData = _a.flattenedData;
+        // 检查是否启用展开功能
+        if (!expandable || !flattenedData) {
+            return 0;
+        }
+        // 检查当前列是否是展开图标列
+        var expandIconColumnIndex = expandable.expandIconColumnIndex || 0;
+        if (colIndex !== expandIconColumnIndex) {
+            return 0;
+        }
+        // 获取当前行的展开信息
+        var flattenedRow = flattenedData[rowIndex];
+        if (!flattenedRow) {
+            return 0;
+        }
+        var level = flattenedRow.level, hasChildren = flattenedRow.hasChildren, isExpanded = flattenedRow.isExpanded;
+        // 计算图标位置（增加8px基础左边距）
+        var iconX = drawX + TEXT_PADDING + 8 + level * 20;
+        var iconY = y + cellHeight / 2;
+        // 绘制展开图标
+        this.drawExpandIcon(iconX, iconY, isExpanded, hasChildren);
+        // 计算文本缩进偏移量（加上基础边距）
+        if (level > 0 || hasChildren) {
+            return 8 + level * 20 + 20;
+        }
+        return 0;
+    };
+    /**
+     * 绘制展开图标（+ / -）
+     */
+    ExpandIconRenderer.prototype.drawExpandIcon = function (x, y, expanded, hasChildren) {
+        if (!this.context)
+            return;
+        var ctx = this.context.ctx;
+        // 没有子节点，不绘制图标
+        if (!hasChildren) {
+            return;
+        }
+        var size = 16; // 图标大小
+        var half = size / 2;
+        // 绘制矩形背景
+        ctx.fillStyle = "#ffffff";
+        ctx.strokeStyle = "#dee9f6";
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.rect(x - half, y - half, size, size);
+        ctx.fill();
+        ctx.stroke();
+        // 绘制 + 或 - 符号
+        ctx.strokeStyle = "currentcolor";
+        ctx.lineWidth = 1;
+        // 水平线（总是绘制）
+        ctx.beginPath();
+        ctx.moveTo(x - 4, y);
+        ctx.lineTo(x + 4, y);
+        ctx.stroke();
+        // 垂直线（仅在收起状态时绘制，形成 + 号）
+        if (!expanded) {
+            ctx.beginPath();
+            ctx.moveTo(x, y - 4);
+            ctx.lineTo(x, y + 4);
+            ctx.stroke();
+        }
+    };
+    return ExpandIconRenderer;
+}());
+
+export { ExpandIconRenderer };

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

@@ -0,0 +1,71 @@
+import 'zmdms-utils';
+import 'dayjs';
+import '../../../_virtual/_tslib.js';
+import { calculateFixedColumnsRightEdge } from '../../utils/renderHelpers.js';
+
+/**
+ * 固定列效果渲染器
+ * 负责渲染固定列的阴影和边界线
+ */
+var FixedColumnRenderer = /** @class */ (function () {
+    function FixedColumnRenderer() {
+        this.context = null;
+    }
+    FixedColumnRenderer.prototype.setContext = function (context) {
+        this.context = context;
+    };
+    /**
+     * 渲染固定列效�?
+     */
+    FixedColumnRenderer.prototype.render = function () {
+        if (!this.context) {
+            throw new Error("FixedColumnRenderer: Context not set");
+        }
+        var _a = this.context, columnRenderInfos = _a.columnRenderInfos, getColumnWidth = _a.getColumnWidth, scrollState = _a.scrollState, displayWidth = _a.displayWidth;
+        var fixedColumns = columnRenderInfos.filter(function (info) { return info.fixed; });
+        if (fixedColumns.length === 0)
+            return;
+        // 计算固定列的实际右边�?
+        var fixedRightEdge = calculateFixedColumnsRightEdge(columnRenderInfos, getColumnWidth);
+        // 只在有横向滚动时显示阴影
+        if (scrollState.scrollLeft > 0 && fixedRightEdge < displayWidth) {
+            this.renderShadow(fixedRightEdge);
+        }
+        // 绘制边界�?
+        if (fixedRightEdge > 0 && fixedRightEdge < displayWidth) {
+            this.renderBorder(fixedRightEdge);
+        }
+    };
+    /**
+     * 渲染阴影
+     */
+    FixedColumnRenderer.prototype.renderShadow = function (fixedRightEdge) {
+        if (!this.context)
+            return;
+        var _a = this.context, ctx = _a.ctx, headerHeight = _a.headerHeight, displayHeight = _a.displayHeight;
+        var shadowWidth = 12;
+        var gradient = ctx.createLinearGradient(fixedRightEdge, 0, fixedRightEdge + shadowWidth, 0);
+        gradient.addColorStop(0, "rgba(0, 0, 0, 0.12)");
+        gradient.addColorStop(0.6, "rgba(0, 0, 0, 0.04)");
+        gradient.addColorStop(1, "rgba(0, 0, 0, 0)");
+        ctx.fillStyle = gradient;
+        ctx.fillRect(fixedRightEdge, headerHeight, shadowWidth, displayHeight - headerHeight);
+    };
+    /**
+     * 渲染边界�?
+     */
+    FixedColumnRenderer.prototype.renderBorder = function (fixedRightEdge) {
+        if (!this.context)
+            return;
+        var _a = this.context, ctx = _a.ctx, headerHeight = _a.headerHeight, displayHeight = _a.displayHeight;
+        ctx.strokeStyle = "rgba(0, 0, 0, 0.06)";
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.moveTo(fixedRightEdge, headerHeight);
+        ctx.lineTo(fixedRightEdge, displayHeight);
+        ctx.stroke();
+    };
+    return FixedColumnRenderer;
+}());
+
+export { FixedColumnRenderer };