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

Fixed bug in nearestActive.

Browse Source
This commit is contained in:
Uwe Oestermeier 2023-04-28 09:17:03 +02:00
parent 4da99ef04b
commit dc40b4cffa
3 changed files with 127 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
dist/iwmlib.js vendored
View File

@ -1100,17 +1100,19 @@
} }
static fromPageToNode(element, p) { static fromPageToNode(element, p) {
if (window.webkitConvertPointFromPageToNode) { // if (window.webkitConvertPointFromPageToNode) {
return window.webkitConvertPointFromPageToNode(element, new WebKitPoint(p.x, p.y)) // return window.webkitConvertPointFromPageToNode(element,
} // new WebKitPoint(p.x, p.y))
//return window.convertPointFromPageToNode(element, p.x, p.y) // }
return window.convertPointFromPageToNode(element, p.x, p.y)
} }
static fromNodeToPage(element, p) { static fromNodeToPage(element, p) {
if (window.webkitConvertPointFromNodeToPage) { // if (window.webkitConvertPointFromNodeToPage) {
return window.webkitConvertPointFromNodeToPage(element, new WebKitPoint(p.x, p.y)) // return window.webkitConvertPointFromNodeToPage(element,
} // new WebKitPoint(p.x, p.y))
//return window.convertPointFromNodeToPage(element, p.x, p.y) // }
return window.convertPointFromNodeToPage(element, p.x, p.y)
} }
} }
@ -2326,7 +2328,8 @@
useCapture = true, useCapture = true,
capturePointerEvents = true, capturePointerEvents = true,
cancelOnWindowOut = true, cancelOnWindowOut = true,
debug = false, preventPointerClicks = true,
debug = false
} = {} } = {}
) { ) {
this.debug = debug; this.debug = debug;
@ -2337,6 +2340,7 @@
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();
} }
@ -2362,14 +2366,14 @@
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);
@ -2379,7 +2383,7 @@
); );
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))) {
@ -2392,7 +2396,7 @@
); );
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) {
@ -2407,7 +2411,7 @@
); );
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);
@ -2418,7 +2422,7 @@
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);
}, },
@ -2429,7 +2433,7 @@
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);
}, },
@ -2440,7 +2444,7 @@
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);
@ -2453,7 +2457,7 @@
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) {
@ -2465,7 +2469,7 @@
); );
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);
@ -2478,7 +2482,7 @@
); );
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);
@ -2488,7 +2492,7 @@
); );
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);
@ -2501,7 +2505,7 @@
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);
@ -2511,7 +2515,7 @@
); );
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))
@ -2525,7 +2529,7 @@
); );
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);
}, },
@ -2535,7 +2539,7 @@
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");
@ -2547,7 +2551,7 @@
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);
} }
@ -2556,6 +2560,20 @@
); );
} }
} }
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) {
@ -2720,7 +2738,7 @@
useCapture = true, useCapture = true,
capturePointerEvents = true, capturePointerEvents = true,
mouseWheelElement = null, mouseWheelElement = null,
logInteractionsAbove = 12, logInteractionsAbove = 12
} = {} } = {}
) { ) {
super(element, target, { super(element, target, {
@ -2728,7 +2746,7 @@
useCapture, useCapture,
capturePointerEvents, capturePointerEvents,
longPressTime, longPressTime,
mouseWheelElement, mouseWheelElement
}); });
this.logInteractionsAbove = logInteractionsAbove; this.logInteractionsAbove = logInteractionsAbove;
} }
@ -2882,7 +2900,7 @@
hammer.get('tap').set(opts); hammer.get('tap').set(opts);
} }
hammer.on(type, (event) => { hammer.on(type, event => {
cb(event); cb(event);
}); });
@ -2896,7 +2914,7 @@
} }
} 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);
}); });
} }
@ -2927,7 +2945,7 @@
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);
} }
} }
@ -4700,42 +4718,14 @@
} }
nearestActive(event) { nearestActive(event) {
let element = this.domNode;
let activeNodes = this.activeNodes(); let activeNodes = this.activeNodes();
let globalClick = event.center ? event.center : { x: event.x, y: event.y }; let globalClick = event.center ? event.center : { x: event.x, y: event.y };
let localClick = Points$1.fromPageToNode(element, globalClick);
let clickRects = activeNodes.map((link) => {
let rect = link.getBoundingClientRect();
// Since the getBoundingClientRect is untransformed we cannot rely on it's size
// We need a transformed bottom right to calculate local width and height
let bottomRight = Points$1.fromPageToNode(element, {
x: rect.x + rect.width,
y: rect.y + rect.height,
});
let topLeft = Points$1.fromPageToNode(element, rect);
let width = Math.abs(bottomRight.x - topLeft.x);
let height = Math.abs(bottomRight.y - topLeft.y);
let center = Points$1.fromPageToNode(element, {
x: rect.x + width / 2,
y: rect.y + height / 2,
});
return {
x: topLeft.x,
y: topLeft.y,
width,
height,
center,
link,
}
});
let distances = []; let distances = [];
clickRects.forEach((rect) => { activeNodes.forEach((link) => {
let distance = Points$1.distanceToRect(localClick, rect); let rect = link.getBoundingClientRect();
let distance = Points$1.distanceToRect(globalClick, rect);
distances.push(parseInt(distance)); distances.push(parseInt(distance));
}); });
let closestClickIndex = distances.indexOf(Math.min(...distances)); let closestClickIndex = distances.indexOf(Math.min(...distances));
let closestClickable = activeNodes[closestClickIndex]; let closestClickable = activeNodes[closestClickIndex];
if (distances[closestClickIndex] < this.allowClickDistance) { if (distances[closestClickIndex] < this.allowClickDistance) {
@ -4768,11 +4758,6 @@
} }
nodeTapped(node, event) { nodeTapped(node, event) {
console.log('nodeTapped', node, this.isClickable(node));
if (this.isClickable(node)) {
this.simulateClick(node, event);
return true
}
if (this.tapNodes.has(node)) { if (this.tapNodes.has(node)) {
let handler = this.tapNodes.get(node); let handler = this.tapNodes.get(node);
handler(event, node); handler(event, node);
@ -4787,6 +4772,10 @@
} }
} }
} }
if (this.isClickable(node)) {
this.simulateClick(node, event);
return true
}
return false return false
} }
@ -8491,7 +8480,7 @@
*/ */
static _replaceCallback(context, element, attributeVal) { static _replaceCallback(context, element, attributeVal) {
if (element.tagName == 'A') { if (element.tagName == 'A') {
element.addEventListener('pointerdown', (event) => { element.addEventListener('click', (event) => {
event.preventDefault(); event.preventDefault();
}); });
} }
@ -8720,6 +8709,12 @@
static _openPopup(context, src, position, content, options = {}) { static _openPopup(context, src, position, content, options = {}) {
if (this.debug) console.log('Card._openPopup', position); if (this.debug) console.log('Card._openPopup', position);
console.log('context', context);
console.log('src', src);
console.log('position', position);
console.log('content', content);
console.log('options', options);
//logging //logging
if (src) { if (src) {
let strparts = src.split('/'); let strparts = src.split('/');
@ -8904,7 +8899,9 @@
// Prevents loading the link in the current tab. // Prevents loading the link in the current tab.
// Prevents loading the link in the current tab. // Prevents loading the link in the current tab.
if (event.type != 'Follow') event.preventDefault(); if (event.type != 'Follow') {
event.preventDefault();
}
if (editable && event.type == 'click') { if (editable && event.type == 'click') {
return false return false
@ -8952,6 +8949,8 @@
let selector = Card.popupHtmlSelector; let selector = Card.popupHtmlSelector;
let content = { html, selector }; let content = { html, selector };
console.log('loadPopup', selector, html);
let isSame = Card._checkForActiveSource(context, src); let isSame = Card._checkForActiveSource(context, src);
Card._cleanup(context); Card._cleanup(context);

123
dist/iwmlib.pixi.js vendored
View File

@ -1745,17 +1745,19 @@
} }
static fromPageToNode(element, p) { static fromPageToNode(element, p) {
if (window.webkitConvertPointFromPageToNode) { // if (window.webkitConvertPointFromPageToNode) {
return window.webkitConvertPointFromPageToNode(element, new WebKitPoint(p.x, p.y)) // return window.webkitConvertPointFromPageToNode(element,
} // new WebKitPoint(p.x, p.y))
//return window.convertPointFromPageToNode(element, p.x, p.y) // }
return window.convertPointFromPageToNode(element, p.x, p.y)
} }
static fromNodeToPage(element, p) { static fromNodeToPage(element, p) {
if (window.webkitConvertPointFromNodeToPage) { // if (window.webkitConvertPointFromNodeToPage) {
return window.webkitConvertPointFromNodeToPage(element, new WebKitPoint(p.x, p.y)) // return window.webkitConvertPointFromNodeToPage(element,
} // new WebKitPoint(p.x, p.y))
//return window.convertPointFromNodeToPage(element, p.x, p.y) // }
return window.convertPointFromNodeToPage(element, p.x, p.y)
} }
} }
@ -5898,7 +5900,8 @@
useCapture = true, useCapture = true,
capturePointerEvents = true, capturePointerEvents = true,
cancelOnWindowOut = true, cancelOnWindowOut = true,
debug = false, preventPointerClicks = true,
debug = false
} = {} } = {}
) { ) {
this.debug = debug; this.debug = debug;
@ -5909,6 +5912,7 @@
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();
} }
@ -5934,14 +5938,14 @@
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);
@ -5951,7 +5955,7 @@
); );
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$1.isPointerDown(e))) { if (e.pointerType == 'touch' || (e.pointerType == 'mouse' && Events$1.isPointerDown(e))) {
@ -5964,7 +5968,7 @@
); );
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) {
@ -5979,7 +5983,7 @@
); );
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);
@ -5990,7 +5994,7 @@
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);
}, },
@ -6001,7 +6005,7 @@
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);
}, },
@ -6012,7 +6016,7 @@
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);
@ -6025,7 +6029,7 @@
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) {
@ -6037,7 +6041,7 @@
); );
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);
@ -6050,7 +6054,7 @@
); );
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);
@ -6060,7 +6064,7 @@
); );
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);
@ -6073,7 +6077,7 @@
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);
@ -6083,7 +6087,7 @@
); );
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))
@ -6097,7 +6101,7 @@
); );
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);
}, },
@ -6107,7 +6111,7 @@
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");
@ -6119,7 +6123,7 @@
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);
} }
@ -6128,6 +6132,20 @@
); );
} }
} }
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) {
@ -6292,7 +6310,7 @@
useCapture = true, useCapture = true,
capturePointerEvents = true, capturePointerEvents = true,
mouseWheelElement = null, mouseWheelElement = null,
logInteractionsAbove = 12, logInteractionsAbove = 12
} = {} } = {}
) { ) {
super(element, target, { super(element, target, {
@ -6300,7 +6318,7 @@
useCapture, useCapture,
capturePointerEvents, capturePointerEvents,
longPressTime, longPressTime,
mouseWheelElement, mouseWheelElement
}); });
this.logInteractionsAbove = logInteractionsAbove; this.logInteractionsAbove = logInteractionsAbove;
} }
@ -6454,7 +6472,7 @@
hammer.get('tap').set(opts); hammer.get('tap').set(opts);
} }
hammer.on(type, (event) => { hammer.on(type, event => {
cb(event); cb(event);
}); });
@ -6468,7 +6486,7 @@
} }
} 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);
}); });
} }
@ -6499,7 +6517,7 @@
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);
} }
} }
@ -8083,42 +8101,14 @@
} }
nearestActive(event) { nearestActive(event) {
let element = this.domNode;
let activeNodes = this.activeNodes(); let activeNodes = this.activeNodes();
let globalClick = event.center ? event.center : { x: event.x, y: event.y }; let globalClick = event.center ? event.center : { x: event.x, y: event.y };
let localClick = Points.fromPageToNode(element, globalClick);
let clickRects = activeNodes.map((link) => {
let rect = link.getBoundingClientRect();
// Since the getBoundingClientRect is untransformed we cannot rely on it's size
// We need a transformed bottom right to calculate local width and height
let bottomRight = Points.fromPageToNode(element, {
x: rect.x + rect.width,
y: rect.y + rect.height,
});
let topLeft = Points.fromPageToNode(element, rect);
let width = Math.abs(bottomRight.x - topLeft.x);
let height = Math.abs(bottomRight.y - topLeft.y);
let center = Points.fromPageToNode(element, {
x: rect.x + width / 2,
y: rect.y + height / 2,
});
return {
x: topLeft.x,
y: topLeft.y,
width,
height,
center,
link,
}
});
let distances = []; let distances = [];
clickRects.forEach((rect) => { activeNodes.forEach((link) => {
let distance = Points.distanceToRect(localClick, rect); let rect = link.getBoundingClientRect();
let distance = Points.distanceToRect(globalClick, rect);
distances.push(parseInt(distance)); distances.push(parseInt(distance));
}); });
let closestClickIndex = distances.indexOf(Math.min(...distances)); let closestClickIndex = distances.indexOf(Math.min(...distances));
let closestClickable = activeNodes[closestClickIndex]; let closestClickable = activeNodes[closestClickIndex];
if (distances[closestClickIndex] < this.allowClickDistance) { if (distances[closestClickIndex] < this.allowClickDistance) {
@ -8151,11 +8141,6 @@
} }
nodeTapped(node, event) { nodeTapped(node, event) {
console.log('nodeTapped', node, this.isClickable(node));
if (this.isClickable(node)) {
this.simulateClick(node, event);
return true
}
if (this.tapNodes.has(node)) { if (this.tapNodes.has(node)) {
let handler = this.tapNodes.get(node); let handler = this.tapNodes.get(node);
handler(event, node); handler(event, node);
@ -8170,6 +8155,10 @@
} }
} }
} }
if (this.isClickable(node)) {
this.simulateClick(node, event);
return true
}
return false return false
} }

