@canvas-components/pivot-table 0.1.8 → 0.1.9

package/dist/index.d.cts

@@ -572,6 +572,11 @@ interface PivotLayoutSnapshot {
         start: number;
         end: number;
     };
+    /** 固定在表体底部的末尾汇总行范围。 */
+    frozenBottomRowRange: {
+        start: number;
+        end: number;
+    } | null;
     visibleColumnRange: {
         start: number;
         end: number;

package/dist/index.d.ts

@@ -572,6 +572,11 @@ interface PivotLayoutSnapshot {
         start: number;
         end: number;
     };
+    /** 固定在表体底部的末尾汇总行范围。 */
+    frozenBottomRowRange: {
+        start: number;
+        end: number;
+    } | null;
     visibleColumnRange: {
         start: number;
         end: number;

package/dist/index.js

@@ -974,7 +974,7 @@ function computePivotScrollbarLayout(params) {
   }
   if (hasVertical) {
     const fullHeight = Math.max(
-      params.bodyHeight - VERTICAL_TOP_INSET - (hasHorizontal ? SCROLLBAR_THICKNESS : 0),
+      params.bodyHeight - VERTICAL_TOP_INSET,
       0
     );
     const buttonSize = Math.min(SCROLLBAR_THICKNESS, fullHeight / 3);
@@ -1030,6 +1030,7 @@ var DEFAULT_ROW_HEIGHT = 40;
 var DEFAULT_COLUMN_WIDTH = 120;
 var DEFAULT_HEADER_SIZE = 40;
 var DEFAULT_ROW_DIMENSION_WIDTH2 = 140;
+var SCROLLBAR_THICKNESS2 = 10;
 function buildPivotLayoutSnapshot(params) {
   const { model, options, visibleRowNodes, visibleColumnNodes, width, height } = params;
   const indicatorLayout = options.indicatorLayout ?? "columns";
@@ -1062,8 +1063,8 @@ function buildPivotLayoutSnapshot(params) {
   const columnHeaderHeight = columnHeaderLevels * DEFAULT_HEADER_SIZE;
   const reportFilterHeight = (options.filterDimensions?.length ?? 0) * rowHeight;
   const tableHeaderHeight = reportFilterHeight + columnHeaderHeight;
-  const bodyWidth = Math.max(width - rowHeaderWidth, 0);
-  const availableBodyHeight = Math.max(height - tableHeaderHeight, 0);
+  const rawBodyWidth = Math.max(width - rowHeaderWidth, 0);
+  const rawAvailableBodyHeight = Math.max(height - tableHeaderHeight, 0);
   const rowSlots = createPivotAxisSlots({
     nodes: visibleRowNodes,
     indicators: options.indicators.map((indicator) => indicator.key),
@@ -1086,19 +1087,52 @@ function buildPivotLayoutSnapshot(params) {
   const columnOffsets = createOffsets(columnWidths);
   const totalBodyWidth = columnOffsets[columnOffsets.length - 1] ?? 0;
   const totalBodyHeight = rowSlots.length * rowHeight;
+  let hasHorizontalScrollbar = totalBodyWidth > rawBodyWidth;
+  let hasVerticalScrollbar = totalBodyHeight > rawAvailableBodyHeight;
+  for (let index = 0; index < 2; index += 1) {
+    hasHorizontalScrollbar = totalBodyWidth > Math.max(
+      rawBodyWidth - (hasVerticalScrollbar ? SCROLLBAR_THICKNESS2 : 0),
+      0
+    );
+    hasVerticalScrollbar = totalBodyHeight > Math.max(
+      rawAvailableBodyHeight - (hasHorizontalScrollbar ? SCROLLBAR_THICKNESS2 : 0),
+      0
+    );
+  }
+  const bodyWidth = Math.max(
+    rawBodyWidth - (hasVerticalScrollbar ? SCROLLBAR_THICKNESS2 : 0),
+    0
+  );
+  const availableBodyHeight = Math.max(
+    rawAvailableBodyHeight - (hasHorizontalScrollbar ? SCROLLBAR_THICKNESS2 : 0),
+    0
+  );
+  const frozenBottomRowRange = resolveFrozenBottomRowRange(rowSlots);
+  const frozenBottomRowCount = frozenBottomRowRange ? frozenBottomRowRange.end - frozenBottomRowRange.start : 0;
+  const frozenBottomHeight = frozenBottomRowCount * rowHeight;
+  const scrollableRowCount = frozenBottomRowRange?.start ?? rowSlots.length;
+  const totalScrollableBodyHeight = scrollableRowCount * rowHeight;
   const tableWidth = rowHeaderWidth + Math.min(bodyWidth, totalBodyWidth);
   const bodyHeight = Math.min(availableBodyHeight, totalBodyHeight);
-  const fittedHeight = tableHeaderHeight + bodyHeight;
+  const visibleFrozenBottomHeight = Math.min(frozenBottomHeight, bodyHeight);
+  const scrollableBodyHeight = Math.max(
+    bodyHeight - visibleFrozenBottomHeight,
+    0
+  );
+  const fittedHeight = tableHeaderHeight + bodyHeight + (hasHorizontalScrollbar ? SCROLLBAR_THICKNESS2 : 0);
   const maxScrollLeft = Math.max(totalBodyWidth - bodyWidth, 0);
-  const maxScrollTop = Math.max(totalBodyHeight - bodyHeight, 0);
+  const maxScrollTop = Math.max(
+    totalScrollableBodyHeight - scrollableBodyHeight,
+    0
+  );
   const scroll = {
     left: clamp(params.scroll.left, 0, maxScrollLeft),
     top: clamp(params.scroll.top, 0, maxScrollTop)
   };
   const visibleRowRange = resolveVisibleRange({
-    count: rowSlots.length,
+    count: scrollableRowCount,
     itemSize: rowHeight,
-    viewportSize: bodyHeight,
+    viewportSize: scrollableBodyHeight,
     offset: scroll.top,
     overscan: options.overscanRowCount ?? 1
   });
@@ -1133,6 +1167,23 @@ function buildPivotLayoutSnapshot(params) {
     dimensionCount: options.rows.length,
     indicators: options.indicators
   });
+  if (frozenBottomRowRange) {
+    rowHeaderCells.push(
+      ...buildRowHeaderCells({
+        model,
+        options,
+        slots: rowSlots,
+        range: frozenBottomRowRange,
+        rowHeight,
+        rowDimensionWidths,
+        columnHeaderHeight: tableHeaderHeight,
+        scrollTop: frozenBottomRowRange.start * rowHeight - scrollableBodyHeight,
+        expandedNodeIds: params.expandedRowNodeIds,
+        dimensionCount: options.rows.length,
+        indicators: options.indicators
+      })
+    );
+  }
   const columnHeaderCells = buildColumnHeaderCells({
     model,
     options,
@@ -1159,14 +1210,34 @@ function buildPivotLayoutSnapshot(params) {
     columnHeaderHeight: tableHeaderHeight,
     scroll
   });
+  if (frozenBottomRowRange) {
+    bodyCells.push(
+      ...buildBodyCells({
+        model,
+        rowSlots,
+        columnSlots,
+        rowRange: frozenBottomRowRange,
+        columnRange: visibleColumnRange,
+        rowHeight,
+        columnWidths,
+        columnOffsets,
+        rowHeaderWidth,
+        columnHeaderHeight: tableHeaderHeight,
+        scroll: {
+          left: scroll.left,
+          top: frozenBottomRowRange.start * rowHeight - scrollableBodyHeight
+        }
+      })
+    );
+  }
   const scrollbar = computePivotScrollbarLayout({
-    width,
+    width: tableWidth + (hasVerticalScrollbar ? SCROLLBAR_THICKNESS2 : 0),
     height: fittedHeight,
     bodyTop: tableHeaderHeight,
-    bodyHeight,
+    bodyHeight: scrollableBodyHeight,
     bodyWidth,
     totalBodyWidth,
-    totalBodyHeight,
+    totalBodyHeight: totalScrollableBodyHeight,
     scrollLeft: scroll.left,
     scrollTop: scroll.top,
     maxScrollLeft,
@@ -1218,6 +1289,7 @@ function buildPivotLayoutSnapshot(params) {
     rowSlots,
     columnSlots,
     visibleRowRange,
+    frozenBottomRowRange,
     visibleColumnRange,
     reportFilterCells,
     rowFieldHeaderCells,
@@ -1352,6 +1424,13 @@ function createAxisSlot(node, indicatorKey) {
     kind: node?.kind ?? "empty"
   };
 }
+function resolveFrozenBottomRowRange(slots) {
+  let start = slots.length;
+  while (start > 0 && slots[start - 1]?.kind === "grandTotal") {
+    start -= 1;
+  }
+  return start < slots.length ? { start, end: slots.length } : null;
+}
 function buildRowHeaderCells(params) {
   const cells = [];
   for (let rowIndex = params.range.start; rowIndex < params.range.end; rowIndex += 1) {
@@ -2614,8 +2693,8 @@ function resolvePivotSelectionRect(layout, selection) {
   const kind = resolvePivotSelectionKind(selection);
   const startX = kind === "row" || kind === "row-cell" ? layout.rowHeaderRect.x : layout.bodyRect.x + (layout.columnOffsets[indexes.startColumnIndex] ?? 0) - layout.scroll.left;
   const endX = layout.bodyRect.x + (layout.columnOffsets[indexes.endColumnIndex] ?? 0) + (layout.columnWidths[indexes.endColumnIndex] ?? layout.columnWidth) - layout.scroll.left;
-  const startY = kind === "column" ? layout.columnHeaderRect.y : layout.bodyRect.y + indexes.startRowIndex * layout.rowHeight - layout.scroll.top;
-  const endY = layout.bodyRect.y + (indexes.endRowIndex + 1) * layout.rowHeight - layout.scroll.top;
+  const startY = kind === "column" ? layout.columnHeaderRect.y : resolvePivotRowTop(layout, indexes.startRowIndex);
+  const endY = resolvePivotRowTop(layout, indexes.endRowIndex) + layout.rowHeight;
   const clipRect = resolvePivotSelectionClipRect(layout, selection);
   const visibleStartX = Math.max(startX, clipRect.x);
   const visibleEndX = Math.min(endX, clipRect.x + clipRect.width);
@@ -2629,6 +2708,13 @@ function resolvePivotSelectionRect(layout, selection) {
     height: visibleEndY - visibleStartY
   };
 }
+function resolvePivotRowTop(layout, rowIndex) {
+  const frozenRange = layout.frozenBottomRowRange;
+  if (frozenRange && rowIndex >= frozenRange.start && rowIndex < frozenRange.end) {
+    return layout.bodyRect.y + layout.bodyRect.height - (frozenRange.end - rowIndex) * layout.rowHeight;
+  }
+  return layout.bodyRect.y + rowIndex * layout.rowHeight - layout.scroll.top;
+}
 function resolvePivotSelectionClipRect(layout, selection) {
   const kind = resolvePivotSelectionKind(selection);
   if (kind === "row" || kind === "row-cell") {
@@ -2773,26 +2859,29 @@ var defaultPivotTableTheme = {
 };
 
 // src/rendering/draw-scrollbars.ts
-function drawPivotScrollbars(context, layout) {
+function drawPivotScrollbars(context, layout, borderColor) {
   context.save();
   if (layout.horizontal) {
-    drawAxis(context, layout.horizontal, "horizontal");
+    drawAxis(context, layout.horizontal, "horizontal", borderColor);
   }
   if (layout.vertical) {
-    drawAxis(context, layout.vertical, "vertical");
+    drawAxis(context, layout.vertical, "vertical", borderColor);
   }
   context.restore();
 }
-function drawAxis(context, layout, axis) {
-  drawTrack(context, layout.track);
+function drawAxis(context, layout, axis, borderColor) {
+  drawTrack(context, layout.track, borderColor);
   drawButton(context, layout.decreaseButton, axis, "decrease");
   drawButton(context, layout.increaseButton, axis, "increase");
   drawThumb(context, layout.thumb);
 }
-function drawTrack(context, rect) {
+function drawTrack(context, rect, borderColor) {
   context.fillStyle = "rgba(148, 163, 184, 0.16)";
+  context.strokeStyle = borderColor;
+  context.lineWidth = 1;
   roundRect(context, rect, rect.height / 2);
   context.fill();
+  context.stroke();
 }
 function drawThumb(context, rect) {
   context.fillStyle = "rgba(100, 116, 139, 0.8)";
@@ -3060,7 +3149,7 @@ function renderPivotTable(params) {
     theme.borderColor
   );
   if (options.debug) drawDebugOverlay(context, layout, theme);
-  drawPivotScrollbars(context, layout.scrollbar);
+  drawPivotScrollbars(context, layout.scrollbar, theme.borderColor);
   drawPivotViewportRightBorder(
     context,
     { x: 0, y: 0, width: layout.tableWidth, height: contentHeight },
@@ -3578,7 +3667,7 @@ function hitTestPivotLayout(layout, x, y) {
       onSortIcon: false
     };
   }
-  const bodyCell = layout.bodyCells.find((cell) => contains(cell.rect, x, y));
+  const bodyCell = findLastContaining(layout.bodyCells, x, y);
   if (bodyCell) {
     return {
       region: "body",
@@ -3588,9 +3677,7 @@ function hitTestPivotLayout(layout, x, y) {
       onSortIcon: false
     };
   }
-  const rowHeaderCell = layout.rowHeaderCells.find(
-    (cell) => contains(cell.rect, x, y)
-  );
+  const rowHeaderCell = findLastContaining(layout.rowHeaderCells, x, y);
   if (rowHeaderCell) {
     return {
       region: "rowHeader",
@@ -3643,6 +3730,13 @@ function isSortIconHit(cell, x) {
 function contains(rect, x, y) {
   return x >= rect.x && x < rect.x + rect.width && y >= rect.y && y < rect.y + rect.height;
 }
+function findLastContaining(cells, x, y) {
+  for (let index = cells.length - 1; index >= 0; index -= 1) {
+    const cell = cells[index];
+    if (cell && contains(cell.rect, x, y)) return cell;
+  }
+  return void 0;
+}
 
 // src/interaction/text-selection.ts
 function resolvePivotTextOffset(params) {
@@ -3879,6 +3973,16 @@ function createAddress(rowSlot, columnSlot, indicatorKey) {
 // src/domain/interaction/row-selection.ts
 function resolvePivotRowIndexAtY(layout, y) {
   if (layout.rowSlots.length === 0 || layout.rowHeight <= 0) return null;
+  const frozenRange = layout.frozenBottomRowRange;
+  if (frozenRange) {
+    const frozenTop = layout.bodyRect.y + layout.bodyRect.height - (frozenRange.end - frozenRange.start) * layout.rowHeight;
+    if (y >= frozenTop) {
+      return Math.min(
+        frozenRange.start + Math.floor((y - frozenTop) / layout.rowHeight),
+        frozenRange.end - 1
+      );
+    }
+  }
   const index = Math.floor(
     (y - layout.bodyRect.y + layout.scroll.top) / layout.rowHeight
   );
@@ -4584,11 +4688,16 @@ var PivotTable = class {
       (slot) => (slot.nodeId ?? "") === address.columnNodeId && (!slot.indicatorKey || slot.indicatorKey === address.indicatorKey)
     );
     if (rowIndex < 0 || columnIndex < 0) return false;
-    const top = resolveVisibleOffset({
+    const frozenRange = this.layout.frozenBottomRowRange;
+    const frozenBottomHeight = frozenRange ? (frozenRange.end - frozenRange.start) * this.layout.rowHeight : 0;
+    const top = frozenRange && rowIndex >= frozenRange.start ? this.scroll.top : resolveVisibleOffset({
       current: this.scroll.top,
       itemStart: rowIndex * this.layout.rowHeight,
       itemSize: this.layout.rowHeight,
-      viewportSize: this.layout.bodyRect.height
+      viewportSize: Math.max(
+        this.layout.bodyRect.height - frozenBottomHeight,
+        0
+      )
     });
     const left = resolveVisibleOffset({
       current: this.scroll.left,