diff --git a/dist/iwmlib.js b/dist/iwmlib.js index 286c758..5a17a14 100644 --- a/dist/iwmlib.js +++ b/dist/iwmlib.js @@ -4985,10 +4985,11 @@ * @param {String} [touchAction=none] - CSS to set touch action style, needed to prevent * pointer cancel events. Use null if the * the touch action should not be set. + * @param {DOM node} debugCanvas - Shows debug infos about touches if not null */ constructor( element, - { stopEvents = 'auto', claimEvents = true, useCapture = true, touchAction = 'none' } = {} + { stopEvents = 'auto', claimEvents = true, useCapture = true, touchAction = 'none', debugCanvas = null } = {} ) { this.onCapture = null; this.element = element; @@ -5020,7 +5021,7 @@ mouseWheelElement: window }); - if (typeof debugCanvas !== 'undefined') { + if (debugCanvas !== null) { requestAnimationFrame(dt => { this.showTouches(dt, debugCanvas); }); diff --git a/lib/scatter.html b/lib/scatter.html index 833d6cb..a28907c 100644 --- a/lib/scatter.html +++ b/lib/scatter.html @@ -13,9 +13,8 @@ debugCanvas.width = main.getBoundingClientRect().width let context = debugCanvas.getContext('2d') context.clearRect(0, 0, debugCanvas.width, debugCanvas.height) - let stage = scatterContainer.polygon - stage.draw(context, { stroke: '#0000FF'}) + stage.draw(context, { stroke: "#0000FF"}) for(let scatter of scatterContainer.scatter.values()) { let polygon = scatter.polygon polygon.draw(context, { stroke: '#0000FF'}) @@ -26,6 +25,7 @@ requestAnimationFrame((dt) => { drawPolygons() animatePolygons() + }) } @@ -81,6 +81,8 @@ app.run() animatePolygons() + +

Interactive Content

@@ -89,32 +91,33 @@ Scatter objects may contain interactive HTML structures. There is one major flag to simulate click events by using taps. If the scatter detects a tap it looks for clickable elements under or nearby the event position and calls the click handler. Thus gestures can be disambiguated as moves, zooms. or taps. + +Note that on touch devices you can tap beside the object if you use clickOnTap. The allowed distance +can be configured by allowClickDistance. The default value is 44px.

-
- +
+
- A Link -
A Div with click handler
+ A Link +
A Div with click handler
diff --git a/lib/scatter.js b/lib/scatter.js index b947225..c0942cd 100644 --- a/lib/scatter.js +++ b/lib/scatter.js @@ -865,10 +865,11 @@ export class DOMScatterContainer { * @param {String} [touchAction=none] - CSS to set touch action style, needed to prevent * pointer cancel events. Use null if the * the touch action should not be set. + * @param {DOM node} debugCanvas - Shows debug infos about touches if not null */ constructor( element, - { stopEvents = 'auto', claimEvents = true, useCapture = true, touchAction = 'none' } = {} + { stopEvents = 'auto', claimEvents = true, useCapture = true, touchAction = 'none', debugCanvas = null } = {} ) { this.onCapture = null this.element = element @@ -900,7 +901,7 @@ export class DOMScatterContainer { mouseWheelElement: window }) - if (typeof debugCanvas !== 'undefined') { + if (debugCanvas !== null) { requestAnimationFrame(dt => { this.showTouches(dt, debugCanvas) })