Improved wrapper event handling.

css/highlight.css

@@ -4,7 +4,19 @@ circle {
     stroke-width: 8px;
 }
 
+
+
 mask circle {
     stroke-width: 0;
     fill: white;
 }
+
+.addedImage {
+    filter: invert(1);
+}
+
+.debugRect {
+    stroke: red;
+    fill: transparent;
+    stroke-width: 8px;
+}

dist/iwmlib.js

@@ -10097,14 +10097,14 @@
             }
             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
                     }
                 }
@@ -10351,7 +10351,6 @@
                     } else console.log('Element was no parent:', target);
                 }
                 this._bringToFront(target);
-
                 let svgRoot = target.closest('svg');
                 if (svgRoot == null) {
                     return
@@ -10364,9 +10363,9 @@
                     image
                 });
                 let center = Highlight$1._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%' });
 
@@ -10380,6 +10379,7 @@
         }
 
         static toggleHighlight(node) {
+            console.log("toggleHighlight", Highlight$1._isExpanded(node));
             if (Highlight$1._isExpanded(node)) {
                 Highlight$1.closeHighlight(node);
             } else {
@@ -10483,6 +10483,12 @@
                 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);
@@ -10497,7 +10503,9 @@
             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) {
@@ -10513,12 +10521,12 @@
         }
 
         static closeHighlight(target, { animation = 0.5 } = {}) {
-            console.log('Close Highlight');
+            
             Highlight$1._notExpanded(target);
 
             // eslint-disable-next-line no-unused-vars
             let [mask, maskImage] = Highlight$1._getSVGMask(target);
-
+            console.log('Close Highlight', maskImage);
             TweenLite.to([target, maskImage], animation, {
                 scale: 1
             });

lib/card/highlight.js

@@ -213,7 +213,6 @@ 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
@@ -226,9 +225,9 @@ export default class Highlight extends Object {
                 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
                 }
             }