@onerjs/gui 8.23.1

package/2D/controls/multiLine.js

@@ -0,0 +1,237 @@
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
+import { AbstractMesh } from "@babylonjs/core/Meshes/abstractMesh.js";
+import { Control } from "./control.js";
+import { MultiLinePoint } from "../multiLinePoint.js";
+import { RegisterClass } from "@babylonjs/core/Misc/typeStore.js";
+import { serialize } from "@babylonjs/core/Misc/decorators.js";
+/**
+ * Class used to create multi line control
+ */
+export class MultiLine extends Control {
+    /**
+     * Creates a new MultiLine
+     * @param name defines the control name
+     */
+    constructor(name) {
+        super(name);
+        this.name = name;
+        this._lineWidth = 1;
+        /** Function called when a point is updated */
+        this.onPointUpdate = () => {
+            this._markAsDirty();
+        };
+        this._automaticSize = true;
+        this.isHitTestVisible = false;
+        this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this._verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        this._dash = [];
+        this._points = [];
+    }
+    /** Gets or sets dash pattern */
+    get dash() {
+        return this._dash;
+    }
+    set dash(value) {
+        if (this._dash === value) {
+            return;
+        }
+        this._dash = value;
+        this._markAsDirty();
+    }
+    /**
+     * Gets point stored at specified index
+     * @param index defines the index to look for
+     * @returns the requested point if found
+     */
+    getAt(index) {
+        if (!this._points[index]) {
+            this._points[index] = new MultiLinePoint(this);
+        }
+        return this._points[index];
+    }
+    /**
+     * Adds new points to the point collection
+     * @param items defines the list of items (mesh, control or 2d coordinates) to add
+     * @returns the list of created MultiLinePoint
+     */
+    add(...items) {
+        return items.map((item) => this.push(item));
+    }
+    /**
+     * Adds a new point to the point collection
+     * @param item defines the item (mesh, control or 2d coordinates) to add
+     * @returns the created MultiLinePoint
+     */
+    push(item) {
+        const point = this.getAt(this._points.length);
+        if (item == null) {
+            return point;
+        }
+        if (item instanceof AbstractMesh) {
+            point.mesh = item;
+        }
+        else if (item instanceof Control) {
+            point.control = item;
+        }
+        else if (item.x != null && item.y != null) {
+            point.x = item.x;
+            point.y = item.y;
+        }
+        return point;
+    }
+    /**
+     * Remove a specific value or point from the active point collection
+     * @param value defines the value or point to remove
+     */
+    remove(value) {
+        let index;
+        if (value instanceof MultiLinePoint) {
+            index = this._points.indexOf(value);
+            if (index === -1) {
+                return;
+            }
+        }
+        else {
+            index = value;
+        }
+        const point = this._points[index];
+        if (!point) {
+            return;
+        }
+        point.dispose();
+        this._points.splice(index, 1);
+    }
+    /**
+     * Resets this object to initial state (no point)
+     */
+    reset() {
+        while (this._points.length > 0) {
+            this.remove(this._points.length - 1);
+        }
+    }
+    /**
+     * Resets all links
+     */
+    resetLinks() {
+        for (const point of this._points) {
+            if (point != null) {
+                point.resetLinks();
+            }
+        }
+    }
+    /** Gets or sets line width */
+    get lineWidth() {
+        return this._lineWidth;
+    }
+    set lineWidth(value) {
+        if (this._lineWidth === value) {
+            return;
+        }
+        this._lineWidth = value;
+        this._markAsDirty();
+    }
+    set horizontalAlignment(value) {
+        return;
+    }
+    set verticalAlignment(value) {
+        return;
+    }
+    _getTypeName() {
+        return "MultiLine";
+    }
+    _draw(context) {
+        context.save();
+        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+            context.shadowColor = this.shadowColor;
+            context.shadowBlur = this.shadowBlur;
+            context.shadowOffsetX = this.shadowOffsetX;
+            context.shadowOffsetY = this.shadowOffsetY;
+        }
+        this._applyStates(context);
+        context.strokeStyle = this.color;
+        context.lineWidth = this._lineWidth;
+        context.setLineDash(this._dash);
+        context.beginPath();
+        let first = true; //first index is not necessarily 0
+        let previousPoint;
+        for (const point of this._points) {
+            if (!point) {
+                continue;
+            }
+            if (first) {
+                context.moveTo(point._point.x, point._point.y);
+                first = false;
+            }
+            else {
+                if (point._point.z < 1 && previousPoint.z < 1) {
+                    context.lineTo(point._point.x, point._point.y);
+                }
+                else {
+                    context.moveTo(point._point.x, point._point.y);
+                }
+            }
+            previousPoint = point._point;
+        }
+        context.stroke();
+        context.restore();
+    }
+    _additionalProcessing() {
+        this._minX = null;
+        this._minY = null;
+        this._maxX = null;
+        this._maxY = null;
+        for (const point of this._points) {
+            if (!point) {
+                continue;
+            }
+            point.translate();
+            if (this._minX == null || point._point.x < this._minX) {
+                this._minX = point._point.x;
+            }
+            if (this._minY == null || point._point.y < this._minY) {
+                this._minY = point._point.y;
+            }
+            if (this._maxX == null || point._point.x > this._maxX) {
+                this._maxX = point._point.x;
+            }
+            if (this._maxY == null || point._point.y > this._maxY) {
+                this._maxY = point._point.y;
+            }
+        }
+        if (this._minX == null) {
+            this._minX = 0;
+        }
+        if (this._minY == null) {
+            this._minY = 0;
+        }
+        if (this._maxX == null) {
+            this._maxX = 0;
+        }
+        if (this._maxY == null) {
+            this._maxY = 0;
+        }
+    }
+    _measure() {
+        if (this._minX == null || this._maxX == null || this._minY == null || this._maxY == null) {
+            return;
+        }
+        this._currentMeasure.width = Math.abs(this._maxX - this._minX) + this._lineWidth;
+        this._currentMeasure.height = Math.abs(this._maxY - this._minY) + this._lineWidth;
+    }
+    _computeAlignment() {
+        if (this._minX == null || this._minY == null) {
+            return;
+        }
+        this._currentMeasure.left = this._minX - this._lineWidth / 2;
+        this._currentMeasure.top = this._minY - this._lineWidth / 2;
+    }
+    dispose() {
+        this.reset();
+        super.dispose();
+    }
+}
+__decorate([
+    serialize()
+], MultiLine.prototype, "dash", null);
+RegisterClass("BABYLON.GUI.MultiLine", MultiLine);
+//# sourceMappingURL=multiLine.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"multiLine.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/multiLine.ts"],"names":[],"mappings":"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","sourcesContent":["import type { Nullable } from \"core/types\";\r\nimport { AbstractMesh } from \"core/Meshes/abstractMesh\";\r\n\r\nimport { Control } from \"./control\";\r\nimport { MultiLinePoint } from \"../multiLinePoint\";\r\nimport { RegisterClass } from \"core/Misc/typeStore\";\r\nimport type { Vector3 } from \"core/Maths/math.vector\";\r\nimport { serialize } from \"core/Misc/decorators\";\r\nimport type { ICanvasRenderingContext } from \"core/Engines/ICanvas\";\r\n\r\n/**\r\n * Class used to create multi line control\r\n */\r\nexport class MultiLine extends Control {\r\n    private _lineWidth: number = 1;\r\n    private _dash: number[];\r\n    private _points: Nullable<MultiLinePoint>[];\r\n\r\n    private _minX: Nullable<number>;\r\n    private _minY: Nullable<number>;\r\n    private _maxX: Nullable<number>;\r\n    private _maxY: Nullable<number>;\r\n\r\n    /**\r\n     * Creates a new MultiLine\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._automaticSize = true;\r\n        this.isHitTestVisible = false;\r\n        this._horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;\r\n        this._verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;\r\n\r\n        this._dash = [];\r\n        this._points = [];\r\n    }\r\n\r\n    /** Gets or sets dash pattern */\r\n    @serialize()\r\n    public get dash(): Array<number> {\r\n        return this._dash;\r\n    }\r\n\r\n    public set dash(value: Array<number>) {\r\n        if (this._dash === value) {\r\n            return;\r\n        }\r\n\r\n        this._dash = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    /**\r\n     * Gets point stored at specified index\r\n     * @param index defines the index to look for\r\n     * @returns the requested point if found\r\n     */\r\n    public getAt(index: number): MultiLinePoint {\r\n        if (!this._points[index]) {\r\n            this._points[index] = new MultiLinePoint(this);\r\n        }\r\n\r\n        return this._points[index];\r\n    }\r\n\r\n    /** Function called when a point is updated */\r\n    public onPointUpdate = (): void => {\r\n        this._markAsDirty();\r\n    };\r\n\r\n    /**\r\n     * Adds new points to the point collection\r\n     * @param items defines the list of items (mesh, control or 2d coordinates) to add\r\n     * @returns the list of created MultiLinePoint\r\n     */\r\n    public add(...items: (AbstractMesh | Control | { x: string | number; y: string | number })[]): MultiLinePoint[] {\r\n        return items.map((item) => this.push(item));\r\n    }\r\n\r\n    /**\r\n     * Adds a new point to the point collection\r\n     * @param item defines the item (mesh, control or 2d coordinates) to add\r\n     * @returns the created MultiLinePoint\r\n     */\r\n    public push(item?: AbstractMesh | Control | { x: string | number; y: string | number }): MultiLinePoint {\r\n        const point: MultiLinePoint = this.getAt(this._points.length);\r\n\r\n        if (item == null) {\r\n            return point;\r\n        }\r\n\r\n        if (item instanceof AbstractMesh) {\r\n            point.mesh = item;\r\n        } else if (item instanceof Control) {\r\n            point.control = item;\r\n        } else if (item.x != null && item.y != null) {\r\n            point.x = item.x;\r\n            point.y = item.y;\r\n        }\r\n\r\n        return point;\r\n    }\r\n\r\n    /**\r\n     * Remove a specific value or point from the active point collection\r\n     * @param value defines the value or point to remove\r\n     */\r\n    public remove(value: number | MultiLinePoint): void {\r\n        let index: number;\r\n\r\n        if (value instanceof MultiLinePoint) {\r\n            index = this._points.indexOf(value);\r\n\r\n            if (index === -1) {\r\n                return;\r\n            }\r\n        } else {\r\n            index = value;\r\n        }\r\n\r\n        const point: Nullable<MultiLinePoint> = this._points[index];\r\n\r\n        if (!point) {\r\n            return;\r\n        }\r\n\r\n        point.dispose();\r\n\r\n        this._points.splice(index, 1);\r\n    }\r\n\r\n    /**\r\n     * Resets this object to initial state (no point)\r\n     */\r\n    public reset(): void {\r\n        while (this._points.length > 0) {\r\n            this.remove(this._points.length - 1);\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Resets all links\r\n     */\r\n    public resetLinks(): void {\r\n        for (const point of this._points) {\r\n            if (point != null) {\r\n                point.resetLinks();\r\n            }\r\n        }\r\n    }\r\n\r\n    /** Gets or sets line width */\r\n    public get lineWidth(): number {\r\n        return this._lineWidth;\r\n    }\r\n\r\n    public set lineWidth(value: number) {\r\n        if (this._lineWidth === value) {\r\n            return;\r\n        }\r\n\r\n        this._lineWidth = value;\r\n        this._markAsDirty();\r\n    }\r\n\r\n    public override set horizontalAlignment(value: number) {\r\n        return;\r\n    }\r\n\r\n    public override set verticalAlignment(value: number) {\r\n        return;\r\n    }\r\n\r\n    protected override _getTypeName(): string {\r\n        return \"MultiLine\";\r\n    }\r\n\r\n    public override _draw(context: ICanvasRenderingContext): void {\r\n        context.save();\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        this._applyStates(context);\r\n\r\n        context.strokeStyle = this.color;\r\n        context.lineWidth = this._lineWidth;\r\n        context.setLineDash(this._dash);\r\n\r\n        context.beginPath();\r\n\r\n        let first: boolean = true; //first index is not necessarily 0\r\n        let previousPoint: Vector3;\r\n\r\n        for (const point of this._points) {\r\n            if (!point) {\r\n                continue;\r\n            }\r\n\r\n            if (first) {\r\n                context.moveTo(point._point.x, point._point.y);\r\n\r\n                first = false;\r\n            } else {\r\n                if (point._point.z < 1 && previousPoint!.z < 1) {\r\n                    context.lineTo(point._point.x, point._point.y);\r\n                } else {\r\n                    context.moveTo(point._point.x, point._point.y);\r\n                }\r\n            }\r\n            previousPoint = point._point;\r\n        }\r\n\r\n        context.stroke();\r\n\r\n        context.restore();\r\n    }\r\n\r\n    protected override _additionalProcessing(): void {\r\n        this._minX = null;\r\n        this._minY = null;\r\n        this._maxX = null;\r\n        this._maxY = null;\r\n\r\n        for (const point of this._points) {\r\n            if (!point) {\r\n                continue;\r\n            }\r\n\r\n            point.translate();\r\n\r\n            if (this._minX == null || point._point.x < this._minX) {\r\n                this._minX = point._point.x;\r\n            }\r\n            if (this._minY == null || point._point.y < this._minY) {\r\n                this._minY = point._point.y;\r\n            }\r\n            if (this._maxX == null || point._point.x > this._maxX) {\r\n                this._maxX = point._point.x;\r\n            }\r\n            if (this._maxY == null || point._point.y > this._maxY) {\r\n                this._maxY = point._point.y;\r\n            }\r\n        }\r\n\r\n        if (this._minX == null) {\r\n            this._minX = 0;\r\n        }\r\n        if (this._minY == null) {\r\n            this._minY = 0;\r\n        }\r\n        if (this._maxX == null) {\r\n            this._maxX = 0;\r\n        }\r\n        if (this._maxY == null) {\r\n            this._maxY = 0;\r\n        }\r\n    }\r\n\r\n    public override _measure(): void {\r\n        if (this._minX == null || this._maxX == null || this._minY == null || this._maxY == null) {\r\n            return;\r\n        }\r\n\r\n        this._currentMeasure.width = Math.abs(this._maxX - this._minX) + this._lineWidth;\r\n        this._currentMeasure.height = Math.abs(this._maxY - this._minY) + this._lineWidth;\r\n    }\r\n\r\n    protected override _computeAlignment(): void {\r\n        if (this._minX == null || this._minY == null) {\r\n            return;\r\n        }\r\n\r\n        this._currentMeasure.left = this._minX - this._lineWidth / 2;\r\n        this._currentMeasure.top = this._minY - this._lineWidth / 2;\r\n    }\r\n\r\n    public override dispose(): void {\r\n        this.reset();\r\n\r\n        super.dispose();\r\n    }\r\n}\r\nRegisterClass(\"BABYLON.GUI.MultiLine\", MultiLine);\r\n"]}

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

