Added flag to enable tap clicks for SVG in tested circumstances.

dist/iwmlib.js

@@ -5164,6 +5164,7 @@
                 height = null,  // required
                 resizable = false,
                 clickOnTap = false,
+                triggerSVGClicks = false,
                 allowClickDistance = 44,
                 verbose = true,
                 onResize = null,
@@ -5216,6 +5217,7 @@
             this.throwVisibility = Math.min(width, height, throwVisibility);
             this.container = container;
             this.clickOnTap = clickOnTap;
+            this.triggerSVGClicks = triggerSVGClicks;
             this.scale = startScale;
             this.rotationDegrees = this.startRotationDegrees;
             this.transformOrigin = transformOrigin;
@@ -5272,9 +5274,11 @@
                     Therefore we make an exception and let the original click event through.
                     */
                     if (event.target.ownerSVGElement) {
-                        return
+                        if (this.triggerSVGClicks) {
+                            return
+                        }
                     }
-                    if (event.isTrusted) {
+                    else if (event.isTrusted) {
                         Events.stop(event);
                     }
                 }, true);
@@ -5456,7 +5460,8 @@
                         if (nearestNode.tagName == 'svg') {
                             let handler = this.tapNodes.get(nearestNode);
                             console.log("Clicking beneath SVG: to be done", handler);
-                            // nearestNode.dispatchEvent(new Event('click'))
+                            if (this.triggerSVGClicks)
+                                nearestNode.dispatchEvent(new Event('click'));
                             return
                         }
                         console.log("nearestNode clicked");
@@ -6776,7 +6781,7 @@
 
                     // create and dispatch event
                     //--------------------
-                    const eventStart = Event.create(elem, coords, opts.eventTypes[0], eventOpts);
+                    const eventStart = Event$1.create(elem, coords, opts.eventTypes[0], eventOpts);
                     if (this.opts.debug) console.log('dispatch event', eventStart);
                     elem.dispatchEvent(eventStart);
 
@@ -6789,7 +6794,7 @@
 
                 // create and dispatch event
                 //--------------------
-                const eventComplete = Event.create(elem, coords, opts.eventTypes[1], eventOpts);
+                const eventComplete = Event$1.create(elem, coords, opts.eventTypes[1], eventOpts);
                 if (this.opts.debug) console.log('dispatch event', eventComplete);
                 elem.dispatchEvent(eventComplete);
 
@@ -6872,7 +6877,7 @@
 
                         // create and dispatch event
                         //--------------------
-                        const event = Event.create(elem, from, opts.eventTypes[0], eventOpts);
+                        const event = Event$1.create(elem, from, opts.eventTypes[0], eventOpts);
                         if (this.opts.debug) console.log('dispatch event', event);
                         elem.dispatchEvent(event);
 
@@ -6886,7 +6891,7 @@
 
                         // create and dispatch event
                         //--------------------
-                        const event = Event.create(elem, from, opts.eventTypes[1], eventOpts);
+                        const event = Event$1.create(elem, from, opts.eventTypes[1], eventOpts);
                         if (this.opts.debug) console.log('dispatch event', event);
                         elem.dispatchEvent(event);
 
@@ -6900,7 +6905,7 @@
 
                         // create and dispatch event
                         //--------------------
-                        const event = Event.create(elem, from, opts.eventTypes[2], eventOpts);
+                        const event = Event$1.create(elem, from, opts.eventTypes[2], eventOpts);
                         if (this.opts.debug) console.log('dispatch event', event);
                         elem.dispatchEvent(event);
 
@@ -7038,7 +7043,7 @@
 
                             // create and dispatch event
                             //--------------------
-                            const event = Event.create(elem, from, opts.eventTypes[0], eventOpts);
+                            const event = Event$1.create(elem, from, opts.eventTypes[0], eventOpts);
                             if (this.opts.debug) console.log('dispatch event', event);
                             elem.dispatchEvent(event);
 
@@ -7052,7 +7057,7 @@
 
                             // create and dispatch event
                             //--------------------
-                            const event = Event.create(elem, from, opts.eventTypes[1], eventOpts);
+                            const event = Event$1.create(elem, from, opts.eventTypes[1], eventOpts);
                             if (this.opts.debug) console.log('dispatch event', event);
                             elem.dispatchEvent(event);
 
@@ -7066,7 +7071,7 @@
 
                             // create and dispatch event
                             //--------------------
-                            const event = Event.create(elem, from, opts.eventTypes[2], eventOpts);
+                            const event = Event$1.create(elem, from, opts.eventTypes[2], eventOpts);
                             if (this.opts.debug) console.log('dispatch event', event);
                             elem.dispatchEvent(event);
 
