@babylonjs/gui 5.19.0 → 5.22.0

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

@@ -1,4 +1,4 @@
-import { __decorate, __extends } from "tslib";
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
 import { BaseSlider } from "./baseSlider.js";
 import { Measure } from "../../measure.js";
 import { Image } from "../image.js";
@@ -7,107 +7,86 @@ import { serialize } from "@babylonjs/core/Misc/decorators.js";
 /**
  * Class used to create slider controls based on images
  */
-var ImageBasedSlider = /** @class */ (function (_super) {
-    __extends(ImageBasedSlider, _super);
+export class ImageBasedSlider extends BaseSlider {
     /**
      * Creates a new ImageBasedSlider
      * @param name defines the control name
      */
-    function ImageBasedSlider(name) {
-        var _this = _super.call(this, name) || this;
-        _this.name = name;
-        _this._tempMeasure = new Measure(0, 0, 0, 0);
-        return _this;
+    constructor(name) {
+        super(name);
+        this.name = name;
+        this._tempMeasure = new Measure(0, 0, 0, 0);
     }
-    Object.defineProperty(ImageBasedSlider.prototype, "displayThumb", {
-        get: function () {
-            return this._displayThumb && this.thumbImage != null;
-        },
-        set: function (value) {
-            if (this._displayThumb === value) {
-                return;
-            }
-            this._displayThumb = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ImageBasedSlider.prototype, "backgroundImage", {
-        /**
-         * Gets or sets the image used to render the background
-         */
-        get: function () {
-            return this._backgroundImage;
-        },
-        set: function (value) {
-            var _this = this;
-            if (this._backgroundImage === value) {
-                return;
-            }
-            this._backgroundImage = value;
-            if (value && !value.isLoaded) {
-                value.onImageLoadedObservable.addOnce(function () { return _this._markAsDirty(); });
-            }
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ImageBasedSlider.prototype, "valueBarImage", {
-        /**
-         * Gets or sets the image used to render the value bar
-         */
-        get: function () {
-            return this._valueBarImage;
-        },
-        set: function (value) {
-            var _this = this;
-            if (this._valueBarImage === value) {
-                return;
-            }
-            this._valueBarImage = value;
-            if (value && !value.isLoaded) {
-                value.onImageLoadedObservable.addOnce(function () { return _this._markAsDirty(); });
-            }
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(ImageBasedSlider.prototype, "thumbImage", {
-        /**
-         * Gets or sets the image used to render the thumb
-         */
-        get: function () {
-            return this._thumbImage;
-        },
-        set: function (value) {
-            var _this = this;
-            if (this._thumbImage === value) {
-                return;
-            }
-            this._thumbImage = value;
-            if (value && !value.isLoaded) {
-                value.onImageLoadedObservable.addOnce(function () { return _this._markAsDirty(); });
-            }
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    ImageBasedSlider.prototype._getTypeName = function () {
+    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();
+    }
+    _getTypeName() {
         return "ImageBasedSlider";
-    };
-    ImageBasedSlider.prototype._draw = function (context) {
+    }
+    _draw(context) {
         context.save();
         this._applyStates(context);
         this._prepareRenderingData("rectangle");
-        var thumbPosition = this._getThumbPosition();
-        var left = this._renderLeft;
-        var top = this._renderTop;
-        var width = this._renderWidth;
-        var height = this._renderHeight;
+        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);
@@ -155,39 +134,37 @@ var ImageBasedSlider = /** @class */ (function (_super) {
             this._thumbImage._draw(context);
         }
         context.restore();
-    };
+    }
     /**
      * Serializes the current control
      * @param serializationObject defined the JSON serialized object
      */
-    ImageBasedSlider.prototype.serialize = function (serializationObject) {
-        _super.prototype.serialize.call(this, serializationObject);
-        var backgroundImage = {};
-        var thumbImage = {};
-        var valueBarImage = {};
+    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;
-    };
+    }
     /**
      * @param serializedObject
      * @param host
      * @hidden
      */
-    ImageBasedSlider.prototype._parseFromContent = function (serializedObject, host) {
-        _super.prototype._parseFromContent.call(this, serializedObject, host);
+    _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);
-    return ImageBasedSlider;
-}(BaseSlider));
-export { ImageBasedSlider };
+    }
+}
+__decorate([
+    serialize()
+], ImageBasedSlider.prototype, "displayThumb", null);
 RegisterClass("BABYLON.GUI.ImageBasedSlider", ImageBasedSlider);
 //# sourceMappingURL=imageBasedSlider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"imageBasedSlider.js","sourceRoot":"","sources":["../../../../../../../lts/gui/generated/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 get displayThumb(): boolean {\r\n        return this._displayThumb && this.thumbImage != null;\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    /**\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 name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"ImageBasedSlider\";\r\n    }\r\n\r\n    public _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 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     * @param serializedObject\r\n     * @param host\r\n     * @hidden\r\n     */\r\n    public _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"]}
+{"version":3,"file":"imageBasedSlider.js","sourceRoot":"","sources":["../../../../../../../lts/gui/generated/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 get displayThumb(): boolean {\r\n        return this._displayThumb && this.thumbImage != null;\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    /**\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 name?: string) {\r\n        super(name);\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"ImageBasedSlider\";\r\n    }\r\n\r\n    public _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 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     * @param serializedObject\r\n     * @param host\r\n     * @hidden\r\n     */\r\n    public _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"]}

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

@@ -17,8 +17,12 @@ export declare class ImageScrollBar extends BaseSlider {
     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
      */