34
lib/card/wrapper.js
View File

@ -94,42 +94,14 @@ export default class CardWrapper extends Object {
} }
nearestActive(event) { nearestActive(event) {
let element = this.domNode
let activeNodes = this.activeNodes() let activeNodes = this.activeNodes()
let globalClick = event.center ? event.center : { x: event.x, y: event.y } let globalClick = event.center ? event.center : { x: event.x, y: event.y }
let localClick = Points.fromPageToNode(element, globalClick)
let clickRects = activeNodes.map((link) => {
let rect = link.getBoundingClientRect()
// Since the getBoundingClientRect is untransformed we cannot rely on it's size
// We need a transformed bottom right to calculate local width and height
let bottomRight = Points.fromPageToNode(element, {
x: rect.x + rect.width,
y: rect.y + rect.height,
})
let topLeft = Points.fromPageToNode(element, rect)
let width = Math.abs(bottomRight.x - topLeft.x)
let height = Math.abs(bottomRight.y - topLeft.y)
let center = Points.fromPageToNode(element, {
x: rect.x + width / 2,
y: rect.y + height / 2,
})
return {
x: topLeft.x,
y: topLeft.y,
width,
height,
center,
link,
}
})
let distances = [] let distances = []
clickRects.forEach((rect) => { activeNodes.forEach((link) => {
let distance = Points.distanceToRect(localClick, rect) let rect = link.getBoundingClientRect()
let distance = Points.distanceToRect(globalClick, rect)
distances.push(parseInt(distance)) distances.push(parseInt(distance))
}) })
let closestClickIndex = distances.indexOf(Math.min(...distances)) let closestClickIndex = distances.indexOf(Math.min(...distances))
let closestClickable = activeNodes[closestClickIndex] let closestClickable = activeNodes[closestClickIndex]
if (distances[closestClickIndex] < this.allowClickDistance) { if (distances[closestClickIndex] < this.allowClickDistance) {