Working on stacked buttons.

lib/pixi/buttongroup.html

@@ -10,6 +10,7 @@
 
     <script src="../3rdparty/highlight/highlight.pack.js"></script>
     <script src="../../dist/iwmlib.3rdparty.js"></script>
+    <script src="../3rdparty/gsap/src/uncompressed/plugins/ThrowPropsPlugin.js"></script>
 
     <script src="../../dist/iwmlib.js"></script>
     <script src="../../dist/iwmlib.pixi.js"></script>
@@ -29,10 +30,10 @@
 const app = new PIXIApp({
     view: canvas,
     width: 1000,
-    height: 1000
+    height: 1400
 }).setup().run()
 
-let buttonGroup1 = new ButtonGroup({
+const buttonGroup1 = new ButtonGroup({
     x: 10,
     y: 10,
     buttons: [
@@ -43,7 +44,7 @@ let buttonGroup1 = new ButtonGroup({
     ]
 })
 
-let buttonGroup2 = new ButtonGroup({
+const buttonGroup2 = new ButtonGroup({
     x: 260,
     y: 10,
     buttons: [
@@ -60,7 +61,7 @@ let buttonGroup2 = new ButtonGroup({
     strokeWidth: 3
 })
 
-let buttonGroup3 = new ButtonGroup({
+const buttonGroup3 = new ButtonGroup({
     x: 610,
     y: 10,
     buttons: [
@@ -74,7 +75,7 @@ let buttonGroup3 = new ButtonGroup({
     strokeWidth: 1
 })
 
-let buttonGroup4 = new ButtonGroup({
+const buttonGroup4 = new ButtonGroup({
     x: 10,
     y: 90,
     buttons: [
@@ -93,7 +94,7 @@ let buttonGroup4 = new ButtonGroup({
     strokeWidth: 1
 })
 
-let buttonGroup5 = new ButtonGroup({
+const buttonGroup5 = new ButtonGroup({
     x: 10,
     y: 180,
     buttons: [
@@ -106,7 +107,7 @@ let buttonGroup5 = new ButtonGroup({
     type: 'checkbox'
 })
 
-let buttonGroup6 = new ButtonGroup({
+const buttonGroup6 = new ButtonGroup({
     x: 450,
     y: 180,
     buttons: [
@@ -119,7 +120,7 @@ let buttonGroup6 = new ButtonGroup({
     type: 'radio'
 })
 
-let buttonGroup7 = new ButtonGroup({
+const buttonGroup7 = new ButtonGroup({
     x: 10,
     y: 250,
     theme: 'light',
@@ -134,7 +135,7 @@ let buttonGroup7 = new ButtonGroup({
     style: 'link'
 })
 
-let buttonGroup8 = new ButtonGroup({
+const buttonGroup8 = new ButtonGroup({
     x: 610,
     y: 250,
     buttons: [
@@ -147,7 +148,7 @@ let buttonGroup8 = new ButtonGroup({
     margin: 0
 })
 
-let buttonGroup9 = new ButtonGroup({
+const buttonGroup9 = new ButtonGroup({
     x: 10,
     y: 320,
     buttons: [
@@ -160,7 +161,7 @@ let buttonGroup9 = new ButtonGroup({
     minWidth: 70
 })
 
-let buttonGroup10 = new ButtonGroup({
+const buttonGroup10 = new ButtonGroup({
     x: 100,
     y: 320,
     buttons: [
@@ -176,7 +177,7 @@ let buttonGroup10 = new ButtonGroup({
     margin: 0
 })
 
-let buttonGroup11 = new ButtonGroup({
+const buttonGroup11 = new ButtonGroup({
     x: 250,
     y: 320,
     buttons: [
@@ -197,7 +198,7 @@ let buttonGroup11 = new ButtonGroup({
     type: 'checkbox'
 })
 
-let buttonGroup12 = new ButtonGroup({
+const buttonGroup12 = new ButtonGroup({
     x: 400,
     y: 320,
     buttons: [
@@ -212,7 +213,7 @@ let buttonGroup12 = new ButtonGroup({
     type: 'radio'
 })
 
-let buttonGroup13 = new ButtonGroup({
+const buttonGroup13 = new ButtonGroup({
     x: 520,
     y: 320,
     buttons: [
@@ -231,10 +232,49 @@ let buttonGroup13 = new ButtonGroup({
     minHeight: 100
 })
 
+const buttonGroup14 = new ButtonGroup({
+    x: 10,
+    y: 960,
+    buttons: [
+        {label: 'Stacked button 1', action: event => console.log('clicked 1')},
+        {label: 'Stacked button 2', action: event => console.log('clicked 2')},
+        {label: 'Stacked button 3', action: event => console.log('clicked 3')},
+        {label: 'Stacked button 4', action: event => console.log('clicked 4')},
+        {label: 'Stacked button 5', action: event => console.log('clicked 5')},
+        {label: 'Stacked button 6', action: event => console.log('clicked 6')},
+        {label: 'Stacked button 7', action: event => console.log('clicked 7')},
+        {label: 'Stacked button 8', action: event => console.log('clicked 8')}
+    ],
+    stacked: true,
+    maxWidth: 620,
+    app
+})
+
+const buttonGroup15 = new ButtonGroup({
+    x: 10,
+    y: 1040,
+    buttons: [
+        {icon: 'battery_charging_20', type: 'checkbox', iconColorActive: 0xd43e36},
+        {icon: 'battery_charging_30', type: 'checkbox', iconColorActive: 0xf99927},
+        {icon: 'battery_charging_50', type: 'checkbox', iconColorActive: 0xefc201},
+        {icon: 'battery_charging_60', type: 'checkbox', iconColorActive: 0x839b00},
+        {icon: 'battery_charging_80', type: 'checkbox', iconColorActive: 0x4ba8af},
+        {icon: 'battery_charging_90', type: 'checkbox', iconColorActive: 0x5386bc},
+        {icon: 'battery_charging_full', type: 'checkbox', iconColorActive: 0x9c71b7}
+    ],
+    orientation: 'vertical',
+    margin: 0,
+    stacked: true,
+    maxHeight: 200,
+    app
+})
+
 app.scene.addChild(buttonGroup1, buttonGroup2, buttonGroup3)
 app.scene.addChild(buttonGroup4)
 app.scene.addChild(buttonGroup5, buttonGroup6)
 app.scene.addChild(buttonGroup7, buttonGroup8)
 app.scene.addChild(buttonGroup9, buttonGroup10, buttonGroup11, buttonGroup12, buttonGroup13)
+app.scene.addChild(buttonGroup14, buttonGroup15)
     </script>
 </body>
+</html>