@nanahoshi/mona-ui 0.17.0 → 0.17.1

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

@@ -36060,23 +36060,79 @@ 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.
+ * Only applied on sides that don't already have a drawn axis boundary line
+ * (see {@link resolvePlotEdgeAxisLines}) — a side with a visible axis line
+ * clips flush against it instead, so series strokes don't visibly poke past it.
  */
 const PLOT_CLIP_OVERFLOW = 8;
+/**
+ * Resolves which of the plot rect's four edges have a visible, boundary-hugging
+ * (sideOffset 0) axis line drawn on them. Stacked secondary axes (sideOffset > 0)
+ * don't count: their line is drawn further out, not at the plot boundary itself.
+ */
+function resolvePlotEdgeAxisLines(axes) {
+    let top = false;
+    let bottom = false;
+    let left = false;
+    let right = false;
+    for (const axis of axes) {
+        if (!axis.visible || !axis.axisLine || (axis.sideOffset ?? 0) !== 0) {
+            continue;
+        }
+        switch (axis.position) {
+            case "top":
+                top = true;
+                break;
+            case "bottom":
+                bottom = true;
+                break;
+            case "left":
+                left = true;
+                break;
+            case "right":
+                right = true;
+                break;
+        }
+    }
+    return { bottom, left, right, top };
+}
+/**
+ * Computes the clip rect for series/overlay content: `plotRect` inflated by
+ * {@link PLOT_CLIP_OVERFLOW} on each side, except sides with a visible boundary
+ * axis line, which stay flush so strokes don't visibly cross the axis line.
+ */
+function computeSeriesClipRect(plotRect, axes) {
+    const edges = resolvePlotEdgeAxisLines(axes);
+    const left = edges.left ? 0 : PLOT_CLIP_OVERFLOW;
+    const right = edges.right ? 0 : PLOT_CLIP_OVERFLOW;
+    const top = edges.top ? 0 : PLOT_CLIP_OVERFLOW;
+    const bottom = edges.bottom ? 0 : PLOT_CLIP_OVERFLOW;
+    return {
+        height: plotRect.height + top + bottom,
+        width: plotRect.width + left + right,
+        x: plotRect.x - left,
+        y: plotRect.y - top
+    };
+}
 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) {
+/** Clips the canvas context to `rect` as-is, with no further inflation. */
+function clipToRect(context, rect) {
     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.rect(rect.x, rect.y, rect.width, rect.height);
     context.clip();
 }
+/**
+ * Clips the canvas context to `plotRect`, inflated per {@link computeSeriesClipRect}.
+ * Pass the scene's `axes` so sides with a visible boundary line clip flush against it.
+ */
+function clipToPlotRect(context, plotRect, axes = []) {
+    clipToRect(context, computeSeriesClipRect(plotRect, axes));
+}
 function drawRoundedRectCorners(context, x, y, width, height, radii) {
     if (width <= 0 || height <= 0) {
         return;
@@ -36915,12 +36971,12 @@ class CartesianOverlayRenderer {
         context.setLineDash([]);
         context.restore();
     }
-    static renderOverlays(context, overlayScene, plotRect, annotationBadgeAnchors) {
+    static renderOverlays(context, overlayScene, plotRect, axes = [], annotationBadgeAnchors) {
         if (!overlayScene) {
             return;
         }
         context.save();
-        clipToPlotRect(context, plotRect);
+        clipToPlotRect(context, plotRect, axes);
         // 1. Overlay Bands
         for (const band of overlayScene.referenceBands) {
             if (band.layer === "overlay") {
@@ -36940,12 +36996,12 @@ class CartesianOverlayRenderer {
         }
         context.restore();
     }
-    static renderUnderlays(context, overlayScene, plotRect) {
+    static renderUnderlays(context, overlayScene, plotRect, axes = []) {
         if (!overlayScene || (overlayScene.referenceBands.length === 0 && overlayScene.referenceLines.length === 0)) {
             return;
         }
         context.save();
-        clipToPlotRect(context, plotRect);
+        clipToPlotRect(context, plotRect, axes);
         // 1. Underlay Bands
         for (const band of overlayScene.referenceBands) {
             if (band.layer === "underlay") {
@@ -36974,7 +37030,7 @@ function getCrosshairDash$1(style) {
     }
 }
 class CartesianCrosshairRenderer {
-    static render(context, crosshairState, registration, plotRect, styleResolver) {
+    static render(context, crosshairState, registration, plotRect, styleResolver, axes = []) {
         if (!crosshairState || !registration || registration.enabled() === false) {
             return;
         }
@@ -36990,7 +37046,7 @@ class CartesianCrosshairRenderer {
         }
         const dash = getCrosshairDash$1(registration.lineStyle());
         context.save();
-        clipToPlotRect(context, plotRect);
+        clipToPlotRect(context, plotRect, axes);
         context.strokeStyle = style.color;
         context.lineWidth = style.width;
         context.globalAlpha = style.opacity;
@@ -37027,7 +37083,7 @@ class CartesianInteractionOverlayRenderer {
                 (!interactionState.activeHits || interactionState.activeHits.length === 0))) {
             return;
         }
-        const { plotRect, series } = scene;
+        const { axes, plotRect, series } = scene;
         if (plotRect.width <= 0 || plotRect.height <= 0) {
             return;
         }
@@ -37040,7 +37096,7 @@ class CartesianInteractionOverlayRenderer {
             return;
         }
         context.save();
-        clipToPlotRect(context, plotRect);
+        clipToPlotRect(context, plotRect, axes);
         const markerStrokeColor = styleResolver.resolveCssVariable("--mona-chart-marker-stroke-color") ||
             styleResolver.resolveCssVariable("--color-surface") ||
             "#ffffff";
@@ -37178,9 +37234,9 @@ class CartesianSelectionOverlayRenderer {
         if (scene.hits.length === 0) {
             return;
         }
-        const { color = "#3b82f6", fillOpacity = 0.12, plotRect, strokeWidth = 2 } = options;
+        const { axes = [], color = "#3b82f6", fillOpacity = 0.12, plotRect, strokeWidth = 2 } = options;
         ctx.save();
-        clipToPlotRect(ctx, plotRect);
+        clipToPlotRect(ctx, plotRect, axes);
         ctx.strokeStyle = color;
         ctx.lineWidth = strokeWidth;
         for (const hit of scene.hits) {
@@ -37293,7 +37349,7 @@ class CartesianBrushRenderer {
 
 class CartesianChartRenderer {
     static render(context, scene, overlayState, styleResolver) {
-        const { plotRect } = scene;
+        const { axes, plotRect } = scene;
         if (plotRect.width <= 0 || plotRect.height <= 0) {
             return;
         }
@@ -37310,15 +37366,15 @@ class CartesianChartRenderer {
         // 1. Grid
         this.renderGridLayer(context, scene, styleResolver);
         // 2. Static Underlays
-        this.renderStaticUnderlayLayer(context, cartesianOverlay, plotRect);
+        this.renderStaticUnderlayLayer(context, cartesianOverlay, plotRect, axes);
         // 3. Series
         this.renderSeriesLayer(context, scene);
         // 4. Persistent Selection Highlights
-        this.renderSelectionLayer(context, selectionScene, selectionOptions, plotRect, styleResolver);
+        this.renderSelectionLayer(context, selectionScene, selectionOptions, plotRect, styleResolver, axes);
         // 5. Data Labels (Canvas default labels)
         this.renderDataLabelLayer(context, cartesianDataLabels, plotRect);
         // 6. Static Overlays & Annotations
-        this.renderStaticOverlayLayer(context, cartesianOverlay, plotRect, annotationBadgeAnchors);
+        this.renderStaticOverlayLayer(context, cartesianOverlay, plotRect, annotationBadgeAnchors, axes);
         // 7. Axes
         this.renderAxisLayer(context, scene, styleResolver);
         // 8. Transient (Crosshair + Highlights)
@@ -37395,7 +37451,7 @@ class CartesianChartRenderer {
         }
     }
     static renderCrossfade(context, fromScene, toScene, progress, overlayState, styleResolver) {
-        const { plotRect } = toScene;
+        const { axes, plotRect } = toScene;
         if (plotRect.width <= 0 || plotRect.height <= 0) {
             return;
         }
@@ -37420,7 +37476,7 @@ class CartesianChartRenderer {
             context.restore();
         }
         // 2. Target static underlay once (at full own opacity)
-        this.renderStaticUnderlayLayer(context, cartesianOverlay, plotRect);
+        this.renderStaticUnderlayLayer(context, cartesianOverlay, plotRect, axes);
         // 3. Series crossfade
         if (fromScene && progress < 1) {
             context.save();
@@ -37435,7 +37491,7 @@ class CartesianChartRenderer {
             context.restore();
         }
         // 4. Static overlay (at full own opacity)
-        this.renderStaticOverlayLayer(context, cartesianOverlay, plotRect, annotationBadgeAnchors);
+        this.renderStaticOverlayLayer(context, cartesianOverlay, plotRect, annotationBadgeAnchors, axes);
         // 7. Axes crossfade
         if (fromScene && progress < 1) {
             context.save();
@@ -37491,10 +37547,11 @@ class CartesianChartRenderer {
         }
         context.restore();
     }
-    static renderSelectionLayer(context, selectionScene, options, plotRect, styleResolver) {
+    static renderSelectionLayer(context, selectionScene, options, plotRect, styleResolver, axes = []) {
         if (selectionScene && selectionScene.hits.length > 0) {
             const fallback = styleResolver?.resolveSelectionStyle(null);
             CartesianSelectionOverlayRenderer.render(context, selectionScene, {
+                axes,
                 color: options?.color ?? fallback?.color,
                 fillOpacity: options?.fillOpacity ?? fallback?.fillOpacity,
                 plotRect,
@@ -37503,9 +37560,9 @@ class CartesianChartRenderer {
         }
     }
     static renderSeriesLayer(context, scene) {
-        const { plotRect, series } = scene;
+        const { axes, plotRect, series } = scene;
         context.save();
-        clipToPlotRect(context, plotRect);
+        clipToPlotRect(context, plotRect, axes);
         for (const s of series) {
             switch (s.type) {
                 case "area":
@@ -37537,14 +37594,14 @@ class CartesianChartRenderer {
         }
         context.restore();
     }
-    static renderStaticOverlayLayer(context, cartesianOverlay, plotRect, annotationBadgeAnchors) {
-        CartesianOverlayRenderer.renderOverlays(context, cartesianOverlay, plotRect, annotationBadgeAnchors ?? undefined);
+    static renderStaticOverlayLayer(context, cartesianOverlay, plotRect, annotationBadgeAnchors, axes = []) {
+        CartesianOverlayRenderer.renderOverlays(context, cartesianOverlay, plotRect, axes, annotationBadgeAnchors ?? undefined);
     }
-    static renderStaticUnderlayLayer(context, cartesianOverlay, plotRect) {
-        CartesianOverlayRenderer.renderUnderlays(context, cartesianOverlay, plotRect);
+    static renderStaticUnderlayLayer(context, cartesianOverlay, plotRect, axes = []) {
+        CartesianOverlayRenderer.renderUnderlays(context, cartesianOverlay, plotRect, axes);
     }
     static renderTransientLayer(context, scene, overlayState, styleResolver) {
-        const { plotRect } = scene;
+        const { axes, plotRect } = scene;
         if (!overlayState) {
             return;
         }
@@ -37556,7 +37613,7 @@ class CartesianChartRenderer {
         context.save();
         // Crosshair Lines
         if (crosshairState && crosshairRegistration) {
-            CartesianCrosshairRenderer.render(context, crosshairState, crosshairRegistration, plotRect, styleResolver);
+            CartesianCrosshairRenderer.render(context, crosshairState, crosshairRegistration, plotRect, styleResolver, axes);
         }
         // Active Highlights
         if (interactionState) {
@@ -41311,12 +41368,6 @@ 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;
@@ -41511,7 +41562,8 @@ class SvgCartesianChartRenderer {
             return;
         }
         this.#clearCrossfadeScopes();
-        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);
+        const seriesClipRect = computeSeriesClipRect(plotRect, scene.axes);
+        const plotClipUrl = defs.useClipRect("plot-clip", seriesClipRect.x, seriesClipRect.y, seriesClipRect.width, seriesClipRect.height);
         // 1. Grid
         this.#gridRenderer.render(scene, styleResolver);
         // 2. Static Underlays
@@ -41570,7 +41622,8 @@ 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 - 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);
+        const toSeriesClipRect = computeSeriesClipRect(toScene.plotRect, toScene.axes);
+        const toPlotClipUrl = toDefs.useClipRect("plot-clip", toSeriesClipRect.x, toSeriesClipRect.y, toSeriesClipRect.width, toSeriesClipRect.height);
         // Persistent selection and data labels are suppressed during animation
         this.#selectionRenderer.clear();
         this.#dataLabelRenderer.clear();
@@ -41615,7 +41668,8 @@ 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 - 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);
+            const fromSeriesClipRect = computeSeriesClipRect(fromScene.plotRect, fromScene.axes);
+            const fromPlotClipUrl = fromDefs.useClipRect("plot-clip", fromSeriesClipRect.x, fromSeriesClipRect.y, fromSeriesClipRect.width, fromSeriesClipRect.height);
             if (!this.#crossfadeFromScope) {
                 this.#crossfadeFromScope = createSvgElement("g");
                 this.#crossfadeFromScope.setAttribute("data-crossfade-scope", "from");
@@ -41684,12 +41738,6 @@ 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;
@@ -41827,7 +41875,8 @@ class SvgCartesianContentRenderer {
             this.clear();
             return;
         }
-        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);
+        const seriesClipRect = computeSeriesClipRect(plotRect, scene.axes);
+        const plotClipUrl = defs.useClipRect("plot-clip", seriesClipRect.x, seriesClipRect.y, seriesClipRect.width, seriesClipRect.height);
         // 1. Grid
         this.#gridRenderer.render(scene, styleResolver);
         // 2. Underlays

package/package.json

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