@nanahoshi/mona-ui 0.18.4 → 0.18.5

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

@@ -52777,7 +52777,6 @@ class ChartComponent {
     #gestureController;
     #hasCommittedVisualScene;
     #hasEmittedBrushStart;
-    #hasPendingSizeReflow;
     #hasWarnedBrushWithoutSelection;
     #hasWarnedMultiBrush;
     #hasWarnedMultiSelection;
@@ -52909,7 +52908,6 @@ class ChartComponent {
         this.#gestureController = null;
         this.#hasCommittedVisualScene = false;
         this.#hasEmittedBrushStart = false;
-        this.#hasPendingSizeReflow = false;
         this.#hasWarnedBrushWithoutSelection = false;
         this.#hasWarnedMultiBrush = false;
         this.#hasWarnedMultiSelection = false;
@@ -54483,10 +54481,22 @@ class ChartComponent {
             if (measurement) {
                 this.#applyMeasuredSize(measurement.width, measurement.height);
             }
+            else if (
+            // SVG sector paths embed their measured center and radii. Painting the
+            // fallback scene would leave those coordinates clipped if lazy layout
+            // settles after the first render.
+            this.renderer() === "svg" &&
+                typeof ResizeObserver !== "undefined" &&
+                this.#registeredSeries().some(series => series.type === "donut" || series.type === "pie")) {
+                this.#initialMeasurementPending = true;
+                this.#scheduleInitialMeasurement();
+                return;
+            }
         }
-        const sizeChanged = !this.scene() ||
-            Math.abs(this.scene().width - this.#currentWidth) >= 0.5 ||
-            Math.abs(this.scene().height - this.#currentHeight) >= 0.5;
+        const previousScene = this.scene();
+        const sizeChanged = !previousScene ||
+            Math.abs(previousScene.width - this.#currentWidth) >= 0.5 ||
+            Math.abs(previousScene.height - this.#currentHeight) >= 0.5;
         const isStructural = hasInvalidationReason(reason, 1 /* ChartInvalidationReason.Data */) ||
             hasInvalidationReason(reason, 2 /* ChartInvalidationReason.Layout */) ||
             hasInvalidationReason(reason, 32 /* ChartInvalidationReason.Visibility */);
@@ -54653,12 +54663,10 @@ class ChartComponent {
         if (!this.#canvasReady) {
             return;
         }
-        const isPassiveSizeReflow = trigger === "layout" && hasInvalidationReason(reason, 16 /* ChartInvalidationReason.Size */);
-        if (isPassiveSizeReflow && this.#animationController.isRunning()) {
-            this.#hasPendingSizeReflow = true;
-            return;
-        }
-        if (isAnimationDisabled) {
+        // The render surface has already adopted the new viewport. Reusing or morphing
+        // from geometry computed for the previous viewport would paint off-center marks.
+        const mustCommitSizeImmediately = sizeChanged && hasInvalidationReason(reason, 16 /* ChartInvalidationReason.Size */) && previousScene !== null;
+        if (isAnimationDisabled || mustCommitSizeImmediately) {
             this.#animationController.cancel("keep-current");
             this.#renderScene = newScene;
             this.#hasCommittedVisualScene = true;
@@ -54666,12 +54674,9 @@ class ChartComponent {
             this.#isStructuralAnimation.set(false);
             this.#animationMode.set(null);
             this.#isExitingData.set(false);
-            if (this.#pendingLabelMeasurementReason !== 0 || this.#hasPendingSizeReflow) {
-                const reasonToInvalidate = this.#pendingLabelMeasurementReason !== 0
-                    ? this.#pendingLabelMeasurementReason
-                    : 2 /* ChartInvalidationReason.Layout */;
+            if (this.#pendingLabelMeasurementReason !== 0) {
+                const reasonToInvalidate = this.#pendingLabelMeasurementReason;
                 this.#pendingLabelMeasurementReason = 0;
-                this.#hasPendingSizeReflow = false;
                 this.invalidate(reasonToInvalidate);
             }
             this.#paint();
@@ -54687,12 +54692,9 @@ class ChartComponent {
             this.#isStructuralAnimation.set(false);
             this.#animationMode.set(null);
             this.#isExitingData.set(false);
-            if (this.#pendingLabelMeasurementReason !== 0 || this.#hasPendingSizeReflow) {
-                const reasonToInvalidate = this.#pendingLabelMeasurementReason !== 0
-                    ? this.#pendingLabelMeasurementReason
-                    : 2 /* ChartInvalidationReason.Layout */;
+            if (this.#pendingLabelMeasurementReason !== 0) {
+                const reasonToInvalidate = this.#pendingLabelMeasurementReason;
                 this.#pendingLabelMeasurementReason = 0;
-                this.#hasPendingSizeReflow = false;
                 this.invalidate(reasonToInvalidate);
             }
             this.#paint();
@@ -54717,12 +54719,9 @@ class ChartComponent {
                     this.#isStructuralAnimation.set(false);
                     this.#animationMode.set(null);
                     this.#isExitingData.set(false);
-                    if (this.#pendingLabelMeasurementReason !== 0 || this.#hasPendingSizeReflow) {
-                        const reasonToInvalidate = this.#pendingLabelMeasurementReason !== 0
-                            ? this.#pendingLabelMeasurementReason
-                            : 2 /* ChartInvalidationReason.Layout */;
+                    if (this.#pendingLabelMeasurementReason !== 0) {
+                        const reasonToInvalidate = this.#pendingLabelMeasurementReason;
                         this.#pendingLabelMeasurementReason = 0;
-                        this.#hasPendingSizeReflow = false;
                         this.invalidate(reasonToInvalidate);
                     }
                     this.#paint();

package/package.json

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