@@ -0,0 +1,49 @@
+import { Observable } from "@babylonjs/core/Misc/observable.js";
+import type { Vector2 } from "@babylonjs/core/Maths/math.vector.js";
+import { Control } from "./control.js";
+import { StackPanel } from "./stackPanel.js";
+import type { PointerInfoBase } from "@babylonjs/core/Events/pointerEvents.js";
+import type { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+/**
+ * Class used to create radio button controls
+ */
+export declare class RadioButton 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);
+    /** Gets or sets group name */
+    group: string;
+    /** Observable raised when isChecked is changed */
+    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 RadioButton
+     * @param name defines the control name
+     */
+    constructor(name?: string | undefined);
+    protected _getTypeName(): string;
+    _draw(context: ICanvasRenderingContext): void;
+    _onPointerDown(target: Control, coordinates: Vector2, pointerId: number, buttonIndex: number, pi: PointerInfoBase): boolean;
+    /**
+     * Utility function to easily create a radio button with a header
+     * @param title defines the label to use for the header
+     * @param group defines the group to use for the radio button
+     * @param isChecked defines the initial state of the radio button
+     * @param onValueChanged defines the callback to call when value changes
+     * @returns a StackPanel containing the radio button and a textBlock
+     */
+    static AddRadioButtonWithHeader(title: string, group: string, isChecked: boolean, onValueChanged: (button: RadioButton, value: boolean) => void): StackPanel;
+}

