@canvas-components/pivot-table 0.2.1 → 0.2.3

package/dist/index.js

@@ -1,4 +1,4 @@
-import { stringifyDataIndex, getValueByDataIndex, clamp, serializeCsvRows, isPointInRect, copyTextSync, copyText } from '@canvas-components/utils';
+import { stringifyDataIndex, getValueByDataIndex, dividePreciseNumber, addPreciseNumbers, clamp, serializeCsvRows, isPointInRect, copyTextSync, copyText, formatCustomNumberPattern, formatNumberValue, formatPercentValue, formatScientificValue, formatChineseNumber, parseChineseNumber, formatDateTimeValue } from '@canvas-components/utils';
 export { getValueByDataIndex, isSameDataIndex, stringifyDataIndex } from '@canvas-components/utils';
 import * as XLSX from 'xlsx';
 
@@ -309,8 +309,6 @@ function indexPivotNodes(root) {
   visit(root);
   return nodeMap;
 }
-
-// src/domain/aggregation/built-in-aggregators.ts
 function createBuiltInPivotAggregators() {
   return {
     sum: createNumericAggregator("sum"),
@@ -341,14 +339,14 @@ function createNumericAggregator(type) {
         return;
       }
       state.numericCount += 1;
-      state.sum += numericValue;
+      state.sum = addPreciseNumbers(state.sum, numericValue) ?? state.sum;
       state.min = state.min == null ? numericValue : Math.min(state.min, numericValue);
       state.max = state.max == null ? numericValue : Math.max(state.max, numericValue);
     },
     merge(state, source) {
       state.count += source.count;
       state.numericCount += source.numericCount;
-      state.sum += source.sum;
+      state.sum = addPreciseNumbers(state.sum, source.sum) ?? state.sum;
       state.min = mergeMinimum(state.min, source.min);
       state.max = mergeMaximum(state.max, source.max);
       source.distinctValues.forEach((value) => state.distinctValues.add(value));
@@ -356,9 +354,11 @@ function createNumericAggregator(type) {
     finalize(state) {
       if (type === "count") return state.count;
       if (type === "distinctCount") return state.distinctValues.size;
-      if (type === "sum") return state.sum;
+      if (type === "sum") return Number(state.sum);
       if (type === "avg") {
-        return state.numericCount === 0 ? null : state.sum / state.numericCount;
+        if (state.numericCount === 0) return null;
+        const average = dividePreciseNumber(state.sum, state.numericCount);
+        return average == null ? null : Number(average);
       }
       if (type === "min") return state.min;
       return state.max;
@@ -369,7 +369,7 @@ function createAccumulator() {
   return {
     count: 0,
     numericCount: 0,
-    sum: 0,
+    sum: "0",
     min: null,
     max: null,
     distinctValues: /* @__PURE__ */ new Set()
@@ -411,6 +411,101 @@ function resolvePivotIndicatorAggregator(indicator, registry) {
   }
   return aggregator;
 }
+var DATE_PATTERNS = {
+  dateSlash: "YYYY/MM/DD",
+  dateDash: "YYYY-MM-DD",
+  dateFullCN: "YYYY\u5E74M\u6708D\u65E5",
+  time: "HH:mm:ss",
+  timeShort: "HH:mm",
+  datetime: "YYYY/MM/DD HH:mm:ss",
+  datetime12: "YYYY/MM/DD Ah:mm"
+};
+function formatPivotIndicatorValue(value, dataFormat) {
+  if (typeof dataFormat === "object") {
+    if (dataFormat.type === "custom" && dataFormat.pattern) {
+      return formatCustomNumberPattern(value, dataFormat.pattern);
+    }
+    return formatPivotIndicatorValueWithOptions(value, dataFormat);
+  }
+  if (dataFormat === "default" || dataFormat === "text") {
+    return String(value ?? "");
+  }
+  if (dataFormat === "number") {
+    return formatNumberValue(value, {
+      decimalPlaces: "auto",
+      thousandsSeparator: false
+    });
+  }
+  if (dataFormat === "thousands") {
+    return formatNumberValue(value, {
+      decimalPlaces: "auto",
+      thousandsSeparator: true
+    });
+  }
+  if (dataFormat === "decimal") {
+    return formatNumberValue(value, {
+      decimalPlaces: 2,
+      thousandsSeparator: true
+    });
+  }
+  if (dataFormat === "percent" || dataFormat === "percentDecimal") {
+    return formatPercentValue(value, dataFormat === "percentDecimal" ? 2 : 0);
+  }
+  if (dataFormat === "scientific") return formatScientificValue(value);
+  if (dataFormat === "numberToChineseUpper") {
+    return formatChineseNumber(value, "financial") ?? String(value ?? "");
+  }
+  if (dataFormat === "chineseUpperToNumber") {
+    const parsed = parseChineseNumber(value);
+    return parsed == null ? String(value ?? "") : String(parsed);
+  }
+  if (dataFormat === "cny" || dataFormat === "cnyDecimal") {
+    return formatNumberValue(value, {
+      decimalPlaces: dataFormat === "cnyDecimal" ? 2 : 0,
+      thousandsSeparator: true,
+      symbol: "\xA5"
+    });
+  }
+  if (dataFormat === "usd" || dataFormat === "usdDecimal") {
+    return formatNumberValue(value, {
+      decimalPlaces: dataFormat === "usdDecimal" ? 2 : 0,
+      thousandsSeparator: true,
+      symbol: "$"
+    });
+  }
+  const pattern = DATE_PATTERNS[dataFormat];
+  return pattern ? formatDateTimeValue(value, pattern) ?? String(value ?? "") : String(value ?? "");
+}
+function formatPivotIndicatorValueWithOptions(value, dataFormat) {
+  if (dataFormat.pattern && dataFormat.type !== "custom") {
+    const formatted = formatDateTimeValue(value, dataFormat.pattern);
+    if (formatted != null) return formatted;
+  }
+  const decimalPlaces = Math.max(
+    0,
+    Math.min(20, dataFormat.decimalPlaces ?? 2)
+  );
+  if (dataFormat.type === "percent" || dataFormat.type === "percentDecimal") {
+    return formatPercentValue(value, decimalPlaces);
+  }
+  if (dataFormat.type === "scientific") {
+    return formatScientificValue(value, decimalPlaces);
+  }
+  if (dataFormat.type === "cny" || dataFormat.type === "cnyDecimal" || dataFormat.type === "usd" || dataFormat.type === "usdDecimal") {
+    return formatNumberValue(value, {
+      decimalPlaces,
+      thousandsSeparator: dataFormat.useGrouping ?? true,
+      symbol: dataFormat.symbol ?? (dataFormat.type.startsWith("usd") ? "$" : "\xA5")
+    });
+  }
+  if (dataFormat.type === "number" || dataFormat.type === "thousands" || dataFormat.type === "decimal") {
+    return formatNumberValue(value, {
+      decimalPlaces,
+      thousandsSeparator: dataFormat.useGrouping ?? dataFormat.type !== "number"
+    });
+  }
+  return formatPivotIndicatorValue(value, dataFormat.type);
+}
 
 // src/domain/aggregation/aggregate-records.ts
 function aggregatePivotRecords(params) {
@@ -475,7 +570,7 @@ function aggregatePivotRecords(params) {
         recordCount: item.recordIndexes.length,
         rowPathKey: item.rowPathKey,
         columnPathKey: item.columnPathKey
-      }) ?? formatAggregateValue(value, item.indicator.precision),
+      }) ?? (item.indicator.dataFormat ? formatPivotIndicatorValue(value, item.indicator.dataFormat) : formatAggregateValue(value, item.indicator.precision)),
       recordCount: item.recordIndexes.length,
       recordIndexes: item.recordIndexes
     });
@@ -1025,7 +1120,6 @@ function resolveThumbOffset(scroll, maxScroll, track, thumb) {
 // src/domain/layout/pivot-layout.ts
 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) {
@@ -1057,7 +1151,7 @@ function buildPivotLayoutSnapshot(params) {
     options.columns.length + (indicatorLayout === "columns" && hasIndicators ? 1 : 0),
     1
   );
-  const columnHeaderHeight = columnHeaderLevels * DEFAULT_HEADER_SIZE;
+  const columnHeaderHeight = columnHeaderLevels * rowHeight;
   const reportFilterHeight = (options.filterDimensions?.length ?? 0) * rowHeight;
   const tableHeaderHeight = reportFilterHeight + columnHeaderHeight;
   const rawBodyWidth = Math.max(width - rowHeaderWidth, 0);
@@ -1191,6 +1285,7 @@ function buildPivotLayoutSnapshot(params) {
     rowHeaderWidth,
     scrollLeft: scroll.left,
     levels: columnHeaderLevels,
+    headerSize: rowHeight,
     headerTop: reportFilterHeight,
     expandedNodeIds: params.expandedColumnNodeIds
   });
@@ -1591,7 +1686,7 @@ function buildColumnHeaderCells(params) {
           x,
           y: params.headerTop,
           width: columnWidth,
-          height: DEFAULT_HEADER_SIZE * (params.levels - (slot.indicatorKey ? 1 : 0))
+          height: params.headerSize * (params.levels - (slot.indicatorKey ? 1 : 0))
         }
       });
     } else {
@@ -1631,9 +1726,9 @@ function buildColumnHeaderCells(params) {
           ),
           rect: {
             x,
-            y: params.headerTop + level * DEFAULT_HEADER_SIZE,
+            y: params.headerTop + level * params.headerSize,
             width: columnWidth,
-            height: DEFAULT_HEADER_SIZE
+            height: params.headerSize
           }
         });
       });
