@onerjs/gui 8.23.1

package/2D/controls/sliders/baseSlider.d.ts

@@ -0,0 +1,80 @@
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
+import { Control } from "../control.js";
+import { ValueAndUnit } from "../../valueAndUnit.js";
+import type { PointerInfoBase } from "@babylonjs/core/Events/pointerEvents.js";
+/**
+ * Class used to create slider controls
+ */
+export declare class BaseSlider extends Control {
+    name?: string | undefined;
+    protected _thumbWidth: ValueAndUnit;
+    private _minimum;
+    private _maximum;
+    private _value;
+    private _isVertical;
+    protected _barOffset: ValueAndUnit;
+    private _isThumbClamped;
+    protected _displayThumb: boolean;
+    private _step;
+    private _lastPointerDownId;
+    protected _effectiveBarOffset: number;
+    protected _renderLeft: number;
+    protected _renderTop: number;
+    protected _renderWidth: number;
+    protected _renderHeight: number;
+    protected _backgroundBoxLength: number;
+    protected _backgroundBoxThickness: number;
+    protected _effectiveThumbThickness: number;
+    /** Observable raised when the slider value changes */
+    onValueChangedObservable: Observable<number>;
+    /** Gets or sets a boolean indicating if the thumb must be rendered */
+    get displayThumb(): boolean;
+    set displayThumb(value: boolean);
+    /** Gets or sets a step to apply to values (0 by default) */
+    get step(): number;
+    set step(value: number);
+    /** Gets or sets main bar offset (ie. the margin applied to the value bar) */
+    get barOffset(): string | number;
+    /** Gets main bar offset in pixels*/
+    get barOffsetInPixels(): number;
+    set barOffset(value: string | number);
+    /** Gets or sets thumb width */
+    get thumbWidth(): string | number;
+    /** Gets thumb width in pixels */
+    get thumbWidthInPixels(): number;
+    set thumbWidth(value: string | number);
+    /** Gets or sets minimum value */
+    get minimum(): number;
+    set minimum(value: number);
+    /** Gets or sets maximum value */
+    get maximum(): number;
+    set maximum(value: number);
+    /** Gets or sets current value */
+    get value(): number;
+    set value(value: number);
+    /**Gets or sets a boolean indicating if the slider should be vertical or horizontal */
+    get isVertical(): boolean;
+    set isVertical(value: boolean);
+    /** Gets or sets a value indicating if the thumb can go over main bar extends */
+    get isThumbClamped(): boolean;
+    set isThumbClamped(value: boolean);
+    /**
+     * Creates a new BaseSlider
+     * @param name defines the control name
+     */
+    constructor(name?: string | undefined);
+    protected _getTypeName(): string;
+    protected _getThumbPosition(): number;
+    protected _getThumbThickness(type: string): number;
+    protected _prepareRenderingData(type: string): void;
+    private _pointerIsDown;
+    /**
+     * @internal
+     */
+    protected _updateValueFromPointer(x: number, y: number): void;
+    _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean;
+    _onPointerMove(target: Control, coordinates: Vector2, pointerId: number, pi: PointerInfoBase): void;
+    _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void;
+    _onCanvasBlur(): void;
+}

package/2D/controls/sliders/baseSlider.js

