Improved tab behavior of scatter

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);
                 });

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()
+           
         })
     }
     </script>
@@ -81,6 +81,8 @@ app.run()
 animatePolygons()
 </script>
 
+
+
 <h1>
 	Interactive Content
 </h1>
@@ -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.
 </p>
 
-<div id="main2" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;">
+<div id="contentExample" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;">
-    <!-- Note that we need to set draggable to false to avoid conflicts. The DOM elements
+  
-    must also be positioned absolutely. -->
     <div id="interactiveContent">
         <img draggable="false" style="position: absolute;" src="examples/women.jpeg" />
-        <a style="position:absolute; top: 10px; right: 10px; color:white;" href="https://www.iwm-tuebingen.de" target="_blank">A Link</a>
+        <a style="position:absolute; top: 10px; right: 10px; color:white;" href="javascript:alert('test link')">A Link</a>
-        <div onclick="alert('clicked')" style="position:absolute; top: 30px; right: 10px; color:white;">A Div with click handler</div>
+        <div onclick="alert('div clicked')" style="position:absolute; top: 30px; right: 10px; color:white;">A Div with click handler</div>
     </div>
 </div>
 
 <script class="doctest">
   
-    let app2 = new App()
+    let contentContainer = new DOMScatterContainer(contentExample)
-    let scatterContainer2 = new DOMScatterContainer(main2, { stopEvents: true})
+    new DOMScatter(interactiveContent, contentContainer, {
-    let scatter2 = new DOMScatter(interactiveContent, scatterContainer2, {
                         x: 44,
                         y: 44,
                         width: 274,
                         height: 184,
-                       
+                        clickOnTap: true,
                         throwVisibility: 88,
                         minScale: 0.5,
                         maxScale: 1.5})
-    app2.run()
+   
 </script>
 
 </body>

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)
             })