Merge pull request #14549 from carolhmj/GUIBetterSizeDetermination

Better handling of StackPanel layout warning

packages/dev/gui/src/2D/controls/container.ts

@@ -619,6 +619,26 @@ export class Container extends Control {
         this._measureForChildren.copyFrom(this._currentMeasure);
     }
 
+    protected _getAdaptDimTo(dim: "width" | "height"): boolean {
+        if (dim === "width") {
+            return this.adaptWidthToChildren;
+        } else {
+            return this.adaptHeightToChildren;
+        }
+    }
+
+    public isDimensionFullyDefined(dim: "width" | "height"): boolean {
+        if (this._getAdaptDimTo(dim)) {
+            for (const child of this.children) {
+                if (!child.isDimensionFullyDefined(dim)) {
+                    return false;
+                }
+            }
+            return true;
+        }
+        return super.isDimensionFullyDefined(dim);
+    }
+
     /**
      * Serializes the current control
      * @param serializationObject defined the JSON serialized object

packages/dev/gui/src/2D/controls/control.ts

@@ -2424,6 +2424,29 @@ export class Control implements IAnimatable {
         this.getDescendants().forEach((child) => child._markAllAsDirty());
     }
 
+    /**
+     * A control has a dimension fully defined if that dimension doesn't depend on the parent's dimension.
+     * As an example, a control that has dimensions in pixels is fully defined, while in percentage is not fully defined.
+     * @param dim the dimension to check (width or height)
+     * @returns if the dimension is fully defined
+     */
+    public isDimensionFullyDefined(dim: "width" | "height"): boolean {
+        return this.getDimension(dim).isPixel;
+    }
+
+    /**
+     * Gets the dimension of the control along a specified axis
+     * @param dim the dimension to retrieve (width or height)
+     * @returns the dimension value along the specified axis
+     */
+    public getDimension(dim: "width" | "height"): ValueAndUnit {
+        if (dim === "width") {
+            return this._width;
+        } else {
+            return this._height;
+        }
+    }
+
     /**
      * Clones a control and its descendants
      * @param host the texture where the control will be instantiated. Can be empty, in which case the control will be created on the same texture

packages/dev/gui/src/2D/controls/stackPanel.ts

@@ -1,14 +1,11 @@
-import { Tools } from "core/Misc/tools";
-
 import { Container } from "./container";
 import type { Measure } from "../measure";
 import { Control } from "./control";
 import { RegisterClass } from "core/Misc/typeStore";
 import { serialize } from "core/Misc/decorators";
 import type { AdvancedDynamicTexture } from "../advancedDynamicTexture";
 import type { ICanvasRenderingContext } from "core/Engines/ICanvas";
-import type { TextBlock } from "./textBlock";
-import { TextWrapping } from "./textBlock";
+import { Logger } from "core/Misc/logger";
 
 /**
  * Class used to create a 2D stack panel container
@@ -165,10 +162,8 @@ export class StackPanel extends Container {
                     child._top.ignoreAdaptiveScaling = true;
                 }
 
-                if (child._height.isPercentage && !child._automaticSize && !(child as TextBlock).resizeToFit && !(child as Container).adaptHeightToChildren) {
-                    if (!this.ignoreLayoutWarnings) {
-                        Tools.Warn(`Control (Name:${child.name}, UniqueId:${child.uniqueId}) is using height in percentage mode inside a vertical StackPanel`);
-                    }
+                if (!this.ignoreLayoutWarnings && !child.isDimensionFullyDefined("height")) {
+                    Logger.Warn(`Control (Name:${child.name}, UniqueId:${child.uniqueId}) is using height in percentage mode inside a vertical StackPanel`, 1);
                 } else {
                     stackHeight += child._currentMeasure.height + child._paddingTopInPixels + child._paddingBottomInPixels + (index < childrenCount - 1 ? this._spacing : 0);
                 }
@@ -179,16 +174,8 @@ export class StackPanel extends Container {
                     child._left.ignoreAdaptiveScaling = true;
                 }
 
-                if (
-                    child._width.isPercentage &&
-                    !child._automaticSize &&
-                    child.getClassName() === "TextBlock" &&
-                    (child as TextBlock).textWrapping !== TextWrapping.Clip &&
-                    !(child as TextBlock).forceResizeWidth
-                ) {
-                    if (!this.ignoreLayoutWarnings) {
-                        Tools.Warn(`Control (Name:${child.name}, UniqueId:${child.uniqueId}) is using width in percentage mode inside a horizontal StackPanel`);
-                    }
+                if (!this.ignoreLayoutWarnings && !child.isDimensionFullyDefined("width")) {
+                    Logger.Warn(`Control (Name:${child.name}, UniqueId:${child.uniqueId}) is using width in percentage mode inside a horizontal StackPanel`, 1);
                 } else {
                     stackWidth += child._currentMeasure.width + child._paddingLeftInPixels + child._paddingRightInPixels + (index < childrenCount - 1 ? this._spacing : 0);
                 }
@@ -236,6 +223,27 @@ export class StackPanel extends Container {
         super._postMeasure();
     }
 
+    private _getManualDim(dim: "width" | "height") {
+        if (dim === "width") {
+            return this._manualWidth;
+        } else {
+            return this._manualHeight;
+        }
+    }
+
+    public isDimensionFullyDefined(dim: "width" | "height"): boolean {
+        if (dim === "height" ? this.isVertical : !this.isVertical && !this._getManualDim(dim)) {
+            for (const child of this._children) {
+                if (!child.isDimensionFullyDefined(dim)) {
+                    return false;
+                }
+            }
+            return true;
+        }
+
+        return this.getDimension(dim).isPixel || this._getAdaptDimTo(dim);
+    }
+
     /**
      * Serializes the current control
      * @param serializationObject defined the JSON serialized object

packages/dev/gui/src/2D/controls/textBlock.ts

@@ -646,6 +646,13 @@ export class TextBlock extends Control {
         return newHeight;
     }
 
+    public isDimensionFullyDefined(dim: "width" | "height"): boolean {
+        if (this.resizeToFit) {
+            return true;
+        }
+        return super.isDimensionFullyDefined(dim);
+    }
+
     /**
      * Given a width constraint applied on the text block, find the expected height
      * @returns expected height