Better handling of StackPanel layout warning

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

@@ -37,6 +37,8 @@ export class Container extends Control {
     protected _renderToIntermediateTexture: boolean = false;
     /** @internal */
     protected _intermediateTexture: Nullable<DynamicTexture> = null;
+    protected _cachedIsWidthFullyDefined?: boolean;
+    protected _cachedIsHeightFullyDefined?: boolean;
 
     /** Gets or sets boolean indicating if children should be rendered to an intermediate texture rather than directly to host, useful for alpha blending */
     @serialize()
@@ -619,6 +621,42 @@ export class Container extends Control {
         this._measureForChildren.copyFrom(this._currentMeasure);
     }
 
+    public isWidthFullyDefined(): boolean {
+        if (!this._isDirty && this._cachedIsWidthFullyDefined !== undefined) {
+            return this._cachedIsWidthFullyDefined;
+        }
+        if (this.adaptWidthToChildren) {
+            for (const child of this.children) {
+                if (!child.isWidthFullyDefined()) {
+                    this._cachedIsWidthFullyDefined = false;
+                    return false;
+                }
+            }
+            this._cachedIsWidthFullyDefined = true;
+            return true;
+        }
+        this._cachedIsWidthFullyDefined = super.isWidthFullyDefined();
+        return this._cachedIsWidthFullyDefined;
+    }
+
+    public isHeightFullyDefined(): boolean {
+        if (!this._isDirty && this._cachedIsHeightFullyDefined !== undefined) {
+            return this._cachedIsHeightFullyDefined;
+        }
+        if (this.adaptHeightToChildren) {
+            for (const child of this.children) {
+                if (!child.isHeightFullyDefined()) {
+                    this._cachedIsHeightFullyDefined = false;
+                    return false;
+                }
+            }
+            this._cachedIsHeightFullyDefined = true;
+            return true;
+        }
+        this._cachedIsHeightFullyDefined = super.isHeightFullyDefined();
+        return this._cachedIsHeightFullyDefined;
+    }
+
     /**
      * Serializes the current control
      * @param serializationObject defined the JSON serialized object

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

@@ -2424,6 +2424,22 @@ export class Control implements IAnimatable {
         this.getDescendants().forEach((child) => child._markAllAsDirty());
     }
 
+    /**
+     * A fully defined width means that it is possible to know what size it will occupy
+     * by querying only it and its children, and not its parent.
+     */
+    public isWidthFullyDefined(): boolean {
+        return this._width.isPixel;
+    }
+
+    /**
+     * A fully defined height means that it is possible to know what size it will occupy
+     * by querying only it and its children, and not its parent.
+     */
+    public isHeightFullyDefined(): boolean {
+        return this._height.isPixel;
+    }
+
     /**
      * 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

@@ -7,8 +7,6 @@ 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";
 
 /**
  * Class used to create a 2D stack panel container
@@ -165,10 +163,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.isHeightFullyDefined() && !this.ignoreLayoutWarnings) {
+                    Tools.Warn(`Control (Name:${child.name}, UniqueId:${child.uniqueId}) is using height in percentage mode inside a vertical StackPanel`);
                 } else {
                     stackHeight += child._currentMeasure.height + child._paddingTopInPixels + child._paddingBottomInPixels + (index < childrenCount - 1 ? this._spacing : 0);
                 }
@@ -179,16 +175,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.isWidthFullyDefined() && !this.ignoreLayoutWarnings) {
+                    Tools.Warn(`Control (Name:${child.name}, UniqueId:${child.uniqueId}) is using width in percentage mode inside a horizontal StackPanel`);
                 } else {
                     stackWidth += child._currentMeasure.width + child._paddingLeftInPixels + child._paddingRightInPixels + (index < childrenCount - 1 ? this._spacing : 0);
                 }
@@ -236,6 +224,42 @@ export class StackPanel extends Container {
         super._postMeasure();
     }
 
+    public isWidthFullyDefined(): boolean {
+        if (!this._isDirty && this._cachedIsWidthFullyDefined !== undefined) {
+            return this._cachedIsWidthFullyDefined;
+        }
+        if (!this.isVertical && !this._manualWidth) {
+            for (const child of this._children) {
+                if (!child.isWidthFullyDefined()) {
+                    this._cachedIsWidthFullyDefined = false;
+                    return false;
+                }
+            }
+            this._cachedIsWidthFullyDefined = true;
+            return true;
+        }
+        this._cachedIsWidthFullyDefined = this._width.isPixel || this.adaptWidthToChildren;
+        return this._cachedIsWidthFullyDefined;
+    }
+
+    public isHeightFullyDefined(): boolean {
+        if (!this._isDirty && this._cachedIsHeightFullyDefined !== undefined) {
+            return this._cachedIsHeightFullyDefined;
+        }
+        if (this.isVertical && !this._manualHeight) {
+            for (const child of this._children) {
+                if (!child.isHeightFullyDefined()) {
+                    this._cachedIsHeightFullyDefined = false;
+                    return false;
+                }
+            }
+            this._cachedIsHeightFullyDefined = true;
+            return true;
+        }
+        this._cachedIsHeightFullyDefined = this._height.isPixel || this.adaptHeightToChildren;
+        return this._cachedIsHeightFullyDefined;
+    }
+
     /**
      * Serializes the current control
      * @param serializationObject defined the JSON serialized object

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

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