PointerTracker

Track mouse/touch/pointer events for a given element.

API

$3

``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();
`

$3

`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 (code).

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.