googlechromelabs / pointer-tracker Goto Github PK
View Code? Open in Web Editor NEWTrack mouse/touch/pointer events for a given element.
License: Apache License 2.0
Track mouse/touch/pointer events for a given element.
License: Apache License 2.0
This line disables all click events inside the element, but only in Chrome.
I'm really sorry this is such a short ticket but I don't really have the time to create a reproducable case right now because my case is pretty involved, but I wanted to bring it up anyway. Please let me know if you need any additional information.
Just noticed this while playing around with the simple painting demo.
It is reproducible on mac OS with Chrome 92 and Firefox 91, but only partially with Safari 14.1.1 (more on that below)
I don't know if this is because of a bug in the implementation of that demo, a bug in the library, or just an unavoidable result of how context menus and mouse/pointer events work in browsers.
The reproduction pattern is as follows:
You are now auto-drawing without pressing any buttons!
As bonus features whenever you click LMB the line changes color, and if you click and drag with LMB you're still drawing along the path you take, but when you release LMB and then move the cursor a straight line will be drawn between the starting and ending point of the path (in the same color as the path).
If you move the mouse cursor during steps 2 or 5 this doesn't cause the bug.
Regarding Safari, the reproduction pattern does work to trigger the drawing without any buttons, but as soon as you press LMB it fixes the pointer state.
This doesn't seem too serious to me, but if I managed to encounter this within a few minutes of playing around I figure some unsuspecting user will encounter it in the wild at some point. 🙂
Admittedly, I was purposefully looking for unexpected behaviour with regards to the RMB/context menu since I know it messes with lots of applications.
Put the following /demo/index.html
:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Firefox bug</title>
<style>
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
.status {
position: absolute;
top: 0;
left: 0;
}
.touchable {
background-color: green;
width: 500px;
height: 500px;
touch-action: none;
}
</style>
</head>
<body>
<div class="status"></div>
<svg class="touchable"><rect width="300" height="300" fill="red"/></svg>
<script type="module">
import PointerTracker from '../dist/PointerTracker.mjs';
const status = document.querySelector('.status');
const touchable = document.querySelector('.touchable');
const updateStatus = () => status.innerHTML = `Pointers: ${tracker.currentPointers.length}`;
const tracker = new PointerTracker(touchable, {
start: () => {
setTimeout(updateStatus);
return true;
},
end: () => setTimeout(updateStatus),
move: () => setTimeout(updateStatus),
});
</script>
</body>
</html>
In Chrome, you can put two fingers on either the red or the green area and the number of fingers will be displayed in the top left.
But in Firefox, it only works in the green area. When you put the first finger on red, everything is fine. As soon as you put a second finger down, the number goes to 0.
I've tracked the bug down to Firefox firing the pointercancel
event when you put the second finger down. This only seems to occur in SVG elements like rect
.
Is this something that should be handled by this library or if this is a bug that should be reported to Mozilla.
Saw you fixed #12 so I tried reproducing the issue, and ran into the following bug on Chrome and Safari (but not Firefox):
As you can see the canvas seems to be scaled wrong, causing the lines to not appear under the mouse cursor and the lines to be stretched out.
This is fixed after a resize, which causes the canvas to be measured again.
Just thought I'd mention it since the demo is very valuable in showing an easy implementation of this great lib!
Can this be used to drag an element such as table
? No luck in achieving that with native PointerEvents
on touch devices as it loses pointer capture after a small distance.
Simple demo: https://cliff-store.glitch.me
Currently pointer-tracker
only accepts basic contact events for mouse, touch, and pen (button state 0
:
(from https://developer.mozilla.org/en-US/docs/Web/API/Pointer_events)
The button
and buttons
state needed to detect pen erasing is 5 and 32 respectively, but pointers with these states are blocked in the _pointerStart
function:
Could this function be updated to support other button states or at least the pen erasing combo?
I have been using this lib with SVGElements and it works great, but I always need to cast the element to any
because constructor takes in HTMLElement.
Bonus feature: Also perform getScreenCTM
inverse calculation when SVG, to create clientX, clientY in SVG viewport's coordinate system. When using scaled SVGs, I often do the following:
const point = svg.createSVGPoint();
point.x = changed[0].clientX;
point.y = changed[0].clientY;
const coords = point.matrixTransform(svg.getScreenCTM().inverse());
I forked this repo to make a very minor adjustment. Due to an iOS bug related to missing pointerUp events in some circumstances i needed to call triggerPointerEnd myself. The bug is also visible in this example: https://pinch-zoom-element.glitch.me/
If you move the picture to the very top on an iOS mobile device everything stops working as expected. It is fixable if you observe the pageY coordinates and call triggerPointerEnd like this (dummycode):
currentPointers.forEach((cp: Pointer) => {
if (cp.pageY < 60 || cp.pageY > 600) {
pointerTracker.triggerPointerEnd(cp, event);
return;
}
});
The CommonJS dist file referenced by "main"
declares var PointerTracker
, but never exports it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.