Improved wrapper event handling.

lib/card/highlight.js

@@ -213,22 +213,21 @@ export default class Highlight extends Object {
                 } else console.log('Element was no parent:', target)
             }
             this._bringToFront(target)
-
             let svgRoot = target.closest('svg')
             if (svgRoot == null) {
                 return
             }
             let image = svgRoot.querySelector('image')
-
+            
             // eslint-disable-next-line no-unused-vars
             let [mask, maskImage] = Highlight._getSVGMask(target, {
                 svgRoot,
                 image
             })
             let center = Highlight._calculateCenterRelativeTo(target, image)
-
+            console.log("_calculateCenterRelativeTo", center)
             TweenLite.set(maskImage, {
-                transformOrigin: `${center.x}% ${center.y}%`
+                transformOrigin: `${center.x} ${center.y}`
             })
             TweenLite.set(target, { transformOrigin: '50% 50%' })
 
@@ -242,6 +241,7 @@ export default class Highlight extends Object {
     }
 
     static toggleHighlight(node) {
+        console.log("toggleHighlight", Highlight._isExpanded(node))
         if (Highlight._isExpanded(node)) {
             Highlight.closeHighlight(node)
         } else {
@@ -345,6 +345,12 @@ export default class Highlight extends Object {
             svgGroup.insertBefore(maskImage, element) // image.nextSibling)
             TweenLite.set(maskImage, { scale: 1 })
             maskImage.style.mask = 'url(#' + maskId + ')'
+
+            let rect = document.createElementNS(svg, 'rect')
+            rect.setAttribute('width', width)
+            rect.setAttribute('height', height)
+            rect.classList.add('debugRect')
+            svgGroup.appendChild(rect)
         }
 
         svgGroup.appendChild(maskImage)
@@ -359,7 +365,9 @@ export default class Highlight extends Object {
         let height = bbox.height
         let cx = target.getAttribute('cx')
         let cy = target.getAttribute('cy')
-        return { x: (cx / width) * 100, y: (cy / height) * 100 }
+        let x = cx.endsWith('%') ? cx : round((cx / width) * 100) + '%'
+        let y = cy.endsWith('%') ? cy : round((cy / height) * 100) + '%'
+        return { x, y }
     }
 
     static _isExpanded(target) {
@@ -375,12 +383,12 @@ export default class Highlight extends Object {
     }
 
     static closeHighlight(target, { animation = 0.5 } = {}) {
-        console.log('Close Highlight')
+        
         Highlight._notExpanded(target)
 
         // eslint-disable-next-line no-unused-vars
         let [mask, maskImage] = Highlight._getSVGMask(target)
-
+        console.log('Close Highlight', maskImage)
         TweenLite.to([target, maskImage], animation, {
             scale: 1
         })

lib/card/wrapper.js

@@ -161,14 +161,14 @@ export default class CardWrapper extends Object {
         }
         if (this.tapNodes.has(node)) {
             handler = this.tapNodes.get(node)
-            handler(event)
+            handler(event, node)
             return true
         }
         for (let [selector, handler] of this.tapHandler.entries()) {
             console.log("nodeTapped", selector)
             for (let obj of this.domNode.querySelectorAll(selector)) {
                 if (node == obj) {
-                    handler(event)
+                    handler(event, node)
                     return true
                 }
             }