package/2D/controls/radioButton.js

@@ -0,0 +1,185 @@
+import { __decorate } from "@babylonjs/core/tslib.es6.js";
+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 create radio button controls
+ */
+export class RadioButton extends Control {
+    /** Gets or sets border thickness */
+    get thickness() {
+        return this._thickness;
+    }
+    set thickness(value) {
+        if (this._thickness === value) {
+            return;
+        }
+        this._thickness = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets a value indicating the ratio between overall size and check size */
+    get checkSizeRatio() {
+        return this._checkSizeRatio;
+    }
+    set checkSizeRatio(value) {
+        value = Math.max(Math.min(1, value), 0);
+        if (this._checkSizeRatio === value) {
+            return;
+        }
+        this._checkSizeRatio = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets background color */
+    get background() {
+        return this._background;
+    }
+    set background(value) {
+        if (this._background === value) {
+            return;
+        }
+        this._background = value;
+        this._markAsDirty();
+    }
+    /** Gets or sets a boolean indicating if the checkbox is checked or not */
+    get isChecked() {
+        return this._isChecked;
+    }
+    set isChecked(value) {
+        if (this._isChecked === value) {
+            return;
+        }
+        this._isChecked = value;
+        this._markAsDirty();
+        this.onIsCheckedChangedObservable.notifyObservers(value);
+        if (this._isChecked && this._host) {
+            // Update all controls from same group
+            this._host.executeOnAllControls((control) => {
+                if (control === this) {
+                    return;
+                }
+                if (control.group === undefined) {
+                    return;
+                }
+                const childRadio = control;
+                if (childRadio.group === this.group) {
+                    childRadio.isChecked = false;
+                }
+            });
+        }
+    }
+    /**
+     * Creates a new RadioButton
+     * @param name defines the control name
+     */
+    constructor(name) {
+        super(name);
+        this.name = name;
+        this._isChecked = false;
+        this._background = "black";
+        this._checkSizeRatio = 0.8;
+        this._thickness = 1;
+        /** Gets or sets group name */
+        this.group = "";
+        /** Observable raised when isChecked is changed */
+        this.onIsCheckedChangedObservable = new Observable();
+        this.isPointerBlocker = true;
+    }
+    _getTypeName() {
+        return "RadioButton";
+    }
+    _draw(context) {
+        context.save();
+        this._applyStates(context);
+        const actualWidth = this._currentMeasure.width - this._thickness;
+        const 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;
+        }
+        // Outer
+        Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, this._currentMeasure.width / 2 - this._thickness / 2, this._currentMeasure.height / 2 - this._thickness / 2, 1, context);
+        context.fillStyle = this._isEnabled ? this._background : this._disabledColor;
+        context.fill();
+        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
+            context.shadowBlur = 0;
+            context.shadowOffsetX = 0;
+            context.shadowOffsetY = 0;
+        }
+        context.strokeStyle = this.color;
+        context.lineWidth = this._thickness;
+        context.stroke();
+        // Inner
+        if (this._isChecked) {
+            context.fillStyle = this._isEnabled ? this.color : this._disabledColor;
+            const offsetWidth = actualWidth * this._checkSizeRatio;
+            const offseHeight = actualHeight * this._checkSizeRatio;
+            Control.drawEllipse(this._currentMeasure.left + this._currentMeasure.width / 2, this._currentMeasure.top + this._currentMeasure.height / 2, offsetWidth / 2 - this._thickness / 2, offseHeight / 2 - this._thickness / 2, 1, context);
+            context.fill();
+        }
+        context.restore();
+    }
+    // Events
+    _onPointerDown(target, coordinates, pointerId, buttonIndex, pi) {
+        if (!super._onPointerDown(target, coordinates, pointerId, buttonIndex, pi)) {
+            return false;
+        }
+        if (this.isReadOnly) {
+            return true;
+        }
+        if (!this.isChecked) {
+            this.isChecked = true;
+        }
+        return true;
+    }
+    /**
+     * Utility function to easily create a radio button with a header
+     * @param title defines the label to use for the header
+     * @param group defines the group to use for the radio button
+     * @param isChecked defines the initial state of the radio button
+     * @param onValueChanged defines the callback to call when value changes
+     * @returns a StackPanel containing the radio button and a textBlock
+     */
+    static AddRadioButtonWithHeader(title, group, isChecked, onValueChanged) {
+        const panel = new StackPanel();
+        panel.isVertical = false;
+        panel.height = "30px";
+        const radio = new RadioButton();
+        radio.width = "20px";
+        radio.height = "20px";
+        radio.isChecked = isChecked;
+        radio.color = "green";
+        radio.group = group;
+        radio.onIsCheckedChangedObservable.add((value) => onValueChanged(radio, value));
+        panel.addControl(radio);
+        const 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()
+], RadioButton.prototype, "thickness", null);
+__decorate([
+    serialize()
+], RadioButton.prototype, "group", void 0);
+__decorate([
+    serialize()
+], RadioButton.prototype, "checkSizeRatio", null);
+__decorate([
+    serialize()
+], RadioButton.prototype, "background", null);
+__decorate([
+    serialize()
+], RadioButton.prototype, "isChecked", null);
+RegisterClass("BABYLON.GUI.RadioButton", RadioButton);
+//# sourceMappingURL=radioButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radioButton.js","sourceRoot":"","sources":["../../../../../dev/gui/src/2D/controls/radioButton.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 create radio button controls\r\n */\r\nexport class RadioButton 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    /** Gets or sets group name */\r\n    @serialize()\r\n    public group = \"\";\r\n\r\n    /** Observable raised when isChecked is changed */\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        if (this._isChecked && this._host) {\r\n            // Update all controls from same group\r\n            this._host.executeOnAllControls((control) => {\r\n                if (control === this) {\r\n                    return;\r\n                }\r\n\r\n                if ((<any>control).group === undefined) {\r\n                    return;\r\n                }\r\n                const childRadio = <RadioButton>control;\r\n                if (childRadio.group === this.group) {\r\n                    childRadio.isChecked = false;\r\n                }\r\n            });\r\n        }\r\n    }\r\n\r\n    /**\r\n     * Creates a new RadioButton\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 \"RadioButton\";\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        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        // Outer\r\n        Control.drawEllipse(\r\n            this._currentMeasure.left + this._currentMeasure.width / 2,\r\n            this._currentMeasure.top + this._currentMeasure.height / 2,\r\n            this._currentMeasure.width / 2 - this._thickness / 2,\r\n            this._currentMeasure.height / 2 - this._thickness / 2,\r\n            1,\r\n            context\r\n        );\r\n\r\n        context.fillStyle = this._isEnabled ? this._background : this._disabledColor;\r\n        context.fill();\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        context.strokeStyle = this.color;\r\n        context.lineWidth = this._thickness;\r\n\r\n        context.stroke();\r\n\r\n        // Inner\r\n        if (this._isChecked) {\r\n            context.fillStyle = this._isEnabled ? this.color : this._disabledColor;\r\n            const offsetWidth = actualWidth * this._checkSizeRatio;\r\n            const offseHeight = actualHeight * this._checkSizeRatio;\r\n\r\n            Control.drawEllipse(\r\n                this._currentMeasure.left + this._currentMeasure.width / 2,\r\n                this._currentMeasure.top + this._currentMeasure.height / 2,\r\n                offsetWidth / 2 - this._thickness / 2,\r\n                offseHeight / 2 - this._thickness / 2,\r\n                1,\r\n                context\r\n            );\r\n\r\n            context.fill();\r\n        }\r\n        context.restore();\r\n    }\r\n\r\n    // Events\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        if (!this.isChecked) {\r\n            this.isChecked = true;\r\n        }\r\n\r\n        return true;\r\n    }\r\n\r\n    /**\r\n     * Utility function to easily create a radio button with a header\r\n     * @param title defines the label to use for the header\r\n     * @param group defines the group to use for the radio button\r\n     * @param isChecked defines the initial state of the radio button\r\n     * @param onValueChanged defines the callback to call when value changes\r\n     * @returns a StackPanel containing the radio button and a textBlock\r\n     */\r\n    public static AddRadioButtonWithHeader(title: string, group: string, isChecked: boolean, onValueChanged: (button: RadioButton, 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 radio = new RadioButton();\r\n        radio.width = \"20px\";\r\n        radio.height = \"20px\";\r\n        radio.isChecked = isChecked;\r\n        radio.color = \"green\";\r\n        radio.group = group;\r\n        radio.onIsCheckedChangedObservable.add((value) => onValueChanged(radio, value));\r\n        panel.addControl(radio);\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.RadioButton\", RadioButton);\r\n"]}

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

