@babylonjs/gui 9.24.0 → 9.26.0

package/2D/controls/control.pure.js

@@ -82,6 +82,8 @@ let Control = (() => {
     let _overlapDeltaMultiplier_decorators;
     let _overlapDeltaMultiplier_initializers = [];
     let _overlapDeltaMultiplier_extraInitializers = [];
+    let _get_flexGrow_decorators;
+    let _get_flexShrink_decorators;
     return _a = class Control {
             /**
              * Gets or sets a boolean indicating if the control is readonly (default: false).
@@ -400,7 +402,7 @@ let Control = (() => {
              * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size
              */
             get widthInPixels() {
-                return this._width.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                return this._getValueInPixel(this._width, this._cachedParentMeasure.width);
             }
             set widthInPixels(value) {
                 if (isNaN(value)) {
@@ -430,7 +432,7 @@ let Control = (() => {
              * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size
              */
             get heightInPixels() {
-                return this._height.getValueInPixel(this._host, this._cachedParentMeasure.height);
+                return this._getValueInPixel(this._height, this._cachedParentMeasure.height);
             }
             set heightInPixels(value) {
                 if (isNaN(value)) {
@@ -501,10 +503,14 @@ let Control = (() => {
             /** Gets or sets font size in pixels */
             get fontSizeInPixels() {
                 const fontSizeToUse = this._style ? this._style._fontSize : this._fontSize;
-                if (fontSizeToUse.isPixel) {
-                    return fontSizeToUse.getValue(this._host);
+                if (fontSizeToUse.unit !== ValueAndUnit.UNITMODE_EM && fontSizeToUse.unit !== ValueAndUnit.UNITMODE_REM) {
+                    return fontSizeToUse.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
                 }
-                return fontSizeToUse.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height);
+                const root = this._host?.rootContainer;
+                const defaultSize = _a._DefaultFontSize.getValue(this._host);
+                const rootSize = root && root !== this ? root.fontSizeInPixels : defaultSize;
+                const parentSize = this.parent ? this.parent.fontSizeInPixels : defaultSize;
+                return fontSizeToUse.getValueInPixel(this._host, this._tempParentMeasure.height || this._cachedParentMeasure.height, parentSize, rootSize);
             }
             set fontSizeInPixels(value) {
                 if (isNaN(value)) {
@@ -512,7 +518,11 @@ let Control = (() => {
                 }
                 this.fontSize = value + "px";
             }
-            /** Gets or sets font size */
+            /**
+             * Gets or sets the font size in px, percent of parent height, em, or rem.
+             * For font declarations, em uses the parent font and rem uses the GUI root font.
+             * Relative font sizes on the root use the default 18px font, including adaptive scaling.
+             */
             get fontSize() {
                 return this._fontSize.toString(this._host);
             }
@@ -624,7 +634,7 @@ let Control = (() => {
              * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size
              */
             get paddingLeftInPixels() {
-                return this._paddingLeft.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                return this._getValueInPixel(this._paddingLeft, this._cachedParentMeasure.width);
             }
             set paddingLeftInPixels(value) {
                 if (isNaN(value)) {
@@ -656,7 +666,7 @@ let Control = (() => {
              * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size
              */
             get paddingRightInPixels() {
-                return this._paddingRight.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                return this._getValueInPixel(this._paddingRight, this._cachedParentMeasure.width);
             }
             set paddingRightInPixels(value) {
                 if (isNaN(value)) {
@@ -688,7 +698,7 @@ let Control = (() => {
              * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size
              */
             get paddingTopInPixels() {
-                return this._paddingTop.getValueInPixel(this._host, this._cachedParentMeasure.height);
+                return this._getValueInPixel(this._paddingTop, this._cachedParentMeasure.height);
             }
             set paddingTopInPixels(value) {
                 if (isNaN(value)) {
@@ -720,7 +730,7 @@ let Control = (() => {
              * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size
              */
             get paddingBottomInPixels() {
-                return this._paddingBottom.getValueInPixel(this._host, this._cachedParentMeasure.height);
+                return this._getValueInPixel(this._paddingBottom, this._cachedParentMeasure.height);
             }
             set paddingBottomInPixels(value) {
                 if (isNaN(value)) {
@@ -752,7 +762,7 @@ let Control = (() => {
              * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size
              */
             get leftInPixels() {
-                return this._left.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                return this._getValueInPixel(this._left, this._cachedParentMeasure.width);
             }
             set leftInPixels(value) {
                 if (isNaN(value)) {
@@ -777,7 +787,7 @@ let Control = (() => {
              * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#position-and-size
              */
             get topInPixels() {
-                return this._top.getValueInPixel(this._host, this._cachedParentMeasure.height);
+                return this._getValueInPixel(this._top, this._cachedParentMeasure.height);
             }
             set topInPixels(value) {
                 if (isNaN(value)) {
@@ -802,7 +812,7 @@ let Control = (() => {
              * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#tracking-positions
              */
             get linkOffsetXInPixels() {
-                return this._linkOffsetX.getValueInPixel(this._host, this._cachedParentMeasure.width);
+                return this._getValueInPixel(this._linkOffsetX, this._cachedParentMeasure.width);
             }
             set linkOffsetXInPixels(value) {
                 if (isNaN(value)) {
@@ -827,7 +837,7 @@ let Control = (() => {
              * @see https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#tracking-positions
              */
             get linkOffsetYInPixels() {
-                return this._linkOffsetY.getValueInPixel(this._host, this._cachedParentMeasure.height);
+                return this._getValueInPixel(this._linkOffsetY, this._cachedParentMeasure.height);
             }
             set linkOffsetYInPixels(value) {
                 if (isNaN(value)) {
@@ -956,6 +966,36 @@ let Control = (() => {
                 }
                 this.onKeyboardEventProcessedObservable.notifyObservers(evt, -1, this);
             }
+            /**
+             * Gets or sets the nonnegative share of free main-axis space in a FlexPanel.
+             */
+            get flexGrow() {
+                return this._flexGrow;
+            }
+            set flexGrow(value) {
+                if (!Number.isFinite(value) || value < 0) {
+                    throw new RangeError("flexGrow must be finite and nonnegative");
+                }
+                if (this._flexGrow !== value) {
+                    this._flexGrow = value;
+                    this._markAsDirty();
+                }
+            }
+            /**
+             * Gets or sets the nonnegative shrink factor in a FlexPanel, weighted by the declared main-axis size.
+             */
+            get flexShrink() {
+                return this._flexShrink;
+            }
+            set flexShrink(value) {
+                if (!Number.isFinite(value) || value < 0) {
+                    throw new RangeError("flexShrink must be finite and nonnegative");
+                }
+                if (this._flexShrink !== value) {
+                    this._flexShrink = value;
+                    this._markAsDirty();
+                }
+            }
             // Functions
             /**
              * Creates a new control
@@ -1177,6 +1217,8 @@ let Control = (() => {
                 this.onBlurObservable = new Observable();
                 /** Observable raised when a key event was processed */
                 this.onKeyboardEventProcessedObservable = new Observable();
+                this._flexGrow = 0;
+                this._flexShrink = 1;
                 this._tmpMeasureA = new Measure(0, 0, 0, 0);
             }
             /** @internal */
@@ -1370,14 +1412,14 @@ let Control = (() => {
              * @internal
              */
             _moveToProjectedPosition(projectedPosition) {
-                const oldLeft = this._left.getValue(this._host);
-                const oldTop = this._top.getValue(this._host);
+                const oldLeft = this._getValueInPixel(this._left, 1);
+                const oldTop = this._getValueInPixel(this._top, 1);
                 const parentMeasure = this.parent?._currentMeasure;
                 if (parentMeasure) {
                     this._processMeasures(parentMeasure, this._host.getContext());
                 }
-                let newLeft = projectedPosition.x + this._linkOffsetX.getValue(this._host) - this._currentMeasure.width / 2;
-                let newTop = projectedPosition.y + this._linkOffsetY.getValue(this._host) - this._currentMeasure.height / 2;
+                let newLeft = projectedPosition.x + this._getValueInPixel(this._linkOffsetX, 1) - this._currentMeasure.width / 2;
+                let newTop = projectedPosition.y + this._getValueInPixel(this._linkOffsetY, 1) - this._currentMeasure.height / 2;
                 if (this._left.ignoreAdaptiveScaling && this._top.ignoreAdaptiveScaling) {
                     if (Math.abs(newLeft - oldLeft) < 0.5) {
                         newLeft = oldLeft;
@@ -1628,8 +1670,17 @@ let Control = (() => {
                 // Let children take some pre-measurement actions
                 this._preMeasure(this._tempPaddingMeasure, context);
                 this._measure();
-                // Let children take some post-measurement actions
+                const flexMeasure = this.parent?._getLayoutMeasureForChild(this);
+                if (flexMeasure) {
+                    this._currentMeasure.width = flexMeasure.width;
+                    this._currentMeasure.height = flexMeasure.height;
+                }
+                // Text wrapping must use the allocated flex width rather than the declared basis.
                 this._postMeasure(this._tempPaddingMeasure, context);
+                if (flexMeasure) {
+                    this._currentMeasure.width = flexMeasure.width;
+                    this._currentMeasure.height = flexMeasure.height;
+                }
                 this._computeAlignment(this._tempPaddingMeasure, context);
                 // Let children add more features
                 this._additionalProcessing(this._tempPaddingMeasure, context);
@@ -1666,21 +1717,23 @@ let Control = (() => {
                 }
                 this._isClipped = false;
             }
+            /**
+             * Resolves a GUI dimension using this control's computed font size.
+             * @param value defines the dimension to resolve
+             * @param reference defines the reference size for percentages
+             * @returns the dimension in pixels
+             * @internal
+             */
+            _getValueInPixel(value, reference) {
+                if (value.unit === ValueAndUnit.UNITMODE_EM || value.unit === ValueAndUnit.UNITMODE_REM) {
+                    return value.getValueInPixel(this._host, reference, this.fontSizeInPixels, this._host?.rootContainer.fontSizeInPixels);
+                }
+                return value.getValueInPixel(this._host, reference);
+            }
             /** @internal */
             _measure() {
-                // Width / Height
-                if (this._width.isPixel) {
-                    this._currentMeasure.width = this._width.getValue(this._host);
-                }
-                else {
-                    this._currentMeasure.width *= this._width.getValue(this._host);
-                }
-                if (this._height.isPixel) {
-                    this._currentMeasure.height = this._height.getValue(this._host);
-                }
-                else {
-                    this._currentMeasure.height *= this._height.getValue(this._host);
-                }
+                this._currentMeasure.width = this._getValueInPixel(this._width, this._currentMeasure.width);
+                this._currentMeasure.height = this._getValueInPixel(this._height, this._currentMeasure.height);
                 if (this._fixedRatio !== 0) {
                     if (this._fixedRatioMasterIsWidth) {
                         this._currentMeasure.height = this._currentMeasure.width * this._fixedRatio;
@@ -1724,46 +1777,21 @@ let Control = (() => {
                         break;
                 }
                 if (!this.descendantsOnlyPadding) {
-                    if (this._paddingLeft.isPixel) {
-                        this._currentMeasure.left += this._paddingLeft.getValue(this._host);
-                        this._currentMeasure.width -= this._paddingLeft.getValue(this._host);
-                    }
-                    else {
-                        this._currentMeasure.left += parentWidth * this._paddingLeft.getValue(this._host);
-                        this._currentMeasure.width -= parentWidth * this._paddingLeft.getValue(this._host);
-                    }
-                    if (this._paddingRight.isPixel) {
-                        this._currentMeasure.width -= this._paddingRight.getValue(this._host);
-                    }
-                    else {
-                        this._currentMeasure.width -= parentWidth * this._paddingRight.getValue(this._host);
-                    }
-                    if (this._paddingTop.isPixel) {
-                        this._currentMeasure.top += this._paddingTop.getValue(this._host);
-                        this._currentMeasure.height -= this._paddingTop.getValue(this._host);
-                    }
-                    else {
-                        this._currentMeasure.top += parentHeight * this._paddingTop.getValue(this._host);
-                        this._currentMeasure.height -= parentHeight * this._paddingTop.getValue(this._host);
-                    }
-                    if (this._paddingBottom.isPixel) {
-                        this._currentMeasure.height -= this._paddingBottom.getValue(this._host);
-                    }
-                    else {
-                        this._currentMeasure.height -= parentHeight * this._paddingBottom.getValue(this._host);
-                    }
-                }
-                if (this._left.isPixel) {
-                    this._currentMeasure.left += this._left.getValue(this._host);
-                }
-                else {
-                    this._currentMeasure.left += parentWidth * this._left.getValue(this._host);
-                }
-                if (this._top.isPixel) {
-                    this._currentMeasure.top += this._top.getValue(this._host);
+                    const left = this._getValueInPixel(this._paddingLeft, parentWidth);
+                    const top = this._getValueInPixel(this._paddingTop, parentHeight);
+                    this._currentMeasure.left += left;
+                    this._currentMeasure.top += top;
+                    this._currentMeasure.width -= left + this._getValueInPixel(this._paddingRight, parentWidth);
+                    this._currentMeasure.height -= top + this._getValueInPixel(this._paddingBottom, parentHeight);
+                }
+                const flexMeasure = this.parent?._getLayoutMeasureForChild(this);
+                if (flexMeasure) {
+                    x = flexMeasure.left;
+                    y = flexMeasure.top;
                 }
                 else {
-                    this._currentMeasure.top += parentHeight * this._top.getValue(this._host);
+                    this._currentMeasure.left += this._getValueInPixel(this._left, parentWidth);
+                    this._currentMeasure.top += this._getValueInPixel(this._top, parentHeight);
                 }
                 this._currentMeasure.left += x;
                 this._currentMeasure.top += y;
@@ -2136,7 +2164,7 @@ let Control = (() => {
              * @returns if the dimension is fully defined
              */
             isDimensionFullyDefined(dim) {
-                return this.getDimension(dim).isPixel;
+                return !this.getDimension(dim).isPercentage;
             }
             /**
              * Gets the dimension of the control along a specified axis
@@ -2431,6 +2459,8 @@ let Control = (() => {
             _get_disabledColorItem_decorators = [serialize()];
             _overlapGroup_decorators = [serialize()];
             _overlapDeltaMultiplier_decorators = [serialize()];
+            _get_flexGrow_decorators = [serialize()];
+            _get_flexShrink_decorators = [serialize()];
             __esDecorate(_a, null, _get_clipChildren_decorators, { kind: "getter", name: "clipChildren", static: false, private: false, access: { has: obj => "clipChildren" in obj, get: obj => obj.clipChildren }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_clipContent_decorators, { kind: "getter", name: "clipContent", static: false, private: false, access: { has: obj => "clipContent" in obj, get: obj => obj.clipContent }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_shadowOffsetX_decorators, { kind: "getter", name: "shadowOffsetX", static: false, private: false, access: { has: obj => "shadowOffsetX" in obj, get: obj => obj.shadowOffsetX }, metadata: _metadata }, null, _instanceExtraInitializers);
@@ -2468,6 +2498,8 @@ let Control = (() => {
             __esDecorate(_a, null, _get_isEnabled_decorators, { kind: "getter", name: "isEnabled", static: false, private: false, access: { has: obj => "isEnabled" in obj, get: obj => obj.isEnabled }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_disabledColor_decorators, { kind: "getter", name: "disabledColor", static: false, private: false, access: { has: obj => "disabledColor" in obj, get: obj => obj.disabledColor }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(_a, null, _get_disabledColorItem_decorators, { kind: "getter", name: "disabledColorItem", static: false, private: false, access: { has: obj => "disabledColorItem" in obj, get: obj => obj.disabledColorItem }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _get_flexGrow_decorators, { kind: "getter", name: "flexGrow", static: false, private: false, access: { has: obj => "flexGrow" in obj, get: obj => obj.flexGrow }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(_a, null, _get_flexShrink_decorators, { kind: "getter", name: "flexShrink", static: false, private: false, access: { has: obj => "flexShrink" in obj, get: obj => obj.flexShrink }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, null, _metadata_decorators, { kind: "field", name: "metadata", static: false, private: false, access: { has: obj => "metadata" in obj, get: obj => obj.metadata, set: (obj, value) => { obj.metadata = value; } }, metadata: _metadata }, _metadata_initializers, _metadata_extraInitializers);
             __esDecorate(null, null, _isHitTestVisible_decorators, { kind: "field", name: "isHitTestVisible", static: false, private: false, access: { has: obj => "isHitTestVisible" in obj, get: obj => obj.isHitTestVisible, set: (obj, value) => { obj.isHitTestVisible = value; } }, metadata: _metadata }, _isHitTestVisible_initializers, _isHitTestVisible_extraInitializers);
             __esDecorate(null, null, _isPointerBlocker_decorators, { kind: "field", name: "isPointerBlocker", static: false, private: false, access: { has: obj => "isPointerBlocker" in obj, get: obj => obj.isPointerBlocker, set: (obj, value) => { obj.isPointerBlocker = value; } }, metadata: _metadata }, _isPointerBlocker_initializers, _isPointerBlocker_extraInitializers);
@@ -2483,6 +2515,7 @@ let Control = (() => {
          * Gets or sets a boolean indicating if alpha must be an inherited value (false by default)
          */
         _a.AllowAlphaInheritance = false,
+        _a._DefaultFontSize = new ValueAndUnit(18),
         _a._ClipMeasure = new Measure(0, 0, 0, 0),
         // Statics
         _a._HORIZONTAL_ALIGNMENT_LEFT = 0,