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
*/ export class SelectorGroup { private _groupPanel = new StackPanel ( ) ; private _selectors : StackPanel [ ] = new Array ( ) ; private _groupHeader : TextBlock ; param name constructor ( /** name of SelectorGroup */ public name ) { this . _groupPanel . verticalAlignment = Control . VERTICAL_ALIGNMENT_TOP ; this . _groupPanel . horizontalAlignment = Control . HORIZONTAL_ALIGNMENT_LEFT ; this . _groupHeader = this . _addGroupHeader ( name ) ; } /** Gets the groupPanel of the SelectorGroup  */ public get groupPanel ( ) : StackPanel { return this . _groupPanel ; } /** Gets the selectors array */ public get selectors ( ) : StackPanel [ ] { return this . _selectors ; } /** Gets and sets the group header */ public get header ( ) { return this . _groupHeader . text ; } public set header ( label ) { if ( this . _groupHeader . text === "label" ) { return ; } this . _groupHeader . text = label ; } hidden private _addGroupHeader ( 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 public _getSelector ( selectorNb ) { if ( selectorNb < 0 || selectorNb >= this . _selectors . length ) { return ; } return this . _selectors [ selectorNb ] ; } param selectorNb public removeSelector ( selectorNb ) { if ( selectorNb < 0 || selectorNb >= this . _selectors . length ) { return ; } this . _groupPanel . removeControl ( this . _selectors [ selectorNb ] ) ; this . _selectors . splice ( selectorNb , 1 ) ; } } /** Class used to create a CheckboxGroup
 * which contains groups of checkbox buttons
*/ export class CheckboxGroup extends SelectorGroup { param text param func param checked public addCheckbox ( text , func = ( s ) => { } , 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 = ( < SelectionPanel > this . groupPanel . parent . parent ) . buttonColor ; button . background = ( < SelectionPanel > this . groupPanel . parent . parent ) . buttonBackground ; } } hidden public _setSelectorLabel ( selectorNb , label ) { ( < TextBlock > this . selectors [ selectorNb ] . children [ 1 ] ) . text = label ; } hidden public _setSelectorLabelColor ( selectorNb , color ) { ( < TextBlock > this . selectors [ selectorNb ] . children [ 1 ] ) . color = color ; } hidden public _setSelectorButtonColor ( selectorNb , color ) { this . selectors [ selectorNb ] . children [ 0 ] . color = color ; } hidden public _setSelectorButtonBackground ( selectorNb , color ) { ( < Checkbox > this . selectors [ selectorNb ] . children [ 0 ] ) . background = color ; } } /** Class used to create a RadioGroup
 * which contains groups of radio buttons
*/ export class RadioGroup extends SelectorGroup { private _selectNb = 0 ; param label param func param checked public addRadio ( label , func = ( n ) => { } , 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 = ( < SelectionPanel > this . groupPanel . parent . parent ) . buttonColor ; button . background = ( < SelectionPanel > this . groupPanel . parent . parent ) . buttonBackground ; } } hidden public _setSelectorLabel ( selectorNb , label ) { ( < TextBlock > this . selectors [ selectorNb ] . children [ 1 ] ) . text = label ; } hidden public _setSelectorLabelColor ( selectorNb , color ) { ( < TextBlock > this . selectors [ selectorNb ] . children [ 1 ] ) . color = color ; } hidden public _setSelectorButtonColor ( selectorNb , color ) { this . selectors [ selectorNb ] . children [ 0 ] . color = color ; } hidden public _setSelectorButtonBackground ( selectorNb , color ) { ( < RadioButton > this . selectors [ selectorNb ] . children [ 0 ] ) . background = color ; } } /** Class used to create a SliderGroup
 * which contains groups of slider buttons
*/ export class SliderGroup extends SelectorGroup { param label param func param unit param min param max param value param onValueChange public addSlider ( label , func = ( v ) => { } , unit = "Units" , min = 0 , max = 0 , value = 0 , onValueChange = ( 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 ) { ( < TextBlock > 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 = ( < SelectionPanel > this . groupPanel . parent . parent ) . buttonColor ; button . background = ( < SelectionPanel > this . groupPanel . parent . parent ) . buttonBackground ; } } hidden public _setSelectorLabel ( selectorNb , label ) { this . selectors [ selectorNb ] . children [ 0 ] . name = label ; ( < TextBlock > this . selectors [ selectorNb ] . children [ 0 ] ) . text = label + ": " + ( < Slider > this . selectors [ selectorNb ] . children [ 1 ] ) . value + " " + this . selectors [ selectorNb ] . children [ 1 ] . name ; } hidden public _setSelectorLabelColor ( selectorNb , color ) { ( < TextBlock > this . selectors [ selectorNb ] . children [ 0 ] ) . color = color ; } hidden public _setSelectorButtonColor ( selectorNb , color ) { this . selectors [ selectorNb ] . children [ 1 ] . color = color ; } hidden public _setSelectorButtonBackground ( selectorNb , color ) { ( < Slider > this . selectors [ selectorNb ] . children [ 1 ] ) . background = color ; } } see https export class SelectionPanel extends Rectangle { private _panel : StackPanel ; private _buttonColor : string = "#364249" ; private _buttonBackground : string = "#CCCCCC" ; private _headerColor : string = "black" ; private _barColor : string = "white" ; private _barHeight : string = "2px" ; private _spacerHeight : string = "20px" ; private _labelColor : string ; private _groups : SelectorGroup [ ] ; private _bars : any [ ] = new Array ( ) ; param name param groups constructor ( /** name of SelectionPanel */ public name , /** an array of SelectionGroups */ public groups = [ ] ) { super ( name ) ; 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 ) ; } protected _getTypeName ( ) { return "SelectionPanel" ; } /** Gets the (stack) panel of the SelectionPanel  */ public get panel ( ) : StackPanel { return this . _panel ; } /** Gets or sets the headerColor */ public get headerColor ( ) : string { return this . _headerColor ; } public set headerColor ( color ) { if ( this . _headerColor === color ) { return ; } this . _headerColor = color ; this . _setHeaderColor ( ) ; } private _setHeaderColor ( ) { for ( var i = 0 ; i < this . _groups . length ; i ++ ) { this . _groups [ i ] . groupPanel . children [ 0 ] . color = this . _headerColor ; } } /** Gets or sets the button color */ public get buttonColor ( ) : string { return this . _buttonColor ; } public set buttonColor ( color ) { if ( this . _buttonColor === color ) { return ; } this . _buttonColor = color ; this . _setbuttonColor ( ) ; } private _setbuttonColor ( ) { for ( var i = 0 ; i < this . _groups . length ; i ++ ) { for ( var j = 0 ; j < this . _groups [ i ] . selectors . length ; j ++ ) { ( < CheckboxGroup | RadioGroup | SliderGroup > this . _groups [ i ] ) . _setSelectorButtonColor ( j , this . _buttonColor ) ; } } } /** Gets or sets the label color */ public get labelColor ( ) : string { return this . _labelColor ; } public set labelColor ( color ) { if ( this . _labelColor === color ) { return ; } this . _labelColor = color ; this . _setLabelColor ( ) ; } private _setLabelColor ( ) { for ( var i = 0 ; i < this . _groups . length ; i ++ ) { for ( var j = 0 ; j < this . _groups [ i ] . selectors . length ; j ++ ) { ( < CheckboxGroup | RadioGroup | SliderGroup > this . _groups [ i ] ) . _setSelectorLabelColor ( j , this . _labelColor ) ; } } } /** Gets or sets the button background */ public get buttonBackground ( ) : string { return this . _buttonBackground ; } public set buttonBackground ( color ) { if ( this . _buttonBackground === color ) { return ; } this . _buttonBackground = color ; this . _setButtonBackground ( ) ; } private _setButtonBackground ( ) { for ( var i = 0 ; i < this . _groups . length ; i ++ ) { for ( var j = 0 ; j < this . _groups [ i ] . selectors . length ; j ++ ) { ( < CheckboxGroup | RadioGroup | SliderGroup > this . _groups [ i ] ) . _setSelectorButtonBackground ( j , this . _buttonBackground ) ; } } } /** Gets or sets the color of separator bar */ public get barColor ( ) : string { return this . _barColor ; } public set barColor ( color ) { if ( this . _barColor === color ) { return ; } this . _barColor = color ; this . _setBarColor ( ) ; } private _setBarColor ( ) { for ( var i = 0 ; i < this . _bars . length ; i ++ ) { this . _bars [ i ] . children [ 0 ] . background = this . _barColor ; } } /** Gets or sets the height of separator bar */ public get barHeight ( ) : string { return this . _barHeight ; } public set barHeight ( value ) { if ( this . _barHeight === value ) { return ; } this . _barHeight = value ; this . _setBarHeight ( ) ; } private _setBarHeight ( ) { for ( var i = 0 ; i < this . _bars . length ; i ++ ) { this . _bars [ i ] . children [ 0 ] . height = this . _barHeight ; } } /** Gets or sets the height of spacers*/ public get spacerHeight ( ) : string { return this . _spacerHeight ; } public set spacerHeight ( value ) { if ( this . _spacerHeight === value ) { return ; } this . _spacerHeight = value ; this . _setSpacerHeight ( ) ; } private _setSpacerHeight ( ) { for ( var i = 0 ; i < this . _bars . length ; i ++ ) { this . _bars [ i ] . height = this . _spacerHeight ; } } /** Adds a bar between groups */ private _addSpacer ( ) { 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 ) ; } param group public 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 ++ ) { ( < CheckboxGroup | RadioGroup | SliderGroup > group ) . _setSelectorButtonColor ( j , this . _buttonColor ) ; ( < CheckboxGroup | RadioGroup | SliderGroup > group ) . _setSelectorButtonBackground ( j , this . _buttonBackground ) ; } } param groupNb public removeGroup ( 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 ) ; } } param label param groupNb public setHeaderName ( label , groupNb ) { if ( groupNb < 0 || groupNb >= this . _groups . length ) { return ; } var group = this . _groups [ groupNb ] ; ( < TextBlock > group . groupPanel . children [ 0 ] ) . text = label ; } param label param groupNb param selectorNb public relabel ( label , groupNb , selectorNb ) { if ( groupNb < 0 || groupNb >= this . _groups . length ) { return ; } var group = this . _groups [ groupNb ] ; if ( selectorNb < 0 || selectorNb >= group . selectors . length ) { return ; } ( < CheckboxGroup | RadioGroup | SliderGroup > group ) . _setSelectorLabel ( selectorNb , label ) ; } param groupNb param selectorNb public removeFromGroupSelector ( 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 ) ; } param groupNb param label param func param checked public addToGroupCheckbox ( groupNb , label , func = ( ) => { } , checked = false ) { if ( groupNb < 0 || groupNb >= this . _groups . length ) { return ; } var group = this . _groups [ groupNb ] ; ( < CheckboxGroup > group ) . addCheckbox ( label , func , checked ) ; } param groupNb param label param func param checked public addToGroupRadio ( groupNb , label , func = ( ) => { } , checked = false ) { if ( groupNb < 0 || groupNb >= this . _groups . length ) { return ; } var group = this . _groups [ groupNb ] ; ( < RadioGroup > group ) . addRadio ( label , func , checked ) ; } param groupNb param label param func param unit param min param max param value param onVal public 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 ] ; ( < SliderGroup > group ) . addSlider ( label , func , unit , min , max , value , onVal ) ; } }