@canvas-components/pivot-table 0.1.9 → 0.2.1

package/dist/index.cjs

@@ -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, {
@@ -2880,29 +2878,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 +3006,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();
@@ -2984,25 +3077,22 @@ 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();
 }
-function drawPivotViewportBottomBorder(context, rect, color) {
-  const y = rect.y + rect.height - 0.5;
+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 +3110,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 +3161,15 @@ function renderPivotTable(params) {
     activeNodePathKey
   );
   const areaSelection = isPivotAreaSelection(layout, params.selection);
+  const viewportWidth = resolvePivotViewportWidth(layout);
   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, () => {
@@ -3170,17 +3283,13 @@ 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(
-    context,
-    { x: 0, y: 0, width: layout.tableWidth, height: contentHeight },
-    theme.borderColor
-  );
+  drawPivotScrollbars(context, layout.scrollbar, theme.borderColor, {
+    top: 0,
+    height: contentHeight,
+    headerBottom: layout.bodyRect.y,
+    headerBackgroundColor: theme.columnHeaderBackgroundColor,
+    bodyBackgroundColor: theme.backgroundColor
+  });
   const selectionRect = resolvePivotSelectionRect(layout, params.selection);
   if (selectionRect) {
     const selectionClipRect = resolvePivotSelectionClipRect(
@@ -3198,11 +3307,22 @@ function renderPivotTable(params) {
   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 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";
@@ -3956,6 +4076,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 +4252,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 +4332,7 @@ var PivotTable = class {
       this.scheduleRender();
     });
     __publicField(this, "handleClick", (event) => {
+      this.options.ui?.onContextMenuRequest?.(null);
       if (this.suppressNextClick) {
         this.suppressNextClick = false;
         return;
@@ -4518,6 +4651,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 +4671,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 +4917,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);
@@ -5150,17 +5286,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 +5350,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 = {