@@ -0,0 +1,299 @@
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Control } from "../control.js";
+import { ValueAndUnit } from "../../valueAndUnit.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
+import { Logger } from "@babylonjs/core/Misc/logger.js";
+/**
+ * Class used to create slider controls
+ */
+export class BaseSlider extends Control {
+    /** Gets or sets a boolean indicating if the thumb must be rendered */
+    get displayThumb() {
+        return this._displayThumb;
+    }
+    set displayThumb(value) {
+        if (this._displayThumb === value) {
+            return;
+        }
+        this._displayThumb = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets a step to apply to values (0 by default) */
+    get step() {
+        return this._step;
+    }
+    set step(value) {
+        if (this._step === value) {
+            return;
+        }
+        this._step = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets main bar offset (ie. the margin applied to the value bar) */
+    get barOffset() {
+        return this._barOffset.toString(this._host);
+    }
+    /** Gets main bar offset in pixels*/
+    get barOffsetInPixels() {
+        return this._barOffset.getValueInPixel(this._host, this._cachedParentMeasure.width);
+    }
+    set barOffset(value) {
+        if (this._barOffset.toString(this._host) === value) {
+            return;
+        }
+        if (this._barOffset.fromString(value)) {
+            this._markAsDirty();
+        }
+    }
+    /** Gets or sets thumb width */
+    get thumbWidth() {
+        return this._thumbWidth.toString(this._host);
+    }
+    /** Gets thumb width in pixels */
+    get thumbWidthInPixels() {
+        return this._thumbWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);
+    }
+    set thumbWidth(value) {
+        if (this._thumbWidth.toString(this._host) === value) {
+            return;
+        }
+        if (this._thumbWidth.fromString(value)) {
+            this._markAsDirty();
+        }
+    }
+    /** Gets or sets minimum value */
+    get minimum() {
+        return this._minimum;
+    }
+    set minimum(value) {
+        if (this._minimum === value) {
+            return;
+        }
+        this._minimum = value;
+        this._markAsDirty();
+        this.value = Math.max(Math.min(this.value, this._maximum), this._minimum);
+    }
+    /** Gets or sets maximum value */
+    get maximum() {
+        return this._maximum;
+    }
+    set maximum(value) {
+        if (this._maximum === value) {
+            return;
+        }
+        this._maximum = value;
+        this._markAsDirty();
+        this.value = Math.max(Math.min(this.value, this._maximum), this._minimum);
+    }
+    /** Gets or sets current value */
+    get value() {
+        return this._value;
+    }
+    set value(value) {
+        value = Math.max(Math.min(value, this._maximum), this._minimum);
+        if (this._value === value) {
+            return;
+        }
+        this._value = value;
+        this._markAsDirty();
+        this.onValueChangedObservable.notifyObservers(this._value);
+    }
+    /**Gets or sets a boolean indicating if the slider should be vertical or horizontal */
+    get isVertical() {
+        return this._isVertical;
+    }
+    set isVertical(value) {
+        if (this._isVertical === value) {
+            return;
+        }
+        this._isVertical = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets a value indicating if the thumb can go over main bar extends */
+    get isThumbClamped() {
+        return this._isThumbClamped;
+    }
+    set isThumbClamped(value) {
+        if (this._isThumbClamped === value) {
+            return;
+        }
+        this._isThumbClamped = value;
+        this._markAsDirty();
+    }
+    /**
+     * Creates a new BaseSlider
+     * @param name defines the control name
+     */
+    constructor(name) {
+        super(name);
+        this.name = name;
+        this._thumbWidth = new ValueAndUnit(20, ValueAndUnit.UNITMODE_PIXEL, false);
+        this._minimum = 0;
+        this._maximum = 100;
+        this._value = 50;
+        this._isVertical = false;
+        this._barOffset = new ValueAndUnit(5, ValueAndUnit.UNITMODE_PIXEL, false);
+        this._isThumbClamped = false;
+        this._displayThumb = true;
+        this._step = 0;
+        this._lastPointerDownId = -1;
+        // Shared rendering info
+        this._effectiveBarOffset = 0;
+        /** Observable raised when the slider value changes */
+        this.onValueChangedObservable = new Observable();
+        // Events
+        this._pointerIsDown = false;
+        this.isPointerBlocker = true;
+    }
+    _getTypeName() {
+        return "BaseSlider";
+    }
+    _getThumbPosition() {
+        if (this.isVertical) {
+            return ((this.maximum - this.value) / (this.maximum - this.minimum)) * this._backgroundBoxLength;
+        }
+        return ((this.value - this.minimum) / (this.maximum - this.minimum)) * this._backgroundBoxLength;
+    }
+    _getThumbThickness(type) {
+        let thumbThickness = 0;
+        switch (type) {
+            case "circle":
+                if (this._thumbWidth.isPixel) {
+                    thumbThickness = Math.max(this._thumbWidth.getValue(this._host), this._backgroundBoxThickness);
+                }
+                else {
+                    thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);
+                }
+                break;
+            case "rectangle":
+                if (this._thumbWidth.isPixel) {
+                    thumbThickness = Math.min(this._thumbWidth.getValue(this._host), this._backgroundBoxThickness);
+                }
+                else {
+                    thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);
+                }
+        }
+        return thumbThickness;
+    }
+    _prepareRenderingData(type) {
+        // Main bar
+        this._effectiveBarOffset = 0;
+        this._renderLeft = this._currentMeasure.left;
+        this._renderTop = this._currentMeasure.top;
+        this._renderWidth = this._currentMeasure.width;
+        this._renderHeight = this._currentMeasure.height;
+        this._backgroundBoxLength = Math.max(this._currentMeasure.width, this._currentMeasure.height);
+        this._backgroundBoxThickness = Math.min(this._currentMeasure.width, this._currentMeasure.height);
+        this._effectiveThumbThickness = this._getThumbThickness(type);
+        if (this.displayThumb) {
+            this._backgroundBoxLength -= this._effectiveThumbThickness;
+        }
+        //throw error when height is less than width for vertical slider
+        if (this.isVertical && this._currentMeasure.height < this._currentMeasure.width) {
+            Logger.Error("Height should be greater than width");
+            return;
+        }
+        if (this._barOffset.isPixel) {
+            this._effectiveBarOffset = Math.min(this._barOffset.getValue(this._host), this._backgroundBoxThickness);
+        }
+        else {
+            this._effectiveBarOffset = this._backgroundBoxThickness * this._barOffset.getValue(this._host);
+        }
+        this._backgroundBoxThickness -= this._effectiveBarOffset * 2;
+        if (this.isVertical) {
+            this._renderLeft += this._effectiveBarOffset;
+            if (!this.isThumbClamped && this.displayThumb) {
+                this._renderTop += this._effectiveThumbThickness / 2;
+            }
+            this._renderHeight = this._backgroundBoxLength;
+            this._renderWidth = this._backgroundBoxThickness;
+        }
+        else {
+            this._renderTop += this._effectiveBarOffset;
+            if (!this.isThumbClamped && this.displayThumb) {
+                this._renderLeft += this._effectiveThumbThickness / 2;
+            }
+            this._renderHeight = this._backgroundBoxThickness;
+            this._renderWidth = this._backgroundBoxLength;
+        }
+    }
+    /**
+     * @internal
+     */
+    _updateValueFromPointer(x, y) {
+        if (this.rotation != 0) {
+            this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);
+            x = this._transformedPosition.x;
+            y = this._transformedPosition.y;
+        }
+        let value;
+        if (this._isVertical) {
+            value = this._minimum + (1 - (y - this._currentMeasure.top) / this._currentMeasure.height) * (this._maximum - this._minimum);
+        }
+        else {
+            value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);
+        }
+        this.value = this._step ? Math.round(value / this._step) * this._step : value;
+    }
+    _onPointerDown(target, coordinates, pointerId, buttonIndex, pi) {
+        if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {
+            return false;
+        }
+        if (this.isReadOnly) {
+            return true;
+        }
+        this._pointerIsDown = true;
+        this._updateValueFromPointer(coordinates.x, coordinates.y);
+        this._host._capturingControl[pointerId] = this;
+        this._lastPointerDownId = pointerId;
+        return true;
+    }
+    _onPointerMove(target, coordinates, pointerId, pi) {
+        // Only listen to pointer move events coming from the last pointer to click on the element (To support dual vr controller interaction)
+        if (pointerId != this._lastPointerDownId) {
+            return;
+        }
+        if (this._pointerIsDown && !this.isReadOnly) {
+            this._updateValueFromPointer(coordinates.x, coordinates.y);
+        }
+        super._onPointerMove(target, coordinates, pointerId, pi);
+    }
+    _onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick) {
+        this._pointerIsDown = false;
+        delete this._host._capturingControl[pointerId];
+        super._onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick);
+    }
+    _onCanvasBlur() {
+        this._forcePointerUp();
+        super._onCanvasBlur();
+    }
+}
+__decorate([
+    serialize()
+], BaseSlider.prototype, "displayThumb", null);
+__decorate([
+    serialize()
+], BaseSlider.prototype, "step", null);
+__decorate([
+    serialize()
+], BaseSlider.prototype, "barOffset", null);
+__decorate([
+    serialize()
+], BaseSlider.prototype, "thumbWidth", null);
+__decorate([
+    serialize()
+], BaseSlider.prototype, "minimum", null);
+__decorate([
+    serialize()
+], BaseSlider.prototype, "maximum", null);
+__decorate([
+    serialize()
+], BaseSlider.prototype, "value", null);
+__decorate([
+    serialize()
+], BaseSlider.prototype, "isVertical", null);
+__decorate([
+    serialize()
+], BaseSlider.prototype, "isThumbClamped", null);
+//# sourceMappingURL=baseSlider.js.map

