Fix #5821

Playground/babylon.d.txt

@@ -55434,6 +55434,7 @@ declare module BABYLON.GUI {
         protected _barOffset: ValueAndUnit;
         private _isThumbClamped;
         protected _displayThumb: boolean;
+        private _step;
         protected _effectiveBarOffset: number;
         protected _renderLeft: number;
         protected _renderTop: number;
@@ -55446,6 +55447,8 @@ declare module BABYLON.GUI {
         onValueChangedObservable: BABYLON.Observable<number>;
         /** Gets or sets a boolean indicating if the thumb must be rendered */
         displayThumb: boolean;
+        /** Gets or sets a step to apply to values (0 by default) */
+        step: number;
         /** Gets or sets main bar offset (ie. the margin applied to the value bar) */
         barOffset: string | number;
         /** Gets main bar offset in pixels*/

dist/preview release/gui/babylon.gui.d.ts

@@ -2372,6 +2372,7 @@ declare module BABYLON.GUI {
         protected _barOffset: ValueAndUnit;
         private _isThumbClamped;
         protected _displayThumb: boolean;
+        private _step;
         protected _effectiveBarOffset: number;
         protected _renderLeft: number;
         protected _renderTop: number;
@@ -2384,6 +2385,8 @@ declare module BABYLON.GUI {
         onValueChangedObservable: BABYLON.Observable<number>;
         /** Gets or sets a boolean indicating if the thumb must be rendered */
         displayThumb: boolean;
+        /** Gets or sets a step to apply to values (0 by default) */
+        step: number;
         /** Gets or sets main bar offset (ie. the margin applied to the value bar) */
         barOffset: string | number;
         /** Gets main bar offset in pixels*/

dist/preview release/gui/babylon.gui.js

@@ -5088,9 +5088,9 @@ var Control = /** @class */ (function () {
         // Transform
         this._transform(context);
         // Clip
-        if (this.clipChildren) {
-            this._clip(context, invalidatedRectangle);
-        }
+        //     if (this.clipChildren) {
+        this._clip(context, invalidatedRectangle);
+        //   }
         if (this.onBeforeDrawObservable.hasObservers()) {
             this.onBeforeDrawObservable.notifyObservers(this);
         }
@@ -9985,6 +9985,7 @@ var BaseSlider = /** @class */ (function (_super) {
         _this._barOffset = new _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"](5, _valueAndUnit__WEBPACK_IMPORTED_MODULE_3__["ValueAndUnit"].UNITMODE_PIXEL, false);
         _this._isThumbClamped = false;
         _this._displayThumb = true;
+        _this._step = 0;
         // Shared rendering info
         _this._effectiveBarOffset = 0;
         /** Observable raised when the sldier value changes */
@@ -10009,6 +10010,21 @@ var BaseSlider = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(BaseSlider.prototype, "step", {
+        /** Gets or sets a step to apply to values (0 by default) */
+        get: function () {
+            return this._step;
+        },
+        set: function (value) {
+            if (this._step === value) {
+                return;
+            }
+            this._step = value;
+            this._markAsDirty();
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(BaseSlider.prototype, "barOffset", {
         /** Gets or sets main bar offset (ie. the margin applied to the value bar) */
         get: function () {
@@ -10215,12 +10231,15 @@ var BaseSlider = /** @class */ (function (_super) {
             x = this._transformedPosition.x;
             y = this._transformedPosition.y;
         }
+        var value;
         if (this._isVertical) {
-            this.value = this._minimum + (1 - ((y - this._currentMeasure.top) / this._currentMeasure.height)) * (this._maximum - this._minimum);
+            value = this._minimum + (1 - ((y - this._currentMeasure.top) / this._currentMeasure.height)) * (this._maximum - this._minimum);
         }
         else {
-            this.value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);
+            value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);
         }
+        var mult = (1 / this._step) | 0;
+        this.value = this._step ? ((value * mult) | 0) / mult : value;
     };
     BaseSlider.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex) {
         if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex)) {

dist/preview release/gui/babylon.gui.module.d.ts

@@ -2471,6 +2471,7 @@ declare module "babylonjs-gui/2D/controls/sliders/baseSlider" {
         protected _barOffset: ValueAndUnit;
         private _isThumbClamped;
         protected _displayThumb: boolean;
+        private _step;
         protected _effectiveBarOffset: number;
         protected _renderLeft: number;
         protected _renderTop: number;
@@ -2483,6 +2484,8 @@ declare module "babylonjs-gui/2D/controls/sliders/baseSlider" {
         onValueChangedObservable: Observable<number>;
         /** Gets or sets a boolean indicating if the thumb must be rendered */
         displayThumb: boolean;
+        /** Gets or sets a step to apply to values (0 by default) */
+        step: number;
         /** Gets or sets main bar offset (ie. the margin applied to the value bar) */
         barOffset: string | number;
         /** Gets main bar offset in pixels*/
@@ -6213,6 +6216,7 @@ declare module BABYLON.GUI {
         protected _barOffset: ValueAndUnit;
         private _isThumbClamped;
         protected _displayThumb: boolean;
+        private _step;
         protected _effectiveBarOffset: number;
         protected _renderLeft: number;
         protected _renderTop: number;
@@ -6225,6 +6229,8 @@ declare module BABYLON.GUI {
         onValueChangedObservable: BABYLON.Observable<number>;
         /** Gets or sets a boolean indicating if the thumb must be rendered */
         displayThumb: boolean;
+        /** Gets or sets a step to apply to values (0 by default) */
+        step: number;
         /** Gets or sets main bar offset (ie. the margin applied to the value bar) */
         barOffset: string | number;
         /** Gets main bar offset in pixels*/

gui/src/2D/controls/control.ts

@@ -1512,9 +1512,9 @@ export class Control {
         this._transform(context);
 
         // Clip
-        if (this.clipChildren) {
-            this._clip(context, invalidatedRectangle);
-        }
+        //     if (this.clipChildren) {
+        this._clip(context, invalidatedRectangle);
+        //   }
 
         if (this.onBeforeDrawObservable.hasObservers()) {
             this.onBeforeDrawObservable.notifyObservers(this);

gui/src/2D/controls/sliders/baseSlider.ts

@@ -16,6 +16,7 @@ export class BaseSlider extends Control {
     protected _barOffset = new ValueAndUnit(5, ValueAndUnit.UNITMODE_PIXEL, false);
     private _isThumbClamped = false;
     protected _displayThumb = true;
+    private _step = 0;
 
     // Shared rendering info
     protected _effectiveBarOffset = 0;
@@ -44,6 +45,20 @@ export class BaseSlider extends Control {
         this._markAsDirty();
     }
 
+    /** Gets or sets a step to apply to values (0 by default) */
+    public get step(): number {
+        return this._step;
+    }
+
+    public set step(value: number) {
+        if (this._step === value) {
+            return;
+        }
+
+        this._step = value;
+        this._markAsDirty();
+    }
+
     /** Gets or sets main bar offset (ie. the margin applied to the value bar) */
     public get barOffset(): string | number {
         return this._barOffset.toString(this._host);
@@ -265,12 +280,16 @@ export class BaseSlider extends Control {
             y = this._transformedPosition.y;
         }
 
+        let value: number;
         if (this._isVertical) {
-            this.value = this._minimum + (1 - ((y - this._currentMeasure.top) / this._currentMeasure.height)) * (this._maximum - this._minimum);
+            value = this._minimum + (1 - ((y - this._currentMeasure.top) / this._currentMeasure.height)) * (this._maximum - this._minimum);
         }
         else {
-            this.value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);
+            value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);
         }
+
+        const mult = (1 / this._step) | 0;
+        this.value = this._step ? ((value * mult) | 0) / mult : value;
     }
 
     public _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number): boolean {