@nanahoshi/mona-ui 0.15.1 → 0.15.2

package/fesm2022/nanahoshi-mona-ui-chart.mjs

@@ -23612,6 +23612,7 @@ class CartesianAxisDomainResolver {
 }
 
 class CartesianAxisLabelGeometry {
+    static #cachedGetContext = null;
     static #measureCanvas = null;
     static #measureCtx = null;
     static createTickKey(axis, axisType, value, index) {
@@ -23634,11 +23635,24 @@ class CartesianAxisLabelGeometry {
             try {
                 if (!CartesianAxisLabelGeometry.#measureCanvas) {
                     CartesianAxisLabelGeometry.#measureCanvas = document.createElement("canvas");
+                }
+                // Cache the resolved 2D context, but invalidate it whenever
+                // HTMLCanvasElement.prototype.getContext itself has changed identity (e.g. a test
+                // installs/restores a vi.spyOn mock) so a swapped implementation is never frozen in
+                // stale. This keeps the common case (thousands of tick-label measurements against a
+                // stable getContext) a cheap reference reuse instead of re-invoking getContext (and,
+                // under test mocks that fabricate a fresh context object per call, re-allocating one)
+                // on every single call.
+                const currentGetContext = CartesianAxisLabelGeometry.#measureCanvas.getContext;
+                if (!CartesianAxisLabelGeometry.#measureCtx ||
+                    CartesianAxisLabelGeometry.#cachedGetContext !== currentGetContext) {
                     CartesianAxisLabelGeometry.#measureCtx = CartesianAxisLabelGeometry.#measureCanvas.getContext("2d");
+                    CartesianAxisLabelGeometry.#cachedGetContext = currentGetContext;
                 }
-                if (CartesianAxisLabelGeometry.#measureCtx) {
-                    CartesianAxisLabelGeometry.#measureCtx.font = font;
-                    const measuredWidth = CartesianAxisLabelGeometry.#measureCtx.measureText(formattedText).width;
+                const ctx = CartesianAxisLabelGeometry.#measureCtx;
+                if (ctx) {
+                    ctx.font = font;
+                    const measuredWidth = ctx.measureText(formattedText).width;
                     if (typeof measuredWidth === "number" && !isNaN(measuredWidth) && measuredWidth > 0) {
                         return {
                             height: 16,
@@ -36039,12 +36053,27 @@ class ChartLayoutEngine {
     }
 }
 
+/**
+ * Small overflow allowance so marks whose stroke or radius sits exactly at a
+ * domain extreme (a peak touching the max, a hovered point marker at the
+ * first/last category) aren't visually chopped in half by the plot clip rect.
+ */
+const PLOT_CLIP_OVERFLOW = 8;
 function crispPixel(pixel, lineWidth = 1) {
     if (lineWidth % 2 === 1) {
         return Math.floor(pixel) + 0.5;
     }
     return Math.round(pixel);
 }
+/**
+ * Clips the canvas context to `plotRect`, inflated on all four sides by
+ * {@link PLOT_CLIP_OVERFLOW} so marks touching a domain extreme aren't cut in half.
+ */
+function clipToPlotRect(context, plotRect) {
+    context.beginPath();
+    context.rect(plotRect.x - PLOT_CLIP_OVERFLOW, plotRect.y - PLOT_CLIP_OVERFLOW, plotRect.width + PLOT_CLIP_OVERFLOW * 2, plotRect.height + PLOT_CLIP_OVERFLOW * 2);
+    context.clip();
+}
 function drawRoundedRectCorners(context, x, y, width, height, radii) {
     if (width <= 0 || height <= 0) {
         return;
@@ -36873,9 +36902,7 @@ class CartesianOverlayRenderer {
             return;
         }
         context.save();
-        context.beginPath();
-        context.rect(plotRect.x, plotRect.y, plotRect.width, plotRect.height);
-        context.clip();
+        clipToPlotRect(context, plotRect);
         // 1. Overlay Bands
         for (const band of overlayScene.referenceBands) {
             if (band.layer === "overlay") {
@@ -36900,9 +36927,7 @@ class CartesianOverlayRenderer {
             return;
         }
         context.save();
-        context.beginPath();
-        context.rect(plotRect.x, plotRect.y, plotRect.width, plotRect.height);
-        context.clip();
+        clipToPlotRect(context, plotRect);
         // 1. Underlay Bands
         for (const band of overlayScene.referenceBands) {
             if (band.layer === "underlay") {
@@ -36947,9 +36972,7 @@ class CartesianCrosshairRenderer {
         }
         const dash = getCrosshairDash$1(registration.lineStyle());
         context.save();
-        context.beginPath();
-        context.rect(plotRect.x, plotRect.y, plotRect.width, plotRect.height);
-        context.clip();
+        clipToPlotRect(context, plotRect);
         context.strokeStyle = style.color;
         context.lineWidth = style.width;
         context.globalAlpha = style.opacity;
@@ -36999,9 +37022,7 @@ class CartesianInteractionOverlayRenderer {
             return;
         }
         context.save();
-        context.beginPath();
-        context.rect(plotRect.x, plotRect.y, plotRect.width, plotRect.height);
-        context.clip();
+        clipToPlotRect(context, plotRect);
         const markerStrokeColor = styleResolver.resolveCssVariable("--mona-chart-marker-stroke-color") ||
             styleResolver.resolveCssVariable("--color-surface") ||
             "#ffffff";
@@ -37141,9 +37162,7 @@ class CartesianSelectionOverlayRenderer {
         }
         const { color = "#3b82f6", fillOpacity = 0.12, plotRect, strokeWidth = 2 } = options;
         ctx.save();
-        ctx.beginPath();
-        ctx.rect(plotRect.x, plotRect.y, plotRect.width, plotRect.height);
-        ctx.clip();
+        clipToPlotRect(ctx, plotRect);
         ctx.strokeStyle = color;
         ctx.lineWidth = strokeWidth;
         for (const hit of scene.hits) {
@@ -37468,9 +37487,7 @@ class CartesianChartRenderer {
     static renderSeriesLayer(context, scene) {
         const { plotRect, series } = scene;
         context.save();
-        context.beginPath();
-        context.rect(plotRect.x, plotRect.y, plotRect.width, plotRect.height);
-        context.clip();
+        clipToPlotRect(context, plotRect);
         for (const s of series) {
             switch (s.type) {
                 case "area":
@@ -41274,6 +41291,12 @@ class SvgRangeBarSeriesRenderer {
     }
 }
 
+/**
+ * Small overflow allowance so marks whose stroke or radius sits exactly at a
+ * domain extreme (a peak touching the max, a point at the first/last category)
+ * aren't visually chopped in half by the plot clip rectangle.
+ */
+const SERIES_CLIP_OVERFLOW$1 = 8;
 class SvgCartesianChartRenderer {
     #axisRenderer;
     #brushRenderer;
@@ -41468,7 +41491,7 @@ class SvgCartesianChartRenderer {
             return;
         }
         this.#clearCrossfadeScopes();
-        const plotClipUrl = defs.useClipRect("plot-clip", plotRect.x, plotRect.y, plotRect.width, plotRect.height);
+        const plotClipUrl = defs.useClipRect("plot-clip", plotRect.x - SERIES_CLIP_OVERFLOW$1, plotRect.y - SERIES_CLIP_OVERFLOW$1, plotRect.width + SERIES_CLIP_OVERFLOW$1 * 2, plotRect.height + SERIES_CLIP_OVERFLOW$1 * 2);
         // 1. Grid
         this.#gridRenderer.render(scene, styleResolver);
         // 2. Static Underlays
@@ -41527,7 +41550,7 @@ class SvgCartesianChartRenderer {
         const fromOpacity = Math.max(0, Math.min(1, 1 - p));
         const toOpacity = Math.max(0, Math.min(1, p));
         const toDefs = defs.withScope("cf-to");
-        const toPlotClipUrl = toDefs.useClipRect("plot-clip", toScene.plotRect.x, toScene.plotRect.y, toScene.plotRect.width, toScene.plotRect.height);
+        const toPlotClipUrl = toDefs.useClipRect("plot-clip", toScene.plotRect.x - SERIES_CLIP_OVERFLOW$1, toScene.plotRect.y - SERIES_CLIP_OVERFLOW$1, toScene.plotRect.width + SERIES_CLIP_OVERFLOW$1 * 2, toScene.plotRect.height + SERIES_CLIP_OVERFLOW$1 * 2);
         // Persistent selection and data labels are suppressed during animation
         this.#selectionRenderer.clear();
         this.#dataLabelRenderer.clear();
@@ -41572,7 +41595,7 @@ class SvgCartesianChartRenderer {
         this.#layers.series.removeAttribute("clip-path");
         if (fromScene) {
             const fromDefs = defs.withScope("cf-from");
-            const fromPlotClipUrl = fromDefs.useClipRect("plot-clip", fromScene.plotRect.x, fromScene.plotRect.y, fromScene.plotRect.width, fromScene.plotRect.height);
+            const fromPlotClipUrl = fromDefs.useClipRect("plot-clip", fromScene.plotRect.x - SERIES_CLIP_OVERFLOW$1, fromScene.plotRect.y - SERIES_CLIP_OVERFLOW$1, fromScene.plotRect.width + SERIES_CLIP_OVERFLOW$1 * 2, fromScene.plotRect.height + SERIES_CLIP_OVERFLOW$1 * 2);
             if (!this.#crossfadeFromScope) {
                 this.#crossfadeFromScope = createSvgElement("g");
                 this.#crossfadeFromScope.setAttribute("data-crossfade-scope", "from");
@@ -41641,6 +41664,12 @@ class SvgCartesianChartRenderer {
     }
 }
 
+/**
+ * Small overflow allowance so marks whose stroke or radius sits exactly at a
+ * domain extreme (a peak touching the max, a point at the first/last category)
+ * aren't visually chopped in half by the plot clip rectangle.
+ */
+const SERIES_CLIP_OVERFLOW = 8;
 class SvgCartesianContentRenderer {
     #axesGroup;
     #axisRenderer;
@@ -41778,7 +41807,7 @@ class SvgCartesianContentRenderer {
             this.clear();
             return;
         }
-        const plotClipUrl = defs.useClipRect("plot-clip", plotRect.x, plotRect.y, plotRect.width, plotRect.height);
+        const plotClipUrl = defs.useClipRect("plot-clip", plotRect.x - SERIES_CLIP_OVERFLOW, plotRect.y - SERIES_CLIP_OVERFLOW, plotRect.width + SERIES_CLIP_OVERFLOW * 2, plotRect.height + SERIES_CLIP_OVERFLOW * 2);
         // 1. Grid
         this.#gridRenderer.render(scene, styleResolver);
         // 2. Underlays

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nanahoshi/mona-ui",
-  "version": "0.15.1",
+  "version": "0.15.2",
   "description": "A very light Angular UI framework",
   "author": "Nanahoshi",
   "repository": {