package/2D/controls/sliders/baseSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"baseSlider.js","sourceRoot":"","sources":["../../../../../../dev/gui/src/2D/controls/sliders/baseSlider.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,UAAU,EAAE,2CAA6B;AAGlD,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAElD,OAAO,EAAE,SAAS,EAAE,2CAA6B;AACjD,OAAO,EAAE,MAAM,EAAE,uCAAyB;AAE1C;;GAEG;AACH,MAAM,OAAO,UAAW,SAAQ,OAAO;IA0BnC,sEAAsE;IAEtE,IAAW,YAAY;QACnB,OAAO,IAAI,CAAC,aAAa,CAAC;IAC9B,CAAC;IAED,IAAW,YAAY,CAAC,KAAc;QAClC,IAAI,IAAI,CAAC,aAAa,KAAK,KAAK,EAAE,CAAC;YAC/B,OAAO;QACX,CAAC;QAED,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,4DAA4D;IAE5D,IAAW,IAAI;QACX,OAAO,IAAI,CAAC,KAAK,CAAC;IACtB,CAAC;IAED,IAAW,IAAI,CAAC,KAAa;QACzB,IAAI,IAAI,CAAC,KAAK,KAAK,KAAK,EAAE,CAAC;YACvB,OAAO;QACX,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,6EAA6E;IAE7E,IAAW,SAAS;QAChB,OAAO,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAChD,CAAC;IAED,oCAAoC;IACpC,IAAW,iBAAiB;QACxB,OAAO,IAAI,CAAC,UAAU,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACxF,CAAC;IAED,IAAW,SAAS,CAAC,KAAsB;QACvC,IAAI,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;YACjD,OAAO;QACX,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;YACpC,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,CAAC;IACL,CAAC;IAED,+BAA+B;IAE/B,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACjD,CAAC;IAED,iCAAiC;IACjC,IAAW,kBAAkB;QACzB,OAAO,IAAI,CAAC,WAAW,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACzF,CAAC;IAED,IAAW,UAAU,CAAC,KAAsB;QACxC,IAAI,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,KAAK,EAAE,CAAC;YAClD,OAAO;QACX,CAAC;QAED,IAAI,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,CAAC,EAAE,CAAC;YACrC,IAAI,CAAC,YAAY,EAAE,CAAC;QACxB,CAAC;IACL,CAAC;IAED,iCAAiC;IAEjC,IAAW,OAAO;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED,IAAW,OAAO,CAAC,KAAa;QAC5B,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;YAC1B,OAAO;QACX,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9E,CAAC;IAED,iCAAiC;IAEjC,IAAW,OAAO;QACd,OAAO,IAAI,CAAC,QAAQ,CAAC;IACzB,CAAC;IAED,IAAW,OAAO,CAAC,KAAa;QAC5B,IAAI,IAAI,CAAC,QAAQ,KAAK,KAAK,EAAE,CAAC;YAC1B,OAAO;QACX,CAAC;QAED,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,YAAY,EAAE,CAAC;QAEpB,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;IAC9E,CAAC;IAED,iCAAiC;IAEjC,IAAW,KAAK;QACZ,OAAO,IAAI,CAAC,MAAM,CAAC;IACvB,CAAC;IAED,IAAW,KAAK,CAAC,KAAa;QAC1B,KAAK,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC;QAEhE,IAAI,IAAI,CAAC,MAAM,KAAK,KAAK,EAAE,CAAC;YACxB,OAAO;QACX,CAAC;QAED,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;QACpB,IAAI,CAAC,YAAY,EAAE,CAAC;QACpB,IAAI,CAAC,wBAAwB,CAAC,eAAe,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IAC/D,CAAC;IAED,sFAAsF;IAEtF,IAAW,UAAU;QACjB,OAAO,IAAI,CAAC,WAAW,CAAC;IAC5B,CAAC;IAED,IAAW,UAAU,CAAC,KAAc;QAChC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE,CAAC;YAC7B,OAAO;QACX,CAAC;QAED,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED,gFAAgF;IAEhF,IAAW,cAAc;QACrB,OAAO,IAAI,CAAC,eAAe,CAAC;IAChC,CAAC;IAED,IAAW,cAAc,CAAC,KAAc;QACpC,IAAI,IAAI,CAAC,eAAe,KAAK,KAAK,EAAE,CAAC;YACjC,OAAO;QACX,CAAC;QAED,IAAI,CAAC,eAAe,GAAG,KAAK,CAAC;QAC7B,IAAI,CAAC,YAAY,EAAE,CAAC;IACxB,CAAC;IAED;;;OAGG;IACH,YAA4B,IAAa;QACrC,KAAK,CAAC,IAAI,CAAC,CAAC;QADY,SAAI,GAAJ,IAAI,CAAS;QAvL/B,gBAAW,GAAG,IAAI,YAAY,CAAC,EAAE,EAAE,YAAY,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QACzE,aAAQ,GAAG,CAAC,CAAC;QACb,aAAQ,GAAG,GAAG,CAAC;QACf,WAAM,GAAG,EAAE,CAAC;QACZ,gBAAW,GAAG,KAAK,CAAC;QAClB,eAAU,GAAG,IAAI,YAAY,CAAC,CAAC,EAAE,YAAY,CAAC,cAAc,EAAE,KAAK,CAAC,CAAC;QACvE,oBAAe,GAAG,KAAK,CAAC;QACtB,kBAAa,GAAG,IAAI,CAAC;QACvB,UAAK,GAAG,CAAC,CAAC;QAEV,uBAAkB,GAAG,CAAC,CAAC,CAAC;QAEhC,wBAAwB;QACd,wBAAmB,GAAG,CAAC,CAAC;QASlC,sDAAsD;QAC/C,6BAAwB,GAAG,IAAI,UAAU,EAAU,CAAC;QAoP3D,SAAS;QACD,mBAAc,GAAG,KAAK,CAAC;QAlF3B,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;IACjC,CAAC;IAEkB,YAAY;QAC3B,OAAO,YAAY,CAAC;IACxB,CAAC;IAES,iBAAiB;QACvB,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,OAAO,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC;QACrG,CAAC;QAED,OAAO,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC;IACrG,CAAC;IAES,kBAAkB,CAAC,IAAY;QACrC,IAAI,cAAc,GAAG,CAAC,CAAC;QACvB,QAAQ,IAAI,EAAE,CAAC;YACX,KAAK,QAAQ;gBACT,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;oBAC3B,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;gBACnG,CAAC;qBAAM,CAAC;oBACJ,cAAc,GAAG,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC1F,CAAC;gBACD,MAAM;YACV,KAAK,WAAW;gBACZ,IAAI,IAAI,CAAC,WAAW,CAAC,OAAO,EAAE,CAAC;oBAC3B,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;gBACnG,CAAC;qBAAM,CAAC;oBACJ,cAAc,GAAG,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;gBAC1F,CAAC;QACT,CAAC;QACD,OAAO,cAAc,CAAC;IAC1B,CAAC;IAES,qBAAqB,CAAC,IAAY;QACxC,WAAW;QACX,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC;QAC7B,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;QAC7C,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC;QAC3C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC;QAC/C,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC;QAEjD,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QAC9F,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC;QACjG,IAAI,CAAC,wBAAwB,GAAG,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC;QAE9D,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;YACpB,IAAI,CAAC,oBAAoB,IAAI,IAAI,CAAC,wBAAwB,CAAC;QAC/D,CAAC;QACD,gEAAgE;QAChE,IAAI,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,eAAe,CAAC,MAAM,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,EAAE,CAAC;YAC9E,MAAM,CAAC,KAAK,CAAC,qCAAqC,CAAC,CAAC;YACpD,OAAO;QACX,CAAC;QACD,IAAI,IAAI,CAAC,UAAU,CAAC,OAAO,EAAE,CAAC;YAC1B,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,CAAC,uBAAuB,CAAC,CAAC;QAC5G,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,mBAAmB,GAAG,IAAI,CAAC,uBAAuB,GAAG,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnG,CAAC;QAED,IAAI,CAAC,uBAAuB,IAAI,IAAI,CAAC,mBAAmB,GAAG,CAAC,CAAC;QAE7D,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,mBAAmB,CAAC;YAC7C,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gBAC5C,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,wBAAwB,GAAG,CAAC,CAAC;YACzD,CAAC;YAED,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,oBAAoB,CAAC;YAC/C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,uBAAuB,CAAC;QACrD,CAAC;aAAM,CAAC;YACJ,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,mBAAmB,CAAC;YAC5C,IAAI,CAAC,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;gBAC5C,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,wBAAwB,GAAG,CAAC,CAAC;YAC1D,CAAC;YACD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,uBAAuB,CAAC;YAClD,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,oBAAoB,CAAC;QAClD,CAAC;IACL,CAAC;IAKD;;OAEG;IACO,uBAAuB,CAAC,CAAS,EAAE,CAAS;QAClD,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,EAAE,CAAC;YACrB,IAAI,CAAC,sBAAsB,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,EAAE,IAAI,CAAC,oBAAoB,CAAC,CAAC;YAClF,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;YAChC,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC,CAAC,CAAC;QACpC,CAAC;QAED,IAAI,KAAa,CAAC;QAClB,IAAI,IAAI,CAAC,WAAW,EAAE,CAAC;YACnB,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjI,CAAC;aAAM,CAAC;YACJ,KAAK,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,eAAe,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC7H,CAAC;QACD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC;IAClF,CAAC;IAEe,cAAc,CAAC,MAAe,EAAE,WAAoB,EAAE,SAAiB,EAAE,WAAmB,EAAE,EAAmB;QAC7H,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,EAAE,CAAC,EAAE,CAAC;YACzE,OAAO,KAAK,CAAC;QACjB,CAAC;QAED,IAAI,IAAI,CAAC,UAAU,EAAE,CAAC;YAClB,OAAO,IAAI,CAAC;QAChB,CAAC;QAED,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC;QAE3B,IAAI,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;QAC3D,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;QAC/C,IAAI,CAAC,kBAAkB,GAAG,SAAS,CAAC;QACpC,OAAO,IAAI,CAAC;IAChB,CAAC;IAEe,cAAc,CAAC,MAAe,EAAE,WAAoB,EAAE,SAAiB,EAAE,EAAmB;QACxG,sIAAsI;QACtI,IAAI,SAAS,IAAI,IAAI,CAAC,kBAAkB,EAAE,CAAC;YACvC,OAAO;QACX,CAAC;QAED,IAAI,IAAI,CAAC,cAAc,IAAI,CAAC,IAAI,CAAC,UAAU,EAAE,CAAC;YAC1C,IAAI,CAAC,uBAAuB,CAAC,WAAW,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;QAC/D,CAAC;QAED,KAAK,CAAC,cAAc,CAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,EAAE,CAAC,CAAC;IAC7D,CAAC;IAEe,YAAY,CAAC,MAAe,EAAE,WAAoB,EAAE,SAAiB,EAAE,WAAmB,EAAE,WAAoB;QAC5H,IAAI,CAAC,cAAc,GAAG,KAAK,CAAC;QAE5B,OAAO,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC;QAC/C,KAAK,CAAC,YAAY,CAAC,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,WAAW,CAAC,CAAC;IACjF,CAAC;IAEe,aAAa;QACzB,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,KAAK,CAAC,aAAa,EAAE,CAAC;IAC1B,CAAC;CACJ;AA/SG;IADC,SAAS,EAAE;8CAGX;AAaD;IADC,SAAS,EAAE;sCAGX;AAaD;IADC,SAAS,EAAE;2CAGX;AAmBD;IADC,SAAS,EAAE;4CAGX;AAmBD;IADC,SAAS,EAAE;yCAGX;AAeD;IADC,SAAS,EAAE;yCAGX;AAeD;IADC,SAAS,EAAE;uCAGX;AAgBD;IADC,SAAS,EAAE;4CAGX;AAaD;IADC,SAAS,EAAE;gDAGX","sourcesContent":["import { Observable } from \"core/Misc/observable\";\r\nimport type { Vector2 } from \"core/Maths/math.vector\";\r\n\r\nimport { Control } from \"../control\";\r\nimport { ValueAndUnit } from \"../../valueAndUnit\";\r\nimport type { PointerInfoBase } from \"core/Events/pointerEvents\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport { Logger } from \"core/Misc/logger\";\r\n\r\n/**\r\n * Class used to create slider controls\r\n */\r\nexport class BaseSlider extends Control {\r\n    protected _thumbWidth = new ValueAndUnit(20, ValueAndUnit.UNITMODE_PIXEL, false);\r\n    private _minimum = 0;\r\n    private _maximum = 100;\r\n    private _value = 50;\r\n    private _isVertical = false;\r\n    protected _barOffset = new ValueAndUnit(5, ValueAndUnit.UNITMODE_PIXEL, false);\r\n    private _isThumbClamped = false;\r\n    protected _displayThumb = true;\r\n    private _step = 0;\r\n\r\n    private _lastPointerDownId = -1;\r\n\r\n    // Shared rendering info\r\n    protected _effectiveBarOffset = 0;\r\n    protected _renderLeft: number;\r\n    protected _renderTop: number;\r\n    protected _renderWidth: number;\r\n    protected _renderHeight: number;\r\n    protected _backgroundBoxLength: number;\r\n    protected _backgroundBoxThickness: number;\r\n    protected _effectiveThumbThickness: number;\r\n\r\n    /** Observable raised when the slider value changes */\r\n    public onValueChangedObservable = new Observable<number>();\r\n\r\n    /** Gets or sets a boolean indicating if the thumb must be rendered */\r\n    @serialize()\r\n    public get displayThumb(): boolean {\r\n        return this._displayThumb;\r\n    }\r\n\r\n    public set displayThumb(value: boolean) {\r\n        if (this._displayThumb === value) {\r\n            return;\r\n        }\r\n\r\n        this._displayThumb = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets a step to apply to values (0 by default) */\r\n    @serialize()\r\n    public get step(): number {\r\n        return this._step;\r\n    }\r\n\r\n    public set step(value: number) {\r\n        if (this._step === value) {\r\n            return;\r\n        }\r\n\r\n        this._step = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets main bar offset (ie. the margin applied to the value bar) */\r\n    @serialize()\r\n    public get barOffset(): string | number {\r\n        return this._barOffset.toString(this._host);\r\n    }\r\n\r\n    /** Gets main bar offset in pixels*/\r\n    public get barOffsetInPixels(): number {\r\n        return this._barOffset.getValueInPixel(this._host, this._cachedParentMeasure.width);\r\n    }\r\n\r\n    public set barOffset(value: string | number) {\r\n        if (this._barOffset.toString(this._host) === value) {\r\n            return;\r\n        }\r\n\r\n        if (this._barOffset.fromString(value)) {\r\n            this._markAsDirty();\r\n        }\r\n    }\r\n\r\n    /** Gets or sets thumb width */\r\n    @serialize()\r\n    public get thumbWidth(): string | number {\r\n        return this._thumbWidth.toString(this._host);\r\n    }\r\n\r\n    /** Gets thumb width in pixels */\r\n    public get thumbWidthInPixels(): number {\r\n        return this._thumbWidth.getValueInPixel(this._host, this._cachedParentMeasure.width);\r\n    }\r\n\r\n    public set thumbWidth(value: string | number) {\r\n        if (this._thumbWidth.toString(this._host) === value) {\r\n            return;\r\n        }\r\n\r\n        if (this._thumbWidth.fromString(value)) {\r\n            this._markAsDirty();\r\n        }\r\n    }\r\n\r\n    /** Gets or sets minimum value */\r\n    @serialize()\r\n    public get minimum(): number {\r\n        return this._minimum;\r\n    }\r\n\r\n    public set minimum(value: number) {\r\n        if (this._minimum === value) {\r\n            return;\r\n        }\r\n\r\n        this._minimum = value;\r\n        this._markAsDirty();\r\n\r\n        this.value = Math.max(Math.min(this.value, this._maximum), this._minimum);\r\n    }\r\n\r\n    /** Gets or sets maximum value */\r\n    @serialize()\r\n    public get maximum(): number {\r\n        return this._maximum;\r\n    }\r\n\r\n    public set maximum(value: number) {\r\n        if (this._maximum === value) {\r\n            return;\r\n        }\r\n\r\n        this._maximum = value;\r\n        this._markAsDirty();\r\n\r\n        this.value = Math.max(Math.min(this.value, this._maximum), this._minimum);\r\n    }\r\n\r\n    /** Gets or sets current value */\r\n    @serialize()\r\n    public get value(): number {\r\n        return this._value;\r\n    }\r\n\r\n    public set value(value: number) {\r\n        value = Math.max(Math.min(value, this._maximum), this._minimum);\r\n\r\n        if (this._value === value) {\r\n            return;\r\n        }\r\n\r\n        this._value = value;\r\n        this._markAsDirty();\r\n        this.onValueChangedObservable.notifyObservers(this._value);\r\n    }\r\n\r\n    /**Gets or sets a boolean indicating if the slider should be vertical or horizontal */\r\n    @serialize()\r\n    public get isVertical(): boolean {\r\n        return this._isVertical;\r\n    }\r\n\r\n    public set isVertical(value: boolean) {\r\n        if (this._isVertical === value) {\r\n            return;\r\n        }\r\n\r\n        this._isVertical = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets a value indicating if the thumb can go over main bar extends */\r\n    @serialize()\r\n    public get isThumbClamped(): boolean {\r\n        return this._isThumbClamped;\r\n    }\r\n\r\n    public set isThumbClamped(value: boolean) {\r\n        if (this._isThumbClamped === value) {\r\n            return;\r\n        }\r\n\r\n        this._isThumbClamped = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Creates a new BaseSlider\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public override name?: string) {\r\n        super(name);\r\n\r\n        this.isPointerBlocker = true;\r\n    }\r\n\r\n    protected override _getTypeName(): string {\r\n        return \"BaseSlider\";\r\n    }\r\n\r\n    protected _getThumbPosition() {\r\n        if (this.isVertical) {\r\n            return ((this.maximum - this.value) / (this.maximum - this.minimum)) * this._backgroundBoxLength;\r\n        }\r\n\r\n        return ((this.value - this.minimum) / (this.maximum - this.minimum)) * this._backgroundBoxLength;\r\n    }\r\n\r\n    protected _getThumbThickness(type: string): number {\r\n        let thumbThickness = 0;\r\n        switch (type) {\r\n            case \"circle\":\r\n                if (this._thumbWidth.isPixel) {\r\n                    thumbThickness = Math.max(this._thumbWidth.getValue(this._host), this._backgroundBoxThickness);\r\n                } else {\r\n                    thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);\r\n                }\r\n                break;\r\n            case \"rectangle\":\r\n                if (this._thumbWidth.isPixel) {\r\n                    thumbThickness = Math.min(this._thumbWidth.getValue(this._host), this._backgroundBoxThickness);\r\n                } else {\r\n                    thumbThickness = this._backgroundBoxThickness * this._thumbWidth.getValue(this._host);\r\n                }\r\n        }\r\n        return thumbThickness;\r\n    }\r\n\r\n    protected _prepareRenderingData(type: string) {\r\n        // Main bar\r\n        this._effectiveBarOffset = 0;\r\n        this._renderLeft = this._currentMeasure.left;\r\n        this._renderTop = this._currentMeasure.top;\r\n        this._renderWidth = this._currentMeasure.width;\r\n        this._renderHeight = this._currentMeasure.height;\r\n\r\n        this._backgroundBoxLength = Math.max(this._currentMeasure.width, this._currentMeasure.height);\r\n        this._backgroundBoxThickness = Math.min(this._currentMeasure.width, this._currentMeasure.height);\r\n        this._effectiveThumbThickness = this._getThumbThickness(type);\r\n\r\n        if (this.displayThumb) {\r\n            this._backgroundBoxLength -= this._effectiveThumbThickness;\r\n        }\r\n        //throw error when height is less than width for vertical slider\r\n        if (this.isVertical && this._currentMeasure.height < this._currentMeasure.width) {\r\n            Logger.Error(\"Height should be greater than width\");\r\n            return;\r\n        }\r\n        if (this._barOffset.isPixel) {\r\n            this._effectiveBarOffset = Math.min(this._barOffset.getValue(this._host), this._backgroundBoxThickness);\r\n        } else {\r\n            this._effectiveBarOffset = this._backgroundBoxThickness * this._barOffset.getValue(this._host);\r\n        }\r\n\r\n        this._backgroundBoxThickness -= this._effectiveBarOffset * 2;\r\n\r\n        if (this.isVertical) {\r\n            this._renderLeft += this._effectiveBarOffset;\r\n            if (!this.isThumbClamped && this.displayThumb) {\r\n                this._renderTop += this._effectiveThumbThickness / 2;\r\n            }\r\n\r\n            this._renderHeight = this._backgroundBoxLength;\r\n            this._renderWidth = this._backgroundBoxThickness;\r\n        } else {\r\n            this._renderTop += this._effectiveBarOffset;\r\n            if (!this.isThumbClamped && this.displayThumb) {\r\n                this._renderLeft += this._effectiveThumbThickness / 2;\r\n            }\r\n            this._renderHeight = this._backgroundBoxThickness;\r\n            this._renderWidth = this._backgroundBoxLength;\r\n        }\r\n    }\r\n\r\n    // Events\r\n    private _pointerIsDown = false;\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    protected _updateValueFromPointer(x: number, y: number): void {\r\n        if (this.rotation != 0) {\r\n            this._invertTransformMatrix.transformCoordinates(x, y, this._transformedPosition);\r\n            x = this._transformedPosition.x;\r\n            y = this._transformedPosition.y;\r\n        }\r\n\r\n        let value: number;\r\n        if (this._isVertical) {\r\n            value = this._minimum + (1 - (y - this._currentMeasure.top) / this._currentMeasure.height) * (this._maximum - this._minimum);\r\n        } else {\r\n            value = this._minimum + ((x - this._currentMeasure.left) / this._currentMeasure.width) * (this._maximum - this._minimum);\r\n        }\r\n        this.value = this._step ? Math.round(value / this._step) * this._step : value;\r\n    }\r\n\r\n    public override _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean {\r\n        if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {\r\n            return false;\r\n        }\r\n\r\n        if (this.isReadOnly) {\r\n            return true;\r\n        }\r\n\r\n        this._pointerIsDown = true;\r\n\r\n        this._updateValueFromPointer(coordinates.x, coordinates.y);\r\n        this._host._capturingControl[pointerId] = this;\r\n        this._lastPointerDownId = pointerId;\r\n        return true;\r\n    }\r\n\r\n    public override _onPointerMove(target: Control, coordinates: Vector2, pointerId: number, pi: PointerInfoBase): void {\r\n        // Only listen to pointer move events coming from the last pointer to click on the element (To support dual vr controller interaction)\r\n        if (pointerId != this._lastPointerDownId) {\r\n            return;\r\n        }\r\n\r\n        if (this._pointerIsDown && !this.isReadOnly) {\r\n            this._updateValueFromPointer(coordinates.x, coordinates.y);\r\n        }\r\n\r\n        super._onPointerMove(target, coordinates, pointerId, pi);\r\n    }\r\n\r\n    public override _onPointerUp(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, notifyClick: boolean): void {\r\n        this._pointerIsDown = false;\r\n\r\n        delete this._host._capturingControl[pointerId];\r\n        super._onPointerUp(target, coordinates, pointerId, buttonIndex, notifyClick);\r\n    }\r\n\r\n    public override _onCanvasBlur(): void {\r\n        this._forcePointerUp();\r\n        super._onCanvasBlur();\r\n    }\r\n}\r\n"]}

