From e3e955b5c6c0f5ce86dae076f48ed37f2ee51244 Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Thu, 9 Aug 2018 18:17:55 +0100 Subject: [PATCH 1/2] Adding changed points and coalescing to pointer tracker. Fixes #133. --- src/lib/PointerTracker/index.ts | 52 ++++++++++++++--------- src/lib/PointerTracker/missing-types.d.ts | 4 ++ 2 files changed, 37 insertions(+), 19 deletions(-) diff --git a/src/lib/PointerTracker/index.ts b/src/lib/PointerTracker/index.ts index fb77b0981..1d16307fb 100644 --- a/src/lib/PointerTracker/index.ts +++ b/src/lib/PointerTracker/index.ts @@ -13,18 +13,28 @@ export class Pointer { /** ID for this pointer */ id: number = -1; - constructor (nativePointer: Touch | PointerEvent | MouseEvent) { - this.pageX = nativePointer.pageX; - this.pageY = nativePointer.pageY; - this.clientX = nativePointer.clientX; - this.clientY = nativePointer.clientY; - - if (self.Touch && nativePointer instanceof Touch) { - this.id = nativePointer.identifier; - } else if (isPointerEvent(nativePointer)) { // is PointerEvent - this.id = nativePointer.pointerId; + constructor (private _nativePointer: Touch | PointerEvent | MouseEvent) { + this.pageX = _nativePointer.pageX; + this.pageY = _nativePointer.pageY; + this.clientX = _nativePointer.clientX; + this.clientY = _nativePointer.clientY; + + if (self.Touch && _nativePointer instanceof Touch) { + this.id = _nativePointer.identifier; + } else if (isPointerEvent(_nativePointer)) { // is PointerEvent + this.id = _nativePointer.pointerId; } } + + /** + * Returns an expanded set of Pointers for high-resolution inputs. + */ + getCoalesced(): Pointer[] { + if ('getCoalescedEvents' in this._nativePointer) { + return this._nativePointer.getCoalescedEvents().map(p => new Pointer(p)); + } + return [this]; + } } const isPointerEvent = (event: any): event is PointerEvent => @@ -33,9 +43,13 @@ const isPointerEvent = (event: any): event is PointerEvent => const noop = () => {}; export type InputEvent = TouchEvent | PointerEvent | MouseEvent; -type StartCallback = ((pointer: Pointer, event: InputEvent) => boolean); -type MoveCallback = ((previousPointers: Pointer[], event: InputEvent) => void); -type EndCallback = ((pointer: Pointer, event: InputEvent) => void); +type StartCallback = (pointer: Pointer, event: InputEvent) => boolean; +type MoveCallback = ( + previousPointers: Pointer[], + changedPointers: Pointer[], + event: InputEvent, +) => void; +type EndCallback = (pointer: Pointer, event: InputEvent) => void; interface PointerTrackerCallbacks { /** @@ -54,6 +68,7 @@ interface PointerTrackerCallbacks { * @param 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. + * @param changedPointers The pointers that have changed since the last move callback. * @param event The event related to the pointer changes. */ move?: MoveCallback; @@ -172,19 +187,18 @@ export class PointerTracker { const changedPointers = ('changedTouches' in event) ? // Shortcut for 'is touch event'. Array.from(event.changedTouches).map(t => new Pointer(t)) : [new Pointer(event)]; - - let shouldCallback = false; + const trackedChangedPointers = []; for (const pointer of changedPointers) { const index = this.currentPointers.findIndex(p => p.id === pointer.id); - if (index === -1) continue; - shouldCallback = true; + if (index === -1) continue; // Not a pointer we're tracking + trackedChangedPointers.push(pointer); this.currentPointers[index] = pointer; } - if (!shouldCallback) return; + if (!trackedChangedPointers[0]) return; - this._moveCallback(previousPointers, event); + this._moveCallback(previousPointers, trackedChangedPointers, event); } /** diff --git a/src/lib/PointerTracker/missing-types.d.ts b/src/lib/PointerTracker/missing-types.d.ts index 01844dd31..f724d114d 100644 --- a/src/lib/PointerTracker/missing-types.d.ts +++ b/src/lib/PointerTracker/missing-types.d.ts @@ -4,3 +4,7 @@ interface Window { PointerEvent: typeof PointerEvent; Touch: typeof Touch; } + +interface PointerEvent { + getCoalescedEvents(): PointerEvent[]; +} From d66123026df8ea40cdee99a77ea9219909a4f34c Mon Sep 17 00:00:00 2001 From: Jake Archibald Date: Wed, 15 Aug 2018 15:14:02 +0100 Subject: [PATCH 2/2] Nits and exposing native pointer --- src/lib/PointerTracker/index.ts | 31 +++++++++++++++++-------------- 1 file changed, 17 insertions(+), 14 deletions(-) diff --git a/src/lib/PointerTracker/index.ts b/src/lib/PointerTracker/index.ts index 1d16307fb..a885bc7b4 100644 --- a/src/lib/PointerTracker/index.ts +++ b/src/lib/PointerTracker/index.ts @@ -12,17 +12,20 @@ export class Pointer { clientY: number; /** ID for this pointer */ id: number = -1; - - constructor (private _nativePointer: Touch | PointerEvent | MouseEvent) { - this.pageX = _nativePointer.pageX; - this.pageY = _nativePointer.pageY; - this.clientX = _nativePointer.clientX; - this.clientY = _nativePointer.clientY; - - if (self.Touch && _nativePointer instanceof Touch) { - this.id = _nativePointer.identifier; - } else if (isPointerEvent(_nativePointer)) { // is PointerEvent - this.id = _nativePointer.pointerId; + /** The platform object used to create this Pointer */ + nativePointer: Touch | PointerEvent | MouseEvent; + + constructor (nativePointer: Touch | PointerEvent | MouseEvent) { + this.nativePointer = nativePointer; + this.pageX = nativePointer.pageX; + this.pageY = nativePointer.pageY; + this.clientX = nativePointer.clientX; + this.clientY = nativePointer.clientY; + + if (self.Touch && nativePointer instanceof Touch) { + this.id = nativePointer.identifier; + } else if (isPointerEvent(nativePointer)) { // is PointerEvent + this.id = nativePointer.pointerId; } } @@ -30,8 +33,8 @@ export class Pointer { * Returns an expanded set of Pointers for high-resolution inputs. */ getCoalesced(): Pointer[] { - if ('getCoalescedEvents' in this._nativePointer) { - return this._nativePointer.getCoalescedEvents().map(p => new Pointer(p)); + if ('getCoalescedEvents' in this.nativePointer) { + return this.nativePointer.getCoalescedEvents().map(p => new Pointer(p)); } return [this]; } @@ -196,7 +199,7 @@ export class PointerTracker { this.currentPointers[index] = pointer; } - if (!trackedChangedPointers[0]) return; + if (trackedChangedPointers.length === 0) return; this._moveCallback(previousPointers, trackedChangedPointers, event); }