@babylonjs/gui 5.0.0-rc.5 → 5.0.0-rc.9

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";
+import { StackPanel } from "./stackPanel";
+import { TextBlock } from "./textBlock";
+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/colorpicker.d.ts

@@ -1,103 +1,103 @@
-import { Observable } from "@babylonjs/core/Misc/observable.js";
-import { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
-import { Control } from "./control";
-import { Measure } from "../measure";
-import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
-import { Color3 } from "@babylonjs/core/Maths/math.color.js";
-import { PointerInfoBase } from "@babylonjs/core/Events/pointerEvents.js";
-import { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
-/** Class used to create color pickers */
-export declare class ColorPicker extends Control {
-    name?: string | undefined;
-    private static _Epsilon;
-    private _colorWheelCanvas;
-    private _value;
-    private _tmpColor;
-    private _pointerStartedOnSquare;
-    private _pointerStartedOnWheel;
-    private _squareLeft;
-    private _squareTop;
-    private _squareSize;
-    private _h;
-    private _s;
-    private _v;
-    private _lastPointerDownId;
-    /**
-     * Observable raised when the value changes
-     */
-    onValueChangedObservable: Observable<Color3>;
-    /** Gets or sets the color of the color picker */
-    get value(): Color3;
-    set value(value: Color3);
-    /**
-     * Gets or sets control width
-     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-     */
-    get width(): string | number;
-    set width(value: string | number);
-    /**
-     * Gets or sets control height
-     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
-     */
-    get height(): string | number;
-    /** Gets or sets control height */
-    set height(value: string | number);
-    /** Gets or sets control size */
-    get size(): string | number;
-    set size(value: string | number);
-    /**
-     * Creates a new ColorPicker
-     * @param name defines the control name
-     */
-    constructor(name?: string | undefined);
-    protected _getTypeName(): string;
-    /**
-     * @param parentMeasure
-     * @hidden
-     */
-    protected _preMeasure(parentMeasure: Measure): void;
-    private _updateSquareProps;
-    private _drawGradientSquare;
-    private _drawCircle;
-    private _createColorWheelCanvas;
-    /**
-     * @param context
-     * @hidden
-     */
-    _draw(context: ICanvasRenderingContext): void;
-    private _pointerIsDown;
-    private _updateValueFromPointer;
-    private _isPointOnSquare;
-    private _isPointOnWheel;
-    _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, pi: PointerInfoBase): void;
-    _onCanvasBlur(): void;
-    /**
-     * This function expands the color picker by creating a color picker dialog with manual
-     * color value input and the ability to save colors into an array to be used later in
-     * subsequent launches of the dialogue.
-     * @param advancedTexture defines the AdvancedDynamicTexture the dialog is assigned to
-     * @param options defines size for dialog and options for saved colors. Also accepts last color picked as hex string and saved colors array as hex strings.
-     * @param options.pickerWidth
-     * @param options.pickerHeight
-     * @param options.headerHeight
-     * @param options.lastColor
-     * @param options.swatchLimit
-     * @param options.numSwatchesPerLine
-     * @param options.savedColors
-     * @returns picked color as a hex string and the saved colors array as hex strings.
-     */
-    static ShowPickerDialogAsync(advancedTexture: AdvancedDynamicTexture, options: {
-        pickerWidth?: string;
-        pickerHeight?: string;
-        headerHeight?: string;
-        lastColor?: string;
-        swatchLimit?: number;
-        numSwatchesPerLine?: number;
-        savedColors?: Array<string>;
-    }): Promise<{
-        savedColors?: string[];
-        pickedColor: string;
-    }>;
-}
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
+import { Control } from "./control";
+import { Measure } from "../measure";
+import { AdvancedDynamicTexture } from "../advancedDynamicTexture";
+import { Color3 } from "@babylonjs/core/Maths/math.color.js";
+import { PointerInfoBase } from "@babylonjs/core/Events/pointerEvents.js";
+import { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+/** Class used to create color pickers */
+export declare class ColorPicker extends Control {
+    name?: string | undefined;
+    private static _Epsilon;
+    private _colorWheelCanvas;
+    private _value;
+    private _tmpColor;
+    private _pointerStartedOnSquare;
+    private _pointerStartedOnWheel;
+    private _squareLeft;
+    private _squareTop;
+    private _squareSize;
+    private _h;
+    private _s;
+    private _v;
+    private _lastPointerDownId;
+    /**
+     * Observable raised when the value changes
+     */
+    onValueChangedObservable: Observable<Color3>;
+    /** Gets or sets the color of the color picker */
+    get value(): Color3;
+    set value(value: Color3);
+    /**
+     * Gets or sets control width
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get width(): string | number;
+    set width(value: string | number);
+    /**
+     * Gets or sets control height
+     * @see https://doc.babylonjs.com/how_to/gui#position-and-size
+     */
+    get height(): string | number;
+    /** Gets or sets control height */
+    set height(value: string | number);
+    /** Gets or sets control size */
+    get size(): string | number;
+    set size(value: string | number);
+    /**
+     * Creates a new ColorPicker
+     * @param name defines the control name
+     */
+    constructor(name?: string | undefined);
+    protected _getTypeName(): string;
+    /**
+     * @param parentMeasure
+     * @hidden
+     */
+    protected _preMeasure(parentMeasure: Measure): void;
+    private _updateSquareProps;
+    private _drawGradientSquare;
+    private _drawCircle;
+    private _createColorWheelCanvas;
+    /**
+     * @param context
+     * @hidden
+     */
+    _draw(context: ICanvasRenderingContext): void;
+    private _pointerIsDown;
+    private _updateValueFromPointer;
+    private _isPointOnSquare;
+    private _isPointOnWheel;
+    _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, pi: PointerInfoBase): void;
+    _onCanvasBlur(): void;
+    /**
+     * This function expands the color picker by creating a color picker dialog with manual
+     * color value input and the ability to save colors into an array to be used later in
+     * subsequent launches of the dialogue.
+     * @param advancedTexture defines the AdvancedDynamicTexture the dialog is assigned to
+     * @param options defines size for dialog and options for saved colors. Also accepts last color picked as hex string and saved colors array as hex strings.
+     * @param options.pickerWidth
+     * @param options.pickerHeight
+     * @param options.headerHeight
+     * @param options.lastColor
+     * @param options.swatchLimit
+     * @param options.numSwatchesPerLine
+     * @param options.savedColors
+     * @returns picked color as a hex string and the saved colors array as hex strings.
+     */
+    static ShowPickerDialogAsync(advancedTexture: AdvancedDynamicTexture, options: {
+        pickerWidth?: string;
+        pickerHeight?: string;
+        headerHeight?: string;
+        lastColor?: string;
+        swatchLimit?: number;
+        numSwatchesPerLine?: number;
+        savedColors?: Array<string>;
+    }): Promise<{
+        savedColors?: string[];
+        pickedColor: string;
+    }>;
+}