package/2D/controls/sliders/imageBasedSlider.d.ts

@@ -0,0 +1,47 @@
+import { BaseSlider } from "./baseSlider.js";
+import { Image } from "../image.js";
+import type { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+import type { AdvancedDynamicTexture } from "../../advancedDynamicTexture.js";
+/**
+ * Class used to create slider controls based on images
+ */
+export declare class ImageBasedSlider extends BaseSlider {
+    name?: string | undefined;
+    private _backgroundImage;
+    private _thumbImage;
+    private _valueBarImage;
+    private _tempMeasure;
+    get displayThumb(): boolean;
+    set displayThumb(value: boolean);
+    /**
+     * Gets or sets the image used to render the background
+     */
+    get backgroundImage(): Image;
+    set backgroundImage(value: Image);
+    /**
+     * Gets or sets the image used to render the value bar
+     */
+    get valueBarImage(): Image;
+    set valueBarImage(value: Image);
+    /**
+     * Gets or sets the image used to render the thumb
+     */
+    get thumbImage(): Image;
+    set thumbImage(value: Image);
+    /**
+     * Creates a new ImageBasedSlider
+     * @param name defines the control name
+     */
+    constructor(name?: string | undefined);
+    protected _getTypeName(): string;
+    _draw(context: ICanvasRenderingContext): void;
+    /**
+     * Serializes the current control
+     * @param serializationObject defined the JSON serialized object
+     */
+    serialize(serializationObject: any): void;
+    /**
+     * @internal
+     */
+    _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture): void;
+}

