@babylonjs/gui 5.0.0-alpha.59 → 5.0.0-alpha.62

package/2D/controls/control.js

@@ -1,14 +1,14 @@
 import { __decorate } from "tslib";
 import { Observable } from "@babylonjs/core/Misc/observable.js";
 import { Vector2, Vector3, Matrix } from "@babylonjs/core/Maths/math.vector.js";
-import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents.js';
+import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents.js";
 import { Logger } from "@babylonjs/core/Misc/logger.js";
 import { Tools } from "@babylonjs/core/Misc/tools.js";
 import { ValueAndUnit } from "../valueAndUnit.js";
 import { Measure } from "../measure.js";
 import { Matrix2D, Vector2WithInfo } from "../math2D.js";
-import { RegisterClass } from '@babylonjs/core/Misc/typeStore.js';
-import { SerializationHelper, serialize } from '@babylonjs/core/Misc/decorators.js';
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { SerializationHelper, serialize } from "@babylonjs/core/Misc/decorators.js";
 import { Engine } from "@babylonjs/core/Engines/engine.js";
 /**
  * Root class used for all 2D controls
@@ -83,6 +83,8 @@ var Control = /** @class */ (function () {
         this._enterCount = -1;
         this._doNotRender = false;
         this._downPointerIds = {};
+        this._evaluatedMeasure = new Measure(0, 0, 0, 0);
+        this._evaluatedParentMeasure = new Measure(0, 0, 0, 0);
         this._isEnabled = true;
         this._disabledColor = "#9a9a9a";
         this._disabledColorItem = "#6a6a6a";
@@ -123,7 +125,7 @@ var Control = /** @class */ (function () {
         this._shadowOffsetY = 0;
         this._shadowBlur = 0;
         this._previousShadowBlur = 0;
-        this._shadowColor = 'black';
+        this._shadowColor = "black";
         /** Gets or sets the cursor to use when the control is hovered */
         this.hoverCursor = "";
         /** @hidden */
@@ -131,36 +133,36 @@ var Control = /** @class */ (function () {
         /** @hidden */
         this._linkOffsetY = new ValueAndUnit(0);
         /**
-        * An event triggered when pointer wheel is scrolled
-        */
+         * An event triggered when pointer wheel is scrolled
+         */
         this.onWheelObservable = new Observable();
         /**
-        * An event triggered when the pointer moves over the control.
-        */
+         * An event triggered when the pointer moves over the control.
+         */
         this.onPointerMoveObservable = new Observable();
         /**
-        * An event triggered when the pointer moves out of the control.
-        */
+         * An event triggered when the pointer moves out of the control.
+         */
         this.onPointerOutObservable = new Observable();
         /**
-        * An event triggered when the pointer taps the control
-        */
+         * An event triggered when the pointer taps the control
+         */
         this.onPointerDownObservable = new Observable();
         /**
-        * An event triggered when pointer up
-        */
+         * An event triggered when pointer up
+         */
         this.onPointerUpObservable = new Observable();
         /**
-        * An event triggered when a control is clicked on
-        */
+         * An event triggered when a control is clicked on
+         */
         this.onPointerClickObservable = new Observable();
         /**
-        * An event triggered when pointer enters the control
-        */
+         * An event triggered when pointer enters the control
+         */
         this.onPointerEnterObservable = new Observable();
         /**
-        * An event triggered when the control is marked as dirty
-        */
+         * An event triggered when the control is marked as dirty
+         */
         this.onDirtyObservable = new Observable();
         /**
          * An event triggered before drawing the control
@@ -171,8 +173,8 @@ var Control = /** @class */ (function () {
          */
         this.onAfterDrawObservable = new Observable();
         /**
-        * An event triggered when the control has been disposed
-        */
+         * An event triggered when the control has been disposed
+         */
         this.onDisposeObservable = new Observable();
         /**
          * Gets or sets a fixed ratio for this control.
@@ -366,7 +368,7 @@ var Control = /** @class */ (function () {
     Object.defineProperty(Control.prototype, "scaleX", {
         /** Gets or sets a value indicating the scale factor on X axis (1 by default)
          * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-        */
+         */
         get: function () {
             return this._scaleX;
         },
@@ -384,7 +386,7 @@ var Control = /** @class */ (function () {
     Object.defineProperty(Control.prototype, "scaleY", {
         /** Gets or sets a value indicating the scale factor on Y axis (1 by default)
          * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-        */
+         */
         get: function () {
             return this._scaleY;
         },
@@ -402,7 +404,7 @@ var Control = /** @class */ (function () {
     Object.defineProperty(Control.prototype, "rotation", {
         /** Gets or sets the rotation angle (0 by default)
          * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-        */
+         */
         get: function () {
             return this._rotation;
         },
@@ -420,7 +422,7 @@ var Control = /** @class */ (function () {
     Object.defineProperty(Control.prototype, "transformCenterY", {
         /** Gets or sets the transformation center on Y axis (0 by default)
          * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-        */
+         */
         get: function () {
             return this._transformCenterY;
         },
@@ -438,7 +440,7 @@ var Control = /** @class */ (function () {
     Object.defineProperty(Control.prototype, "transformCenterX", {
         /** Gets or sets the transformation center on X axis (0 by default)
          * @see https://doc.babylonjs.com/how_to/gui#rotation-and-scaling
-        */
+         */
         get: function () {
             return this._transformCenterX;
         },
@@ -1202,7 +1204,7 @@ var Control = /** @class */ (function () {
      * @see https://doc.babylonjs.com/how_to/gui#tracking-positions
      */
     Control.prototype.linkWithMesh = function (mesh) {
-        if (!this._host || this.parent && this.parent !== this._host._rootContainer) {
+        if (!this._host || (this.parent && this.parent !== this._host._rootContainer)) {
             if (mesh) {
                 Tools.Error("Cannot link a control to a mesh if the control is not at root level");
             }
@@ -1225,13 +1227,13 @@ var Control = /** @class */ (function () {
         this._host._linkedControls.push(this);
     };
     /**
-    * Shorthand funtion to set the top, right, bottom, and left padding values on the control.
-    * @param { string | number} paddingTop - The value of the top padding.
-    * @param { string | number} paddingRight - The value of the right padding. If omitted, top is used.
-    * @param { string | number} paddingBottom - The value of the bottom padding. If omitted, top is used.
-    * @param { string | number} paddingLeft - The value of the left padding. If omitted, right is used.
-    * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-    */
+     * Shorthand funtion to set the top, right, bottom, and left padding values on the control.
+     * @param { string | number} paddingTop - The value of the top padding.
+     * @param { string | number} paddingRight - The value of the right padding. If omitted, top is used.
+     * @param { string | number} paddingBottom - The value of the bottom padding. If omitted, top is used.
+     * @param { string | number} paddingLeft - The value of the left padding. If omitted, right is used.
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
     Control.prototype.setPadding = function (paddingTop, paddingRight, paddingBottom, paddingLeft) {
         var top = paddingTop;
         var right = paddingRight !== null && paddingRight !== void 0 ? paddingRight : top;
@@ -1271,8 +1273,8 @@ var Control = /** @class */ (function () {
                 this._processMeasures(parentMeasure, this._host.getContext());
             }
         }
-        var newLeft = ((projectedPosition.x + this._linkOffsetX.getValue(this._host)) - this._currentMeasure.width / 2);
-        var newTop = ((projectedPosition.y + this._linkOffsetY.getValue(this._host)) - this._currentMeasure.height / 2);
+        var newLeft = projectedPosition.x + this._linkOffsetX.getValue(this._host) - this._currentMeasure.width / 2;
+        var newTop = projectedPosition.y + this._linkOffsetY.getValue(this._host) - this._currentMeasure.height / 2;
         if (this._left.ignoreAdaptiveScaling && this._top.ignoreAdaptiveScaling) {
             if (Math.abs(newLeft - oldLeft) < 0.5) {
                 newLeft = oldLeft;
@@ -1441,7 +1443,7 @@ var Control = /** @class */ (function () {
             context.globalAlpha *= this._alpha;
         }
         else if (this._alphaSet) {
-            context.globalAlpha = (this.parent && !this.parent.renderToIntermediateTexture) ? this.parent.alpha * this._alpha : this._alpha;
+            context.globalAlpha = this.parent && !this.parent.renderToIntermediateTexture ? this.parent.alpha * this._alpha : this._alpha;
         }
     };
     /** @hidden */
@@ -1491,21 +1493,23 @@ var Control = /** @class */ (function () {
         }
     };
     Control.prototype._evaluateClippingState = function (parentMeasure) {
+        this._currentMeasure.transformToRef(this._transformMatrix, this._evaluatedMeasure);
         if (this.parent && this.parent.clipChildren) {
+            parentMeasure.transformToRef(this.parent._transformMatrix, this._evaluatedParentMeasure);
             // Early clip
-            if (this._currentMeasure.left > parentMeasure.left + parentMeasure.width) {
+            if (this._evaluatedMeasure.left > this._evaluatedParentMeasure.left + this._evaluatedParentMeasure.width) {
                 this._isClipped = true;
                 return;
             }
-            if (this._currentMeasure.left + this._currentMeasure.width < parentMeasure.left) {
+            if (this._evaluatedMeasure.left + this._evaluatedMeasure.width < this._evaluatedParentMeasure.left) {
                 this._isClipped = true;
                 return;
             }
-            if (this._currentMeasure.top > parentMeasure.top + parentMeasure.height) {
+            if (this._evaluatedMeasure.top > this._evaluatedParentMeasure.top + this._evaluatedParentMeasure.height) {
                 this._isClipped = true;
                 return;
             }
-            if (this._currentMeasure.top + this._currentMeasure.height < parentMeasure.top) {
+            if (this._evaluatedMeasure.top + this._evaluatedMeasure.height < this._evaluatedParentMeasure.top) {
                 this._isClipped = true;
                 return;
             }
@@ -1747,7 +1751,8 @@ var Control = /** @class */ (function () {
         if (this._enterCount > 0) {
             return false;
         }
-        if (this._enterCount === -1) { // -1 is for touch input, we are now sure we are with a mouse or pencil
+        if (this._enterCount === -1) {
+            // -1 is for touch input, we are now sure we are with a mouse or pencil
             this._enterCount = 0;
         }
         this._enterCount++;
@@ -1878,6 +1883,8 @@ var Control = /** @class */ (function () {
             this._font = this._fontStyle + " " + this._fontWeight + " " + this.fontSizeInPixels + "px " + this._fontFamily;
         }
         this._fontOffset = Control._GetFontOffset(this._font);
+        //children need to be refreshed
+        this.getDescendants().forEach(function (child) { return child._markAllAsDirty(); });
     };
     /**
      * Serializes the current control
@@ -2167,6 +2174,12 @@ var Control = /** @class */ (function () {
     __decorate([
         serialize()
     ], Control.prototype, "disabledColorItem", null);
+    __decorate([
+        serialize()
+    ], Control.prototype, "overlapGroup", void 0);
+    __decorate([
+        serialize()
+    ], Control.prototype, "overlapDeltaMultiplier", void 0);
     return Control;
 }());
 export { Control };