@nanahoshi/mona-ui 0.15.1 → 0.15.3

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/fesm2022/nanahoshi-mona-ui-internal-list.mjs

@@ -146,6 +146,7 @@ class ListService {
             enabled: false,
             firstLast: false,
             showInfo: true,
+            pageSize: 10,
             pageSizeValues: true,
             previousNext: false,
             type: "numeric",

package/fesm2022/nanahoshi-mona-ui-list-view.mjs

@@ -1,6 +1,6 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, input, output, effect, untracked, afterRenderEffect, Optional, SkipSelf, Component, afterNextRender } from '@angular/core';
+import { Directive, inject, DestroyRef, ElementRef, computed, contentChild, TemplateRef, input, output, effect, untracked, afterRenderEffect, Optional, SkipSelf, Component, model, afterNextRender } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { ListService, ListComponent, ListHeaderTemplateDirective, ListFooterTemplateDirective, ListGroupHeaderTemplateDirective, ListItemTemplateDirective, ListNoDataTemplateDirective } from '@nanahoshi/mona-ui/internal/list';
 import { PagerComponent } from '@nanahoshi/mona-ui/pager';
@@ -390,35 +390,54 @@ class ListViewPageableDirective {
             firstLast: false,
             type: "numeric",
             previousNext: true,
+            pageSize: 10,
             pageSizeValues: [5, 10, 20, 25, 50, 100],
             visiblePages: 5
         };
         this.#listService = inject(ListService);
         this.options = input("", { ...(ngDevMode ? { debugName: "options" } : /* istanbul ignore next */ {}), alias: "monaListViewPageable" });
+        /**
+         * @description The current page. Supports two-way binding via `[(page)]`; updates when the user navigates the pager and can be set to navigate programmatically.
+         * @default 1
+         */
+        this.page = model(1, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
         effect(() => {
             const options = this.options();
             untracked(() => {
-                if (options === "") {
-                    this.#listService.setPageableOptions(this.#defaultOptions);
+                const mergedOptions = options === "" ? this.#defaultOptions : { ...this.#defaultOptions, ...options };
+                this.#listService.setPageableOptions(mergedOptions);
+                this.#listService.pageState.update(s => ({ ...s, take: mergedOptions.pageSize }));
+            });
+        });
+        effect(() => {
+            const page = this.page();
+            untracked(() => {
+                const pageState = this.#listService.pageState();
+                if (pageState.page === page) {
+                    return;
                 }
-                else {
-                    this.#listService.setPageableOptions({
-                        ...this.#defaultOptions,
-                        ...options
-                    });
+                this.#listService.pageState.set({ page, skip: (page - 1) * pageState.take, take: pageState.take });
+            });
+        });
+        effect(() => {
+            const pageState = this.#listService.pageState();
+            untracked(() => {
+                if (this.page() !== pageState.page) {
+                    this.page.set(pageState.page);
                 }
             });
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewPageableDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ListViewPageableDirective, isStandalone: true, selector: "mona-list-view[monaListViewPageable]", inputs: { options: { classPropertyName: "options", publicName: "monaListViewPageable", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.6", type: ListViewPageableDirective, isStandalone: true, selector: "mona-list-view[monaListViewPageable]", inputs: { options: { classPropertyName: "options", publicName: "monaListViewPageable", isSignal: true, isRequired: false, transformFunction: null }, page: { classPropertyName: "page", publicName: "page", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { page: "pageChange" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.6", ngImport: i0, type: ListViewPageableDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: "mona-list-view[monaListViewPageable]"
                 }]
-        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaListViewPageable", required: false }] }] } });
+        }], ctorParameters: () => [], propDecorators: { options: [{ type: i0.Input, args: [{ isSignal: true, alias: "monaListViewPageable", required: false }] }], page: [{ type: i0.Input, args: [{ isSignal: true, alias: "page", required: false }] }, { type: i0.Output, args: ["pageChange"] }] } });
 
 class ListViewSelectableDirective {
     #defaultOptions;

package/package.json

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