diff --git a/dist/iwmlib.js b/dist/iwmlib.js index 93eb439..834d2f2 100644 --- a/dist/iwmlib.js +++ b/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. diff --git a/dist/iwmlib.pixi.js b/dist/iwmlib.pixi.js index 21abf3f..ffee0c8 100644 --- a/dist/iwmlib.pixi.js +++ b/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"); diff --git a/lib/scatter.html b/lib/scatter.html index a28907c..474158d 100644 --- a/lib/scatter.html +++ b/lib/scatter.html @@ -80,9 +80,6 @@ for(let key of ['women', 'king']) { app.run() animatePolygons() - - -

Interactive Content

@@ -102,6 +99,11 @@ can be configured by allowClickDistance. The default value is 44px. A Link
A Div with click handler
+ + + + + @@ -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}) diff --git a/lib/scatter.js b/lib/scatter.js index 268dd5f..86c31e3 100644 --- a/lib/scatter.js +++ b/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")