Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/GoogleChromeLabs/pointer-tracker
Track mouse/touch/pointer events for a given element.
https://github.com/GoogleChromeLabs/pointer-tracker
Last synced: 6 days ago
JSON representation
Track mouse/touch/pointer events for a given element.
- Host: GitHub
- URL: https://github.com/GoogleChromeLabs/pointer-tracker
- Owner: GoogleChromeLabs
- License: apache-2.0
- Created: 2018-10-10T18:16:47.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2024-09-24T08:30:28.000Z (about 1 month ago)
- Last Synced: 2024-09-28T19:17:05.381Z (about 1 month ago)
- Language: TypeScript
- Homepage:
- Size: 135 KB
- Stars: 184
- Watchers: 12
- Forks: 24
- Open Issues: 9
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-tiny-js - pointer-tracker - Unified interface for mouse, touch and pointer events, <img align="top" height="24" src="./img/pointer-tracker.svg"> (Touch Gestures / Reactive Programming)
README
# PointerTracker
Track mouse/touch/pointer events for a given element.
## API
### PointerTracker
```js
import PointerTracker from 'pointer-tracker';
const pointerTracker = new PointerTracker(element, {
start(pointer, event) {
// Called when a pointer is pressed/touched within the element.
//
// pointer - The new pointer. This pointer isn't included in this.currentPointers or
// this.startPointers yet.
//
// event - The event related to this pointer.
//
// Return true from this callback if you're interested in further events about this pointer,
// such as 'move' and 'end'.
},
move(previousPointers, changedPointers, event) {
// Called when pointers have moved.
//
// previousPointers - The state of the pointers before this event. This contains the same number
// of pointers, in the same order, as this.currentPointers and this.startPointers.
//
// changedPointers - The pointers that have changed since the last move callback.
//
// event - The event related to the pointer changes.
},
end(pointer, event, cancelled) {
// Called when a pointer is released.
//
// pointer - The final state of the pointer that ended. This pointer is now absent from
// this.currentPointers and this.startPointers.
//
// event - The event related to this pointer.
//
// cancelled - True if the event was cancelled. Actions are cancelled when the OS takes over
// pointer events, for actions such as scrolling.
},
// Avoid pointer events in favour of touch and mouse events?
//
// Even if the browser supports pointer events, you may want to force the browser to use
// mouse/touch fallbacks, to work around bugs such as
// https://bugs.webkit.org/show_bug.cgi?id=220196.
//
// The default is false.
avoidPointerEvents: false,
// Use raw pointer updates? Pointer events are usually synchronised to requestAnimationFrame.
// However, if you're targeting a desynchronised canvas, then faster 'raw' updates are better.
//
// This feature only applies to pointer events. The default is false.
rawUpdates: false,
});
// State of the tracked pointers when they were pressed/touched.
pointerTracker.startPointers;
// Latest state of the tracked pointers. Contains the same number of pointers, and in the same order
// as this.startPointers.
pointerTracker.currentPointers;
// Remove all listeners. Call this when you're done tracking.
pointerTracker.stop();
```
### Pointer
```js
const pointer = pointerTracker.currentPointers[0];
// x offset from the top of the document
pointer.pageX;
// y offset from the top of the document
pointer.pageY;
// x offset from the top of the viewport
pointer.clientX;
// y offset from the top of the viewport
pointer.clientY;
// Unique ID for this pointer
pointer.id;
// The platform object used to create this Pointer
pointer.nativePointer;
// Returns an expanded set of Pointers for high-resolution inputs.
const pointers = pointer.getCoalesced();
```
## Demo
[A simple painting app](https://pointer-tracker-demo.glitch.me/) ([code](https://glitch.com/edit/#!/pointer-tracker-demo?path=public/index.html)).
## Files
- `lib/index.ts` - Original TypeScript.
- `dist/PointerTracker.mjs` - JS module. Default exports PointerTracker.
- `dist/PointerTracker.js` - UMD JS. Exposes PointerTracker on the global by default.
- `dist/PointerTracker-min.js` - Minified UMD JS. ~900 bytes brotli'd.