@babylonjs/gui 5.0.0-rc.6 → 5.0.0

package/2D/controls/checkbox.d.ts

@@ -1,59 +1,59 @@
-import { Observable } from "@babylonjs/core/Misc/observable.js";
-import { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
-import { Control } from "./control";
-import { StackPanel } from "./stackPanel";
-import { PointerInfoBase } from "@babylonjs/core/Events/pointerEvents.js";
-import { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
-/**
- * Class used to represent a 2D checkbox
- */
-export declare class Checkbox extends Control {
-    name?: string | undefined;
-    private _isChecked;
-    private _background;
-    private _checkSizeRatio;
-    private _thickness;
-    /** Gets or sets border thickness  */
-    get thickness(): number;
-    set thickness(value: number);
-    /**
-     * Observable raised when isChecked property changes
-     */
-    onIsCheckedChangedObservable: Observable<boolean>;
-    /** Gets or sets a value indicating the ratio between overall size and check size */
-    get checkSizeRatio(): number;
-    set checkSizeRatio(value: number);
-    /** Gets or sets background color */
-    get background(): string;
-    set background(value: string);
-    /** Gets or sets a boolean indicating if the checkbox is checked or not */
-    get isChecked(): boolean;
-    set isChecked(value: boolean);
-    /**
-     * Creates a new CheckBox
-     * @param name defines the control name
-     */
-    constructor(name?: string | undefined);
-    protected _getTypeName(): string;
-    /**
-     * @param context
-     * @hidden
-     */
-    _draw(context: ICanvasRenderingContext): void;
-    /**
-     * @param target
-     * @param coordinates
-     * @param pointerId
-     * @param buttonIndex
-     * @param pi
-     * @hidden
-     */
-    _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean;
-    /**
-     * Utility function to easily create a checkbox with a header
-     * @param title defines the label to use for the header
-     * @param onValueChanged defines the callback to call when value changes
-     * @returns a StackPanel containing the checkbox and a textBlock
-     */
-    static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel;
-}
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
+import { Control } from "./control";
+import { StackPanel } from "./stackPanel";
+import type { PointerInfoBase } from "@babylonjs/core/Events/pointerEvents.js";
+import type { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+/**
+ * Class used to represent a 2D checkbox
+ */
+export declare class Checkbox extends Control {
+    name?: string | undefined;
+    private _isChecked;
+    private _background;
+    private _checkSizeRatio;
+    private _thickness;
+    /** Gets or sets border thickness  */
+    get thickness(): number;
+    set thickness(value: number);
+    /**
+     * Observable raised when isChecked property changes
+     */
+    onIsCheckedChangedObservable: Observable<boolean>;
+    /** Gets or sets a value indicating the ratio between overall size and check size */
+    get checkSizeRatio(): number;
+    set checkSizeRatio(value: number);
+    /** Gets or sets background color */
+    get background(): string;
+    set background(value: string);
+    /** Gets or sets a boolean indicating if the checkbox is checked or not */
+    get isChecked(): boolean;
+    set isChecked(value: boolean);
+    /**
+     * Creates a new CheckBox
+     * @param name defines the control name
+     */
+    constructor(name?: string | undefined);
+    protected _getTypeName(): string;
+    /**
+     * @param context
+     * @hidden
+     */
+    _draw(context: ICanvasRenderingContext): void;
+    /**
+     * @param target
+     * @param coordinates
+     * @param pointerId
+     * @param buttonIndex
+     * @param pi
+     * @hidden
+     */
+    _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean;
+    /**
+     * Utility function to easily create a checkbox with a header
+     * @param title defines the label to use for the header
+     * @param onValueChanged defines the callback to call when value changes
+     * @returns a StackPanel containing the checkbox and a textBlock
+     */
+    static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel;
+}

package/2D/controls/checkbox.js

@@ -1,189 +1,189 @@
-import { __decorate, __extends } from "tslib";
-import { Observable } from "@babylonjs/core/Misc/observable.js";
-import { Control } from "./control.js";
-import { StackPanel } from "./stackPanel.js";
-import { TextBlock } from "./textBlock.js";
-import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
-import { serialize } from "@babylonjs/core/Misc/decorators.js";
-/**
- * Class used to represent a 2D checkbox
- */
-var Checkbox = /** @class */ (function (_super) {
-    __extends(Checkbox, _super);
-    /**
-     * Creates a new CheckBox
-     * @param name defines the control name
-     */
-    function Checkbox(name) {
-        var _this = _super.call(this, name) || this;
-        _this.name = name;
-        _this._isChecked = false;
-        _this._background = "black";
-        _this._checkSizeRatio = 0.8;
-        _this._thickness = 1;
-        /**
-         * Observable raised when isChecked property changes
-         */
-        _this.onIsCheckedChangedObservable = new Observable();
-        _this.isPointerBlocker = true;
-        return _this;
-    }
-    Object.defineProperty(Checkbox.prototype, "thickness", {
-        /** Gets or sets border thickness  */
-        get: function () {
-            return this._thickness;
-        },
-        set: function (value) {
-            if (this._thickness === value) {
-                return;
-            }
-            this._thickness = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Checkbox.prototype, "checkSizeRatio", {
-        /** Gets or sets a value indicating the ratio between overall size and check size */
-        get: function () {
-            return this._checkSizeRatio;
-        },
-        set: function (value) {
-            value = Math.max(Math.min(1, value), 0);
-            if (this._checkSizeRatio === value) {
-                return;
-            }
-            this._checkSizeRatio = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Checkbox.prototype, "background", {
-        /** Gets or sets background color */
-        get: function () {
-            return this._background;
-        },
-        set: function (value) {
-            if (this._background === value) {
-                return;
-            }
-            this._background = value;
-            this._markAsDirty();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(Checkbox.prototype, "isChecked", {
-        /** Gets or sets a boolean indicating if the checkbox is checked or not */
-        get: function () {
-            return this._isChecked;
-        },
-        set: function (value) {
-            if (this._isChecked === value) {
-                return;
-            }
-            this._isChecked = value;
-            this._markAsDirty();
-            this.onIsCheckedChangedObservable.notifyObservers(value);
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Checkbox.prototype._getTypeName = function () {
-        return "Checkbox";
-    };
-    /**
-     * @param context
-     * @hidden
-     */
-    Checkbox.prototype._draw = function (context) {
-        context.save();
-        this._applyStates(context);
-        var actualWidth = this._currentMeasure.width - this._thickness;
-        var actualHeight = this._currentMeasure.height - this._thickness;
-        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
-            context.shadowColor = this.shadowColor;
-            context.shadowBlur = this.shadowBlur;
-            context.shadowOffsetX = this.shadowOffsetX;
-            context.shadowOffsetY = this.shadowOffsetY;
-        }
-        context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
-        context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
-        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
-            context.shadowBlur = 0;
-            context.shadowOffsetX = 0;
-            context.shadowOffsetY = 0;
-        }
-        if (this._isChecked) {
-            context.fillStyle = this._isEnabled ? this.color : this._disabledColorItem;
-            var offsetWidth = actualWidth * this._checkSizeRatio;
-            var offsetHeight = actualHeight * this._checkSizeRatio;
-            context.fillRect(this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2, this._currentMeasure.top + this._thickness / 2 + (actualHeight - offsetHeight) / 2, offsetWidth, offsetHeight);
-        }
-        context.strokeStyle = this.color;
-        context.lineWidth = this._thickness;
-        context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
-        context.restore();
-    };
-    // Events
-    /**
-     * @param target
-     * @param coordinates
-     * @param pointerId
-     * @param buttonIndex
-     * @param pi
-     * @hidden
-     */
-    Checkbox.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
-        if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi)) {
-            return false;
-        }
-        if (!this.isReadOnly) {
-            this.isChecked = !this.isChecked;
-        }
-        return true;
-    };
-    /**
-     * Utility function to easily create a checkbox with a header
-     * @param title defines the label to use for the header
-     * @param onValueChanged defines the callback to call when value changes
-     * @returns a StackPanel containing the checkbox and a textBlock
-     */
-    Checkbox.AddCheckBoxWithHeader = function (title, onValueChanged) {
-        var panel = new StackPanel();
-        panel.isVertical = false;
-        panel.height = "30px";
-        var checkbox = new Checkbox();
-        checkbox.width = "20px";
-        checkbox.height = "20px";
-        checkbox.isChecked = true;
-        checkbox.color = "green";
-        checkbox.onIsCheckedChangedObservable.add(onValueChanged);
-        panel.addControl(checkbox);
-        var header = new TextBlock();
-        header.text = title;
-        header.width = "180px";
-        header.paddingLeft = "5px";
-        header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        header.color = "white";
-        panel.addControl(header);
-        return panel;
-    };
-    __decorate([
-        serialize()
-    ], Checkbox.prototype, "thickness", null);
-    __decorate([
-        serialize()
-    ], Checkbox.prototype, "checkSizeRatio", null);
-    __decorate([
-        serialize()
-    ], Checkbox.prototype, "background", null);
-    __decorate([
-        serialize()
-    ], Checkbox.prototype, "isChecked", null);
-    return Checkbox;
-}(Control));
-export { Checkbox };
-RegisterClass("BABYLON.GUI.Checkbox", Checkbox);
+import { __decorate, __extends } from "tslib";
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Control } from "./control.js";
+import { StackPanel } from "./stackPanel.js";
+import { TextBlock } from "./textBlock.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
+/**
+ * Class used to represent a 2D checkbox
+ */
+var Checkbox = /** @class */ (function (_super) {
+    __extends(Checkbox, _super);
+    /**
+     * Creates a new CheckBox
+     * @param name defines the control name
+     */
+    function Checkbox(name) {
+        var _this = _super.call(this, name) || this;
+        _this.name = name;
+        _this._isChecked = false;
+        _this._background = "black";
+        _this._checkSizeRatio = 0.8;
+        _this._thickness = 1;
+        /**
+         * Observable raised when isChecked property changes
+         */
+        _this.onIsCheckedChangedObservable = new Observable();
+        _this.isPointerBlocker = true;
+        return _this;
+    }
+    Object.defineProperty(Checkbox.prototype, "thickness", {
+        /** Gets or sets border thickness  */
+        get: function () {
+            return this._thickness;
+        },
+        set: function (value) {
+            if (this._thickness === value) {
+                return;
+            }
+            this._thickness = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Checkbox.prototype, "checkSizeRatio", {
+        /** Gets or sets a value indicating the ratio between overall size and check size */
+        get: function () {
+            return this._checkSizeRatio;
+        },
+        set: function (value) {
+            value = Math.max(Math.min(1, value), 0);
+            if (this._checkSizeRatio === value) {
+                return;
+            }
+            this._checkSizeRatio = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Checkbox.prototype, "background", {
+        /** Gets or sets background color */
+        get: function () {
+            return this._background;
+        },
+        set: function (value) {
+            if (this._background === value) {
+                return;
+            }
+            this._background = value;
+            this._markAsDirty();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Checkbox.prototype, "isChecked", {
+        /** Gets or sets a boolean indicating if the checkbox is checked or not */
+        get: function () {
+            return this._isChecked;
+        },
+        set: function (value) {
+            if (this._isChecked === value) {
+                return;
+            }
+            this._isChecked = value;
+            this._markAsDirty();
+            this.onIsCheckedChangedObservable.notifyObservers(value);
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Checkbox.prototype._getTypeName = function () {
+        return "Checkbox";
+    };
+    /**
+     * @param context
+     * @hidden
+     */
+    Checkbox.prototype._draw = function (context) {
+        context.save();
+        this._applyStates(context);
+        var actualWidth = this._currentMeasure.width - this._thickness;
+        var actualHeight = this._currentMeasure.height - this._thickness;
+        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+            context.shadowColor = this.shadowColor;
+            context.shadowBlur = this.shadowBlur;
+            context.shadowOffsetX = this.shadowOffsetX;
+            context.shadowOffsetY = this.shadowOffsetY;
+        }
+        context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
+        context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
+        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+            context.shadowBlur = 0;
+            context.shadowOffsetX = 0;
+            context.shadowOffsetY = 0;
+        }
+        if (this._isChecked) {
+            context.fillStyle = this._isEnabled ? this.color : this._disabledColorItem;
+            var offsetWidth = actualWidth * this._checkSizeRatio;
+            var offsetHeight = actualHeight * this._checkSizeRatio;
+            context.fillRect(this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2, this._currentMeasure.top + this._thickness / 2 + (actualHeight - offsetHeight) / 2, offsetWidth, offsetHeight);
+        }
+        context.strokeStyle = this.color;
+        context.lineWidth = this._thickness;
+        context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);
+        context.restore();
+    };
+    // Events
+    /**
+     * @param target
+     * @param coordinates
+     * @param pointerId
+     * @param buttonIndex
+     * @param pi
+     * @hidden
+     */
+    Checkbox.prototype._onPointerDown = function (target, coordinates, pointerId, buttonIndex, pi) {
+        if (!_super.prototype._onPointerDown.call(this, target, coordinates, pointerId, buttonIndex, pi)) {
+            return false;
+        }
+        if (!this.isReadOnly) {
+            this.isChecked = !this.isChecked;
+        }
+        return true;
+    };
+    /**
+     * Utility function to easily create a checkbox with a header
+     * @param title defines the label to use for the header
+     * @param onValueChanged defines the callback to call when value changes
+     * @returns a StackPanel containing the checkbox and a textBlock
+     */
+    Checkbox.AddCheckBoxWithHeader = function (title, onValueChanged) {
+        var panel = new StackPanel();
+        panel.isVertical = false;
+        panel.height = "30px";
+        var checkbox = new Checkbox();
+        checkbox.width = "20px";
+        checkbox.height = "20px";
+        checkbox.isChecked = true;
+        checkbox.color = "green";
+        checkbox.onIsCheckedChangedObservable.add(onValueChanged);
+        panel.addControl(checkbox);
+        var header = new TextBlock();
+        header.text = title;
+        header.width = "180px";
+        header.paddingLeft = "5px";
+        header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        header.color = "white";
+        panel.addControl(header);
+        return panel;
+    };
+    __decorate([
+        serialize()
+    ], Checkbox.prototype, "thickness", null);
+    __decorate([
+        serialize()
+    ], Checkbox.prototype, "checkSizeRatio", null);
+    __decorate([
+        serialize()
+    ], Checkbox.prototype, "background", null);
+    __decorate([
+        serialize()
+    ], Checkbox.prototype, "isChecked", null);
+    return Checkbox;
+}(Control));
+export { Checkbox };
+RegisterClass("BABYLON.GUI.Checkbox", Checkbox);
 //# sourceMappingURL=checkbox.js.map

package/2D/controls/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../../lts/gui/generated/2D/controls/checkbox.ts"],"names":[],"mappings":"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","sourcesContent":["import { Observable } from \"core/Misc/observable\";\r\nimport { Vector2 } from \"core/Maths/math.vector\";\r\n\r\nimport { Control } from \"./control\";\r\nimport { StackPanel } from \"./stackPanel\";\r\nimport { TextBlock } from \"./textBlock\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport { PointerInfoBase } from \"core/Events/pointerEvents\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/**\r\n * Class used to represent a 2D checkbox\r\n */\r\nexport class Checkbox extends Control {\r\n    private _isChecked = false;\r\n    private _background = \"black\";\r\n    private _checkSizeRatio = 0.8;\r\n    private _thickness = 1;\r\n\r\n    /** Gets or sets border thickness  */\r\n    @serialize()\r\n    public get thickness(): number {\r\n        return this._thickness;\r\n    }\r\n\r\n    public set thickness(value: number) {\r\n        if (this._thickness === value) {\r\n            return;\r\n        }\r\n\r\n        this._thickness = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Observable raised when isChecked property changes\r\n     */\r\n    public onIsCheckedChangedObservable = new Observable<boolean>();\r\n\r\n    /** Gets or sets a value indicating the ratio between overall size and check size */\r\n    @serialize()\r\n    public get checkSizeRatio(): number {\r\n        return this._checkSizeRatio;\r\n    }\r\n\r\n    public set checkSizeRatio(value: number) {\r\n        value = Math.max(Math.min(1, value), 0);\r\n\r\n        if (this._checkSizeRatio === value) {\r\n            return;\r\n        }\r\n\r\n        this._checkSizeRatio = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets background color */\r\n    @serialize()\r\n    public get background(): string {\r\n        return this._background;\r\n    }\r\n\r\n    public set background(value: string) {\r\n        if (this._background === value) {\r\n            return;\r\n        }\r\n\r\n        this._background = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets a boolean indicating if the checkbox is checked or not */\r\n    @serialize()\r\n    public get isChecked(): boolean {\r\n        return this._isChecked;\r\n    }\r\n\r\n    public set isChecked(value: boolean) {\r\n        if (this._isChecked === value) {\r\n            return;\r\n        }\r\n\r\n        this._isChecked = value;\r\n        this._markAsDirty();\r\n\r\n        this.onIsCheckedChangedObservable.notifyObservers(value);\r\n    }\r\n\r\n    /**\r\n     * Creates a new CheckBox\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n        this.isPointerBlocker = true;\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Checkbox\";\r\n    }\r\n\r\n    /**\r\n     * @param context\r\n     * @hidden\r\n     */\r\n    public _draw(context: ICanvasRenderingContext): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n        const actualWidth = this._currentMeasure.width - this._thickness;\r\n        const actualHeight = this._currentMeasure.height - this._thickness;\r\n\r\n        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n            context.shadowColor = this.shadowColor;\r\n            context.shadowBlur = this.shadowBlur;\r\n            context.shadowOffsetX = this.shadowOffsetX;\r\n            context.shadowOffsetY = this.shadowOffsetY;\r\n        }\r\n\r\n        context.fillStyle = this._isEnabled ? this._background : this._disabledColor;\r\n        context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\r\n\r\n        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n            context.shadowBlur = 0;\r\n            context.shadowOffsetX = 0;\r\n            context.shadowOffsetY = 0;\r\n        }\r\n\r\n        if (this._isChecked) {\r\n            context.fillStyle = this._isEnabled ? this.color : this._disabledColorItem;\r\n            const offsetWidth = actualWidth * this._checkSizeRatio;\r\n            const offsetHeight = actualHeight * this._checkSizeRatio;\r\n\r\n            context.fillRect(\r\n                this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2,\r\n                this._currentMeasure.top + this._thickness / 2 + (actualHeight - offsetHeight) / 2,\r\n                offsetWidth,\r\n                offsetHeight\r\n            );\r\n        }\r\n\r\n        context.strokeStyle = this.color;\r\n        context.lineWidth = this._thickness;\r\n\r\n        context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\r\n\r\n        context.restore();\r\n    }\r\n\r\n    // Events\r\n\r\n    /**\r\n     * @param target\r\n     * @param coordinates\r\n     * @param pointerId\r\n     * @param buttonIndex\r\n     * @param pi\r\n     * @hidden\r\n     */\r\n    public _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            this.isChecked = !this.isChecked;\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    /**\r\n     * Utility function to easily create a checkbox with a header\r\n     * @param title defines the label to use for the header\r\n     * @param onValueChanged defines the callback to call when value changes\r\n     * @returns a StackPanel containing the checkbox and a textBlock\r\n     */\r\n    public static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel {\r\n        const panel = new StackPanel();\r\n        panel.isVertical = false;\r\n        panel.height = \"30px\";\r\n\r\n        const checkbox = new Checkbox();\r\n        checkbox.width = \"20px\";\r\n        checkbox.height = \"20px\";\r\n        checkbox.isChecked = true;\r\n        checkbox.color = \"green\";\r\n        checkbox.onIsCheckedChangedObservable.add(onValueChanged);\r\n        panel.addControl(checkbox);\r\n\r\n        const header = new TextBlock();\r\n        header.text = title;\r\n        header.width = \"180px\";\r\n        header.paddingLeft = \"5px\";\r\n        header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n        header.color = \"white\";\r\n        panel.addControl(header);\r\n\r\n        return panel;\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Checkbox\", Checkbox);\r\n"]}
+{"version":3,"file":"checkbox.js","sourceRoot":"","sources":["../../../../../../lts/gui/generated/2D/controls/checkbox.ts"],"names":[],"mappings":"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","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 { StackPanel } from \"./stackPanel\";\r\nimport { TextBlock } from \"./textBlock\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport type { PointerInfoBase } from \"core/Events/pointerEvents\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport type { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/**\r\n * Class used to represent a 2D checkbox\r\n */\r\nexport class Checkbox extends Control {\r\n    private _isChecked = false;\r\n    private _background = \"black\";\r\n    private _checkSizeRatio = 0.8;\r\n    private _thickness = 1;\r\n\r\n    /** Gets or sets border thickness  */\r\n    @serialize()\r\n    public get thickness(): number {\r\n        return this._thickness;\r\n    }\r\n\r\n    public set thickness(value: number) {\r\n        if (this._thickness === value) {\r\n            return;\r\n        }\r\n\r\n        this._thickness = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Observable raised when isChecked property changes\r\n     */\r\n    public onIsCheckedChangedObservable = new Observable<boolean>();\r\n\r\n    /** Gets or sets a value indicating the ratio between overall size and check size */\r\n    @serialize()\r\n    public get checkSizeRatio(): number {\r\n        return this._checkSizeRatio;\r\n    }\r\n\r\n    public set checkSizeRatio(value: number) {\r\n        value = Math.max(Math.min(1, value), 0);\r\n\r\n        if (this._checkSizeRatio === value) {\r\n            return;\r\n        }\r\n\r\n        this._checkSizeRatio = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets background color */\r\n    @serialize()\r\n    public get background(): string {\r\n        return this._background;\r\n    }\r\n\r\n    public set background(value: string) {\r\n        if (this._background === value) {\r\n            return;\r\n        }\r\n\r\n        this._background = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /** Gets or sets a boolean indicating if the checkbox is checked or not */\r\n    @serialize()\r\n    public get isChecked(): boolean {\r\n        return this._isChecked;\r\n    }\r\n\r\n    public set isChecked(value: boolean) {\r\n        if (this._isChecked === value) {\r\n            return;\r\n        }\r\n\r\n        this._isChecked = value;\r\n        this._markAsDirty();\r\n\r\n        this.onIsCheckedChangedObservable.notifyObservers(value);\r\n    }\r\n\r\n    /**\r\n     * Creates a new CheckBox\r\n     * @param name defines the control name\r\n     */\r\n    constructor(public name?: string) {\r\n        super(name);\r\n        this.isPointerBlocker = true;\r\n    }\r\n\r\n    protected _getTypeName(): string {\r\n        return \"Checkbox\";\r\n    }\r\n\r\n    /**\r\n     * @param context\r\n     * @hidden\r\n     */\r\n    public _draw(context: ICanvasRenderingContext): void {\r\n        context.save();\r\n\r\n        this._applyStates(context);\r\n        const actualWidth = this._currentMeasure.width - this._thickness;\r\n        const actualHeight = this._currentMeasure.height - this._thickness;\r\n\r\n        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n            context.shadowColor = this.shadowColor;\r\n            context.shadowBlur = this.shadowBlur;\r\n            context.shadowOffsetX = this.shadowOffsetX;\r\n            context.shadowOffsetY = this.shadowOffsetY;\r\n        }\r\n\r\n        context.fillStyle = this._isEnabled ? this._background : this._disabledColor;\r\n        context.fillRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\r\n\r\n        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {\r\n            context.shadowBlur = 0;\r\n            context.shadowOffsetX = 0;\r\n            context.shadowOffsetY = 0;\r\n        }\r\n\r\n        if (this._isChecked) {\r\n            context.fillStyle = this._isEnabled ? this.color : this._disabledColorItem;\r\n            const offsetWidth = actualWidth * this._checkSizeRatio;\r\n            const offsetHeight = actualHeight * this._checkSizeRatio;\r\n\r\n            context.fillRect(\r\n                this._currentMeasure.left + this._thickness / 2 + (actualWidth - offsetWidth) / 2,\r\n                this._currentMeasure.top + this._thickness / 2 + (actualHeight - offsetHeight) / 2,\r\n                offsetWidth,\r\n                offsetHeight\r\n            );\r\n        }\r\n\r\n        context.strokeStyle = this.color;\r\n        context.lineWidth = this._thickness;\r\n\r\n        context.strokeRect(this._currentMeasure.left + this._thickness / 2, this._currentMeasure.top + this._thickness / 2, actualWidth, actualHeight);\r\n\r\n        context.restore();\r\n    }\r\n\r\n    // Events\r\n\r\n    /**\r\n     * @param target\r\n     * @param coordinates\r\n     * @param pointerId\r\n     * @param buttonIndex\r\n     * @param pi\r\n     * @hidden\r\n     */\r\n    public _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            this.isChecked = !this.isChecked;\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    /**\r\n     * Utility function to easily create a checkbox with a header\r\n     * @param title defines the label to use for the header\r\n     * @param onValueChanged defines the callback to call when value changes\r\n     * @returns a StackPanel containing the checkbox and a textBlock\r\n     */\r\n    public static AddCheckBoxWithHeader(title: string, onValueChanged: (value: boolean) => void): StackPanel {\r\n        const panel = new StackPanel();\r\n        panel.isVertical = false;\r\n        panel.height = \"30px\";\r\n\r\n        const checkbox = new Checkbox();\r\n        checkbox.width = \"20px\";\r\n        checkbox.height = \"20px\";\r\n        checkbox.isChecked = true;\r\n        checkbox.color = \"green\";\r\n        checkbox.onIsCheckedChangedObservable.add(onValueChanged);\r\n        panel.addControl(checkbox);\r\n\r\n        const header = new TextBlock();\r\n        header.text = title;\r\n        header.width = \"180px\";\r\n        header.paddingLeft = \"5px\";\r\n        header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n        header.color = \"white\";\r\n        panel.addControl(header);\r\n\r\n        return panel;\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.Checkbox\", Checkbox);\r\n"]}