Fixed RadioButton auto placement

Author: KierPalin

guiComponents.ts

@@ -1165,7 +1165,7 @@ namespace microgui {
         private onClick: (obj?: Object) => void;
         private isSelected: boolean;
 
-        constructor(opts: { text: string, onClick: (obj: Object) => void, colour?: number}) {
+        constructor(opts: { text: string, onClick: (obj: Object) => void, colour?: number }) {
             this.text = opts.text;
             this.x = null;
             this.y = null;
@@ -1245,8 +1245,8 @@ namespace microgui {
 
             for (let i = 0; i < this.btns.length; i++) {
                 this.btns[i].setPosition(
-                    xBorder + this.bounds.left + this.bounds.width, 
-                    ((i + 1) * ySpacing)
+                    xBorder + this.bounds.left + this.bounds.width,
+                    this.bounds.top + this.bounds.height + ((i + 1) * ySpacing) - 3
                 );
                 this.btns[i].setSelected(false)
             }
@@ -1462,7 +1462,7 @@ namespace microgui {
                         const btn = row[j]
                         if (autoScaling && btn.xfrm.localPos.x == 0)
                             btn.xfrm.localPos.x = this.bounds.left + ((j + 1) * xSpacing) - (xBorder >> 1)
-                        else 
+                        else
                             btn.xfrm.localPos.x = this.bounds.left + btn.xfrm.localPos.x + (btn.width >> 1)
                         if (autoScaling && btn.xfrm.localPos.y == 0)
                             btn.xfrm.localPos.y = this.bounds.top + ((i + 1) * ySpacing) - (yBorder >> 1)

main.ts

@@ -1,12 +1,11 @@
-
-
 namespace microcode {
-    import App = microgui.App
     import Scene = user_interface_base.Scene
     import SceneManager = user_interface_base.SceneManager
     import Screen = user_interface_base.Screen
-    import KeyboardMenu = microgui.KeyboardMenu
     import Button = user_interface_base.Button
+
+    import App = microgui.App
+    import KeyboardMenu = microgui.KeyboardMenu
     import ButtonCollection = microgui.ButtonCollection
     import GUIComponentAlignment = microgui.GUIComponentAlignment
     import TextBox = microgui.TextBox
@@ -18,10 +17,10 @@ namespace microcode {
     import RadioButtonCollection = microgui.RadioButtonCollection
     import RadioButton = microgui.RadioButton
 
+
     control.singleSimulator();
     const app = new App();
 
-
     // Comment out the examples you aren't using:
 
 
@@ -142,7 +141,7 @@ namespace microcode {
                 new Button({ icon: "compass", ariaId: "6", onClick: () => basic.showNumber(6) }),
                 new Button({ icon: "compass", ariaId: "6", onClick: () => basic.showNumber(6) }),
                 new Button({ icon: "compass", ariaId: "6", onClick: () => basic.showNumber(6) }),
-                
+
             ],
             [ // Row 4:
                 new Button({ icon: "right_spin", ariaId: "7", onClick: () => basic.showNumber(7) }),
@@ -217,16 +216,16 @@ namespace microcode {
     // Example 6: RadioButtons
 
     // const rbc = new RadioButtonCollection({
-    //     alignment: GUIComponentAlignment.TOP,
+    //     alignment: GUIComponentAlignment.BOT,
     //     btns: [
-    //         new RadioButton({ text: "hi", onClick: () => { basic.showString("hi") } }),
-    //         new RadioButton({ text: "hiya", onClick: () => { basic.showString("hiya") } }),
-    //         new RadioButton({ text: "hello", onClick: () => { basic.showString("hello") } }),
-    //         new RadioButton({ text: "hello", onClick: () => { basic.showString("hello") } })
+    //         new RadioButton({ text: "hi", onClick: () => { basic.showString("a") } }),
+    //         new RadioButton({ text: "hiya", onClick: () => { basic.showString("b") } }),
+    //         new RadioButton({ text: "hello", onClick: () => { basic.showString("c") } }),
+    //         new RadioButton({ text: "howdy", onClick: () => { basic.showString("d") } })
     //     ],
     //     isActive: true,
     //     yScaling: 1.1,
-    //     // title: "The title",
+    //     title: "The title",
     //     colour: 3,
     // })