@@ -1660,9 +1755,9 @@ function buildColumnHeaderCells(params) {
         sortDirection: null,
         rect: {
           x,
-          y: params.headerTop + (params.levels - 1) * DEFAULT_HEADER_SIZE,
+          y: params.headerTop + (params.levels - 1) * params.headerSize,
           width: columnWidth,
-          height: DEFAULT_HEADER_SIZE
+          height: params.headerSize
         }
       });
     }
@@ -2699,6 +2794,15 @@ function resolvePivotSelectionRect(layout, selection) {
   const visibleStartY = Math.max(startY, clipRect.y);
   const visibleEndY = Math.min(endY, clipRect.y + clipRect.height);
   if (visibleStartX >= visibleEndX || visibleStartY >= visibleEndY) return null;
+  const singleCell = kind === "cell" && indexes.startRowIndex === indexes.endRowIndex && indexes.startColumnIndex === indexes.endColumnIndex;
+  if (singleCell) {
+    return {
+      x: startX,
+      y: startY,
+      width: endX - startX,
+      height: endY - startY
+    };
+  }
   return {
     x: visibleStartX,
     y: visibleStartY,
@@ -2748,18 +2852,50 @@ function resolvePivotSelectionKind(selection) {
   }
   return selection?.activeNode?.axis ?? "cell";
 }
-function drawPivotSelectionBorder(context, rect, color) {
+function drawPivotSelectionBorder(context, rect, color, options) {
   context.save();
   context.strokeStyle = color;
   context.lineWidth = 1;
-  context.strokeRect(
-    rect.x + 0.5,
-    rect.y + 0.5,
-    Math.max(rect.width - 1, 0),
-    Math.max(rect.height - 1, 0)
-  );
+  const left = rect.x + 0.5;
+  const top = rect.y + 0.5;
+  const width = Math.max(rect.width - 1, 0);
+  const height = Math.max(rect.height - 1, 0);
+  const right = left + width;
+  const bottom = top + height;
+  const viewport = options?.viewportRect;
+  const radius = Math.min(options?.radius ?? 8, width / 2, height / 2);
+  const topLeft = viewport && isSameCoordinate(rect.x, viewport.x) && isSameCoordinate(rect.y, viewport.y) ? radius : 0;
+  const topRight = viewport && isSameCoordinate(rect.x + rect.width, viewport.x + viewport.width) && isSameCoordinate(rect.y, viewport.y) ? radius : 0;
+  const bottomRight = viewport && isSameCoordinate(rect.x + rect.width, viewport.x + viewport.width) && isSameCoordinate(rect.y + rect.height, viewport.y + viewport.height) ? radius : 0;
+  const bottomLeft = viewport && isSameCoordinate(rect.x, viewport.x) && isSameCoordinate(rect.y + rect.height, viewport.y + viewport.height) ? radius : 0;
+  if (!topLeft && !topRight && !bottomRight && !bottomLeft) {
+    context.strokeRect(left, top, width, height);
+    context.restore();
+    return;
+  }
+  context.beginPath();
+  context.moveTo(left + topLeft, top);
+  context.lineTo(right - topRight, top);
+  if (topRight) context.arcTo(right, top, right, top + topRight, topRight);
+  else context.lineTo(right, top);
+  context.lineTo(right, bottom - bottomRight);
+  if (bottomRight) {
+    context.arcTo(right, bottom, right - bottomRight, bottom, bottomRight);
+  } else context.lineTo(right, bottom);
+  context.lineTo(left + bottomLeft, bottom);
+  if (bottomLeft) {
+    context.arcTo(left, bottom, left, bottom - bottomLeft, bottomLeft);
+  } else context.lineTo(left, bottom);
+  context.lineTo(left, top + topLeft);
+  if (topLeft) context.arcTo(left, top, left + topLeft, top, topLeft);
+  else context.lineTo(left, top);
+  context.closePath();
+  context.stroke();
   context.restore();
 }
+function isSameCoordinate(first, second) {
+  return Math.abs(first - second) < 0.01;
+}
 function resolveSelectionIndexes(layout, selection) {
   const range = selection?.ranges[0];
   if (range) {
@@ -3056,6 +3192,17 @@ function drawPivotGridRect(context, rect, color, options) {
   context.stroke();
   context.restore();
 }
+function drawPivotViewportRightBorder(context, rect, color) {
+  const x = rect.x + rect.width - 0.5;
+  context.save();
+  context.strokeStyle = color;
+  context.lineWidth = 1;
+  context.beginPath();
+  context.moveTo(x, rect.y);
+  context.lineTo(x, rect.y + rect.height);
+  context.stroke();
+  context.restore();
+}
 function clipPivotViewport(context, rect, radius = 8) {
   appendRoundedRectPath(context, rect, radius);
   context.clip();
@@ -3141,6 +3288,12 @@ function renderPivotTable(params) {
   );
   const areaSelection = isPivotAreaSelection(layout, params.selection);
   const viewportWidth = resolvePivotViewportWidth(layout);
+  const tableViewportRect = {
+    x: 0,
+    y: 0,
+    width: layout.tableWidth,
+    height: layout.height
+  };
   context.clearRect(0, 0, layout.width, layout.height);
   context.save();
   clipPivotViewport(context, {
@@ -3181,7 +3334,7 @@ function renderPivotTable(params) {
       (cell) => drawPivotGridRect(context, cell.rect, theme.borderColor, {
         skipTop: true,
         skipLeft: cell.rect.x > 0,
-        skipRight: isSameCoordinate(
+        skipRight: isSameCoordinate2(
           cell.rect.x + cell.rect.width,
           layout.rowHeaderRect.x + layout.rowHeaderRect.width
         )
@@ -3202,13 +3355,21 @@ function renderPivotTable(params) {
     );
     layout.columnHeaderCells.forEach(
       (cell) => drawPivotGridRect(context, cell.rect, theme.borderColor, {
-        skipTop: cell.rect.y > 0,
-        skipLeft: true,
-        skipRight: isSameCoordinate(
+        skipTop: hasColumnHeaderCellAbove(
+          layout.columnHeaderCells,
+          cell,
+          layout.columnHeaderRect.y
+        ),
+        skipLeft: hasColumnHeaderCellLeft(
+          layout.columnHeaderCells,
+          cell,
+          layout.columnHeaderRect.x
+        ),
+        skipRight: isSameCoordinate2(
           cell.rect.x + cell.rect.width,
           layout.tableWidth
         ),
-        skipBottom: isSameCoordinate(
+        skipBottom: isSameCoordinate2(
           cell.rect.y + cell.rect.height,
           layout.columnHeaderRect.y + layout.columnHeaderRect.height
         )
@@ -3240,7 +3401,7 @@ function renderPivotTable(params) {
       (cell) => drawPivotGridRect(context, cell.rect, theme.borderColor, {
         skipTop: true,
         skipLeft: true,
-        skipRight: isSameCoordinate(
+        skipRight: isSameCoordinate2(
           cell.rect.x + cell.rect.width,
           layout.tableWidth
         )
@@ -3269,34 +3430,72 @@ function renderPivotTable(params) {
     headerBackgroundColor: theme.columnHeaderBackgroundColor,
     bodyBackgroundColor: theme.backgroundColor
   });
+  if (params.resizeGuideX != null) {
+    drawPivotResizeGuide(context, params.resizeGuideX, contentHeight);
+  }
+  context.restore();
+  if (!layout.scrollbar.vertical) {
+    context.save();
+    clipPivotViewport(context, tableViewportRect);
+    drawPivotViewportRightBorder(context, tableViewportRect, theme.borderColor);
+    context.restore();
+  }
+  drawPivotViewportBorder(
+    context,
+    { x: 0, y: 0, width: viewportWidth, height: contentHeight },
+    theme.borderColor
+  );
   const selectionRect = resolvePivotSelectionRect(layout, params.selection);
   if (selectionRect) {
     const selectionClipRect = resolvePivotSelectionClipRect(
       layout,
       params.selection
     );
+    context.save();
+    clipPivotViewport(context, tableViewportRect);
     withClip(context, selectionClipRect, () => {
       drawPivotSelectionBorder(
         context,
         selectionRect,
-        theme.selectionBorderColor
+        theme.selectionBorderColor,
+        { viewportRect: tableViewportRect }
       );
     });
+    context.restore();
   }
-  if (params.resizeGuideX != null) {
-    drawPivotResizeGuide(context, params.resizeGuideX, contentHeight);
-  }
-  context.restore();
-  drawPivotViewportBorder(
-    context,
-    { x: 0, y: 0, width: viewportWidth, height: contentHeight },
-    theme.borderColor
-  );
   return {
     headerCellCount: layout.reportFilterCells.length + layout.rowFieldHeaderCells.length + layout.rowHeaderCells.length + layout.columnHeaderCells.length,
     bodyCellCount: layout.bodyCells.length
   };
 }
+function hasColumnHeaderCellAbove(cells, cell, headerTop) {
+  if (isSameCoordinate2(cell.rect.y, headerTop)) return headerTop > 0;
+  const left = cell.rect.x;
+  const right = left + cell.rect.width;
+  return cells.some((candidate) => {
+    if (candidate === cell) return false;
+    const candidateBottom = candidate.rect.y + candidate.rect.height;
+    if (!isSameCoordinate2(candidateBottom, cell.rect.y)) return false;
+    const candidateLeft = candidate.rect.x;
+    const candidateRight = candidateLeft + candidate.rect.width;
+    return candidateLeft < right && candidateRight > left;
+  });
+}
+function hasColumnHeaderCellLeft(cells, cell, headerLeft) {
+  if (cell.rect.x <= headerLeft + 0.01) {
+    return true;
+  }
+  const top = cell.rect.y;
+  const bottom = top + cell.rect.height;
+  return cells.some((candidate) => {
+    if (candidate === cell) return false;
+    const candidateRight = candidate.rect.x + candidate.rect.width;
+    if (!isSameCoordinate2(candidateRight, cell.rect.x)) return false;
+    const candidateTop = candidate.rect.y;
+    const candidateBottom = candidateTop + candidate.rect.height;
+    return candidateTop < bottom && candidateBottom > top;
+  });
+}
 function resolvePivotViewportWidth(layout) {
   const horizontalRight = layout.scrollbar.horizontal ? layout.scrollbar.horizontal.increaseButton.x + layout.scrollbar.horizontal.increaseButton.width : 0;
   const verticalRight = layout.scrollbar.vertical ? layout.scrollbar.vertical.decreaseButton.x + layout.scrollbar.vertical.decreaseButton.width : 0;
@@ -3336,7 +3535,7 @@ function drawDebugOverlay(context, layout, theme) {
     layout.bodyRect
   ].forEach((rect) => strokeRect(context, rect, "#f04438"));
   context.setLineDash([]);
-  context.font = `12px ${theme.fontFamily}`;
+  context.font = `${theme.fontSize}px ${theme.fontFamily}`;
   context.textAlign = "left";
   context.textBaseline = "top";
   context.fillStyle = "#f04438";
@@ -3595,11 +3794,11 @@ function resolveSlotPathKey(slots, nodeId, indicatorKey) {
     (slot) => (slot.nodeId ?? "") === nodeId && (!slot.indicatorKey || slot.indicatorKey === indicatorKey)
   )?.pathKey ?? null;
 }
-function isSameCoordinate(first, second) {
+function isSameCoordinate2(first, second) {
   return Math.abs(first - second) < 0.01;
 }
 function resolveBodyDisplayText(cell, indicator) {
-  if (!indicator || indicator.formatter || typeof cell.value !== "number") {
+  if (!indicator || indicator.formatter || indicator.dataFormat || typeof cell.value !== "number") {
     return cell.formattedValue;
   }
   if (indicator.cellType === "percent") {
@@ -3736,10 +3935,18 @@ function drawSortIcon(context, rect, direction, rightPadding) {
 function drawText(context, text, rect, color, padding, align) {
   const availableWidth = Math.max(rect.width - padding * 2, 0);
   const value = truncateText(context, text, availableWidth);
+  context.textBaseline = "alphabetic";
+  const metrics = context.measureText(value);
+  const ascent = metrics.actualBoundingBoxAscent ?? 0;
+  const descent = metrics.actualBoundingBoxDescent ?? 0;
+  const hasGlyphBounds = ascent > 0 || descent > 0;
+  const centerY = rect.y + rect.height / 2;
   context.fillStyle = color;
   context.textAlign = align;
+  context.textBaseline = hasGlyphBounds ? "alphabetic" : "middle";
   const x = align === "right" ? rect.x + rect.width - padding : align === "center" ? rect.x + rect.width / 2 : rect.x + padding;
-  context.fillText(value, x, rect.y + rect.height / 2, availableWidth);
+  const y = hasGlyphBounds ? centerY + (ascent - descent) / 2 : centerY;
+  context.fillText(value, x, y, availableWidth);
 }
 function truncateText(context, text, maxWidth) {
   if (context.measureText(text).width <= maxWidth) return text;
@@ -3787,7 +3994,7 @@ function hitTestPivotLayout(layout, x, y) {
       onSortIcon: false
     };
   }
-  const bodyCell = findLastContaining(layout.bodyCells, x, y);
+  const bodyCell = contains(layout.bodyRect, x, y) ? findLastContaining(layout.bodyCells, x, y) : void 0;
   if (bodyCell) {
     return {
       region: "body",
@@ -3797,7 +4004,7 @@ function hitTestPivotLayout(layout, x, y) {
       onSortIcon: false
     };
   }
-  const rowHeaderCell = findLastContaining(layout.rowHeaderCells, x, y);
+  const rowHeaderCell = contains(layout.rowHeaderRect, x, y) ? findLastContaining(layout.rowHeaderCells, x, y) : void 0;
   if (rowHeaderCell) {
     return {
       region: "rowHeader",
@@ -3807,9 +4014,7 @@ function hitTestPivotLayout(layout, x, y) {
       onSortIcon: isSortIconHit(rowHeaderCell, x)
     };
   }
-  const columnHeaderCell = layout.columnHeaderCells.find(
-    (cell) => contains(cell.rect, x, y)
-  );
+  const columnHeaderCell = contains(layout.columnHeaderRect, x, y) ? layout.columnHeaderCells.find((cell) => contains(cell.rect, x, y)) : void 0;
   if (columnHeaderCell) {
     return {
       region: "columnHeader",
@@ -4325,7 +4530,7 @@ var PivotTable = class {
       }
       if (hit.reportFilterCell) return;
       if (hit.bodyCell) {
-        this.selectCell(toCellAddress(hit.bodyCell), event.shiftKey);
+        this.selectPointerCell(toCellAddress(hit.bodyCell), event.shiftKey);
         return;
       }
       const header = hit.headerCell;
@@ -4427,7 +4632,76 @@ var PivotTable = class {
     });
     __publicField(this, "handleContextMenu", (event) => {
       const hit = this.resolveHit(event);
-      if (!hit?.bodyCell || !this.core || !this.layout) return;
+      if (!hit || !this.core || !this.layout) return;
+      if (hit.reportFilterCell) {
+        const cell = hit.reportFilterCell;
+        event.preventDefault();
+        this.options.ui?.onContextMenuRequest?.({
+          x: event.clientX,
+          y: event.clientY,
+          target: "header",
+          title: cell.label,
+          axis: "filter",
+          onCopy: () => this.copyPivotText(`${cell.label}	${cell.valueLabel}`),
+          onOpenFilter: () => this.openReportFilterPanel(cell),
+          ...this.createContextMenuSettings(),
+          onExportCsv: () => downloadBlob(
+            new Blob([this.exportCsv()], { type: "text/csv;charset=utf-8" }),
+            "pivot-table.csv"
+          ),
+          onExportXlsx: () => downloadBlob(
+            new Blob([toArrayBuffer(this.exportXlsx())], {
+              type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            }),
+            "pivot-table.xlsx"
+          ),
+          onClose: () => this.options.ui?.onContextMenuRequest?.(null)
+        });
+        return;
+      }
+      if (hit.headerCell) {
+        const header = hit.headerCell;
+        const model2 = this.core.getPivotModel();
+        const node = header.nodeId ? (header.axis === "row" ? model2?.rowNodes : model2?.columnNodes)?.get(
+          header.nodeId
+        ) : void 0;
+        const dimensionKey = header.dimensionKey ?? node?.dimensionKey;
+        event.preventDefault();
+        this.options.ui?.onContextMenuRequest?.({
+          x: event.clientX,
+          y: event.clientY,
+          target: "header",
+          title: header.label,
+          axis: header.axis,
+          nodeKind: node?.kind ?? header.kind,
+          indicatorKey: header.indicatorKey ?? void 0,
+          onCopy: () => this.copyPivotText(header.label),
+          sortDirection: header.sortDirection,
+          onSortAsc: header.sortable && dimensionKey ? () => this.setDimensionSort(header.axis, dimensionKey, "asc") : void 0,
+          onSortDesc: header.sortable && dimensionKey ? () => this.setDimensionSort(header.axis, dimensionKey, "desc") : void 0,
+          onClearSort: header.sortable && dimensionKey ? () => this.setDimensionSort(header.axis, dimensionKey, null) : void 0,
+          onOpenFilter: header.filterable ? () => this.openFilterPanel(hit) : void 0,
+          expanded: header.expandable ? header.expanded : void 0,
+          onExpand: header.expandable && header.nodeId ? () => header.axis === "row" ? this.expandRowNode(header.nodeId) : this.expandColumnNode(header.nodeId) : void 0,
+          onCollapse: header.expandable && header.nodeId ? () => header.axis === "row" ? this.collapseRowNode(header.nodeId) : this.collapseColumnNode(header.nodeId) : void 0,
+          onExpandAll: () => this.expandAll(header.axis),
+          onCollapseAll: () => this.collapseAll(header.axis),
+          ...this.createContextMenuSettings(header.indicatorKey ?? void 0),
+          onExportCsv: () => downloadBlob(
+            new Blob([this.exportCsv()], { type: "text/csv;charset=utf-8" }),
+            "pivot-table.csv"
+          ),
+          onExportXlsx: () => downloadBlob(
+            new Blob([toArrayBuffer(this.exportXlsx())], {
+              type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
+            }),
+            "pivot-table.xlsx"
+          ),
+          onClose: () => this.options.ui?.onContextMenuRequest?.(null)
+        });
+        return;
+      }
+      if (!hit.bodyCell) return;
       event.preventDefault();
       const address = toCellAddress(hit.bodyCell);
       const currentRange = resolvePivotSelectionRange(
@@ -4437,7 +4711,7 @@ var PivotTable = class {
       const insideCurrentRange = Boolean(
         currentRange && hit.bodyCell.rowIndex >= currentRange.startRowIndex && hit.bodyCell.rowIndex <= currentRange.endRowIndex && hit.bodyCell.columnIndex >= currentRange.startColumnIndex && hit.bodyCell.columnIndex <= currentRange.endColumnIndex
       );
-      if (!insideCurrentRange) this.selectCell(address);
+      if (!insideCurrentRange) this.selectPointerCell(address);
       const selectionRange = resolvePivotSelectionRange(
         this.layout,
         this.core.getSelection()
@@ -4447,15 +4721,28 @@ var PivotTable = class {
         columnPathKey: hit.bodyCell.columnPathKey,
         indicatorKey: hit.bodyCell.indicatorKey
       });
+      const model = this.core.getPivotModel();
+      const rowNode = hit.bodyCell.rowNodeId ? model?.rowNodes.get(hit.bodyCell.rowNodeId) : void 0;
+      const summary = rowNode?.kind === "subtotal" || rowNode?.kind === "grandTotal";
+      const indicator = this.options.indicators.find(
+        (item) => item.key === hit.bodyCell?.indicatorKey
+      );
+      const summaryAggregator = typeof indicator?.aggregator === "string" && isBuiltInPivotAggregator(indicator.aggregator) ? indicator.aggregator : "sum";
       this.options.ui?.onContextMenuRequest?.({
         x: event.clientX,
         y: event.clientY,
+        target: summary ? "summary" : "body",
+        title: summary ? rowNode.label : void 0,
+        nodeKind: rowNode?.kind,
+        indicatorKey: hit.bodyCell.indicatorKey,
         recordCount: records.length,
+        summaryAggregator: summary ? summaryAggregator : void 0,
+        summaryPrecision: summary ? indicator?.precision : void 0,
         onCopy: () => {
-          const model = this.core?.getPivotModel();
-          const text = model ? createPivotRangeSelectionText({
+          const model2 = this.core?.getPivotModel();
+          const text = model2 ? createPivotRangeSelectionText({
             layout: this.layout,
-            model,
+            model: model2,
             startRowIndex: hit.bodyCell.rowIndex,
             endRowIndex: hit.bodyCell.rowIndex,
             startColumnIndex: hit.bodyCell.columnIndex,
@@ -4480,11 +4767,11 @@ var PivotTable = class {
           columnCount: this.layout.columnSlots.length
         },
         onCopyCustomSelection: (range) => {
-          const model = this.core?.getPivotModel();
-          if (!model || !this.layout) return;
+          const model2 = this.core?.getPivotModel();
+          if (!model2 || !this.layout) return;
           const text = createPivotRangeSelectionText({
             layout: this.layout,
-            model,
+            model: model2,
             startRowIndex: range.startRow - 1,
             endRowIndex: range.endRow - 1,
             startColumnIndex: range.startColumn - 1,
@@ -4494,6 +4781,7 @@ var PivotTable = class {
             this.copyPivotText(text);
           }
         },
+        ...this.createContextMenuSettings(hit.bodyCell.indicatorKey),
         onExportCsv: () => downloadBlob(
           new Blob([this.exportCsv()], { type: "text/csv;charset=utf-8" }),
           "pivot-table.csv"
@@ -4509,9 +4797,9 @@ var PivotTable = class {
     });
     __publicField(this, "handlePointerDown", (event) => {
       if (!this.layout || !this.host) return;
-      this.stopWheelScrollSmoothing();
       const scrollbarHit = this.resolveScrollbarHit(event);
       if (scrollbarHit && event.button === 0) {
+        this.stopWheelScrollSmoothing();
         this.beginScrollbarInteraction(event, scrollbarHit);
         return;
       }
@@ -4522,7 +4810,7 @@ var PivotTable = class {
         if (cellHit?.bodyCell) {
           const address = toCellAddress(cellHit.bodyCell);
           this.host.root.focus({ preventScroll: true });
-          const selection = this.selectCell(address, event.shiftKey);
+          const selection = this.selectPointerCell(address, event.shiftKey);
           const text = this.resolveBodyText(cellHit.bodyCell);
           const textOriginX = this.resolveBodyTextOriginX(cellHit.bodyCell, text);
           const anchorOffset = text ? resolvePivotTextOffset({
@@ -4608,8 +4896,12 @@ var PivotTable = class {
           if (selection) this.setSelection(selection);
           this.host.root.setPointerCapture(event.pointerId);
         }
+        if (cellHit?.headerCell || cellHit?.reportFilterCell) {
+          event.preventDefault();
+        }
         return;
       }
+      this.stopWheelScrollSmoothing();
       event.preventDefault();
       const startWidth = hit.kind === "rowDimension" ? this.layout.rowDimensionWidths[hit.index] ?? 140 : this.layout.columnWidths[hit.index] ?? this.layout.columnWidth;
       this.resizeSession = {
@@ -4799,9 +5091,16 @@ var PivotTable = class {
   }
   /** 选中指定值单元格。 */
   selectCell(address, extend = false) {
+    return this.commitCellSelection(address, extend, true);
+  }
+  /** 鼠标命中的单元格已在视口内，选中时不再校正滚动位置。 */
+  selectPointerCell(address, extend = false) {
+    return this.commitCellSelection(address, extend, false);
+  }
+  commitCellSelection(address, extend, reveal) {
     const selection = this.core?.selectCell(address, extend) ?? null;
     if (selection) {
-      this.scrollToCell(address);
+      if (reveal) this.scrollToCell(address);
       this.scheduleRender();
     }
     return selection;
@@ -4959,6 +5258,27 @@ var PivotTable = class {
       this.advanceWheelScrollSmoothing(nextTime);
     });
   }
+  createContextMenuSettings(indicatorKey) {
+    const indicator = indicatorKey ? this.options.indicators.find((item) => item.key === indicatorKey) : void 0;
+    return {
+      density: resolvePivotTableDensity(this.options.rowHeight),
+      onChangeDensity: (density) => {
+        this.updateOptions({
+          ...this.options,
+          rowHeight: resolvePivotTableDensityRowHeight(density)
+        });
+      },
+      dataFormat: indicator?.dataFormat ?? "default",
+      onChangeDataFormat: indicator ? (dataFormat) => {
+        this.updateOptions({
+          ...this.options,
+          indicators: this.options.indicators.map(
+            (item) => item.key === indicator.key ? { ...item, dataFormat } : item
+          )
+        });
+      } : void 0
+    };
+  }
   updateTooltip(hit, event) {
     if (!this.host) return;
     const cell = hit?.bodyCell ?? hit?.headerCell;
@@ -5164,7 +5484,7 @@ var PivotTable = class {
     const indicator = this.options.indicators.find(
       (item) => item.key === cell.indicatorKey
     );
-    if (!indicator || indicator.formatter || typeof cell.value !== "number")
+    if (!indicator || indicator.formatter || indicator.dataFormat || typeof cell.value !== "number")
       return cell.formattedValue;
     if (indicator.cellType === "percent")
       return `${(cell.value * 100).toFixed(indicator.precision ?? 2)}%`;
@@ -5202,7 +5522,7 @@ var PivotTable = class {
   measurePivotText(text) {
     const context = this.host?.canvas.getContext("2d");
     if (!context) return text.length * 8;
-    context.font = `${this.options.theme?.fontSize ?? 13}px ${this.options.theme?.fontFamily ?? "sans-serif"}`;
+    context.font = `${this.options.theme?.fontSize ?? 14}px ${this.options.theme?.fontFamily ?? "sans-serif"}`;
     return context.measureText(text).width;
   }
   updateRowHeaderSelectionDrag(event) {
@@ -5526,6 +5846,9 @@ function toCellAddress(cell) {
     indicatorKey: cell.indicatorKey
   };
 }
+function isBuiltInPivotAggregator(value) {
+  return ["sum", "avg", "count", "distinctCount", "min", "max"].includes(value);
+}
 function isSameAddress(left, right) {
   return Boolean(
     left === right || left && right && left.rowNodeId === right.rowNodeId && left.columnNodeId === right.columnNodeId && left.indicatorKey === right.indicatorKey
@@ -5538,6 +5861,20 @@ function resolveNavigationDirection(key) {
   if (key === "ArrowRight") return { row: 0, column: 1 };
   return null;
 }
+function resolvePivotTableDensity(rowHeight) {
+  if (rowHeight == null) return "auto";
+  if (rowHeight <= 26) return "ultra-compact";
+  if (rowHeight <= 32) return "compact";
+  if (rowHeight >= 56) return "comfortable";
+  return "middle";
+}
+function resolvePivotTableDensityRowHeight(density) {
+  if (density === "comfortable") return 56;
+  if (density === "middle") return 48;
+  if (density === "compact") return 32;
+  if (density === "ultra-compact") return 26;
+  return void 0;
+}
 function resolveAdjacentAddress(layout, address, direction) {
   const indexes = resolveAddressIndexes3(layout, address);
   if (!indexes) return null;
@@ -5588,6 +5925,90 @@ function toArrayBuffer(value) {
   return buffer;
 }
 
+// src/adapters/storage/indexeddb-field-layout-storage.ts
+var DATABASE_NAME = "canvas_components_pivot_table_config";
+var STORE_NAME = "field_layout";
+var DB_VERSION = 1;
+var dbPromise = null;
+async function savePivotFieldLayout(key, layout) {
+  try {
+    const db = await openDatabase();
+    await requestToPromise(
+      db.transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME).put(cloneLayout(layout), key)
+    );
+  } catch (error) {
+    console.error("[PivotTable] \u5B57\u6BB5\u5E03\u5C40\u4FDD\u5B58\u5931\u8D25\uFF1A", error);
+  }
+}
+async function loadPivotFieldLayout(key) {
+  try {
+    const db = await openDatabase();
+    const value = await requestToPromise(
+      db.transaction(STORE_NAME, "readonly").objectStore(STORE_NAME).get(key)
+    );
+    return isPivotFieldLayout(value) ? cloneLayout(value) : void 0;
+  } catch (error) {
+    console.error("[PivotTable] \u5B57\u6BB5\u5E03\u5C40\u8BFB\u53D6\u5931\u8D25\uFF1A", error);
+    return void 0;
+  }
+}
+async function clearPivotFieldLayout(key) {
+  try {
+    const db = await openDatabase();
+    await requestToPromise(
+      db.transaction(STORE_NAME, "readwrite").objectStore(STORE_NAME).delete(key)
+    );
+  } catch (error) {
+    console.error("[PivotTable] \u5B57\u6BB5\u5E03\u5C40\u6E05\u9664\u5931\u8D25\uFF1A", error);
+  }
+}
+function openDatabase() {
+  if (dbPromise) return dbPromise;
+  dbPromise = new Promise((resolve, reject) => {
+    if (typeof indexedDB === "undefined") {
+      reject(new Error("\u5F53\u524D\u73AF\u5883\u4E0D\u652F\u6301 IndexedDB"));
+      return;
+    }
+    const request = indexedDB.open(DATABASE_NAME, DB_VERSION);
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_NAME)) {
+        db.createObjectStore(STORE_NAME);
+      }
+    };
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+  dbPromise.catch(() => {
+    dbPromise = null;
+  });
+  return dbPromise;
+}
+function requestToPromise(request) {
+  return new Promise((resolve, reject) => {
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+function isPivotFieldLayout(value) {
+  if (!value || typeof value !== "object") return false;
+  const layout = value;
+  return ["filters", "columns", "rows", "values"].every(
+    (key) => isStringArray(layout[key])
+  );
+}
+function isStringArray(value) {
+  return Array.isArray(value) && value.every((item) => typeof item === "string");
+}
+function cloneLayout(layout) {
+  return {
+    filters: [...layout.filters],
+    columns: [...layout.columns],
+    rows: [...layout.rows],
+    values: [...layout.values]
+  };
+}
+
 // src/domain/field/pivot-field-layout.ts
 function createEmptyPivotFieldLayout() {
   return { filters: [], columns: [], rows: [], values: [] };
@@ -5735,6 +6156,6 @@ function areaToLayoutKey(area) {
   return "values";
 }
 
-export { PivotTable, aggregatePivotRecords, buildPivotDimensionTree, buildPivotLayoutSnapshot, computePivotScrollbarLayout, createBuiltInPivotAggregators, createEmptyPivotFieldLayout, createEmptyPivotFilterState, createPivotAggregatorRegistry, createPivotAxisSlots, createPivotCellKey, createPivotExportMatrix, createPivotFieldCatalog, createPivotFieldLayout, createPivotSelectionText, defaultPivotTableTheme, encodePivotDimensionValue, encodePivotPath, exportPivotMatrixToCsv, exportPivotMatrixToXlsx, filterPivotRecords, findPivotFieldArea, flattenVisiblePivotLeaves, getPivotDimensionFilterOptions, hitTestPivotLayout, hitTestPivotResize, hitTestPivotScrollbar, movePivotField, removePivotField, renderPivotTable, resolvePivotDefaultSorts, resolvePivotDimensionKey, resolvePivotDimensionTitle, resolvePivotDimensionValue, resolvePivotDimensionWidth, resolvePivotFieldLayoutOptions, resolvePivotIndicatorAggregator, resolvePivotValueFieldTitle };
+export { PivotTable, aggregatePivotRecords, buildPivotDimensionTree, buildPivotLayoutSnapshot, clearPivotFieldLayout, computePivotScrollbarLayout, createBuiltInPivotAggregators, createEmptyPivotFieldLayout, createEmptyPivotFilterState, createPivotAggregatorRegistry, createPivotAxisSlots, createPivotCellKey, createPivotExportMatrix, createPivotFieldCatalog, createPivotFieldLayout, createPivotSelectionText, defaultPivotTableTheme, encodePivotDimensionValue, encodePivotPath, exportPivotMatrixToCsv, exportPivotMatrixToXlsx, filterPivotRecords, findPivotFieldArea, flattenVisiblePivotLeaves, getPivotDimensionFilterOptions, hitTestPivotLayout, hitTestPivotResize, hitTestPivotScrollbar, loadPivotFieldLayout, movePivotField, removePivotField, renderPivotTable, resolvePivotDefaultSorts, resolvePivotDimensionKey, resolvePivotDimensionTitle, resolvePivotDimensionValue, resolvePivotDimensionWidth, resolvePivotFieldLayoutOptions, resolvePivotIndicatorAggregator, resolvePivotValueFieldTitle, savePivotFieldLayout };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map