@babylonjs/gui 5.0.0-rc.1 → 5.0.0-rc.10

package/2D/controls/selector.js

@@ -1,630 +1,693 @@
-import { __extends } from "tslib";
-import { Rectangle } from "./rectangle.js";
-import { StackPanel } from "./stackPanel.js";
-import { Control } from "./control.js";
-import { TextBlock } from "./textBlock.js";
-import { Checkbox } from "./checkbox.js";
-import { RadioButton } from "./radioButton.js";
-import { Slider } from "./sliders/slider.js";
-import { Container } from "./container.js";
-/** Class used to create a RadioGroup
- * which contains groups of radio buttons
-*/
-var SelectorGroup = /** @class */ (function () {
-    /**
-     * Creates a new SelectorGroup
-     * @param name of group, used as a group heading
-     */
-    function SelectorGroup(
-    /** name of SelectorGroup */
-    name) {
-        this.name = name;
-        this._groupPanel = new StackPanel();
-        this._selectors = new Array();
-        this._groupPanel.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-        this._groupPanel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        this._groupHeader = this._addGroupHeader(name);
-    }
-    Object.defineProperty(SelectorGroup.prototype, "groupPanel", {
-        /** Gets the groupPanel of the SelectorGroup  */
-        get: function () {
-            return this._groupPanel;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SelectorGroup.prototype, "selectors", {
-        /** Gets the selectors array */
-        get: function () {
-            return this._selectors;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SelectorGroup.prototype, "header", {
-        /** Gets and sets the group header */
-        get: function () {
-            return this._groupHeader.text;
-        },
-        set: function (label) {
-            if (this._groupHeader.text === "label") {
-                return;
-            }
-            this._groupHeader.text = label;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    /** @hidden */
-    SelectorGroup.prototype._addGroupHeader = function (text) {
-        var groupHeading = new TextBlock("groupHead", text);
-        groupHeading.width = 0.9;
-        groupHeading.height = "30px";
-        groupHeading.textWrapping = true;
-        groupHeading.color = "black";
-        groupHeading.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        groupHeading.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        groupHeading.left = "2px";
-        this._groupPanel.addControl(groupHeading);
-        return groupHeading;
-    };
-    /** @hidden*/
-    SelectorGroup.prototype._getSelector = function (selectorNb) {
-        if (selectorNb < 0 || selectorNb >= this._selectors.length) {
-            return;
-        }
-        return this._selectors[selectorNb];
-    };
-    /** Removes the selector at the given position
-    * @param selectorNb the position of the selector within the group
-   */
-    SelectorGroup.prototype.removeSelector = function (selectorNb) {
-        if (selectorNb < 0 || selectorNb >= this._selectors.length) {
-            return;
-        }
-        this._groupPanel.removeControl(this._selectors[selectorNb]);
-        this._selectors.splice(selectorNb, 1);
-    };
-    return SelectorGroup;
-}());
-export { SelectorGroup };
-/** Class used to create a CheckboxGroup
- * which contains groups of checkbox buttons
-*/
-var CheckboxGroup = /** @class */ (function (_super) {
-    __extends(CheckboxGroup, _super);
-    function CheckboxGroup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    /** Adds a checkbox as a control
-     * @param text is the label for the selector
-     * @param func is the function called when the Selector is checked
-     * @param checked is true when Selector is checked
-     */
-    CheckboxGroup.prototype.addCheckbox = function (text, func, checked) {
-        if (func === void 0) { func = function (s) { }; }
-        if (checked === void 0) { checked = false; }
-        var checked = checked || false;
-        var button = new Checkbox();
-        button.width = "20px";
-        button.height = "20px";
-        button.color = "#364249";
-        button.background = "#CCCCCC";
-        button.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        button.onIsCheckedChangedObservable.add(function (state) {
-            func(state);
-        });
-        var _selector = Control.AddHeader(button, text, "200px", { isHorizontal: true, controlFirst: true });
-        _selector.height = "30px";
-        _selector.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        _selector.left = "4px";
-        this.groupPanel.addControl(_selector);
-        this.selectors.push(_selector);
-        button.isChecked = checked;
-        if (this.groupPanel.parent && this.groupPanel.parent.parent) {
-            button.color = this.groupPanel.parent.parent.buttonColor;
-            button.background = this.groupPanel.parent.parent.buttonBackground;
-        }
-    };
-    /** @hidden */
-    CheckboxGroup.prototype._setSelectorLabel = function (selectorNb, label) {
-        this.selectors[selectorNb].children[1].text = label;
-    };
-    /** @hidden */
-    CheckboxGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
-        this.selectors[selectorNb].children[1].color = color;
-    };
-    /** @hidden */
-    CheckboxGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
-        this.selectors[selectorNb].children[0].color = color;
-    };
-    /** @hidden */
-    CheckboxGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
-        this.selectors[selectorNb].children[0].background = color;
-    };
-    return CheckboxGroup;
-}(SelectorGroup));
-export { CheckboxGroup };
-/** Class used to create a RadioGroup
- * which contains groups of radio buttons
-*/
-var RadioGroup = /** @class */ (function (_super) {
-    __extends(RadioGroup, _super);
-    function RadioGroup() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._selectNb = 0;
-        return _this;
-    }
-    /** Adds a radio button as a control
-     * @param label is the label for the selector
-     * @param func is the function called when the Selector is checked
-     * @param checked is true when Selector is checked
-     */
-    RadioGroup.prototype.addRadio = function (label, func, checked) {
-        if (func === void 0) { func = function (n) { }; }
-        if (checked === void 0) { checked = false; }
-        var nb = this._selectNb++;
-        var button = new RadioButton();
-        button.name = label;
-        button.width = "20px";
-        button.height = "20px";
-        button.color = "#364249";
-        button.background = "#CCCCCC";
-        button.group = this.name;
-        button.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        button.onIsCheckedChangedObservable.add(function (state) {
-            if (state) {
-                func(nb);
-            }
-        });
-        var _selector = Control.AddHeader(button, label, "200px", { isHorizontal: true, controlFirst: true });
-        _selector.height = "30px";
-        _selector.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        _selector.left = "4px";
-        this.groupPanel.addControl(_selector);
-        this.selectors.push(_selector);
-        button.isChecked = checked;
-        if (this.groupPanel.parent && this.groupPanel.parent.parent) {
-            button.color = this.groupPanel.parent.parent.buttonColor;
-            button.background = this.groupPanel.parent.parent.buttonBackground;
-        }
-    };
-    /** @hidden */
-    RadioGroup.prototype._setSelectorLabel = function (selectorNb, label) {
-        this.selectors[selectorNb].children[1].text = label;
-    };
-    /** @hidden */
-    RadioGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
-        this.selectors[selectorNb].children[1].color = color;
-    };
-    /** @hidden */
-    RadioGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
-        this.selectors[selectorNb].children[0].color = color;
-    };
-    /** @hidden */
-    RadioGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
-        this.selectors[selectorNb].children[0].background = color;
-    };
-    return RadioGroup;
-}(SelectorGroup));
-export { RadioGroup };
-/** Class used to create a SliderGroup
- * which contains groups of slider buttons
-*/
-var SliderGroup = /** @class */ (function (_super) {
-    __extends(SliderGroup, _super);
-    function SliderGroup() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    /**
-     * Adds a slider to the SelectorGroup
-     * @param label is the label for the SliderBar
-     * @param func is the function called when the Slider moves
-     * @param unit is a string describing the units used, eg degrees or metres
-     * @param min is the minimum value for the Slider
-     * @param max is the maximum value for the Slider
-     * @param value is the start value for the Slider between min and max
-     * @param onValueChange is the function used to format the value displayed, eg radians to degrees
-     */
-    SliderGroup.prototype.addSlider = function (label, func, unit, min, max, value, onValueChange) {
-        if (func === void 0) { func = function (v) { }; }
-        if (unit === void 0) { unit = "Units"; }
-        if (min === void 0) { min = 0; }
-        if (max === void 0) { max = 0; }
-        if (value === void 0) { value = 0; }
-        if (onValueChange === void 0) { onValueChange = function (v) { return v | 0; }; }
-        var button = new Slider();
-        button.name = unit;
-        button.value = value;
-        button.minimum = min;
-        button.maximum = max;
-        button.width = 0.9;
-        button.height = "20px";
-        button.color = "#364249";
-        button.background = "#CCCCCC";
-        button.borderColor = "black";
-        button.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        button.left = "4px";
-        button.paddingBottom = "4px";
-        button.onValueChangedObservable.add(function (value) {
-            button.parent.children[0].text = button.parent.children[0].name + ": " + onValueChange(value) + " " + button.name;
-            func(value);
-        });
-        var _selector = Control.AddHeader(button, label + ": " + onValueChange(value) + " " + unit, "30px", { isHorizontal: false, controlFirst: false });
-        _selector.height = "60px";
-        _selector.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        _selector.left = "4px";
-        _selector.children[0].name = label;
-        this.groupPanel.addControl(_selector);
-        this.selectors.push(_selector);
-        if (this.groupPanel.parent && this.groupPanel.parent.parent) {
-            button.color = this.groupPanel.parent.parent.buttonColor;
-            button.background = this.groupPanel.parent.parent.buttonBackground;
-        }
-    };
-    /** @hidden */
-    SliderGroup.prototype._setSelectorLabel = function (selectorNb, label) {
-        this.selectors[selectorNb].children[0].name = label;
-        this.selectors[selectorNb].children[0].text = label + ": " + this.selectors[selectorNb].children[1].value + " " + this.selectors[selectorNb].children[1].name;
-    };
-    /** @hidden */
-    SliderGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
-        this.selectors[selectorNb].children[0].color = color;
-    };
-    /** @hidden */
-    SliderGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
-        this.selectors[selectorNb].children[1].color = color;
-    };
-    /** @hidden */
-    SliderGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
-        this.selectors[selectorNb].children[1].background = color;
-    };
-    return SliderGroup;
-}(SelectorGroup));
-export { SliderGroup };
-/** Class used to hold the controls for the checkboxes, radio buttons and sliders
- * @see https://doc.babylonjs.com/how_to/selector
-*/
-var SelectionPanel = /** @class */ (function (_super) {
-    __extends(SelectionPanel, _super);
-    /**
-    * Creates a new SelectionPanel
-    * @param name of SelectionPanel
-    * @param groups is an array of SelectionGroups
-    */
-    function SelectionPanel(
-    /** name of SelectionPanel */
-    name, 
-    /** an array of SelectionGroups */
-    groups) {
-        if (groups === void 0) { groups = []; }
-        var _this = _super.call(this, name) || this;
-        _this.name = name;
-        _this.groups = groups;
-        _this._buttonColor = "#364249";
-        _this._buttonBackground = "#CCCCCC";
-        _this._headerColor = "black";
-        _this._barColor = "white";
-        _this._barHeight = "2px";
-        _this._spacerHeight = "20px";
-        _this._bars = new Array();
-        _this._groups = groups;
-        _this.thickness = 2;
-        _this._panel = new StackPanel();
-        _this._panel.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
-        _this._panel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        _this._panel.top = 5;
-        _this._panel.left = 5;
-        _this._panel.width = 0.95;
-        if (groups.length > 0) {
-            for (var i = 0; i < groups.length - 1; i++) {
-                _this._panel.addControl(groups[i].groupPanel);
-                _this._addSpacer();
-            }
-            _this._panel.addControl(groups[groups.length - 1].groupPanel);
-        }
-        _this.addControl(_this._panel);
-        return _this;
-    }
-    SelectionPanel.prototype._getTypeName = function () {
-        return "SelectionPanel";
-    };
-    Object.defineProperty(SelectionPanel.prototype, "panel", {
-        /** Gets the (stack) panel of the SelectionPanel  */
-        get: function () {
-            return this._panel;
-        },
-        enumerable: false,
-        configurable: true
-    });
-    Object.defineProperty(SelectionPanel.prototype, "headerColor", {
-        /** Gets or sets the headerColor */
-        get: function () {
-            return this._headerColor;
-        },
-        set: function (color) {
-            if (this._headerColor === color) {
-                return;
-            }
-            this._headerColor = color;
-            this._setHeaderColor();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SelectionPanel.prototype._setHeaderColor = function () {
-        for (var i = 0; i < this._groups.length; i++) {
-            this._groups[i].groupPanel.children[0].color = this._headerColor;
-        }
-    };
-    Object.defineProperty(SelectionPanel.prototype, "buttonColor", {
-        /** Gets or sets the button color */
-        get: function () {
-            return this._buttonColor;
-        },
-        set: function (color) {
-            if (this._buttonColor === color) {
-                return;
-            }
-            this._buttonColor = color;
-            this._setbuttonColor();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SelectionPanel.prototype._setbuttonColor = function () {
-        for (var i = 0; i < this._groups.length; i++) {
-            for (var j = 0; j < this._groups[i].selectors.length; j++) {
-                this._groups[i]._setSelectorButtonColor(j, this._buttonColor);
-            }
-        }
-    };
-    Object.defineProperty(SelectionPanel.prototype, "labelColor", {
-        /** Gets or sets the label color */
-        get: function () {
-            return this._labelColor;
-        },
-        set: function (color) {
-            if (this._labelColor === color) {
-                return;
-            }
-            this._labelColor = color;
-            this._setLabelColor();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SelectionPanel.prototype._setLabelColor = function () {
-        for (var i = 0; i < this._groups.length; i++) {
-            for (var j = 0; j < this._groups[i].selectors.length; j++) {
-                this._groups[i]._setSelectorLabelColor(j, this._labelColor);
-            }
-        }
-    };
-    Object.defineProperty(SelectionPanel.prototype, "buttonBackground", {
-        /** Gets or sets the button background */
-        get: function () {
-            return this._buttonBackground;
-        },
-        set: function (color) {
-            if (this._buttonBackground === color) {
-                return;
-            }
-            this._buttonBackground = color;
-            this._setButtonBackground();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SelectionPanel.prototype._setButtonBackground = function () {
-        for (var i = 0; i < this._groups.length; i++) {
-            for (var j = 0; j < this._groups[i].selectors.length; j++) {
-                this._groups[i]._setSelectorButtonBackground(j, this._buttonBackground);
-            }
-        }
-    };
-    Object.defineProperty(SelectionPanel.prototype, "barColor", {
-        /** Gets or sets the color of separator bar */
-        get: function () {
-            return this._barColor;
-        },
-        set: function (color) {
-            if (this._barColor === color) {
-                return;
-            }
-            this._barColor = color;
-            this._setBarColor();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SelectionPanel.prototype._setBarColor = function () {
-        for (var i = 0; i < this._bars.length; i++) {
-            this._bars[i].children[0].background = this._barColor;
-        }
-    };
-    Object.defineProperty(SelectionPanel.prototype, "barHeight", {
-        /** Gets or sets the height of separator bar */
-        get: function () {
-            return this._barHeight;
-        },
-        set: function (value) {
-            if (this._barHeight === value) {
-                return;
-            }
-            this._barHeight = value;
-            this._setBarHeight();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SelectionPanel.prototype._setBarHeight = function () {
-        for (var i = 0; i < this._bars.length; i++) {
-            this._bars[i].children[0].height = this._barHeight;
-        }
-    };
-    Object.defineProperty(SelectionPanel.prototype, "spacerHeight", {
-        /** Gets or sets the height of spacers*/
-        get: function () {
-            return this._spacerHeight;
-        },
-        set: function (value) {
-            if (this._spacerHeight === value) {
-                return;
-            }
-            this._spacerHeight = value;
-            this._setSpacerHeight();
-        },
-        enumerable: false,
-        configurable: true
-    });
-    SelectionPanel.prototype._setSpacerHeight = function () {
-        for (var i = 0; i < this._bars.length; i++) {
-            this._bars[i].height = this._spacerHeight;
-        }
-    };
-    /** Adds a bar between groups */
-    SelectionPanel.prototype._addSpacer = function () {
-        var separator = new Container();
-        separator.width = 1;
-        separator.height = this._spacerHeight;
-        separator.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        var bar = new Rectangle();
-        bar.width = 1;
-        bar.height = this._barHeight;
-        bar.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        bar.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
-        bar.background = this._barColor;
-        bar.color = "transparent";
-        separator.addControl(bar);
-        this._panel.addControl(separator);
-        this._bars.push(separator);
-    };
-    /** Add a group to the selection panel
-     * @param group is the selector group to add
-     */
-    SelectionPanel.prototype.addGroup = function (group) {
-        if (this._groups.length > 0) {
-            this._addSpacer();
-        }
-        this._panel.addControl(group.groupPanel);
-        this._groups.push(group);
-        group.groupPanel.children[0].color = this._headerColor;
-        for (var j = 0; j < group.selectors.length; j++) {
-            group._setSelectorButtonColor(j, this._buttonColor);
-            group._setSelectorButtonBackground(j, this._buttonBackground);
-        }
-    };
-    /** Remove the group from the given position
-     * @param groupNb is the position of the group in the list
-     */
-    SelectionPanel.prototype.removeGroup = function (groupNb) {
-        if (groupNb < 0 || groupNb >= this._groups.length) {
-            return;
-        }
-        var group = this._groups[groupNb];
-        this._panel.removeControl(group.groupPanel);
-        this._groups.splice(groupNb, 1);
-        if (groupNb < this._bars.length) {
-            this._panel.removeControl(this._bars[groupNb]);
-            this._bars.splice(groupNb, 1);
-        }
-    };
-    /** Change a group header label
-     * @param label is the new group header label
-     * @param groupNb is the number of the group to relabel
-     * */
-    SelectionPanel.prototype.setHeaderName = function (label, groupNb) {
-        if (groupNb < 0 || groupNb >= this._groups.length) {
-            return;
-        }
-        var group = this._groups[groupNb];
-        group.groupPanel.children[0].text = label;
-    };
-    /** Change selector label to the one given
-     * @param label is the new selector label
-     * @param groupNb is the number of the groupcontaining the selector
-     * @param selectorNb is the number of the selector within a group to relabel
-     * */
-    SelectionPanel.prototype.relabel = function (label, groupNb, selectorNb) {
-        if (groupNb < 0 || groupNb >= this._groups.length) {
-            return;
-        }
-        var group = this._groups[groupNb];
-        if (selectorNb < 0 || selectorNb >= group.selectors.length) {
-            return;
-        }
-        group._setSelectorLabel(selectorNb, label);
-    };
-    /** For a given group position remove the selector at the given position
-     * @param groupNb is the number of the group to remove the selector from
-     * @param selectorNb is the number of the selector within the group
-     */
-    SelectionPanel.prototype.removeFromGroupSelector = function (groupNb, selectorNb) {
-        if (groupNb < 0 || groupNb >= this._groups.length) {
-            return;
-        }
-        var group = this._groups[groupNb];
-        if (selectorNb < 0 || selectorNb >= group.selectors.length) {
-            return;
-        }
-        group.removeSelector(selectorNb);
-    };
-    /** For a given group position of correct type add a checkbox button
-     * @param groupNb is the number of the group to remove the selector from
-     * @param label is the label for the selector
-     * @param func is the function called when the Selector is checked
-     * @param checked is true when Selector is checked
-     */
-    SelectionPanel.prototype.addToGroupCheckbox = function (groupNb, label, func, checked) {
-        if (func === void 0) { func = function () { }; }
-        if (checked === void 0) { checked = false; }
-        if (groupNb < 0 || groupNb >= this._groups.length) {
-            return;
-        }
-        var group = this._groups[groupNb];
-        group.addCheckbox(label, func, checked);
-    };
-    /** For a given group position of correct type add a radio button
-     * @param groupNb is the number of the group to remove the selector from
-     * @param label is the label for the selector
-     * @param func is the function called when the Selector is checked
-     * @param checked is true when Selector is checked
-     */
-    SelectionPanel.prototype.addToGroupRadio = function (groupNb, label, func, checked) {
-        if (func === void 0) { func = function () { }; }
-        if (checked === void 0) { checked = false; }
-        if (groupNb < 0 || groupNb >= this._groups.length) {
-            return;
-        }
-        var group = this._groups[groupNb];
-        group.addRadio(label, func, checked);
-    };
-    /**
-     * For a given slider group add a slider
-     * @param groupNb is the number of the group to add the slider to
-     * @param label is the label for the Slider
-     * @param func is the function called when the Slider moves
-     * @param unit is a string describing the units used, eg degrees or metres
-     * @param min is the minimum value for the Slider
-     * @param max is the maximum value for the Slider
-     * @param value is the start value for the Slider between min and max
-     * @param onVal is the function used to format the value displayed, eg radians to degrees
-     */
-    SelectionPanel.prototype.addToGroupSlider = function (groupNb, label, func, unit, min, max, value, onVal) {
-        if (func === void 0) { func = function () { }; }
-        if (unit === void 0) { unit = "Units"; }
-        if (min === void 0) { min = 0; }
-        if (max === void 0) { max = 0; }
-        if (value === void 0) { value = 0; }
-        if (onVal === void 0) { onVal = function (v) { return v | 0; }; }
-        if (groupNb < 0 || groupNb >= this._groups.length) {
-            return;
-        }
-        var group = this._groups[groupNb];
-        group.addSlider(label, func, unit, min, max, value, onVal);
-    };
-    return SelectionPanel;
-}(Rectangle));
-export { SelectionPanel };
+import { __extends } from "tslib";
+import { Rectangle } from "./rectangle";
+import { StackPanel } from "./stackPanel";
+import { Control } from "./control";
+import { TextBlock } from "./textBlock";
+import { Checkbox } from "./checkbox";
+import { RadioButton } from "./radioButton";
+import { Slider } from "./sliders/slider";
+import { Container } from "./container";
+/** Class used to create a RadioGroup
+ * which contains groups of radio buttons
+ */
+var SelectorGroup = /** @class */ (function () {
+    /**
+     * Creates a new SelectorGroup
+     * @param name of group, used as a group heading
+     */
+    function SelectorGroup(
+    /** name of SelectorGroup */
+    name) {
+        this.name = name;
+        this._groupPanel = new StackPanel();
+        this._selectors = new Array();
+        this._groupPanel.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        this._groupPanel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        this._groupHeader = this._addGroupHeader(name);
+    }
+    Object.defineProperty(SelectorGroup.prototype, "groupPanel", {
+        /** Gets the groupPanel of the SelectorGroup  */
+        get: function () {
+            return this._groupPanel;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SelectorGroup.prototype, "selectors", {
+        /** Gets the selectors array */
+        get: function () {
+            return this._selectors;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SelectorGroup.prototype, "header", {
+        /** Gets and sets the group header */
+        get: function () {
+            return this._groupHeader.text;
+        },
+        set: function (label) {
+            if (this._groupHeader.text === "label") {
+                return;
+            }
+            this._groupHeader.text = label;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    /**
+     * @param text
+     * @hidden
+     */
+    SelectorGroup.prototype._addGroupHeader = function (text) {
+        var groupHeading = new TextBlock("groupHead", text);
+        groupHeading.width = 0.9;
+        groupHeading.height = "30px";
+        groupHeading.textWrapping = true;
+        groupHeading.color = "black";
+        groupHeading.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        groupHeading.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        groupHeading.left = "2px";
+        this._groupPanel.addControl(groupHeading);
+        return groupHeading;
+    };
+    /**
+     * @param selectorNb
+     * @hidden
+     */
+    SelectorGroup.prototype._getSelector = function (selectorNb) {
+        if (selectorNb < 0 || selectorNb >= this._selectors.length) {
+            return;
+        }
+        return this._selectors[selectorNb];
+    };
+    /** Removes the selector at the given position
+     * @param selectorNb the position of the selector within the group
+     */
+    SelectorGroup.prototype.removeSelector = function (selectorNb) {
+        if (selectorNb < 0 || selectorNb >= this._selectors.length) {
+            return;
+        }
+        this._groupPanel.removeControl(this._selectors[selectorNb]);
+        this._selectors.splice(selectorNb, 1);
+    };
+    return SelectorGroup;
+}());
+export { SelectorGroup };
+/** Class used to create a CheckboxGroup
+ * which contains groups of checkbox buttons
+ */
+var CheckboxGroup = /** @class */ (function (_super) {
+    __extends(CheckboxGroup, _super);
+    function CheckboxGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /** Adds a checkbox as a control
+     * @param text is the label for the selector
+     * @param func is the function called when the Selector is checked
+     * @param checked is true when Selector is checked
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    CheckboxGroup.prototype.addCheckbox = function (text, func, checked) {
+        if (func === void 0) { func = function (s) { }; }
+        if (checked === void 0) { checked = false; }
+        checked = checked || false;
+        var button = new Checkbox();
+        button.width = "20px";
+        button.height = "20px";
+        button.color = "#364249";
+        button.background = "#CCCCCC";
+        button.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        button.onIsCheckedChangedObservable.add(function (state) {
+            func(state);
+        });
+        var _selector = Control.AddHeader(button, text, "200px", { isHorizontal: true, controlFirst: true });
+        _selector.height = "30px";
+        _selector.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        _selector.left = "4px";
+        this.groupPanel.addControl(_selector);
+        this.selectors.push(_selector);
+        button.isChecked = checked;
+        if (this.groupPanel.parent && this.groupPanel.parent.parent) {
+            button.color = this.groupPanel.parent.parent.buttonColor;
+            button.background = this.groupPanel.parent.parent.buttonBackground;
+        }
+    };
+    /**
+     * @param selectorNb
+     * @param label
+     * @hidden
+     */
+    CheckboxGroup.prototype._setSelectorLabel = function (selectorNb, label) {
+        this.selectors[selectorNb].children[1].text = label;
+    };
+    /**
+     * @param selectorNb
+     * @param color
+     * @hidden
+     */
+    CheckboxGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
+        this.selectors[selectorNb].children[1].color = color;
+    };
+    /**
+     * @param selectorNb
+     * @param color
+     * @hidden
+     */
+    CheckboxGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
+        this.selectors[selectorNb].children[0].color = color;
+    };
+    /**
+     * @param selectorNb
+     * @param color
+     * @hidden
+     */
+    CheckboxGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
+        this.selectors[selectorNb].children[0].background = color;
+    };
+    return CheckboxGroup;
+}(SelectorGroup));
+export { CheckboxGroup };
+/** Class used to create a RadioGroup
+ * which contains groups of radio buttons
+ */
+var RadioGroup = /** @class */ (function (_super) {
+    __extends(RadioGroup, _super);
+    function RadioGroup() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this._selectNb = 0;
+        return _this;
+    }
+    /** Adds a radio button as a control
+     * @param label is the label for the selector
+     * @param func is the function called when the Selector is checked
+     * @param checked is true when Selector is checked
+     */
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    RadioGroup.prototype.addRadio = function (label, func, checked) {
+        if (func === void 0) { func = function (n) { }; }
+        if (checked === void 0) { checked = false; }
+        var nb = this._selectNb++;
+        var button = new RadioButton();
+        button.name = label;
+        button.width = "20px";
+        button.height = "20px";
+        button.color = "#364249";
+        button.background = "#CCCCCC";
+        button.group = this.name;
+        button.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        button.onIsCheckedChangedObservable.add(function (state) {
+            if (state) {
+                func(nb);
+            }
+        });
+        var _selector = Control.AddHeader(button, label, "200px", { isHorizontal: true, controlFirst: true });
+        _selector.height = "30px";
+        _selector.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        _selector.left = "4px";
+        this.groupPanel.addControl(_selector);
+        this.selectors.push(_selector);
+        button.isChecked = checked;
+        if (this.groupPanel.parent && this.groupPanel.parent.parent) {
+            button.color = this.groupPanel.parent.parent.buttonColor;
+            button.background = this.groupPanel.parent.parent.buttonBackground;
+        }
+    };
+    /**
+     * @param selectorNb
+     * @param label
+     * @hidden
+     */
+    RadioGroup.prototype._setSelectorLabel = function (selectorNb, label) {
+        this.selectors[selectorNb].children[1].text = label;
+    };
+    /**
+     * @param selectorNb
+     * @param color
+     * @hidden
+     */
+    RadioGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
+        this.selectors[selectorNb].children[1].color = color;
+    };
+    /**
+     * @param selectorNb
+     * @param color
+     * @hidden
+     */
+    RadioGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
+        this.selectors[selectorNb].children[0].color = color;
+    };
+    /**
+     * @param selectorNb
+     * @param color
+     * @hidden
+     */
+    RadioGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
+        this.selectors[selectorNb].children[0].background = color;
+    };
+    return RadioGroup;
+}(SelectorGroup));
+export { RadioGroup };
+/** Class used to create a SliderGroup
+ * which contains groups of slider buttons
+ */
+var SliderGroup = /** @class */ (function (_super) {
+    __extends(SliderGroup, _super);
+    function SliderGroup() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    /**
+     * Adds a slider to the SelectorGroup
+     * @param label is the label for the SliderBar
+     * @param func is the function called when the Slider moves
+     * @param unit is a string describing the units used, eg degrees or metres
+     * @param min is the minimum value for the Slider
+     * @param max is the maximum value for the Slider
+     * @param value is the start value for the Slider between min and max
+     * @param onValueChange is the function used to format the value displayed, eg radians to degrees
+     */
+    SliderGroup.prototype.addSlider = function (label, 
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    func, unit, min, max, value, onValueChange) {
+        if (func === void 0) { func = function (v) { }; }
+        if (unit === void 0) { unit = "Units"; }
+        if (min === void 0) { min = 0; }
+        if (max === void 0) { max = 0; }
+        if (value === void 0) { value = 0; }
+        if (onValueChange === void 0) { onValueChange = function (v) {
+            return v | 0;
+        }; }
+        var button = new Slider();
+        button.name = unit;
+        button.value = value;
+        button.minimum = min;
+        button.maximum = max;
+        button.width = 0.9;
+        button.height = "20px";
+        button.color = "#364249";
+        button.background = "#CCCCCC";
+        button.borderColor = "black";
+        button.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        button.left = "4px";
+        button.paddingBottom = "4px";
+        button.onValueChangedObservable.add(function (value) {
+            button.parent.children[0].text = button.parent.children[0].name + ": " + onValueChange(value) + " " + button.name;
+            func(value);
+        });
+        var _selector = Control.AddHeader(button, label + ": " + onValueChange(value) + " " + unit, "30px", { isHorizontal: false, controlFirst: false });
+        _selector.height = "60px";
+        _selector.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        _selector.left = "4px";
+        _selector.children[0].name = label;
+        this.groupPanel.addControl(_selector);
+        this.selectors.push(_selector);
+        if (this.groupPanel.parent && this.groupPanel.parent.parent) {
+            button.color = this.groupPanel.parent.parent.buttonColor;
+            button.background = this.groupPanel.parent.parent.buttonBackground;
+        }
+    };
+    /**
+     * @param selectorNb
+     * @param label
+     * @hidden
+     */
+    SliderGroup.prototype._setSelectorLabel = function (selectorNb, label) {
+        this.selectors[selectorNb].children[0].name = label;
+        this.selectors[selectorNb].children[0].text =
+            label + ": " + this.selectors[selectorNb].children[1].value + " " + this.selectors[selectorNb].children[1].name;
+    };
+    /**
+     * @param selectorNb
+     * @param color
+     * @hidden
+     */
+    SliderGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
+        this.selectors[selectorNb].children[0].color = color;
+    };
+    /**
+     * @param selectorNb
+     * @param color
+     * @hidden
+     */
+    SliderGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
+        this.selectors[selectorNb].children[1].color = color;
+    };
+    /**
+     * @param selectorNb
+     * @param color
+     * @hidden
+     */
+    SliderGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
+        this.selectors[selectorNb].children[1].background = color;
+    };
+    return SliderGroup;
+}(SelectorGroup));
+export { SliderGroup };
+/** Class used to hold the controls for the checkboxes, radio buttons and sliders
+ * @see https://doc.babylonjs.com/how_to/selector
+ */
+var SelectionPanel = /** @class */ (function (_super) {
+    __extends(SelectionPanel, _super);
+    /**
+     * Creates a new SelectionPanel
+     * @param name of SelectionPanel
+     * @param groups is an array of SelectionGroups
+     */
+    function SelectionPanel(
+    /** name of SelectionPanel */
+    name, 
+    /** an array of SelectionGroups */
+    groups) {
+        if (groups === void 0) { groups = []; }
+        var _this = _super.call(this, name) || this;
+        _this.name = name;
+        _this.groups = groups;
+        _this._buttonColor = "#364249";
+        _this._buttonBackground = "#CCCCCC";
+        _this._headerColor = "black";
+        _this._barColor = "white";
+        _this._barHeight = "2px";
+        _this._spacerHeight = "20px";
+        _this._bars = new Array();
+        _this._groups = groups;
+        _this.thickness = 2;
+        _this._panel = new StackPanel();
+        _this._panel.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
+        _this._panel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        _this._panel.top = 5;
+        _this._panel.left = 5;
+        _this._panel.width = 0.95;
+        if (groups.length > 0) {
+            for (var i = 0; i < groups.length - 1; i++) {
+                _this._panel.addControl(groups[i].groupPanel);
+                _this._addSpacer();
+            }
+            _this._panel.addControl(groups[groups.length - 1].groupPanel);
+        }
+        _this.addControl(_this._panel);
+        return _this;
+    }
+    SelectionPanel.prototype._getTypeName = function () {
+        return "SelectionPanel";
+    };
+    Object.defineProperty(SelectionPanel.prototype, "panel", {
+        /** Gets the (stack) panel of the SelectionPanel  */
+        get: function () {
+            return this._panel;
+        },
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(SelectionPanel.prototype, "headerColor", {
+        /** Gets or sets the headerColor */
+        get: function () {
+            return this._headerColor;
+        },
+        set: function (color) {
+            if (this._headerColor === color) {
+                return;
+            }
+            this._headerColor = color;
+            this._setHeaderColor();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SelectionPanel.prototype._setHeaderColor = function () {
+        for (var i = 0; i < this._groups.length; i++) {
+            this._groups[i].groupPanel.children[0].color = this._headerColor;
+        }
+    };
+    Object.defineProperty(SelectionPanel.prototype, "buttonColor", {
+        /** Gets or sets the button color */
+        get: function () {
+            return this._buttonColor;
+        },
+        set: function (color) {
+            if (this._buttonColor === color) {
+                return;
+            }
+            this._buttonColor = color;
+            this._setbuttonColor();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SelectionPanel.prototype._setbuttonColor = function () {
+        for (var i = 0; i < this._groups.length; i++) {
+            for (var j = 0; j < this._groups[i].selectors.length; j++) {
+                this._groups[i]._setSelectorButtonColor(j, this._buttonColor);
+            }
+        }
+    };
+    Object.defineProperty(SelectionPanel.prototype, "labelColor", {
+        /** Gets or sets the label color */
+        get: function () {
+            return this._labelColor;
+        },
+        set: function (color) {
+            if (this._labelColor === color) {
+                return;
+            }
+            this._labelColor = color;
+            this._setLabelColor();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SelectionPanel.prototype._setLabelColor = function () {
+        for (var i = 0; i < this._groups.length; i++) {
+            for (var j = 0; j < this._groups[i].selectors.length; j++) {
+                this._groups[i]._setSelectorLabelColor(j, this._labelColor);
+            }
+        }
+    };
+    Object.defineProperty(SelectionPanel.prototype, "buttonBackground", {
+        /** Gets or sets the button background */
+        get: function () {
+            return this._buttonBackground;
+        },
+        set: function (color) {
+            if (this._buttonBackground === color) {
+                return;
+            }
+            this._buttonBackground = color;
+            this._setButtonBackground();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SelectionPanel.prototype._setButtonBackground = function () {
+        for (var i = 0; i < this._groups.length; i++) {
+            for (var j = 0; j < this._groups[i].selectors.length; j++) {
+                this._groups[i]._setSelectorButtonBackground(j, this._buttonBackground);
+            }
+        }
+    };
+    Object.defineProperty(SelectionPanel.prototype, "barColor", {
+        /** Gets or sets the color of separator bar */
+        get: function () {
+            return this._barColor;
+        },
+        set: function (color) {
+            if (this._barColor === color) {
+                return;
+            }
+            this._barColor = color;
+            this._setBarColor();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SelectionPanel.prototype._setBarColor = function () {
+        for (var i = 0; i < this._bars.length; i++) {
+            this._bars[i].children[0].background = this._barColor;
+        }
+    };
+    Object.defineProperty(SelectionPanel.prototype, "barHeight", {
+        /** Gets or sets the height of separator bar */
+        get: function () {
+            return this._barHeight;
+        },
+        set: function (value) {
+            if (this._barHeight === value) {
+                return;
+            }
+            this._barHeight = value;
+            this._setBarHeight();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SelectionPanel.prototype._setBarHeight = function () {
+        for (var i = 0; i < this._bars.length; i++) {
+            this._bars[i].children[0].height = this._barHeight;
+        }
+    };
+    Object.defineProperty(SelectionPanel.prototype, "spacerHeight", {
+        /** Gets or sets the height of spacers*/
+        get: function () {
+            return this._spacerHeight;
+        },
+        set: function (value) {
+            if (this._spacerHeight === value) {
+                return;
+            }
+            this._spacerHeight = value;
+            this._setSpacerHeight();
+        },
+        enumerable: false,
+        configurable: true
+    });
+    SelectionPanel.prototype._setSpacerHeight = function () {
+        for (var i = 0; i < this._bars.length; i++) {
+            this._bars[i].height = this._spacerHeight;
+        }
+    };
+    /** Adds a bar between groups */
+    SelectionPanel.prototype._addSpacer = function () {
+        var separator = new Container();
+        separator.width = 1;
+        separator.height = this._spacerHeight;
+        separator.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        var bar = new Rectangle();
+        bar.width = 1;
+        bar.height = this._barHeight;
+        bar.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
+        bar.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
+        bar.background = this._barColor;
+        bar.color = "transparent";
+        separator.addControl(bar);
+        this._panel.addControl(separator);
+        this._bars.push(separator);
+    };
+    /** Add a group to the selection panel
+     * @param group is the selector group to add
+     */
+    SelectionPanel.prototype.addGroup = function (group) {
+        if (this._groups.length > 0) {
+            this._addSpacer();
+        }
+        this._panel.addControl(group.groupPanel);
+        this._groups.push(group);
+        group.groupPanel.children[0].color = this._headerColor;
+        for (var j = 0; j < group.selectors.length; j++) {
+            group._setSelectorButtonColor(j, this._buttonColor);
+            group._setSelectorButtonBackground(j, this._buttonBackground);
+        }
+    };
+    /** Remove the group from the given position
+     * @param groupNb is the position of the group in the list
+     */
+    SelectionPanel.prototype.removeGroup = function (groupNb) {
+        if (groupNb < 0 || groupNb >= this._groups.length) {
+            return;
+        }
+        var group = this._groups[groupNb];
+        this._panel.removeControl(group.groupPanel);
+        this._groups.splice(groupNb, 1);
+        if (groupNb < this._bars.length) {
+            this._panel.removeControl(this._bars[groupNb]);
+            this._bars.splice(groupNb, 1);
+        }
+    };
+    /** Change a group header label
+     * @param label is the new group header label
+     * @param groupNb is the number of the group to relabel
+     * */
+    SelectionPanel.prototype.setHeaderName = function (label, groupNb) {
+        if (groupNb < 0 || groupNb >= this._groups.length) {
+            return;
+        }
+        var group = this._groups[groupNb];
+        group.groupPanel.children[0].text = label;
+    };
+    /** Change selector label to the one given
+     * @param label is the new selector label
+     * @param groupNb is the number of the groupcontaining the selector
+     * @param selectorNb is the number of the selector within a group to relabel
+     * */
+    SelectionPanel.prototype.relabel = function (label, groupNb, selectorNb) {
+        if (groupNb < 0 || groupNb >= this._groups.length) {
+            return;
+        }
+        var group = this._groups[groupNb];
+        if (selectorNb < 0 || selectorNb >= group.selectors.length) {
+            return;
+        }
+        group._setSelectorLabel(selectorNb, label);
+    };
+    /** For a given group position remove the selector at the given position
+     * @param groupNb is the number of the group to remove the selector from
+     * @param selectorNb is the number of the selector within the group
+     */
+    SelectionPanel.prototype.removeFromGroupSelector = function (groupNb, selectorNb) {
+        if (groupNb < 0 || groupNb >= this._groups.length) {
+            return;
+        }
+        var group = this._groups[groupNb];
+        if (selectorNb < 0 || selectorNb >= group.selectors.length) {
+            return;
+        }
+        group.removeSelector(selectorNb);
+    };
+    /** For a given group position of correct type add a checkbox button
+     * @param groupNb is the number of the group to remove the selector from
+     * @param label is the label for the selector
+     * @param func is the function called when the Selector is checked
+     * @param checked is true when Selector is checked
+     */
+    SelectionPanel.prototype.addToGroupCheckbox = function (groupNb, label, func, checked) {
+        if (func === void 0) { func = function () { }; }
+        if (checked === void 0) { checked = false; }
+        if (groupNb < 0 || groupNb >= this._groups.length) {
+            return;
+        }
+        var group = this._groups[groupNb];
+        group.addCheckbox(label, func, checked);
+    };
+    /** For a given group position of correct type add a radio button
+     * @param groupNb is the number of the group to remove the selector from
+     * @param label is the label for the selector
+     * @param func is the function called when the Selector is checked
+     * @param checked is true when Selector is checked
+     */
+    SelectionPanel.prototype.addToGroupRadio = function (groupNb, label, func, checked) {
+        if (func === void 0) { func = function () { }; }
+        if (checked === void 0) { checked = false; }
+        if (groupNb < 0 || groupNb >= this._groups.length) {
+            return;
+        }
+        var group = this._groups[groupNb];
+        group.addRadio(label, func, checked);
+    };
+    /**
+     * For a given slider group add a slider
+     * @param groupNb is the number of the group to add the slider to
+     * @param label is the label for the Slider
+     * @param func is the function called when the Slider moves
+     * @param unit is a string describing the units used, eg degrees or metres
+     * @param min is the minimum value for the Slider
+     * @param max is the maximum value for the Slider
+     * @param value is the start value for the Slider between min and max
+     * @param onVal is the function used to format the value displayed, eg radians to degrees
+     */
+    SelectionPanel.prototype.addToGroupSlider = function (groupNb, label, func, unit, min, max, value, onVal) {
+        if (func === void 0) { func = function () { }; }
+        if (unit === void 0) { unit = "Units"; }
+        if (min === void 0) { min = 0; }
+        if (max === void 0) { max = 0; }
+        if (value === void 0) { value = 0; }
+        if (onVal === void 0) { onVal = function (v) {
+            return v | 0;
+        }; }
+        if (groupNb < 0 || groupNb >= this._groups.length) {
+            return;
+        }
+        var group = this._groups[groupNb];
+        group.addSlider(label, func, unit, min, max, value, onVal);
+    };
+    return SelectionPanel;
+}(Rectangle));
+export { SelectionPanel };
 //# sourceMappingURL=selector.js.map