@babylonjs/gui 5.0.0-alpha.6 → 5.0.0-alpha.60

package/2D/controls/control.js

@@ -1,14 +1,15 @@
 import { __decorate } from "tslib";
-import { Observable } from "@babylonjs/core/Misc/observable";
-import { Vector2, Vector3, Matrix } from "@babylonjs/core/Maths/math.vector";
-import { PointerEventTypes } from '@babylonjs/core/Events/pointerEvents';
-import { Logger } from "@babylonjs/core/Misc/logger";
-import { Tools } from "@babylonjs/core/Misc/tools";
-import { ValueAndUnit } from "../valueAndUnit";
-import { Measure } from "../measure";
-import { Matrix2D, Vector2WithInfo } from "../math2D";
-import { _TypeStore } from '@babylonjs/core/Misc/typeStore';
-import { SerializationHelper, serialize } from '@babylonjs/core/Misc/decorators';
+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 { 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 { Engine } from "@babylonjs/core/Engines/engine.js";
 /**
  * Root class used for all 2D controls
  * @see https://doc.babylonjs.com/how_to/gui#controls
@@ -74,6 +75,8 @@ var Control = /** @class */ (function () {
         this._isMatrixDirty = true;
         this._isVisible = true;
         this._isHighlighted = false;
+        this._highlightColor = "#4affff";
+        this._highlightLineWidth = 2;
         this._fontSet = false;
         this._dummyVector2 = Vector2.Zero();
         this._downCount = 0;
@@ -83,6 +86,7 @@ var Control = /** @class */ (function () {
         this._isEnabled = true;
         this._disabledColor = "#9a9a9a";
         this._disabledColorItem = "#6a6a6a";
+        this._isReadOnly = false;
         /** @hidden */
         this._rebuildLayout = false;
         /** @hidden */
@@ -118,6 +122,7 @@ var Control = /** @class */ (function () {
         this._shadowOffsetX = 0;
         this._shadowOffsetY = 0;
         this._shadowBlur = 0;
+        this._previousShadowBlur = 0;
         this._shadowColor = 'black';
         /** Gets or sets the cursor to use when the control is hovered */
         this.hoverCursor = "";
@@ -130,11 +135,11 @@ var Control = /** @class */ (function () {
         */
         this.onWheelObservable = new Observable();
         /**
-        * An event triggered when the pointer move over the control.
+        * An event triggered when the pointer moves over the control.
         */
         this.onPointerMoveObservable = new Observable();
         /**
-        * An event triggered when the pointer move out of the control.
+        * An event triggered when the pointer moves out of the control.
         */
         this.onPointerOutObservable = new Observable();
         /**
@@ -179,6 +184,20 @@ var Control = /** @class */ (function () {
         this._fixedRatioMasterIsWidth = true;
         this._tmpMeasureA = new Measure(0, 0, 0, 0);
     }
+    Object.defineProperty(Control.prototype, "isReadOnly", {
+        /**
+         * Gets or sets a boolean indicating if the control is readonly (default: false).
+         * A readonly control will still raise pointer events but will not react to them
+         */
+        get: function () {
+            return this._isReadOnly;
+        },
+        set: function (value) {
+            this._isReadOnly = value;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Control.prototype, "shadowOffsetX", {
         /** Gets or sets a value indicating the offset to apply on X axis to render the shadow */
         get: function () {
@@ -218,6 +237,7 @@ var Control = /** @class */ (function () {
             if (this._shadowBlur === value) {
                 return;
             }
+            this._previousShadowBlur = this._shadowBlur;
             this._shadowBlur = value;
             this._markAsDirty();
         },
@@ -292,6 +312,23 @@ var Control = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Control.prototype, "highlightLineWidth", {
+        /**
+         * Gets or sets a number indicating size of stroke we want to highlight the control with (mostly for debugging purpose)
+         */
+        get: function () {
+            return this._highlightLineWidth;
+        },
+        set: function (value) {
+            if (this._highlightLineWidth === value) {
+                return;
+            }
+            this._highlightLineWidth = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(Control.prototype, "isHighlighted", {
         /**
          * Gets or sets a boolean indicating that we want to highlight the control (mostly for debugging purpose)
@@ -309,6 +346,23 @@ var Control = /** @class */ (function () {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(Control.prototype, "highlightColor", {
+        /**
+         * Gets or sets a string defining the color to use for highlighting this control
+         */
+        get: function () {
+            return this._highlightColor;
+        },
+        set: function (value) {
+            if (this._highlightColor === value) {
+                return;
+            }
+            this._highlightColor = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
     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
@@ -514,9 +568,6 @@ var Control = /** @class */ (function () {
     Object.defineProperty(Control.prototype, "fontFamily", {
         /** Gets or set font family */
         get: function () {
-            if (!this._fontSet) {
-                return "";
-            }
             return this._fontFamily;
         },
         set: function (value) {
@@ -1115,7 +1166,7 @@ var Control = /** @class */ (function () {
         }
         this.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
         this.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-        var globalViewport = this._host._getGlobalViewport(scene);
+        var globalViewport = this._host._getGlobalViewport();
         var projectedPosition = Vector3.Project(position, Matrix.Identity(), scene.getTransformMatrix(), globalViewport);
         this._moveToProjectedPosition(projectedPosition);
         if (projectedPosition.z < 0 || projectedPosition.z > 1) {
@@ -1211,8 +1262,15 @@ var Control = /** @class */ (function () {
     };
     /** @hidden */
     Control.prototype._moveToProjectedPosition = function (projectedPosition) {
+        var _a;
         var oldLeft = this._left.getValue(this._host);
         var oldTop = this._top.getValue(this._host);
+        if (this._currentMeasure.width === 0 && this._currentMeasure.height === 0) {
+            var parentMeasure = (_a = this.parent) === null || _a === void 0 ? void 0 : _a._currentMeasure;
+            if (parentMeasure) {
+                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);
         if (this._left.ignoreAdaptiveScaling && this._top.ignoreAdaptiveScaling) {
@@ -1267,6 +1325,14 @@ var Control = /** @class */ (function () {
         return true;
     };
     /** @hidden */
+    Control.prototype._computeAdditionnalOffsetX = function () {
+        return 0;
+    };
+    /** @hidden */
+    Control.prototype._computeAdditionnalOffsetY = function () {
+        return 0;
+    };
+    /** @hidden */
     Control.prototype.invalidateRect = function () {
         this._transform();
         if (this.host && this.host.useInvalidateRectOptimization) {
@@ -1275,20 +1341,17 @@ var Control = /** @class */ (function () {
             // get the boudning box of the current measure and last frames measure in global space and invalidate it
             // the previous measure is used to properly clear a control that is scaled down
             Measure.CombineToRef(this._tmpMeasureA, this._prevCurrentMeasureTransformedIntoGlobalSpace, this._tmpMeasureA);
-            if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
-                // Expand rect based on shadows
-                var shadowOffsetX = this.shadowOffsetX;
-                var shadowOffsetY = this.shadowOffsetY;
-                var shadowBlur = this.shadowBlur;
-                var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
-                var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
-                var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
-                var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
-                this.host.invalidateRect(Math.floor(this._tmpMeasureA.left + leftShadowOffset), Math.floor(this._tmpMeasureA.top + topShadowOffset), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width + rightShadowOffset), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height + bottomShadowOffset));
-            }
-            else {
-                this.host.invalidateRect(Math.floor(this._tmpMeasureA.left), Math.floor(this._tmpMeasureA.top), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height));
-            }
+            // Expand rect based on shadows
+            var shadowOffsetX = this.shadowOffsetX;
+            var shadowOffsetY = this.shadowOffsetY;
+            var shadowBlur = Math.max(this._previousShadowBlur, this.shadowBlur);
+            var leftShadowOffset = Math.min(Math.min(shadowOffsetX, 0) - shadowBlur * 2, 0);
+            var rightShadowOffset = Math.max(Math.max(shadowOffsetX, 0) + shadowBlur * 2, 0);
+            var topShadowOffset = Math.min(Math.min(shadowOffsetY, 0) - shadowBlur * 2, 0);
+            var bottomShadowOffset = Math.max(Math.max(shadowOffsetY, 0) + shadowBlur * 2, 0);
+            var offsetX = this._computeAdditionnalOffsetX();
+            var offsetY = this._computeAdditionnalOffsetY();
+            this.host.invalidateRect(Math.floor(this._tmpMeasureA.left + leftShadowOffset - offsetX), Math.floor(this._tmpMeasureA.top + topShadowOffset - offsetY), Math.ceil(this._tmpMeasureA.left + this._tmpMeasureA.width + rightShadowOffset + offsetX), Math.ceil(this._tmpMeasureA.top + this._tmpMeasureA.height + bottomShadowOffset + offsetY));
         }
     };
     /** @hidden */
@@ -1350,8 +1413,8 @@ var Control = /** @class */ (function () {
             return;
         }
         context.save();
-        context.strokeStyle = "#4affff";
-        context.lineWidth = 2;
+        context.strokeStyle = this._highlightColor;
+        context.lineWidth = this._highlightLineWidth;
         this._renderHighlightSpecific(context);
         context.restore();
     };
@@ -1378,7 +1441,7 @@ var Control = /** @class */ (function () {
             context.globalAlpha *= this._alpha;
         }
         else if (this._alphaSet) {
-            context.globalAlpha = this.parent ? this.parent.alpha * this._alpha : this._alpha;
+            context.globalAlpha = (this.parent && !this.parent.renderToIntermediateTexture) ? this.parent.alpha * this._alpha : this._alpha;
         }
     };
     /** @hidden */
@@ -1825,7 +1888,7 @@ var Control = /** @class */ (function () {
         serializationObject.name = this.name;
         serializationObject.className = this.getClassName();
         if (this._font) {
-            serializationObject.fontFamily = this.fontFamily;
+            serializationObject.fontFamily = this._fontFamily;
             serializationObject.fontSize = this.fontSize;
             serializationObject.fontWeight = this.fontWeight;
             serializationObject.fontStyle = this.fontStyle;
@@ -1929,30 +1992,11 @@ var Control = /** @class */ (function () {
         if (Control._FontHeightSizes[font]) {
             return Control._FontHeightSizes[font];
         }
-        var text = document.createElement("span");
-        text.innerHTML = "Hg";
-        text.style.font = font;
-        var block = document.createElement("div");
-        block.style.display = "inline-block";
-        block.style.width = "1px";
-        block.style.height = "0px";
-        block.style.verticalAlign = "bottom";
-        var div = document.createElement("div");
-        div.style.whiteSpace = "nowrap";
-        div.appendChild(text);
-        div.appendChild(block);
-        document.body.appendChild(div);
-        var fontAscent = 0;
-        var fontHeight = 0;
-        try {
-            fontHeight = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
-            block.style.verticalAlign = "baseline";
-            fontAscent = block.getBoundingClientRect().top - text.getBoundingClientRect().top;
-        }
-        finally {
-            document.body.removeChild(div);
-        }
-        var result = { ascent: fontAscent, height: fontHeight, descent: fontHeight - fontAscent };
+        var engine = Engine.LastCreatedEngine;
+        if (!engine) {
+            throw new Error("Invalid engine. Unable to create a canvas.");
+        }
+        var result = engine.getFontOffset(font);
         Control._FontHeightSizes[font] = result;
         return result;
     };
@@ -2126,5 +2170,5 @@ var Control = /** @class */ (function () {
     return Control;
 }());
 export { Control };
-_TypeStore.RegisteredTypes["BABYLON.GUI.Control"] = Control;
+RegisterClass("BABYLON.GUI.Control", Control);
 //# sourceMappingURL=control.js.map