@canvas-components/pivot-table 0.1.9 → 0.2.2

package/dist/index.cjs

@@ -330,8 +330,6 @@ function indexPivotNodes(root) {
   visit(root);
   return nodeMap;
 }
-
-// src/domain/aggregation/built-in-aggregators.ts
 function createBuiltInPivotAggregators() {
   return {
     sum: createNumericAggregator("sum"),
@@ -362,14 +360,14 @@ function createNumericAggregator(type) {
         return;
       }
       state.numericCount += 1;
-      state.sum += numericValue;
+      state.sum = utils.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 = utils.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));
@@ -377,9 +375,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 = utils.dividePreciseNumber(state.sum, state.numericCount);
+        return average == null ? null : Number(average);
       }
       if (type === "min") return state.min;
       return state.max;
@@ -390,7 +390,7 @@ function createAccumulator() {
   return {
     count: 0,
     numericCount: 0,
-    sum: 0,
+    sum: "0",
     min: null,
     max: null,
     distinctValues: /* @__PURE__ */ new Set()
@@ -749,14 +749,11 @@ function matchesSearchKeyword(value, filter) {
   return filter.searchExact ? text === keyword : text.includes(keyword);
 }
 function matchesFilterConditions(value, filter) {
-  const first = filter.condition;
-  const second = filter.secondCondition;
-  const firstActive = first && first.operator !== "none";
-  const secondActive = second && second.operator !== "none";
-  if (!firstActive && !secondActive) return true;
-  if (!firstActive) return evaluateCondition(value, second);
-  if (!secondActive) return evaluateCondition(value, first);
-  return filter.conditionRelation === "or" ? evaluateCondition(value, first) || evaluateCondition(value, second) : evaluateCondition(value, first) && evaluateCondition(value, second);
+  const conditions = (filter.conditions?.length ? filter.conditions : [filter.condition, filter.secondCondition]).filter(
+    (condition) => condition != null && condition.operator !== "none"
+  );
+  if (conditions.length === 0) return true;
+  return filter.conditionRelation === "or" ? conditions.some((condition) => evaluateCondition(value, condition)) : conditions.every((condition) => evaluateCondition(value, condition));
 }
 function evaluateCondition(value, condition) {
   const text = value == null ? "" : String(value);
@@ -2652,6 +2649,7 @@ function createPivotDomHost(container) {
     right: "0",
     height: "100%",
     overflow: "hidden",
+    borderRadius: "8px",
     touchAction: "none"
   });
   Object.assign(canvas.style, {
@@ -2771,18 +2769,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) {
@@ -2880,29 +2910,127 @@ var defaultPivotTableTheme = {
 };
 
 // src/rendering/draw-scrollbars.ts
-function drawPivotScrollbars(context, layout, borderColor) {
+function drawPivotScrollbars(context, layout, borderColor, verticalFrame) {
   context.save();
+  if (layout.horizontal && verticalFrame) {
+    drawHorizontalScrollbarMask(
+      context,
+      layout.horizontal,
+      verticalFrame.bodyBackgroundColor
+    );
+  }
+  if (layout.vertical && verticalFrame) {
+    drawVerticalScrollbarFrame(
+      context,
+      layout.vertical,
+      verticalFrame,
+      borderColor
+    );
+  }
   if (layout.horizontal) {
     drawAxis(context, layout.horizontal, "horizontal", borderColor);
   }
   if (layout.vertical) {
     drawAxis(context, layout.vertical, "vertical", borderColor);
   }
+  if (layout.horizontal) {
+    drawHorizontalScrollbarTopBorder(
+      context,
+      layout.horizontal,
+      layout.vertical,
+      borderColor
+    );
+  }
+  context.restore();
+}
+function drawHorizontalScrollbarMask(context, layout, backgroundColor) {
+  const left = layout.decreaseButton.x;
+  const right = layout.increaseButton.x + layout.increaseButton.width;
+  const top = layout.decreaseButton.y;
+  const height = layout.decreaseButton.height;
+  if (right <= left || height <= 0) return;
+  context.save();
+  context.fillStyle = backgroundColor;
+  context.fillRect(left, top, right - left, height);
+  context.restore();
+}
+function drawHorizontalScrollbarTopBorder(context, horizontal, vertical, borderColor) {
+  const left = Math.round(horizontal.decreaseButton.x) + 0.5;
+  const horizontalRight = horizontal.increaseButton.x + horizontal.increaseButton.width;
+  const verticalRight = vertical ? vertical.decreaseButton.x + vertical.decreaseButton.width : horizontalRight;
+  const right = Math.round(Math.max(horizontalRight, verticalRight)) - 0.5;
+  const top = Math.round(horizontal.decreaseButton.y) + 0.5;
+  if (right <= left) return;
+  context.save();
+  context.strokeStyle = borderColor;
+  context.lineWidth = 1;
+  context.beginPath();
+  context.moveTo(left, top);
+  context.lineTo(right, top);
+  context.stroke();
   context.restore();
 }
 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);
+  drawTrackBorder(context, layout.track, axis, borderColor);
+}
+function drawTrackBorder(context, rect, axis, borderColor) {
+  const left = Math.round(rect.x) + 0.5;
+  const right = Math.round(rect.x + rect.width) - 0.5;
+  const top = Math.round(rect.y) + 0.5;
+  const bottom = Math.round(rect.y + rect.height) - 0.5;
+  if (right <= left || bottom <= top) return;
+  context.save();
+  context.strokeStyle = borderColor;
+  context.lineWidth = 1;
+  context.beginPath();
+  if (axis === "horizontal") {
+    context.moveTo(left, top);
+    context.lineTo(right, top);
+  } else {
+    context.moveTo(left, top);
+    context.lineTo(left, bottom);
+  }
+  context.stroke();
+  context.restore();
 }
-function drawTrack(context, rect, borderColor) {
-  context.fillStyle = "rgba(148, 163, 184, 0.16)";
+function drawVerticalScrollbarFrame(context, layout, frame, borderColor) {
+  const left = Math.round(layout.decreaseButton.x) + 0.5;
+  const top = Math.round(frame.top) + 0.5;
+  const bottom = Math.round(frame.top + frame.height) - 0.5;
+  const headerBottom = Math.round(frame.headerBottom) + 0.5;
+  if (bottom <= top) return;
+  context.save();
+  context.fillStyle = frame.headerBackgroundColor;
+  context.fillRect(
+    layout.decreaseButton.x,
+    frame.top,
+    layout.decreaseButton.width,
+    Math.max(frame.headerBottom - frame.top, 0)
+  );
+  context.fillStyle = frame.bodyBackgroundColor;
+  context.fillRect(
+    layout.decreaseButton.x,
+    frame.headerBottom,
+    layout.decreaseButton.width,
+    Math.max(frame.top + frame.height - frame.headerBottom, 0)
+  );
   context.strokeStyle = borderColor;
   context.lineWidth = 1;
-  roundRect(context, rect, rect.height / 2);
-  context.fill();
+  context.beginPath();
+  context.moveTo(left, top);
+  context.lineTo(left, bottom);
   context.stroke();
+  if (headerBottom > top && headerBottom < bottom) {
+    const right = Math.round(layout.decreaseButton.x + layout.decreaseButton.width) - 0.5;
+    context.beginPath();
+    context.moveTo(left, headerBottom);
+    context.lineTo(right, headerBottom);
+    context.stroke();
+  }
+  context.restore();
 }
 function drawThumb(context, rect) {
   context.fillStyle = "rgba(100, 116, 139, 0.8)";
@@ -2910,28 +3038,25 @@ function drawThumb(context, rect) {
   context.fill();
 }
 function drawButton(context, rect, axis, direction) {
-  context.fillStyle = "rgba(226, 232, 240, 0.92)";
-  context.strokeStyle = "rgba(148, 163, 184, 0.65)";
-  context.lineWidth = 1;
-  roundRect(context, rect, rect.height / 2);
-  context.fill();
-  context.stroke();
   context.fillStyle = "rgba(71, 85, 105, 0.88)";
   context.beginPath();
   const centerX = rect.x + rect.width / 2;
   const centerY = rect.y + rect.height / 2;
+  const iconSize = Math.min(rect.width, rect.height) * 0.64;
+  const directionOffset = iconSize * 0.4;
+  const crossAxisOffset = iconSize / 2;
   if (axis === "horizontal") {
-    const tipX = centerX + (direction === "decrease" ? -1 : 1) * rect.width * 0.14;
-    const tailX = centerX + (direction === "decrease" ? 1 : -1) * rect.width * 0.14;
+    const tipX = centerX + (direction === "decrease" ? -1 : 1) * directionOffset;
+    const tailX = centerX + (direction === "decrease" ? 1 : -1) * directionOffset;
     context.moveTo(tipX, centerY);
-    context.lineTo(tailX, centerY - rect.height * 0.22);
-    context.lineTo(tailX, centerY + rect.height * 0.22);
+    context.lineTo(tailX, centerY - crossAxisOffset);
+    context.lineTo(tailX, centerY + crossAxisOffset);
   } else {
-    const tipY = centerY + (direction === "decrease" ? -1 : 1) * rect.height * 0.14;
-    const tailY = centerY + (direction === "decrease" ? 1 : -1) * rect.height * 0.14;
+    const tipY = centerY + (direction === "decrease" ? -1 : 1) * directionOffset;
+    const tailY = centerY + (direction === "decrease" ? 1 : -1) * directionOffset;
     context.moveTo(centerX, tipY);
-    context.lineTo(centerX - rect.width * 0.22, tailY);
-    context.lineTo(centerX + rect.width * 0.22, tailY);
+    context.lineTo(centerX - crossAxisOffset, tailY);
+    context.lineTo(centerX + crossAxisOffset, tailY);
   }
   context.closePath();
   context.fill();
@@ -2995,14 +3120,22 @@ function drawPivotViewportRightBorder(context, rect, color) {
   context.stroke();
   context.restore();
 }
-function drawPivotViewportBottomBorder(context, rect, color) {
-  const y = rect.y + rect.height - 0.5;
+function clipPivotViewport(context, rect, radius = 8) {
+  appendRoundedRectPath(context, rect, radius);
+  context.clip();
+}
+function drawPivotViewportBorder(context, rect, color, radius = 8) {
+  const borderRect = {
+    x: rect.x + 0.5,
+    y: rect.y + 0.5,
+    width: Math.max(rect.width - 1, 0),
+    height: Math.max(rect.height - 1, 0)
+  };
+  if (borderRect.width <= 0 || borderRect.height <= 0) return;
   context.save();
   context.strokeStyle = color;
   context.lineWidth = 1;
-  context.beginPath();
-  context.moveTo(rect.x, y);
-  context.lineTo(rect.x + rect.width, y);
+  appendRoundedRectPath(context, borderRect, radius);
   context.stroke();
   context.restore();
 }
@@ -3020,6 +3153,21 @@ function drawPivotHeaderBoundaries(context, options, color) {
   context.stroke();
   context.restore();
 }
+function appendRoundedRectPath(context, rect, radius) {
+  const nextRadius = Math.max(
+    Math.min(radius, rect.width / 2, rect.height / 2),
+    0
+  );
+  const right = rect.x + rect.width;
+  const bottom = rect.y + rect.height;
+  context.beginPath();
+  context.moveTo(rect.x + nextRadius, rect.y);
+  context.arcTo(right, rect.y, right, bottom, nextRadius);
+  context.arcTo(right, bottom, rect.x, bottom, nextRadius);
+  context.arcTo(rect.x, bottom, rect.x, rect.y, nextRadius);
+  context.arcTo(rect.x, rect.y, right, rect.y, nextRadius);
+  context.closePath();
+}
 
 // src/domain/layout/sticky-row-header.ts
 function resolveStickyRowHeaderContentRect(params) {
@@ -3056,7 +3204,21 @@ function renderPivotTable(params) {
     activeNodePathKey
   );
   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, {
+    x: 0,
+    y: 0,
+    width: viewportWidth,
+    height: layout.height
+  });
   context.font = `${theme.fontSize}px ${theme.fontFamily}`;
   context.textBaseline = "middle";
   withClip(context, layout.reportFilterRect, () => {
@@ -3089,7 +3251,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
         )
@@ -3112,11 +3274,11 @@ function renderPivotTable(params) {
       (cell) => drawPivotGridRect(context, cell.rect, theme.borderColor, {
         skipTop: cell.rect.y > 0,
         skipLeft: true,
-        skipRight: isSameCoordinate(
+        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
         )
@@ -3148,7 +3310,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
         )
@@ -3170,15 +3332,24 @@ function renderPivotTable(params) {
     theme.borderColor
   );
   if (options.debug) drawDebugOverlay(context, layout, theme);
-  drawPivotScrollbars(context, layout.scrollbar, theme.borderColor);
-  drawPivotViewportRightBorder(
-    context,
-    { x: 0, y: 0, width: layout.tableWidth, height: contentHeight },
-    theme.borderColor
-  );
-  drawPivotViewportBottomBorder(
+  drawPivotScrollbars(context, layout.scrollbar, theme.borderColor, {
+    top: 0,
+    height: contentHeight,
+    headerBottom: layout.bodyRect.y,
+    headerBackgroundColor: theme.columnHeaderBackgroundColor,
+    bodyBackgroundColor: theme.backgroundColor
+  });
+  if (params.resizeGuideX != null) {
+    drawPivotResizeGuide(context, params.resizeGuideX, contentHeight);
+  }
+  context.restore();
+  context.save();
+  clipPivotViewport(context, tableViewportRect);
+  drawPivotViewportRightBorder(context, tableViewportRect, theme.borderColor);
+  context.restore();
+  drawPivotViewportBorder(
     context,
-    { x: 0, y: 0, width: layout.tableWidth, height: contentHeight },
+    { x: 0, y: 0, width: viewportWidth, height: contentHeight },
     theme.borderColor
   );
   const selectionRect = resolvePivotSelectionRect(layout, params.selection);
@@ -3187,22 +3358,28 @@ function renderPivotTable(params) {
       layout,
       params.selection
     );
+    context.save();
+    clipPivotViewport(context, tableViewportRect);
     withClip(context, selectionClipRect, () => {
       drawPivotSelectionBorder(
         context,
         selectionRect,
-        theme.selectionBorderColor
+        theme.selectionBorderColor,
+        { viewportRect: tableViewportRect }
       );
     });
-  }
-  if (params.resizeGuideX != null) {
-    drawPivotResizeGuide(context, params.resizeGuideX, contentHeight);
+    context.restore();
   }
   return {
     headerCellCount: layout.reportFilterCells.length + layout.rowFieldHeaderCells.length + layout.rowHeaderCells.length + layout.columnHeaderCells.length,
     bodyCellCount: layout.bodyCells.length
   };
 }
+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;
+  return Math.max(layout.tableWidth, horizontalRight, verticalRight);
+}
 function drawPivotResizeGuide(context, x, height) {
   context.save();
   context.strokeStyle = "#1677ff";
@@ -3237,7 +3414,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";
@@ -3496,7 +3673,7 @@ 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) {
@@ -3956,6 +4133,16 @@ function hitTestPivotScrollbar(layout, x, y) {
   }
   return null;
 }
+function resolvePivotScrollbarTrackScroll(params) {
+  const movableLength = Math.max(params.trackLength - params.thumbLength, 0);
+  if (movableLength === 0) return 0;
+  const thumbStart = utils.clamp(
+    params.pointerValue - params.thumbLength / 2,
+    params.trackStart,
+    params.trackStart + movableLength
+  );
+  return (thumbStart - params.trackStart) / movableLength * params.maxScroll;
+}
 function resolveRole(layout, x, y) {
   if (utils.isPointInRect(x, y, layout.thumb)) return "thumb";
   if (utils.isPointInRect(x, y, layout.decreaseButton)) return "decrease-button";
@@ -4122,6 +4309,8 @@ var PivotTable = class {
     __publicField(this, "wheelScrollTarget", null);
     __publicField(this, "wheelScrollFrameId", null);
     __publicField(this, "wheelScrollLastTime", 0);
+    __publicField(this, "continuousScrollTimer", null);
+    __publicField(this, "continuousScrollPointerId", null);
     __publicField(this, "resizeSession", null);
     __publicField(this, "resizeGuideX", null);
     __publicField(this, "suppressNextClick", false);
@@ -4200,6 +4389,7 @@ var PivotTable = class {
       this.scheduleRender();
     });
     __publicField(this, "handleClick", (event) => {
+      this.options.ui?.onContextMenuRequest?.(null);
       if (this.suppressNextClick) {
         this.suppressNextClick = false;
         return;
@@ -4518,6 +4708,8 @@ var PivotTable = class {
     });
     __publicField(this, "handlePointerUp", (event) => {
       if (!this.host) return;
+      const endedContinuousScroll = this.continuousScrollPointerId === event.pointerId;
+      if (endedContinuousScroll) this.stopContinuousScrollbarScroll();
       const endedCellSelection = this.cellSelectionDrag?.pointerId === event.pointerId;
       if (endedCellSelection) this.cellSelectionDrag = null;
       if (this.textSelectionDrag?.pointerId === event.pointerId) {
@@ -4536,7 +4728,7 @@ var PivotTable = class {
       if (this.scrollbarDrag?.pointerId === event.pointerId) {
         this.scrollbarDrag = null;
       }
-      if (!this.resizeSession && !this.scrollbarDrag && !endedCellSelection && !endedRowHeaderSelection && !this.host.root.hasPointerCapture(event.pointerId))
+      if (!this.resizeSession && !this.scrollbarDrag && !endedContinuousScroll && !endedCellSelection && !endedRowHeaderSelection && !this.host.root.hasPointerCapture(event.pointerId))
         return;
       if (this.host.root.hasPointerCapture(event.pointerId)) {
         this.host.root.releasePointerCapture(event.pointerId);
@@ -4782,6 +4974,7 @@ var PivotTable = class {
     if (this.frameId !== null) cancelAnimationFrame(this.frameId);
     this.frameId = null;
     this.stopWheelScrollSmoothing();
+    this.stopContinuousScrollbarScroll();
     this.stopResizeObserver?.();
     this.stopResizeObserver = null;
     this.host?.root.removeEventListener("pointermove", this.handlePointerMove);
@@ -5087,7 +5280,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) {
@@ -5150,17 +5343,27 @@ var PivotTable = class {
     event.preventDefault();
     this.suppressNextClick = true;
     if (hit.role === "decrease-button" || hit.role === "increase-button") {
-      this.stepScrollbar(hit.axis, hit.role === "decrease-button" ? -1 : 1);
+      this.startContinuousScrollbarScroll(
+        hit.axis,
+        hit.role === "decrease-button" ? -1 : 1,
+        event.pointerId
+      );
+      this.host.root.setPointerCapture(event.pointerId);
       return;
     }
     const rootRect = this.host.root.getBoundingClientRect();
     const pointer = hit.axis === "horizontal" ? event.clientX - rootRect.left : event.clientY - rootRect.top;
     if (hit.role === "track") {
-      const thumbStart2 = hit.axis === "horizontal" ? axisLayout.thumb.x : axisLayout.thumb.y;
-      const direction = pointer < thumbStart2 ? -1 : 1;
+      const nextScroll = resolvePivotScrollbarTrackScroll({
+        pointerValue: pointer,
+        trackStart: hit.axis === "horizontal" ? axisLayout.track.x : axisLayout.track.y,
+        trackLength: hit.axis === "horizontal" ? axisLayout.track.width : axisLayout.track.height,
+        thumbLength: hit.axis === "horizontal" ? axisLayout.thumb.width : axisLayout.thumb.height,
+        maxScroll: hit.axis === "horizontal" ? this.layout.viewport.maxScrollLeft : this.layout.viewport.maxScrollTop
+      });
       this.applyScrollPosition(
-        this.scroll.left + (hit.axis === "horizontal" ? direction * this.layout.bodyRect.width : 0),
-        this.scroll.top + (hit.axis === "vertical" ? direction * this.layout.bodyRect.height : 0)
+        hit.axis === "horizontal" ? nextScroll : this.scroll.left,
+        hit.axis === "vertical" ? nextScroll : this.scroll.top
       );
       return;
     }
@@ -5204,6 +5407,21 @@ var PivotTable = class {
       this.scroll.top + (axis === "vertical" ? direction * this.layout.rowHeight : 0)
     );
   }
+  startContinuousScrollbarScroll(axis, direction, pointerId) {
+    this.stopContinuousScrollbarScroll();
+    this.continuousScrollPointerId = pointerId;
+    this.stepScrollbar(axis, direction);
+    this.continuousScrollTimer = setInterval(() => {
+      this.stepScrollbar(axis, direction);
+    }, 80);
+  }
+  stopContinuousScrollbarScroll() {
+    if (this.continuousScrollTimer !== null) {
+      clearInterval(this.continuousScrollTimer);
+      this.continuousScrollTimer = null;
+    }
+    this.continuousScrollPointerId = null;
+  }
   applyScrollPosition(left, top) {
     if (!this.layout) return;
     const next = {
@@ -5448,6 +5666,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: [] };
@@ -5611,6 +5913,7 @@ exports.PivotTable = PivotTable;
 exports.aggregatePivotRecords = aggregatePivotRecords;
 exports.buildPivotDimensionTree = buildPivotDimensionTree;
 exports.buildPivotLayoutSnapshot = buildPivotLayoutSnapshot;
+exports.clearPivotFieldLayout = clearPivotFieldLayout;
 exports.computePivotScrollbarLayout = computePivotScrollbarLayout;
 exports.createBuiltInPivotAggregators = createBuiltInPivotAggregators;
 exports.createEmptyPivotFieldLayout = createEmptyPivotFieldLayout;
@@ -5634,6 +5937,7 @@ exports.getPivotDimensionFilterOptions = getPivotDimensionFilterOptions;
 exports.hitTestPivotLayout = hitTestPivotLayout;
 exports.hitTestPivotResize = hitTestPivotResize;
 exports.hitTestPivotScrollbar = hitTestPivotScrollbar;
+exports.loadPivotFieldLayout = loadPivotFieldLayout;
 exports.movePivotField = movePivotField;
 exports.removePivotField = removePivotField;
 exports.renderPivotTable = renderPivotTable;
@@ -5645,5 +5949,6 @@ exports.resolvePivotDimensionWidth = resolvePivotDimensionWidth;
 exports.resolvePivotFieldLayoutOptions = resolvePivotFieldLayoutOptions;
 exports.resolvePivotIndicatorAggregator = resolvePivotIndicatorAggregator;
 exports.resolvePivotValueFieldTitle = resolvePivotValueFieldTitle;
+exports.savePivotFieldLayout = savePivotFieldLayout;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map