Added getter and setter for maxWidth and maxHeight for button groups.

lib/card/card.js

@@ -646,7 +646,7 @@ export default class Card {
     }
 
     static _calculateCenterRelativeTo(target, image) {
-        console.log("_calculateCenterRelativeTo", target, image)
+        console.log('_calculateCenterRelativeTo', target, image)
         let bbox = image.getBBox()
         let width = bbox.width
         let height = bbox.height
@@ -655,10 +655,9 @@ export default class Card {
         let r = target.getAttribute('r')
         let radius = r.endsWith('%') ? (parseFloat(r) / 100) * width : parseFloat(r)
 
-        
         let x = cx.endsWith('%') ? (parseFloat(cx) / 100) * width : cx
         let y = cy.endsWith('%') ? (parseFloat(cy) / 100) * height : cx
-        console.log({x, y, width, height , radius})
+        console.log({ x, y, width, height, radius })
         return { x, y }
     }
 
@@ -670,7 +669,7 @@ export default class Card {
      * @returns {bool} false - Returns false to prevent default click action
      * @memberof Card
      */
-    static loadHighlightPopup(event, node=null) {
+    static loadHighlightPopup(event, node = null) {
         if (this.debug) console.log('Card.loadHighlightPopup', event, node)
         if (node == null) {
             if (event.firstTarget) {
@@ -679,7 +678,7 @@ export default class Card {
                 node = event.target
             }
         }
-        
+
         let context = this.getContext(node)
         event.stopPropagation()
 
@@ -699,18 +698,17 @@ export default class Card {
                 onExpanded: () => {
                     // We assume it's always a circle. This may break, when other svg shapes are used.
 
-                    
                     let svgRoot = node.closest('svg')
                     let image = svgRoot.querySelector('image')
                     let position = Card._calculateCenterRelativeTo(node, image)
-                
+
                     /*
                     As the popup is appended directly to the card. We have to
                     transform the location from the subcard-/svg-space to the
                     card space.
                     */
 
-                   // let svgRoot = node.closest('svg')
+                    // let svgRoot = node.closest('svg')
 
                     let svgPoint = svgRoot.createSVGPoint()
                     svgPoint.x = position.x
@@ -719,7 +717,7 @@ export default class Card {
 
                     let point = svgPoint.matrixTransform(matrix)
                     let closestDiv = node.closest('div')
-                    console.log("closestDiv", closestDiv, point)
+                    console.log('closestDiv', closestDiv, point)
                     let global = Points.fromNodeToPage(closestDiv, point)
                     let local = Points.fromPageToNode(context, global)
 
@@ -731,7 +729,7 @@ export default class Card {
                     // we could load the data while the circle is animating.
                     // but for simplicity it's just done here for now.
                     // TODO: Adjust to load while animating (Problem: Unload when cancelled).
-                    console.log("loadHighlightPopup", src, position, local)
+                    console.log('loadHighlightPopup', src, position, local)
                     this._loadPopupContent(src)
                         .then(content => {
                             this._openPopup(context, src, local, content, {

lib/pixi/button.js

@@ -253,10 +253,10 @@ export default class Button extends PIXI.Container {
         })
 
         this.button.on('pointerout', this.onEnd.bind(this))
-		this.button.on('pointercancel', this.onEnd.bind(this))
-		this.button.on('pointerupoutside', this.onEnd.bind(this))
-		this.button.on('pointertap', this.onEnd.bind(this))
-		this.button.on('scroll', this.onEnd.bind(this))
+        this.button.on('pointercancel', this.onEnd.bind(this))
+        this.button.on('pointerupoutside', this.onEnd.bind(this))
+        this.button.on('pointertap', this.onEnd.bind(this))
+        this.button.on('scroll', this.onEnd.bind(this))
 
         // eslint-disable-next-line no-unused-vars
         this.button.on('pointerdown', e => {
@@ -689,12 +689,12 @@ export default class Button extends PIXI.Container {
             this.icon.tint = value
         }
     }
-	
-	onEnd(event) {
-		this.capture(event)
-		TweenLite.to([this.button, this.content], this.theme.fast, {
-			alpha: 1,
-			overwrite: 'none'
-		})
-	}
+
+    onEnd(event) {
+        this.capture(event)
+        TweenLite.to([this.button, this.content], this.theme.fast, {
+            alpha: 1,
+            overwrite: 'none'
+        })
+    }
 }

lib/pixi/buttongroup.js

@@ -371,6 +371,34 @@ export default class ButtonGroup extends PIXI.Container {
         this.buttons.forEach(it => (it.disabled = value))
     }
 
+    /**
+     * Gets or sets the maximum width of the button group for stacking. Usefull when you want to resize the available space.
+     *
+     * @member {number}
+     */
+    get maxWidth() {
+        return this.opts.maxWidth
+    }
+
+    set maxWidth(value) {
+        this.opts.maxWidth = value
+        this.layout()
+    }
+
+    /**
+     * Gets or sets the maximum height of the button group for stacking. Usefull when you want to resize the available space.
+     *
+     * @member {number}
+     */
+    get maxHeight() {
+        return this.opts.maxHeight
+    }
+
+    set maxHeight(value) {
+        this.opts.maxHeight = value
+        this.layout()
+    }
+
     /**
      * Searches all buttons of the button group and returns the maximum width of one button.
      *