babylonjs-gui 5.17.1 → 5.20.0

package/babylon.gui.d.ts

@@ -3519,8 +3519,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 +3579,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

@@ -12100,17 +12100,17 @@ 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));
         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) {
@@ -12150,7 +12150,7 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _scrollViewerWindow__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! ./scrollViewerWindow */ "../../../lts/gui/dist/2D/controls/scrollViewers/scrollViewerWindow.js");
 /* harmony import */ var _sliders_scrollBar__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ../sliders/scrollBar */ "../../../lts/gui/dist/2D/controls/sliders/scrollBar.js");
 /* harmony import */ var _sliders_imageScrollBar__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! ../sliders/imageScrollBar */ "../../../lts/gui/dist/2D/controls/sliders/imageScrollBar.js");
-/* harmony import */ var core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core/Misc/typeStore */ "core/Misc/observable");
+/* harmony import */ var core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! core/Misc/decorators */ "core/Misc/observable");
 /* harmony import */ var core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__);
 
 
@@ -12160,6 +12160,7 @@ __webpack_require__.r(__webpack_exports__);
 
 
 
+
 /**
  * Class used to hold a viewer window and sliders in a grid
  */
@@ -12825,6 +12826,21 @@ var ScrollViewer = /** @class */ (function (_super) {
         this._onWheelObserver = null;
         _super.prototype.dispose.call(this);
     };
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__.serialize)()
+    ], ScrollViewer.prototype, "wheelPrecision", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__.serialize)()
+    ], ScrollViewer.prototype, "scrollBackground", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__.serialize)()
+    ], ScrollViewer.prototype, "barColor", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__.serialize)()
+    ], ScrollViewer.prototype, "barSize", null);
+    (0,tslib__WEBPACK_IMPORTED_MODULE_0__.__decorate)([
+        (0,core_Misc_typeStore__WEBPACK_IMPORTED_MODULE_7__.serialize)()
+    ], ScrollViewer.prototype, "barBackground", null);
     return ScrollViewer;
 }(_rectangle__WEBPACK_IMPORTED_MODULE_1__.Rectangle));
 
@@ -14462,10 +14478,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
@@ -14666,6 +14694,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;
@@ -14691,7 +14720,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;
     };
@@ -14702,6 +14731,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));
 
@@ -14743,6 +14775,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", {
@@ -14775,6 +14808,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";
     };
@@ -14825,6 +14869,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;
@@ -14850,7 +14895,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;
     };
@@ -14864,6 +14909,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));