@@ -7442,7 +7447,7 @@
      * @ignore
      * @class
      */
-    class Event {
+    class Event$1 {
 
         /**
          * Creates an event object.

dist/iwmlib.pixi.js

@@ -6929,6 +6929,7 @@
                 height = null,  // required
                 resizable = false,
                 clickOnTap = false,
+                triggerSVGClicks = false,
                 allowClickDistance = 44,
                 verbose = true,
                 onResize = null,
@@ -6981,6 +6982,7 @@
             this.throwVisibility = Math.min(width, height, throwVisibility);
             this.container = container;
             this.clickOnTap = clickOnTap;
+            this.triggerSVGClicks = triggerSVGClicks;
             this.scale = startScale;
             this.rotationDegrees = this.startRotationDegrees;
             this.transformOrigin = transformOrigin;
@@ -7037,9 +7039,11 @@
                     Therefore we make an exception and let the original click event through.
                     */
                     if (event.target.ownerSVGElement) {
-                        return
+                        if (this.triggerSVGClicks) {
+                            return
+                        }
                     }
-                    if (event.isTrusted) {
+                    else if (event.isTrusted) {
                         Events$1.stop(event);
                     }
                 }, true);
@@ -7221,7 +7225,8 @@
                         if (nearestNode.tagName == 'svg') {
                             let handler = this.tapNodes.get(nearestNode);
                             console.log("Clicking beneath SVG: to be done", handler);
-                            // nearestNode.dispatchEvent(new Event('click'))
+                            if (this.triggerSVGClicks)
+                                nearestNode.dispatchEvent(new Event('click'));
                             return
                         }
                         console.log("nearestNode clicked");

lib/scatter.html

@@ -80,9 +80,6 @@ for(let key of ['women', 'king']) {
 app.run()
 animatePolygons()
 </script>
-
-
-
 <h1>
 	Interactive Content
 </h1>
@@ -102,6 +99,11 @@ can be configured by allowClickDistance. The default value is 44px.
         <img draggable="false" style="position: absolute;" src="examples/women.jpeg" />
         <a style="position:absolute; top: 10px; right: 10px; color:white;" href="javascript:alert('test link')">A Link</a>
         <div onclick="alert('div clicked')" style="position:absolute; top: 30px; right: 10px; color:white;">A Div with click handler</div>
+        <svg onclick="alert('svg clicked')" style="position: absolute; right: 0px; bottom: 0px; width: 32px; height: 32px;" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid meet">
+            <circle cx="50" cy="50" r="44" stroke="white" stroke-width="8" fill="gray" />
+            <circle cx="50" cy="32" r="7" fill="white" />
+            <line x1="50" y1="46" x2="50" y2="78" stroke="white" stroke-width="12" />
+        </svg>
     </div>
 </div>
 
@@ -115,6 +117,7 @@ can be configured by allowClickDistance. The default value is 44px.
                         height: 184,
                         clickOnTap: true,
                         throwVisibility: 88,
+                        triggerSVGClicks: true,
                         minScale: 0.5,
                         maxScale: 1.5})
    

lib/scatter.js

@@ -1044,6 +1044,7 @@ export class DOMScatter extends AbstractScatter {
             height = null,  // required
             resizable = false,
             clickOnTap = false,
+            triggerSVGClicks = false,
             allowClickDistance = 44,
             verbose = true,
             onResize = null,
@@ -1096,6 +1097,7 @@ export class DOMScatter extends AbstractScatter {
         this.throwVisibility = Math.min(width, height, throwVisibility)
         this.container = container
         this.clickOnTap = clickOnTap
+        this.triggerSVGClicks = triggerSVGClicks
         this.scale = startScale
         this.rotationDegrees = this.startRotationDegrees
         this.transformOrigin = transformOrigin
@@ -1152,9 +1154,11 @@ export class DOMScatter extends AbstractScatter {
                 Therefore we make an exception and let the original click event through.
                 */
                 if (event.target.ownerSVGElement) {
-                    return
+                    if (this.triggerSVGClicks) {
+                        return
+                    }
                 }
-                if (event.isTrusted) {
+                else if (event.isTrusted) {
                     Events.stop(event)
                 }
             }, true)
@@ -1336,7 +1340,8 @@ export class DOMScatter extends AbstractScatter {
                     if (nearestNode.tagName == 'svg') {
                         let handler = this.tapNodes.get(nearestNode)
                         console.log("Clicking beneath SVG: to be done", handler)
-                        // nearestNode.dispatchEvent(new Event('click'))
+                        if (this.triggerSVGClicks)
+                            nearestNode.dispatchEvent(new Event('click'))
                         return
                     }
                     console.log("nearestNode clicked")