package/2D/controls/sliders/imageBasedSlider.js

@@ -0,0 +1,168 @@
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
+import { BaseSlider } from "./baseSlider.js";
+import { Measure } from "../../measure.js";
+import { Image } from "../image.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
+/**
+ * Class used to create slider controls based on images
+ */
+export class ImageBasedSlider extends BaseSlider {
+    get displayThumb() {
+        return this._displayThumb && this.thumbImage != null;
+    }
+    set displayThumb(value) {
+        if (this._displayThumb === value) {
+            return;
+        }
+        this._displayThumb = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the image used to render the background
+     */
+    get backgroundImage() {
+        return this._backgroundImage;
+    }
+    set backgroundImage(value) {
+        if (this._backgroundImage === value) {
+            return;
+        }
+        this._backgroundImage = value;
+        if (value && !value.isLoaded) {
+            value.onImageLoadedObservable.addOnce(() => this._markAsDirty());
+        }
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the image used to render the value bar
+     */
+    get valueBarImage() {
+        return this._valueBarImage;
+    }
+    set valueBarImage(value) {
+        if (this._valueBarImage === value) {
+            return;
+        }
+        this._valueBarImage = value;
+        if (value && !value.isLoaded) {
+            value.onImageLoadedObservable.addOnce(() => this._markAsDirty());
+        }
+        this._markAsDirty();
+    }
+    /**
+     * Gets or sets the image used to render the thumb
+     */
+    get thumbImage() {
+        return this._thumbImage;
+    }
+    set thumbImage(value) {
+        if (this._thumbImage === value) {
+            return;
+        }
+        this._thumbImage = value;
+        if (value && !value.isLoaded) {
+            value.onImageLoadedObservable.addOnce(() => this._markAsDirty());
+        }
+        this._markAsDirty();
+    }
+    /**
+     * Creates a new ImageBasedSlider
+     * @param name defines the control name
+     */
+    constructor(name) {
+        super(name);
+        this.name = name;
+        this._tempMeasure = new Measure(0, 0, 0, 0);
+    }
+    _getTypeName() {
+        return "ImageBasedSlider";
+    }
+    _draw(context) {
+        context.save();
+        this._applyStates(context);
+        this._prepareRenderingData("rectangle");
+        const thumbPosition = this._getThumbPosition();
+        const left = this._renderLeft;
+        const top = this._renderTop;
+        const width = this._renderWidth;
+        const height = this._renderHeight;
+        // Background
+        if (this._backgroundImage) {
+            this._tempMeasure.copyFromFloats(left, top, width, height);
+            if (this.isThumbClamped && this.displayThumb) {
+                if (this.isVertical) {
+                    this._tempMeasure.height += this._effectiveThumbThickness;
+                }
+                else {
+                    this._tempMeasure.width += this._effectiveThumbThickness;
+                }
+            }
+            this._backgroundImage._currentMeasure.copyFrom(this._tempMeasure);
+            this._backgroundImage._draw(context);
+        }
+        // Bar
+        if (this._valueBarImage) {
+            if (this.isVertical) {
+                if (this.isThumbClamped && this.displayThumb) {
+                    this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition + this._effectiveThumbThickness);
+                }
+                else {
+                    this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition);
+                }
+            }
+            else {
+                if (this.isThumbClamped && this.displayThumb) {
+                    this._tempMeasure.copyFromFloats(left, top, thumbPosition + this._effectiveThumbThickness / 2, height);
+                }
+                else {
+                    this._tempMeasure.copyFromFloats(left, top, thumbPosition, height);
+                }
+            }
+            this._valueBarImage._currentMeasure.copyFrom(this._tempMeasure);
+            this._valueBarImage._draw(context);
+        }
+        // Thumb
+        if (this.displayThumb) {
+            if (this.isVertical) {
+                this._tempMeasure.copyFromFloats(left - this._effectiveBarOffset, this._currentMeasure.top + thumbPosition, this._currentMeasure.width, this._effectiveThumbThickness);
+            }
+            else {
+                this._tempMeasure.copyFromFloats(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);
+            }
+            this._thumbImage._currentMeasure.copyFrom(this._tempMeasure);
+            this._thumbImage._draw(context);
+        }
+        context.restore();
+    }
+    /**
+     * Serializes the current control
+     * @param serializationObject defined the JSON serialized object
+     */
+    serialize(serializationObject) {
+        super.serialize(serializationObject);
+        const backgroundImage = {};
+        const thumbImage = {};
+        const valueBarImage = {};
+        this.backgroundImage.serialize(backgroundImage);
+        this.thumbImage.serialize(thumbImage);
+        this.valueBarImage.serialize(valueBarImage);
+        serializationObject.backgroundImage = backgroundImage;
+        serializationObject.thumbImage = thumbImage;
+        serializationObject.valueBarImage = valueBarImage;
+    }
+    /**
+     * @internal
+     */
+    _parseFromContent(serializedObject, host) {
+        super._parseFromContent(serializedObject, host);
+        this.backgroundImage = Image.Parse(serializedObject.backgroundImage, host);
+        this.thumbImage = Image.Parse(serializedObject.thumbImage, host);
+        this.valueBarImage = Image.Parse(serializedObject.valueBarImage, host);
+    }
+}
+__decorate([
+    serialize()
+], ImageBasedSlider.prototype, "displayThumb", null);
+RegisterClass("BABYLON.GUI.ImageBasedSlider", ImageBasedSlider);
+//# sourceMappingURL=imageBasedSlider.js.map

