IWMBrowser/iwmlib
IWMBrowser
/
iwmlib
4
0
Fork 0
Code Issues 6 Pull Requests Releases Wiki Activity

Improved tab behavior of scatter

This commit is contained in:
Uwe Oestermeier 2019-07-05 14:40:15 +02:00
parent a77226e42b 8b4c6c2014
commit 14f2c2fbe6
3 changed files with 21 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
dist/iwmlib.js vendored
View File

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

27
lib/scatter.html
View File

@ -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;">
<!-- Note that we need to set draggable to false to avoid conflicts. The DOM elements
must also be positioned absolutely. -->
<div id="contentExample" class="grayBorder interactive" style="position: relative; width: 100%; height: 280px;">
<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>
<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>
</div>
</div>
<script class="doctest">
let app2 = new App()
let scatterContainer2 = new DOMScatterContainer(main2, { stopEvents: true})
let scatter2 = new DOMScatter(interactiveContent, scatterContainer2, {
let contentContainer = new DOMScatterContainer(contentExample)
new DOMScatter(interactiveContent, contentContainer, {
x: 44,
y: 44,
width: 274,
height: 184,
clickOnTap: true,
throwVisibility: 88,
minScale: 0.5,
maxScale: 1.5})
app2.run()
</script>
</body>

5
lib/scatter.js
View File

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