@@ -0,0 +1,43 @@
+import { Container } from "./container.js";
+import type { Measure } from "../measure.js";
+import type { ICanvasRenderingContext } from "@babylonjs/core/Engines/ICanvas.js";
+/** Class used to create rectangle container */
+export declare class Rectangle extends Container {
+    name?: string | undefined;
+    private _thickness;
+    private _cornerRadius;
+    private _cachedRadius;
+    /** Gets or sets border thickness */
+    get thickness(): number;
+    set thickness(value: number);
+    /** Gets or sets the corner radius of all angles */
+    get cornerRadius(): number;
+    set cornerRadius(value: number);
+    /** Gets or sets the corner radius top left angle */
+    get cornerRadiusX(): number;
+    set cornerRadiusX(value: number);
+    /** Gets or sets the corner radius top right angle */
+    get cornerRadiusY(): number;
+    set cornerRadiusY(value: number);
+    /** Gets or sets the corner radius bottom left angle */
+    get cornerRadiusZ(): number;
+    set cornerRadiusZ(value: number);
+    /** Gets or sets the corner radius bottom right angle */
+    get cornerRadiusW(): number;
+    set cornerRadiusW(value: number);
+    /**
+     * Creates a new Rectangle
+     * @param name defines the control name
+     */
+    constructor(name?: string | undefined);
+    protected _getTypeName(): string;
+    /** @internal */
+    protected _computeAdditionalOffsetX(): number;
+    /** @internal */
+    protected _computeAdditionalOffsetY(): number;
+    protected _getRectangleFill(context: ICanvasRenderingContext): string | CanvasGradient;
+    protected _localDraw(context: ICanvasRenderingContext): void;
+    protected _additionalProcessing(parentMeasure: Measure, context: ICanvasRenderingContext): void;
+    private _drawRoundedRect;
+    protected _clipForChildren(context: ICanvasRenderingContext): void;
+}