package/2D/controls/sliders/imageBasedSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"imageBasedSlider.js","sourceRoot":"","sources":["../../../../../../dev/gui/src/2D/controls/sliders/imageBasedSlider.ts"],"names":[],"mappings":"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","sourcesContent":["import { BaseSlider } from \"./baseSlider\";\r\nimport { Measure } from \"../../measure\";\r\nimport { Image } from \"../image\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport type { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\nimport type { AdvancedDynamicTexture } from \"../../advancedDynamicTexture\";\r\n\r\n/**\r\n * Class used to create slider controls based on images\r\n */\r\nexport class ImageBasedSlider extends BaseSlider {\r\n    private _backgroundImage: Image;\r\n    private _thumbImage: Image;\r\n    private _valueBarImage: Image;\r\n    private _tempMeasure = new Measure(0, 0, 0, 0);\r\n\r\n    @serialize()\r\n    public override get displayThumb(): boolean {\r\n        return this._displayThumb && this.thumbImage != null;\r\n    }\r\n\r\n    public override set displayThumb(value: boolean) {\r\n        if (this._displayThumb === value) {\r\n            return;\r\n        }\r\n\r\n        this._displayThumb = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the image used to render the background\r\n     */\r\n    public get backgroundImage(): Image {\r\n        return this._backgroundImage;\r\n    }\r\n\r\n    public set backgroundImage(value: Image) {\r\n        if (this._backgroundImage === value) {\r\n            return;\r\n        }\r\n\r\n        this._backgroundImage = value;\r\n\r\n        if (value && !value.isLoaded) {\r\n            value.onImageLoadedObservable.addOnce(() => this._markAsDirty());\r\n        }\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the image used to render the value bar\r\n     */\r\n    public get valueBarImage(): Image {\r\n        return this._valueBarImage;\r\n    }\r\n\r\n    public set valueBarImage(value: Image) {\r\n        if (this._valueBarImage === value) {\r\n            return;\r\n        }\r\n\r\n        this._valueBarImage = value;\r\n\r\n        if (value && !value.isLoaded) {\r\n            value.onImageLoadedObservable.addOnce(() => this._markAsDirty());\r\n        }\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Gets or sets the image used to render the thumb\r\n     */\r\n    public get thumbImage(): Image {\r\n        return this._thumbImage;\r\n    }\r\n\r\n    public set thumbImage(value: Image) {\r\n        if (this._thumbImage === value) {\r\n            return;\r\n        }\r\n\r\n        this._thumbImage = value;\r\n\r\n        if (value && !value.isLoaded) {\r\n            value.onImageLoadedObservable.addOnce(() => this._markAsDirty());\r\n        }\r\n\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Creates a new ImageBasedSlider\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public override name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected override _getTypeName(): string {\r\n        return \"ImageBasedSlider\";\r\n    }\r\n\r\n    public override _draw(context: ICanvasRenderingContext): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n\r\n        this._prepareRenderingData(\"rectangle\");\r\n        const thumbPosition = this._getThumbPosition();\r\n        const left = this._renderLeft;\r\n        const top = this._renderTop;\r\n        const width = this._renderWidth;\r\n        const height = this._renderHeight;\r\n\r\n        // Background\r\n        if (this._backgroundImage) {\r\n            this._tempMeasure.copyFromFloats(left, top, width, height);\r\n            if (this.isThumbClamped && this.displayThumb) {\r\n                if (this.isVertical) {\r\n                    this._tempMeasure.height += this._effectiveThumbThickness;\r\n                } else {\r\n                    this._tempMeasure.width += this._effectiveThumbThickness;\r\n                }\r\n            }\r\n            this._backgroundImage._currentMeasure.copyFrom(this._tempMeasure);\r\n            this._backgroundImage._draw(context);\r\n        }\r\n\r\n        // Bar\r\n        if (this._valueBarImage) {\r\n            if (this.isVertical) {\r\n                if (this.isThumbClamped && this.displayThumb) {\r\n                    this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition + this._effectiveThumbThickness);\r\n                } else {\r\n                    this._tempMeasure.copyFromFloats(left, top + thumbPosition, width, height - thumbPosition);\r\n                }\r\n            } else {\r\n                if (this.isThumbClamped && this.displayThumb) {\r\n                    this._tempMeasure.copyFromFloats(left, top, thumbPosition + this._effectiveThumbThickness / 2, height);\r\n                } else {\r\n                    this._tempMeasure.copyFromFloats(left, top, thumbPosition, height);\r\n                }\r\n            }\r\n            this._valueBarImage._currentMeasure.copyFrom(this._tempMeasure);\r\n            this._valueBarImage._draw(context);\r\n        }\r\n\r\n        // Thumb\r\n        if (this.displayThumb) {\r\n            if (this.isVertical) {\r\n                this._tempMeasure.copyFromFloats(\r\n                    left - this._effectiveBarOffset,\r\n                    this._currentMeasure.top + thumbPosition,\r\n                    this._currentMeasure.width,\r\n                    this._effectiveThumbThickness\r\n                );\r\n            } else {\r\n                this._tempMeasure.copyFromFloats(this._currentMeasure.left + thumbPosition, this._currentMeasure.top, this._effectiveThumbThickness, this._currentMeasure.height);\r\n            }\r\n\r\n            this._thumbImage._currentMeasure.copyFrom(this._tempMeasure);\r\n            this._thumbImage._draw(context);\r\n        }\r\n\r\n        context.restore();\r\n    }\r\n\r\n    /**\r\n     * Serializes the current control\r\n     * @param serializationObject defined the JSON serialized object\r\n     */\r\n    public override serialize(serializationObject: any) {\r\n        super.serialize(serializationObject);\r\n        const backgroundImage = {};\r\n        const thumbImage = {};\r\n        const valueBarImage = {};\r\n        this.backgroundImage.serialize(backgroundImage);\r\n        this.thumbImage.serialize(thumbImage);\r\n        this.valueBarImage.serialize(valueBarImage);\r\n        serializationObject.backgroundImage = backgroundImage;\r\n        serializationObject.thumbImage = thumbImage;\r\n        serializationObject.valueBarImage = valueBarImage;\r\n    }\r\n\r\n    /**\r\n     * @internal\r\n     */\r\n    public override _parseFromContent(serializedObject: any, host: AdvancedDynamicTexture) {\r\n        super._parseFromContent(serializedObject, host);\r\n        this.backgroundImage = Image.Parse(serializedObject.backgroundImage, host) as Image;\r\n        this.thumbImage = Image.Parse(serializedObject.thumbImage, host) as Image;\r\n        this.valueBarImage = Image.Parse(serializedObject.valueBarImage, host) as Image;\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.ImageBasedSlider\", ImageBasedSlider);\r\n"]}