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

Added new configuration flag and default behavior that prevents pointer click events which might lead to conflicts in touch applications.

Browse Source
This commit is contained in:
Uwe Oestermeier 2023-02-15 15:11:12 +01:00
parent 7f1a3aae8e
commit 4da99ef04b
2 changed files with 41 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
lib/interaction.js
View File

@ -553,7 +553,8 @@ export class InteractionDelegate {
useCapture = true, useCapture = true,
capturePointerEvents = true, capturePointerEvents = true,
cancelOnWindowOut = true, cancelOnWindowOut = true,
debug = false, preventPointerClicks = true,
debug = false
} = {} } = {}
) { ) {
this.debug = debug this.debug = debug
@ -564,6 +565,7 @@ export class InteractionDelegate {
this.useCapture = useCapture this.useCapture = useCapture
this.capturePointerEvents = capturePointerEvents this.capturePointerEvents = capturePointerEvents
this.cancelOnWindowOut = cancelOnWindowOut this.cancelOnWindowOut = cancelOnWindowOut
this.preventPointerClicks = preventPointerClicks
this.setupInteraction() this.setupInteraction()
} }
@ -589,14 +591,14 @@ export class InteractionDelegate {
if (this.debug) console.log('Pointer API' + window.PointerEvent) if (this.debug) console.log('Pointer API' + window.PointerEvent)
element.addEventListener( element.addEventListener(
'pointerdown', 'pointerdown',
(e) => { e => {
if (this.debug) console.log('pointerdown', e.pointerId) if (this.debug) console.log('pointerdown', e.pointerId)
if (this.capture(e)) { if (this.capture(e)) {
if (this.capturePointerEvents) { if (this.capturePointerEvents) {
try { try {
element.setPointerCapture(e.pointerId) element.setPointerCapture(e.pointerId)
} catch (e) { } catch (e) {
console.warn('Cannot setPointerCapture') console.warn('Cannot setPointerCapture', e.setPointerCapture)
} }
} }
this.onStart(e) this.onStart(e)
@ -606,7 +608,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'pointermove', 'pointermove',
(e) => { e => {
if (this.debug) console.log('pointermove', e.pointerId, e.pointerType) if (this.debug) console.log('pointermove', e.pointerId, e.pointerType)
if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) { if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events.isPointerDown(e))) {
@ -619,7 +621,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'pointerup', 'pointerup',
(e) => { e => {
if (this.debug) console.log('pointerup', e.pointerId, e.pointerType) if (this.debug) console.log('pointerup', e.pointerId, e.pointerType)
this.onEnd(e) this.onEnd(e)
if (this.capturePointerEvents) { if (this.capturePointerEvents) {
@ -634,7 +636,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'pointercancel', 'pointercancel',
(e) => { e => {
if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType) if (this.debug) console.log('pointercancel', e.pointerId, e.pointerType)
this.onEnd(e) this.onEnd(e)
if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId) if (this.capturePointerEvents) element.releasePointerCapture(e.pointerId)
@ -645,7 +647,7 @@ export class InteractionDelegate {
if (!this.capturePointerEvents) { if (!this.capturePointerEvents) {
element.addEventListener( element.addEventListener(
'pointerleave', 'pointerleave',
(e) => { e => {
if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType) if (this.debug) console.log('pointerleave', e.pointerId, e.pointerType)
if (e.target == element) this.onEnd(e) if (e.target == element) this.onEnd(e)
}, },
@ -656,7 +658,7 @@ export class InteractionDelegate {
if (!this.capturePointerEvents) { if (!this.capturePointerEvents) {
element.addEventListener( element.addEventListener(
'pointerout', 'pointerout',
(e) => { e => {
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType) if (this.debug) console.log('pointerout', e.pointerId, e.pointerType)
if (e.target == element) this.onEnd(e) if (e.target == element) this.onEnd(e)
}, },
@ -667,7 +669,7 @@ export class InteractionDelegate {
if (this.cancelOnWindowOut) { if (this.cancelOnWindowOut) {
window.addEventListener( window.addEventListener(
'pointerout', 'pointerout',
(e) => { e => {
if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target) if (this.debug) console.log('pointerout', e.pointerId, e.pointerType, e.target)
if (e.target == element) { if (e.target == element) {
this.onEnd(e) this.onEnd(e)
@ -680,7 +682,7 @@ export class InteractionDelegate {
if (this.debug) console.log('Touch API') if (this.debug) console.log('Touch API')
element.addEventListener( element.addEventListener(
'touchstart', 'touchstart',
(e) => { e => {
if (this.debug) console.log('touchstart', this.touchPoints(e)) if (this.debug) console.log('touchstart', this.touchPoints(e))
if (this.capture(e)) { if (this.capture(e)) {
for (let touch of e.changedTouches) { for (let touch of e.changedTouches) {
@ -692,7 +694,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'touchmove', 'touchmove',
(e) => { e => {
if (this.debug) console.log('touchmove', this.touchPoints(e), e) if (this.debug) console.log('touchmove', this.touchPoints(e), e)
for (let touch of e.changedTouches) { for (let touch of e.changedTouches) {
this.onMove(touch) this.onMove(touch)
@ -705,7 +707,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'touchend', 'touchend',
(e) => { e => {
if (this.debug) console.log('touchend', this.touchPoints(e)) if (this.debug) console.log('touchend', this.touchPoints(e))
for (let touch of e.changedTouches) { for (let touch of e.changedTouches) {
this.onEnd(touch) this.onEnd(touch)
@ -715,7 +717,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'touchcancel', 'touchcancel',
(e) => { e => {
if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length) if (this.debug) console.log('touchcancel', e.targetTouches.length, e.changedTouches.length)
for (let touch of e.changedTouches) { for (let touch of e.changedTouches) {
this.onEnd(touch) this.onEnd(touch)
@ -728,7 +730,7 @@ export class InteractionDelegate {
element.addEventListener( element.addEventListener(
'mousedown', 'mousedown',
(e) => { e => {
if (this.debug) console.log('mousedown', e) if (this.debug) console.log('mousedown', e)
if (this.capture(e)) { if (this.capture(e)) {
this.onStart(e) this.onStart(e)
@ -738,7 +740,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'mousemove', 'mousemove',
(e) => { e => {
// Dow we only use move events if the mouse is down? // Dow we only use move events if the mouse is down?
// HOver effects have to be implemented by other means // HOver effects have to be implemented by other means
// && Events.isMouseDown(e)) // && Events.isMouseDown(e))
@ -752,7 +754,7 @@ export class InteractionDelegate {
) )
element.addEventListener( element.addEventListener(
'mouseup', 'mouseup',
(e) => { e => {
if (this.debug) console.log('mouseup', e) if (this.debug) console.log('mouseup', e)
this.onEnd(e) this.onEnd(e)
}, },
@ -762,7 +764,7 @@ export class InteractionDelegate {
if (!this.capturePointerEvents) { if (!this.capturePointerEvents) {
element.addEventListener( element.addEventListener(
'mouseout', 'mouseout',
(e) => { e => {
if (e.target == element) { if (e.target == element) {
this.onEnd(e) this.onEnd(e)
console.warn("Shouldn't happen: mouseout ends interaction") console.warn("Shouldn't happen: mouseout ends interaction")
@ -774,7 +776,7 @@ export class InteractionDelegate {
if (this.cancelOnWindowOut) { if (this.cancelOnWindowOut) {
window.addEventListener( window.addEventListener(
'mouseout', 'mouseout',
(e) => { e => {
if (e.target == element) { if (e.target == element) {
this.onEnd(e) this.onEnd(e)
} }
@ -783,6 +785,20 @@ export class InteractionDelegate {
) )
} }
} }
if (this.preventPointerClicks) {
window.addEventListener(
'click',
e => {
if (e instanceof PointerEvent) {
console.warn('Prevented pointer click')
e.preventDefault()
e.stopImmediatePropagation()
}
},
true
)
}
} }
isDescendant(parent, child) { isDescendant(parent, child) {
@ -968,7 +984,7 @@ export class InteractionMapper extends InteractionDelegate {
useCapture = true, useCapture = true,
capturePointerEvents = true, capturePointerEvents = true,
mouseWheelElement = null, mouseWheelElement = null,
logInteractionsAbove = 12, logInteractionsAbove = 12
} = {} } = {}
) { ) {
super(element, target, { super(element, target, {
@ -976,7 +992,7 @@ export class InteractionMapper extends InteractionDelegate {
useCapture, useCapture,
capturePointerEvents, capturePointerEvents,
longPressTime, longPressTime,
mouseWheelElement, mouseWheelElement
}) })
this.logInteractionsAbove = logInteractionsAbove this.logInteractionsAbove = logInteractionsAbove
} }
@ -1132,7 +1148,7 @@ export class InteractionMapper extends InteractionDelegate {
hammer.get('tap').set(opts) hammer.get('tap').set(opts)
} }
hammer.on(type, (event) => { hammer.on(type, event => {
cb(event) cb(event)
}) })
@ -1146,7 +1162,7 @@ export class InteractionMapper extends InteractionDelegate {
} }
} else { } else {
for (let j = 0; j < elements.length; j++) { for (let j = 0; j < elements.length; j++) {
Hammer.on(elements[j], type, (event) => { Hammer.on(elements[j], type, event => {
cb(event) cb(event)
}) })
} }
@ -1177,7 +1193,7 @@ export class InteractionMapper extends InteractionDelegate {
if (Hammer.__hammers.has(element)) { if (Hammer.__hammers.has(element)) {
const elementHammers = Hammer.__hammers.get(element) const elementHammers = Hammer.__hammers.get(element)
elementHammers.forEach((it) => it.destroy()) elementHammers.forEach(it => it.destroy())
Hammer.__hammers.delete(element) Hammer.__hammers.delete(element)
} }
} }

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "iwmlib", "name": "iwmlib",
"version": "2.0.0-beta.0", "version": "2.0.0-beta.1",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "iwmlib", "name": "iwmlib",
"version": "2.0.0-beta.0", "version": "2.0.0-beta.1",
"license": "LGPL-3.0-or-later", "license": "LGPL-3.0-or-later",
"dependencies": { "dependencies": {
"gsap": "^2.1.3", "gsap": "^2.1.3",