Fixed theming bug in button and button group.

lib/pixi/button.html

@@ -32,7 +32,7 @@
 const app = new PIXIApp({
     view: canvas,
     width: 900,
-    height: 520,
+    height: 600,
     transparent: false
 }).setup().run()
 
@@ -309,6 +309,17 @@ setInterval(() => {
     button25.layout()
 }, 1000)
 
+const button26 = new Button({
+    x: 10,
+    y: 520,
+    label: 'add',
+    type: 'checkbox',
+    strokeActive: 0x28a745,
+    textStyleActive: {
+        fill: 0x28a745
+    }
+})
+
 app.scene.addChild(button1, button2, button3, button4, button5, button6)
 app.scene.addChild(button7, button8)
 app.scene.addChild(button9, button10, button11)
@@ -316,6 +327,7 @@ app.scene.addChild(button12, button13)
 app.scene.addChild(button14, button15, button16, button17)
 app.scene.addChild(button18, button19, button20, button21)
 app.scene.addChild(button22, button23, button24, button25)
+app.scene.addChild(button26)
     </script>
 </body>
 </html>

lib/pixi/button.js

@@ -136,8 +136,8 @@ export default class Button extends PIXI.Container {
                 strokeActive: theme.strokeActive,
                 strokeActiveWidth: theme.strokeActiveWidth,
                 strokeActiveAlpha: theme.strokeActiveAlpha,
-                textStyle: theme.textStyle,
-                textStyleActive: theme.textStyleActive,
+                textStyle: {},
+                textStyleActive: {},
                 style: 'default',
                 radius: theme.radius,
                 disabled: false,
@@ -157,6 +157,9 @@ export default class Button extends PIXI.Container {
 
         this.id = this.opts.id
 
+        this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
+        this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
+
         if (typeof this.opts.icon === 'undefined' && typeof this.opts.iconActive !== 'undefined') {
             this.opts.icon = this.opts.iconActive
         } else if (typeof this.opts.icon !== 'undefined' && typeof this.opts.iconActive === 'undefined') {

lib/pixi/buttongroup.html

@@ -101,6 +101,7 @@ const buttonGroup5 = new ButtonGroup({
         {label: 'ButtonGroup'},
         {label: 'of', active: true},
         {label: 'type'},
+        {minWidth: 30, style: 'link'},
         {label: 'checkbox', active: true}
     ],
     margin: 6,
@@ -272,6 +273,8 @@ const buttons16 = []
 for (let i = 1; i < 101; i++) {
     buttons16.push({label: `Button ${i}`, stroke: Math.floor(Math.random() * 16777215), strokeWidth: 3, radius: 16})
 }
+
+buttons16.splice(6, 0, {minWidth: 50, style: 'link'})
 const buttonGroup16 = new ButtonGroup({
     x: 90,
     y: 1040,

lib/pixi/buttongroup.js

@@ -113,8 +113,8 @@ export default class ButtonGroup extends PIXI.Container {
                 strokeActive: theme.strokeActive,
                 strokeActiveWidth: theme.strokeActiveWidth,
                 strokeActiveAlpha: theme.strokeActiveAlpha,
-                textStyle: theme.textStyle,
-                textStyleActive: theme.textStyleActive,
+                textStyle: {},
+                textStyleActive: {},
                 style: 'default',
                 radius: theme.radius,
                 disabled: null,
@@ -127,6 +127,9 @@ export default class ButtonGroup extends PIXI.Container {
             opts
         )
 
+        this.opts.textStyle = Object.assign({}, theme.textStyle, this.opts.textStyle)
+        this.opts.textStyleActive = Object.assign({}, theme.textStyleActive, this.opts.textStyleActive)
+
         this.buttons = []
 
         this._disabled = null
@@ -440,8 +443,10 @@ export default class ButtonGroup extends PIXI.Container {
      * @param {*} event
      */
     onStart(event) {
-
-        if ((this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) || (this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)) {
+        if (
+            (this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) ||
+            (this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)
+        ) {
             this.__dragging = true
 
             this.capture(event)
@@ -509,7 +514,7 @@ export default class ButtonGroup extends PIXI.Container {
                     // stack!
                     const distanceToTop = this.container.y
                     const distanceToBottom = this.opts.maxHeight - this.container.y - this.__initHeight
-                    
+
                     if (distanceToTop > 0) {
                         throwProps.y.end = 0
                     } else if (distanceToBottom > 0) {
@@ -549,8 +554,10 @@ export default class ButtonGroup extends PIXI.Container {
      * @param {*} event
      */
     onScroll(event) {
-
-        if ((this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) || (this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)) {
+        if (
+            (this.opts.maxWidth != null && this.__initWidth > this.opts.maxWidth) ||
+            (this.opts.maxHeight != null && this.__initHeight > this.opts.maxHeight)
+        ) {
             this.capture(event)
 
             if (this.opts.orientation === 'horizontal') {

lib/pixi/theme.html

@@ -120,3 +120,4 @@ app.scene.addChild(switchDark, switchLight, switchRed)
 app.scene.addChild(buttonYellow)
     </script>
 </body>
+</html>