Working on stacked buttons.

lib/card/highlight.js

@@ -60,10 +60,7 @@ export default class Highlight extends Object {
             if (circle.classList.length == 0) {
                 circle.removeAttribute('class')
             }
-            if (
-                circle.hasAttribute('id') &&
-                circle.getAttribute('id').startsWith('@@')
-            ) {
+            if (circle.hasAttribute('id') && circle.getAttribute('id').startsWith('@@')) {
                 circle.removeAttribute('id')
             }
             circle.removeAttribute('data-svg-origin')
@@ -78,10 +75,7 @@ export default class Highlight extends Object {
         }
     }
 
-    static expand(
-        obj,
-        { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}
-    ) {
+    static expand(obj, { scale = 2, duration = 3, stroke = 2, onComplete = null } = {}) {
         if (obj == null) return
         //console.log("expand")
         obj.classList.add('zooming')
@@ -166,9 +160,7 @@ export default class Highlight extends Object {
             this.shrink(maskImage, { stroke })
             return
         }
-        let circles = Array.from(circleGroup.children).filter(
-            e => e.tagName == 'circle'
-        )
+        let circles = Array.from(circleGroup.children).filter(e => e.tagName == 'circle')
         for (let c of circles) {
             //console.log("shrinking all circles")
             this.shrink(c, { stroke })
@@ -188,10 +180,7 @@ export default class Highlight extends Object {
         return false
     }
 
-    static openHighlight(
-        target,
-        { animation = 0.5, scale = 2, onExpanded = null } = {}
-    ) {
+    static openHighlight(target, { animation = 0.5, scale = 2, onExpanded = null } = {}) {
         if (Highlight._isExpanded(target)) {
             console.log('Target is already expanded!')
             return
@@ -205,10 +194,7 @@ export default class Highlight extends Object {
                     let image = parent.querySelector(imageId)
                     if (image) {
                         this._bringToFront(image)
-                    } else
-                        console.error(
-                            'Could not find corresponding image element.'
-                        )
+                    } else console.error('Could not find corresponding image element.')
                 } else console.log('Element was no parent:', target)
             }
             this._bringToFront(target)
@@ -253,12 +239,7 @@ export default class Highlight extends Object {
         if (target && parent) {
             parent.removeChild(target)
             parent.appendChild(target)
-        } else
-            console.error(
-                'Could not bring to front. Either no target or no parent.',
-                target,
-                parent
-            )
+        } else console.error('Could not bring to front. Either no target or no parent.', target, parent)
     }
 
     static _getSVGMask(circle, { svgRoot = null, image = null } = {}) {
@@ -293,10 +274,7 @@ export default class Highlight extends Object {
      * @returns
      * @memberof Highlight
      */
-    static _createSVGMask(
-        element,
-        { svgRoot = null, image = null, id = null } = {}
-    ) {
+    static _createSVGMask(element, { svgRoot = null, image = null, id = null } = {}) {
         // We can fetch these values here, but it's more efficient to
         // simply pass them in, as it's likely they were already retrieved beforehand.
         if (svgRoot == null) svgRoot = element.closest('svg')