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, {