Working on tap behavior of scatter and flippables.

lib/scatter.html

@@ -15,10 +15,10 @@
         context.clearRect(0, 0, debugCanvas.width, debugCanvas.height)
 
         let stage = scatterContainer.polygon
-        stage.draw(context, { stroke: '#FF0000'})
+        stage.draw(context, { stroke: '#0000FF'})
         for(let scatter of scatterContainer.scatter.values()) {
             let polygon = scatter.polygon
-            polygon.draw(context, { stroke: '#FF0000'})
+            polygon.draw(context, { stroke: '#0000FF'})
         }
     }
 
@@ -48,7 +48,7 @@ we describe the more basic DOM scatter.
     <img id="women" draggable="false" style="position: absolute;" src="examples/women.jpeg" />
     <img id="king" draggable="false"  style="position: absolute;" src="examples/king.jpeg" />
 
-    <canvas id="debugCanvas" height="280" style="z-index: 100000; pointer-events: none; position: absolute; border: 1px solid red;">
+    <canvas id="debugCanvas" height="280" style="z-index: 100000; pointer-events: none; position: absolute; border: 1px solid blue;">
         Canvas not supported.
     </canvas>
 </div>
@@ -81,4 +81,39 @@ app.run()
 animatePolygons()
 </script>
 
+<h1>
+	Interactive Content
+</h1>
+<p>
+Scatter objects may contain interactive HTML structures. There is one major flag that allows
+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.
+</p>
+
+<div id="main2" 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>
+        <div onclick="alert('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 scatterContainer2 = new DOMScatterContainer(main2)
+    let scatter2 = new DOMScatter(interactiveContent, scatterContainer2, {
+                        x: 44,
+                        y: 44,
+                        width: 274,
+                        height: 184,
+                        throwVisibility: 88,
+                        minScale: 0.5,
+                        maxScale: 1.5})
+    app2.run()
+</script>
+
 </body>