@babylonjs/gui 5.21.0 → 5.22.0

package/2D/controls/selector.js

@@ -1,4 +1,3 @@
-import { __extends } from "tslib";
 import { Rectangle } from "./rectangle.js";
 import { StackPanel } from "./stackPanel.js";
 import { Control } from "./control.js";
@@ -10,12 +9,12 @@ import { Container } from "./container.js";
 /** Class used to create a RadioGroup
  * which contains groups of radio buttons
  */
-var SelectorGroup = /** @class */ (function () {
+export class SelectorGroup {
     /**
      * Creates a new SelectorGroup
      * @param name of group, used as a group heading
      */
-    function SelectorGroup(
+    constructor(
     /** name of SelectorGroup */
     name) {
         this.name = name;
@@ -25,42 +24,30 @@ var SelectorGroup = /** @class */ (function () {
         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
-    });
+    /** Gets the groupPanel of the SelectorGroup  */
+    get groupPanel() {
+        return this._groupPanel;
+    }
+    /** Gets the selectors array */
+    get selectors() {
+        return this._selectors;
+    }
+    /** Gets and sets the group header */
+    get header() {
+        return this._groupHeader.text;
+    }
+    set header(label) {
+        if (this._groupHeader.text === "label") {
+            return;
+        }
+        this._groupHeader.text = label;
+    }
     /**
      * @param text
      * @hidden
      */
-    SelectorGroup.prototype._addGroupHeader = function (text) {
-        var groupHeading = new TextBlock("groupHead", text);
+    _addGroupHeader(text) {
+        const groupHeading = new TextBlock("groupHead", text);
         groupHeading.width = 0.9;
         groupHeading.height = "30px";
         groupHeading.textWrapping = true;
@@ -70,49 +57,41 @@ var SelectorGroup = /** @class */ (function () {
         groupHeading.left = "2px";
         this._groupPanel.addControl(groupHeading);
         return groupHeading;
-    };
+    }
     /**
      * @param selectorNb
      * @hidden
      */
-    SelectorGroup.prototype._getSelector = function (selectorNb) {
+    _getSelector(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) {
+    removeSelector(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;
-    }
+export class CheckboxGroup extends SelectorGroup {
     /** 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; }
+    addCheckbox(text, func = (s) => { }, checked = false) {
         checked = checked || false;
-        var button = new Checkbox();
+        const button = new Checkbox();
         button.width = "20px";
         button.height = "20px";
         button.color = "#364249";
@@ -121,7 +100,7 @@ var CheckboxGroup = /** @class */ (function (_super) {
         button.onIsCheckedChangedObservable.add(function (state) {
             func(state);
         });
-        var _selector = Control.AddHeader(button, text, "200px", { isHorizontal: true, controlFirst: true });
+        const _selector = Control.AddHeader(button, text, "200px", { isHorizontal: true, controlFirst: true });
         _selector.height = "30px";
         _selector.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
         _selector.left = "4px";
@@ -132,51 +111,47 @@ var CheckboxGroup = /** @class */ (function (_super) {
             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) {
+    _setSelectorLabel(selectorNb, label) {
         this.selectors[selectorNb].children[1].text = label;
-    };
+    }
     /**
      * @param selectorNb
      * @param color
      * @hidden
      */
-    CheckboxGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
+    _setSelectorLabelColor(selectorNb, color) {
         this.selectors[selectorNb].children[1].color = color;
-    };
+    }
     /**
      * @param selectorNb
      * @param color
      * @hidden
      */
-    CheckboxGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
+    _setSelectorButtonColor(selectorNb, color) {
         this.selectors[selectorNb].children[0].color = color;
-    };
+    }
     /**
      * @param selectorNb
      * @param color
      * @hidden
      */
-    CheckboxGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
+    _setSelectorButtonBackground(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;
+export class RadioGroup extends SelectorGroup {
+    constructor() {
+        super(...arguments);
+        this._selectNb = 0;
     }
     /** Adds a radio button as a control
      * @param label is the label for the selector
@@ -184,11 +159,9 @@ var RadioGroup = /** @class */ (function (_super) {
      * @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();
+    addRadio(label, func = (n) => { }, checked = false) {
+        const nb = this._selectNb++;
+        const button = new RadioButton();
         button.name = label;
         button.width = "20px";
         button.height = "20px";
@@ -201,7 +174,7 @@ var RadioGroup = /** @class */ (function (_super) {
                 func(nb);
             }
         });
-        var _selector = Control.AddHeader(button, label, "200px", { isHorizontal: true, controlFirst: true });
+        const _selector = Control.AddHeader(button, label, "200px", { isHorizontal: true, controlFirst: true });
         _selector.height = "30px";
         _selector.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
         _selector.left = "4px";
@@ -212,50 +185,44 @@ var RadioGroup = /** @class */ (function (_super) {
             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) {
+    _setSelectorLabel(selectorNb, label) {
         this.selectors[selectorNb].children[1].text = label;
-    };
+    }
     /**
      * @param selectorNb
      * @param color
      * @hidden
      */
-    RadioGroup.prototype._setSelectorLabelColor = function (selectorNb, color) {
+    _setSelectorLabelColor(selectorNb, color) {
         this.selectors[selectorNb].children[1].color = color;
-    };
+    }
     /**
      * @param selectorNb
      * @param color
      * @hidden
      */
-    RadioGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
+    _setSelectorButtonColor(selectorNb, color) {
         this.selectors[selectorNb].children[0].color = color;
-    };
+    }
     /**
      * @param selectorNb
      * @param color
      * @hidden
      */
-    RadioGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
+    _setSelectorButtonBackground(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;
-    }
+export class SliderGroup extends SelectorGroup {
     /**
      * Adds a slider to the SelectorGroup
      * @param label is the label for the SliderBar
@@ -266,18 +233,12 @@ var SliderGroup = /** @class */ (function (_super) {
      * @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, 
+    addSlider(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();
+    func = (v) => { }, unit = "Units", min = 0, max = 0, value = 0, onValueChange = (v) => {
+        return v | 0;
+    }) {
+        const button = new Slider();
         button.name = unit;
         button.value = value;
         button.minimum = min;
@@ -294,7 +255,7 @@ var SliderGroup = /** @class */ (function (_super) {
             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 });
+        const _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";
@@ -305,252 +266,215 @@ var SliderGroup = /** @class */ (function (_super) {
             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) {
+    _setSelectorLabel(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) {
+    _setSelectorLabelColor(selectorNb, color) {
         this.selectors[selectorNb].children[0].color = color;
-    };
+    }
     /**
      * @param selectorNb
      * @param color
      * @hidden
      */
-    SliderGroup.prototype._setSelectorButtonColor = function (selectorNb, color) {
+    _setSelectorButtonColor(selectorNb, color) {
         this.selectors[selectorNb].children[1].color = color;
-    };
+    }
     /**
      * @param selectorNb
      * @param color
      * @hidden
      */
-    SliderGroup.prototype._setSelectorButtonBackground = function (selectorNb, color) {
+    _setSelectorButtonBackground(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);
+export class SelectionPanel extends Rectangle {
     /**
      * Creates a new SelectionPanel
      * @param name of SelectionPanel
      * @param groups is an array of SelectionGroups
      */
-    function SelectionPanel(
+    constructor(
     /** 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;
+    groups = []) {
+        super(name);
+        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();
+            for (let i = 0; i < groups.length - 1; i++) {
+                this._panel.addControl(groups[i].groupPanel);
+                this._addSpacer();
             }
-            _this._panel.addControl(groups[groups.length - 1].groupPanel);
+            this._panel.addControl(groups[groups.length - 1].groupPanel);
         }
-        _this.addControl(_this._panel);
-        return _this;
+        this.addControl(this._panel);
     }
-    SelectionPanel.prototype._getTypeName = function () {
+    _getTypeName() {
         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++) {
+    }
+    /** Gets the (stack) panel of the SelectionPanel  */
+    get panel() {
+        return this._panel;
+    }
+    /** Gets or sets the headerColor */
+    get headerColor() {
+        return this._headerColor;
+    }
+    set headerColor(color) {
+        if (this._headerColor === color) {
+            return;
+        }
+        this._headerColor = color;
+        this._setHeaderColor();
+    }
+    _setHeaderColor() {
+        for (let 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++) {
+    }
+    /** Gets or sets the button color */
+    get buttonColor() {
+        return this._buttonColor;
+    }
+    set buttonColor(color) {
+        if (this._buttonColor === color) {
+            return;
+        }
+        this._buttonColor = color;
+        this._setbuttonColor();
+    }
+    _setbuttonColor() {
+        for (let i = 0; i < this._groups.length; i++) {
+            for (let 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++) {
+    }
+    /** Gets or sets the label color */
+    get labelColor() {
+        return this._labelColor;
+    }
+    set labelColor(color) {
+        if (this._labelColor === color) {
+            return;
+        }
+        this._labelColor = color;
+        this._setLabelColor();
+    }
+    _setLabelColor() {
+        for (let i = 0; i < this._groups.length; i++) {
+            for (let 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++) {
+    }
+    /** Gets or sets the button background */
+    get buttonBackground() {
+        return this._buttonBackground;
+    }
+    set buttonBackground(color) {
+        if (this._buttonBackground === color) {
+            return;
+        }
+        this._buttonBackground = color;
+        this._setButtonBackground();
+    }
+    _setButtonBackground() {
+        for (let i = 0; i < this._groups.length; i++) {
+            for (let 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++) {
+    }
+    /** Gets or sets the color of separator bar */
+    get barColor() {
+        return this._barColor;
+    }
+    set barColor(color) {
+        if (this._barColor === color) {
+            return;
+        }
+        this._barColor = color;
+        this._setBarColor();
+    }
+    _setBarColor() {
+        for (let 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++) {
+    }
+    /** Gets or sets the height of separator bar */
+    get barHeight() {
+        return this._barHeight;
+    }
+    set barHeight(value) {
+        if (this._barHeight === value) {
+            return;
+        }
+        this._barHeight = value;
+        this._setBarHeight();
+    }
+    _setBarHeight() {
+        for (let 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++) {
+    }
+    /** Gets or sets the height of spacers*/
+    get spacerHeight() {
+        return this._spacerHeight;
+    }
+    set spacerHeight(value) {
+        if (this._spacerHeight === value) {
+            return;
+        }
+        this._spacerHeight = value;
+        this._setSpacerHeight();
+    }
+    _setSpacerHeight() {
+        for (let 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();
+    _addSpacer() {
+        const separator = new Container();
         separator.width = 1;
         separator.height = this._spacerHeight;
         separator.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
-        var bar = new Rectangle();
+        const bar = new Rectangle();
         bar.width = 1;
         bar.height = this._barHeight;
         bar.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;
@@ -560,107 +484,103 @@ var SelectionPanel = /** @class */ (function (_super) {
         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) {
+    addGroup(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++) {
+        for (let 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) {
+    removeGroup(groupNb) {
         if (groupNb < 0 || groupNb >= this._groups.length) {
             return;
         }
-        var group = this._groups[groupNb];
+        const 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) {
+    setHeaderName(label, groupNb) {
         if (groupNb < 0 || groupNb >= this._groups.length) {
             return;
         }
-        var group = this._groups[groupNb];
+        const 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) {
+    relabel(label, groupNb, selectorNb) {
         if (groupNb < 0 || groupNb >= this._groups.length) {
             return;
         }
-        var group = this._groups[groupNb];
+        const 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) {
+    removeFromGroupSelector(groupNb, selectorNb) {
         if (groupNb < 0 || groupNb >= this._groups.length) {
             return;
         }
-        var group = this._groups[groupNb];
+        const 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; }
+    addToGroupCheckbox(groupNb, label, func = () => { }, checked = false) {
         if (groupNb < 0 || groupNb >= this._groups.length) {
             return;
         }
-        var group = this._groups[groupNb];
+        const 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; }
+    addToGroupRadio(groupNb, label, func = () => { }, checked = false) {
         if (groupNb < 0 || groupNb >= this._groups.length) {
             return;
         }
-        var group = this._groups[groupNb];
+        const 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
@@ -672,22 +592,14 @@ var SelectionPanel = /** @class */ (function (_super) {
      * @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;
-        }; }
+    addToGroupSlider(groupNb, label, func = () => { }, unit = "Units", min = 0, max = 0, value = 0, onVal = (v) => {
+        return v | 0;
+    }) {
         if (groupNb < 0 || groupNb >= this._groups.length) {
             return;
         }
-        var group = this._groups[groupNb];
+        const group = this._groups[groupNb];
         group.addSlider(label, func, unit, min, max, value, onVal);
-    };
-    return SelectionPanel;
-}(Rectangle));
-export { SelectionPanel };
+    }
+}
 //# sourceMappingURL=selector.js.map