babylonjs-gui 5.19.0 → 5.22.0

package/babylon.gui.d.ts

@@ -107,6 +107,8 @@ declare module BABYLON.GUI {
         private _cursorChanged;
         private _defaultMousePointerId;
         /** @hidden */
+        _capturedPointerIds: Set<number>;
+        /** @hidden */
         _numLayoutCalls: number;
         /** Gets the number of layout calls made the last time the ADT has been rendered */
         get numLayoutCalls(): number;
@@ -389,6 +391,12 @@ declare module BABYLON.GUI {
          * Unregister the clipboard Events from the canvas
          */
         unRegisterClipboardEvents(): void;
+        /**
+         * Transform uvs from mesh space to texture space, taking the texture into account
+         * @param uv the uvs in mesh space
+         * @returns the uvs in texture space
+         */
+        private _transformUvs;
         /**
          * Connect the texture to a hosting mesh to enable interactions
          * @param mesh defines the mesh to attach to
@@ -3519,8 +3527,12 @@ declare module BABYLON.GUI {
         private _thumbHeight;
         private _barImageHeight;
         private _tempMeasure;
+        private _invertScrollDirection;
         /** Number of 90° rotation to apply on the images when in vertical mode */
         num90RotationInVerticalMode: number;
+        /** Inverts the scrolling direction (default: false) */
+        get invertScrollDirection(): boolean;
+        set invertScrollDirection(invert: boolean);
         /**
          * Gets or sets the image used to render the background for horizontal bar
          */
@@ -3575,12 +3587,16 @@ declare module BABYLON.GUI {
         private _background;
         private _borderColor;
         private _tempMeasure;
+        private _invertScrollDirection;
         /** Gets or sets border color */
         get borderColor(): string;
         set borderColor(value: string);
         /** Gets or sets background color */
         get background(): string;
         set background(value: string);
+        /** Inverts the scrolling direction (default: false) */
+        get invertScrollDirection(): boolean;
+        set invertScrollDirection(invert: boolean);
         /**
          * Creates a new Slider
          * @param name defines the control name

package/babylon.gui.js

@@ -522,6 +522,8 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         _this._cursorChanged = false;
         _this._defaultMousePointerId = 0;
         /** @hidden */
+        _this._capturedPointerIds = new Set();
+        /** @hidden */
         _this._numLayoutCalls = 0;
         /** @hidden */
         _this._numRenderCalls = 0;
@@ -1379,6 +1381,11 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         }
         var tempViewport = new core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Viewport(0, 0, 0, 0);
         this._prePointerObserver = scene.onPrePointerObservable.add(function (pi) {
+            if (scene.isPointerCaptured(pi.event.pointerId) &&
+                pi.type === core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERUP &&
+                !_this._capturedPointerIds.has(pi.event.pointerId)) {
+                return;
+            }
             if (pi.type !== core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERMOVE &&
                 pi.type !== core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERUP &&
                 pi.type !== core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERDOWN &&
@@ -1416,6 +1423,55 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
         self.removeEventListener("cut", this._onClipboardCut);
         self.removeEventListener("paste", this._onClipboardPaste);
     };
+    /**
+     * Transform uvs from mesh space to texture space, taking the texture into account
+     * @param uv the uvs in mesh space
+     * @returns the uvs in texture space
+     */
+    AdvancedDynamicTexture.prototype._transformUvs = function (uv) {
+        var textureMatrix = this.getTextureMatrix();
+        var result;
+        if (textureMatrix.isIdentityAs3x2()) {
+            result = uv;
+        }
+        else {
+            var homogeneousTextureMatrix = core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.TmpVectors.Matrix[0];
+            textureMatrix.getRowToRef(0, core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.TmpVectors.Vector4[0]);
+            textureMatrix.getRowToRef(1, core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.TmpVectors.Vector4[1]);
+            textureMatrix.getRowToRef(2, core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.TmpVectors.Vector4[2]);
+            var r0 = core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.TmpVectors.Vector4[0];
+            var r1 = core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.TmpVectors.Vector4[1];
+            var r2 = core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.TmpVectors.Vector4[2];
+            homogeneousTextureMatrix.setRowFromFloats(0, r0.x, r0.y, 0, 0);
+            homogeneousTextureMatrix.setRowFromFloats(1, r1.x, r1.y, 0, 0);
+            homogeneousTextureMatrix.setRowFromFloats(2, 0, 0, 1, 0);
+            homogeneousTextureMatrix.setRowFromFloats(3, r2.x, r2.y, 0, 1);
+            result = core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.TmpVectors.Vector2[0];
+            core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Vector2.TransformToRef(uv, homogeneousTextureMatrix, result);
+        }
+        // In wrap and mirror mode, the texture coordinate for coordinates more than 1 is the fractional part of the coordinate
+        if (this.wrapU === core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Texture.WRAP_ADDRESSMODE || this.wrapU === core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Texture.MIRROR_ADDRESSMODE) {
+            if (result.x > 1) {
+                var fX = result.x - Math.trunc(result.x);
+                // In mirror mode, the sign of the texture coordinate depends on the integer part -
+                // odd integers means it is mirrored from the original coordinate
+                if (this.wrapU === core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Texture.MIRROR_ADDRESSMODE && Math.trunc(result.x) % 2 === 1) {
+                    fX = 1 - fX;
+                }
+                result.x = fX;
+            }
+        }
+        if (this.wrapV === core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Texture.WRAP_ADDRESSMODE || this.wrapV === core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Texture.MIRROR_ADDRESSMODE) {
+            if (result.y > 1) {
+                var fY = result.y - Math.trunc(result.y);
+                if (this.wrapV === core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.Texture.MIRROR_ADDRESSMODE && Math.trunc(result.x) % 2 === 1) {
+                    fY = 1 - fY;
+                }
+                result.y = fY;
+            }
+        }
+        return result;
+    };
     /**
      * Connect the texture to a hosting mesh to enable interactions
      * @param mesh defines the mesh to attach to
@@ -1442,6 +1498,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             if (pi.pickInfo && pi.pickInfo.hit && pi.pickInfo.pickedMesh === mesh) {
                 var uv = pi.pickInfo.getTextureCoordinates();
                 if (uv) {
+                    uv = _this._transformUvs(uv);
                     var size = _this.getSize();
                     _this._doPicking(uv.x * size.width, (_this.applyYInversionOnUpdate ? 1.0 - uv.y : uv.y) * size.height, pi, pi.type, pointerId, pi.event.button, pi.event.deltaX, pi.event.deltaY);
                 }
@@ -1488,6 +1545,7 @@ var AdvancedDynamicTexture = /** @class */ (function (_super) {
             if (pick && pick.hit && pick.pickedMesh === mesh) {
                 var uv = pick.getTextureCoordinates();
                 if (uv) {
+                    uv = _this._transformUvs(uv);
                     var size = _this.getSize();
                     _this._doPicking(uv.x * size.width, (_this.applyYInversionOnUpdate ? 1.0 - uv.y : uv.y) * size.height, null, core_Misc_observable__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERMOVE, pointerId, 0);
                 }
@@ -6394,6 +6452,9 @@ var Control = /** @class */ (function () {
         if (canNotify && this.parent != null && !this.isPointerBlocker) {
             this.parent._onPointerDown(target, coordinates, pointerId, buttonIndex, pi);
         }
+        if (pi && this.uniqueId !== this._host.rootContainer.uniqueId) {
+            this._host._capturedPointerIds.add(pi.event.pointerId);
+        }
         return true;
     };
     /**
@@ -6419,6 +6480,9 @@ var Control = /** @class */ (function () {
         if (canNotify && this.parent != null && !this.isPointerBlocker) {
             this.parent._onPointerUp(target, coordinates, pointerId, buttonIndex, canNotifyClick, pi);
         }
+        if (pi && this.uniqueId !== this._host.rootContainer.uniqueId) {
+            this._host._capturedPointerIds.delete(pi.event.pointerId);
+        }
     };
     /**
      * @param pointerId
@@ -12100,17 +12164,18 @@ var Rectangle = /** @class */ (function (_super) {
         var y = this._currentMeasure.top + offset;
         var width = this._currentMeasure.width - offset * 2;
         var height = this._currentMeasure.height - offset * 2;
-        var radius = Math.min(height / 2 - 2, Math.min(width / 2 - 2, this._cornerRadius));
+        var radius = Math.min(height / 2, Math.min(width / 2, this._cornerRadius));
+        radius = Math.abs(radius);
         context.beginPath();
         context.moveTo(x + radius, y);
         context.lineTo(x + width - radius, y);
-        context.quadraticCurveTo(x + width, y, x + width, y + radius);
+        context.arc(x + width - radius, y + radius, radius, (3 * Math.PI) / 2, Math.PI * 2);
         context.lineTo(x + width, y + height - radius);
-        context.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+        context.arc(x + width - radius, y + height - radius, radius, 0, Math.PI / 2);
         context.lineTo(x + radius, y + height);
-        context.quadraticCurveTo(x, y + height, x, y + height - radius);
+        context.arc(x + radius, y + height - radius, radius, Math.PI / 2, Math.PI);
         context.lineTo(x, y + radius);
-        context.quadraticCurveTo(x, y, x + radius, y);
+        context.arc(x + radius, y + radius, radius, Math.PI, (3 * Math.PI) / 2);
         context.closePath();
     };
     Rectangle.prototype._clipForChildren = function (context) {
@@ -14478,10 +14543,22 @@ var ImageScrollBar = /** @class */ (function (_super) {
         _this._thumbHeight = 1;
         _this._barImageHeight = 1;
         _this._tempMeasure = new _measure__WEBPACK_IMPORTED_MODULE_2__.Measure(0, 0, 0, 0);
+        _this._invertScrollDirection = false;
         /** Number of 90° rotation to apply on the images when in vertical mode */
         _this.num90RotationInVerticalMode = 1;
         return _this;
     }
+    Object.defineProperty(ImageScrollBar.prototype, "invertScrollDirection", {
+        /** Inverts the scrolling direction (default: false) */
+        get: function () {
+            return this._invertScrollDirection;
+        },
+        set: function (invert) {
+            this._invertScrollDirection = invert;
+        },
+        enumerable: false,
+        configurable: true
+    });
     Object.defineProperty(ImageScrollBar.prototype, "backgroundImage", {
         /**
          * Gets or sets the image used to render the background for horizontal bar
@@ -14682,6 +14759,7 @@ var ImageScrollBar = /** @class */ (function (_super) {
             x = this._transformedPosition.x;
             y = this._transformedPosition.y;
         }
+        var sign = this._invertScrollDirection ? -1 : 1;
         if (this._first) {
             this._first = false;
             this._originX = x;
@@ -14707,7 +14785,7 @@ var ImageScrollBar = /** @class */ (function (_super) {
         else {
             delta = (x - this._originX) / (this._currentMeasure.width - this._effectiveThumbThickness);
         }
-        this.value += delta * (this.maximum - this.minimum);
+        this.value += sign * delta * (this.maximum - this.minimum);
         this._originX = x;
         this._originY = y;
     };
@@ -14718,6 +14796,9 @@ var ImageScrollBar = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,core_Misc_decorators__WEBPACK_IMPORTED_MODULE_3__.serialize)()
     ], ImageScrollBar.prototype, "num90RotationInVerticalMode", void 0);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_decorators__WEBPACK_IMPORTED_MODULE_3__.serialize)()
+    ], ImageScrollBar.prototype, "invertScrollDirection", null);
     return ImageScrollBar;
 }(_baseSlider__WEBPACK_IMPORTED_MODULE_1__.BaseSlider));
 
@@ -14759,6 +14840,7 @@ var ScrollBar = /** @class */ (function (_super) {
         _this._background = "black";
         _this._borderColor = "white";
         _this._tempMeasure = new _measure__WEBPACK_IMPORTED_MODULE_2__.Measure(0, 0, 0, 0);
+        _this._invertScrollDirection = false;
         return _this;
     }
     Object.defineProperty(ScrollBar.prototype, "borderColor", {
@@ -14791,6 +14873,17 @@ var ScrollBar = /** @class */ (function (_super) {
         enumerable: false,
         configurable: true
     });
+    Object.defineProperty(ScrollBar.prototype, "invertScrollDirection", {
+        /** Inverts the scrolling direction (default: false) */
+        get: function () {
+            return this._invertScrollDirection;
+        },
+        set: function (invert) {
+            this._invertScrollDirection = invert;
+        },
+        enumerable: false,
+        configurable: true
+    });
     ScrollBar.prototype._getTypeName = function () {
         return "Scrollbar";
     };
@@ -14841,6 +14934,7 @@ var ScrollBar = /** @class */ (function (_super) {
             x = this._transformedPosition.x;
             y = this._transformedPosition.y;
         }
+        var sign = this._invertScrollDirection ? -1 : 1;
         if (this._first) {
             this._first = false;
             this._originX = x;
@@ -14866,7 +14960,7 @@ var ScrollBar = /** @class */ (function (_super) {
         else {
             delta = (x - this._originX) / (this._currentMeasure.width - this._effectiveThumbThickness);
         }
-        this.value += delta * (this.maximum - this.minimum);
+        this.value += sign * delta * (this.maximum - this.minimum);
         this._originX = x;
         this._originY = y;
     };
@@ -14880,6 +14974,9 @@ var ScrollBar = /** @class */ (function (_super) {
     (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
         (0,core_Misc_decorators__WEBPACK_IMPORTED_MODULE_3__.serialize)()
     ], ScrollBar.prototype, "background", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_decorators__WEBPACK_IMPORTED_MODULE_3__.serialize)()
+    ], ScrollBar.prototype, "invertScrollDirection", null);
     return ScrollBar;
 }(_baseSlider__WEBPACK_IMPORTED_MODULE_1__.BaseSlider));
 
@@ -21517,7 +21614,7 @@ var TouchButton3D = /** @class */ (function (_super) {
      * @hidden
      */
     TouchButton3D.prototype._generatePointerEventType = function (providedType, nearMeshPosition, activeInteractionCount) {
-        if (providedType === core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERDOWN) {
+        if (providedType === core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERDOWN || providedType === core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERMOVE) {
             if (!this._isInteractionInFrontOfButton(nearMeshPosition)) {
                 // Near interaction mesh is behind the button, don't send a pointer down
                 return core_Maths_math_vector__WEBPACK_IMPORTED_MODULE_1__.PointerEventTypes.POINTERMOVE;