pointer-tracker - npm Package Compare versions

Comparing version 2.2.1 to 2.3.0

dist/index.d.ts

@@ -26,3 +26,3 @@ declare class Pointer {
 declare type EndCallback = (pointer: Pointer, event: InputEvent, cancelled: boolean) => void;
-interface PointerTrackerCallbacks {
+interface PointerTrackerOptions {
     /**
@@ -57,2 +57,7 @@ * Called when a pointer is pressed/touched within the element.
     end?: EndCallback;
+    /**
+     * 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.
+     */
+    rawUpdates?: boolean;
 }
@@ -76,2 +81,3 @@ /**
     private _endCallback;
+    private _rawUpdates;
     /**
@@ -81,5 +87,5 @@ * Track pointers across a particular element
      * @param element Element to monitor.
-     * @param callbacks
+     * @param options
      */
-    constructor(_element: HTMLElement, callbacks?: PointerTrackerCallbacks);
+    constructor(_element: HTMLElement, { start, move, end, rawUpdates, }?: PointerTrackerOptions);
     /**
@@ -86,0 +92,0 @@ * Remove all listeners.

dist/PointerTracker-min.js

@@ -1,1 +0,1 @@
-var PointerTracker=function(){"use strict";class e{constructor(e){this.id=-1,this.nativePointer=e,this.pageX=e.pageX,this.pageY=e.pageY,this.clientX=e.clientX,this.clientY=e.clientY,self.Touch&&e instanceof Touch?this.id=e.identifier:t(e)&&(this.id=e.pointerId)}getCoalesced(){return"getCoalescedEvents"in this.nativePointer?this.nativePointer.getCoalescedEvents().map(t=>new e(t)):[this]}}const t=e=>self.PointerEvent&&e instanceof PointerEvent,n=()=>{};return class{constructor(i,s={}){this._element=i,this.startPointers=[],this.currentPointers=[],this._pointerStart=n=>{if(0===n.button&&this._triggerPointerStart(new e(n),n))if(t(n)){(n.target&&"setPointerCapture"in n.target?n.target:this._element).setPointerCapture(n.pointerId),this._element.addEventListener("pointermove",this._move),this._element.addEventListener("pointerup",this._pointerEnd),this._element.addEventListener("pointercancel",this._pointerEnd)}else window.addEventListener("mousemove",this._move),window.addEventListener("mouseup",this._pointerEnd)},this._touchStart=t=>{for(const n of Array.from(t.changedTouches))this._triggerPointerStart(new e(n),t)},this._move=t=>{const n=this.currentPointers.slice(),i="changedTouches"in t?Array.from(t.changedTouches).map(t=>new e(t)):[new e(t)],s=[];for(const e of i){const t=this.currentPointers.findIndex(t=>t.id===e.id);-1!==t&&(s.push(e),this.currentPointers[t]=e)}0!==s.length&&this._moveCallback(n,s,t)},this._triggerPointerEnd=(e,t)=>{const n=this.currentPointers.findIndex(t=>t.id===e.id);if(-1===n)return!1;this.currentPointers.splice(n,1),this.startPointers.splice(n,1);const i="touchcancel"===t.type||"pointercancel"===t.type;return this._endCallback(e,t,i),!0},this._pointerEnd=n=>{if(this._triggerPointerEnd(new e(n),n))if(t(n)){if(this.currentPointers.length)return;this._element.removeEventListener("pointermove",this._move),this._element.removeEventListener("pointerup",this._pointerEnd),this._element.removeEventListener("pointercancel",this._pointerEnd)}else window.removeEventListener("mousemove",this._move),window.removeEventListener("mouseup",this._pointerEnd)},this._touchEnd=t=>{for(const n of Array.from(t.changedTouches))this._triggerPointerEnd(new e(n),t)};const{start:r=(()=>!0),move:o=n,end:h=n}=s;this._startCallback=r,this._moveCallback=o,this._endCallback=h,self.PointerEvent?this._element.addEventListener("pointerdown",this._pointerStart):(this._element.addEventListener("mousedown",this._pointerStart),this._element.addEventListener("touchstart",this._touchStart),this._element.addEventListener("touchmove",this._move),this._element.addEventListener("touchend",this._touchEnd),this._element.addEventListener("touchcancel",this._touchEnd))}stop(){this._element.removeEventListener("pointerdown",this._pointerStart),this._element.removeEventListener("mousedown",this._pointerStart),this._element.removeEventListener("touchstart",this._touchStart),this._element.removeEventListener("touchmove",this._move),this._element.removeEventListener("touchend",this._touchEnd),this._element.removeEventListener("touchcancel",this._touchEnd),this._element.removeEventListener("pointermove",this._move),this._element.removeEventListener("pointerup",this._pointerEnd),this._element.removeEventListener("pointercancel",this._pointerEnd),window.removeEventListener("mousemove",this._move),window.removeEventListener("mouseup",this._pointerEnd)}_triggerPointerStart(e,t){return!!this._startCallback(e,t)&&(this.currentPointers.push(e),this.startPointers.push(e),!0)}}}();
+var PointerTracker=function(){"use strict";class e{constructor(e){this.id=-1,this.nativePointer=e,this.pageX=e.pageX,this.pageY=e.pageY,this.clientX=e.clientX,this.clientY=e.clientY,self.Touch&&e instanceof Touch?this.id=e.identifier:t(e)&&(this.id=e.pointerId)}getCoalesced(){return"getCoalescedEvents"in this.nativePointer?this.nativePointer.getCoalescedEvents().map(t=>new e(t)):[this]}}const t=e=>self.PointerEvent&&e instanceof PointerEvent,n=()=>{};return class{constructor(i,{start:r=(()=>!0),move:s=n,end:o=n,rawUpdates:h=!1}={}){this._element=i,this.startPointers=[],this.currentPointers=[],this._pointerStart=n=>{if(0===n.button&&this._triggerPointerStart(new e(n),n))if(t(n)){(n.target&&"setPointerCapture"in n.target?n.target:this._element).setPointerCapture(n.pointerId),this._element.addEventListener(this._rawUpdates?"pointerrawupdate":"pointermove",this._move),this._element.addEventListener("pointerup",this._pointerEnd),this._element.addEventListener("pointercancel",this._pointerEnd)}else window.addEventListener("mousemove",this._move),window.addEventListener("mouseup",this._pointerEnd)},this._touchStart=t=>{for(const n of Array.from(t.changedTouches))this._triggerPointerStart(new e(n),t)},this._move=t=>{const n=this.currentPointers.slice(),i="changedTouches"in t?Array.from(t.changedTouches).map(t=>new e(t)):[new e(t)],r=[];for(const e of i){const t=this.currentPointers.findIndex(t=>t.id===e.id);-1!==t&&(r.push(e),this.currentPointers[t]=e)}0!==r.length&&this._moveCallback(n,r,t)},this._triggerPointerEnd=(e,t)=>{const n=this.currentPointers.findIndex(t=>t.id===e.id);if(-1===n)return!1;this.currentPointers.splice(n,1),this.startPointers.splice(n,1);const i="touchcancel"===t.type||"pointercancel"===t.type;return this._endCallback(e,t,i),!0},this._pointerEnd=n=>{if(this._triggerPointerEnd(new e(n),n))if(t(n)){if(this.currentPointers.length)return;this._element.removeEventListener(this._rawUpdates?"pointerrawupdate":"pointermove",this._move),this._element.removeEventListener("pointerup",this._pointerEnd),this._element.removeEventListener("pointercancel",this._pointerEnd)}else window.removeEventListener("mousemove",this._move),window.removeEventListener("mouseup",this._pointerEnd)},this._touchEnd=t=>{for(const n of Array.from(t.changedTouches))this._triggerPointerEnd(new e(n),t)},this._startCallback=r,this._moveCallback=s,this._endCallback=o,this._rawUpdates=h&&"onpointerrawupdate"in window,self.PointerEvent?this._element.addEventListener("pointerdown",this._pointerStart):(this._element.addEventListener("mousedown",this._pointerStart),this._element.addEventListener("touchstart",this._touchStart),this._element.addEventListener("touchmove",this._move),this._element.addEventListener("touchend",this._touchEnd),this._element.addEventListener("touchcancel",this._touchEnd))}stop(){this._element.removeEventListener("pointerdown",this._pointerStart),this._element.removeEventListener("mousedown",this._pointerStart),this._element.removeEventListener("touchstart",this._touchStart),this._element.removeEventListener("touchmove",this._move),this._element.removeEventListener("touchend",this._touchEnd),this._element.removeEventListener("touchcancel",this._touchEnd),this._element.removeEventListener(this._rawUpdates?"pointerrawupdate":"pointermove",this._move),this._element.removeEventListener("pointerup",this._pointerEnd),this._element.removeEventListener("pointercancel",this._pointerEnd),window.removeEventListener("mousemove",this._move),window.removeEventListener("mouseup",this._pointerEnd)}_triggerPointerStart(e,t){return!!this._startCallback(e,t)&&(this.currentPointers.push(e),this.startPointers.push(e),!0)}}}();

dist/PointerTracker.js

@@ -26,3 +26,3 @@ var PointerTracker = (function () {
             if ('getCoalescedEvents' in this.nativePointer) {
-                return this.nativePointer.getCoalescedEvents().map(p => new Pointer(p));
+                return this.nativePointer.getCoalescedEvents().map((p) => new Pointer(p));
             }
@@ -42,5 +42,5 @@ return [this];
          * @param element Element to monitor.
-         * @param callbacks
+         * @param options
          */
-        constructor(_element, callbacks = {}) {
+        constructor(_element, { start = () => true, move = noop, end = noop, rawUpdates = false, } = {}) {
             this._element = _element;
@@ -73,3 +73,3 @@ /**
                     capturingElement.setPointerCapture(event.pointerId);
-                    this._element.addEventListener('pointermove', this._move);
+                    this._element.addEventListener(this._rawUpdates ? 'pointerrawupdate' : 'pointermove', this._move);
                     this._element.addEventListener('pointerup', this._pointerEnd);
@@ -99,7 +99,7 @@ this._element.addEventListener('pointercancel', this._pointerEnd);
                 const changedPointers = 'changedTouches' in event // Shortcut for 'is touch event'.
-                    ? Array.from(event.changedTouches).map(t => new Pointer(t))
+                    ? Array.from(event.changedTouches).map((t) => new Pointer(t))
                     : [new Pointer(event)];
                 const trackedChangedPointers = [];
                 for (const pointer of changedPointers) {
-                    const index = this.currentPointers.findIndex(p => p.id === pointer.id);
+                    const index = this.currentPointers.findIndex((p) => p.id === pointer.id);
                     if (index === -1)
@@ -121,3 +121,3 @@ continue; // Not a pointer we're tracking
             this._triggerPointerEnd = (pointer, event) => {
-                const index = this.currentPointers.findIndex(p => p.id === pointer.id);
+                const index = this.currentPointers.findIndex((p) => p.id === pointer.id);
                 // Not a pointer we're interested in?
@@ -143,3 +143,3 @@ if (index === -1)
                         return;
-                    this._element.removeEventListener('pointermove', this._move);
+                    this._element.removeEventListener(this._rawUpdates ? 'pointerrawupdate' : 'pointermove', this._move);
                     this._element.removeEventListener('pointerup', this._pointerEnd);
@@ -163,6 +163,6 @@ this._element.removeEventListener('pointercancel', this._pointerEnd);
             };
-            const { start = () => true, move = noop, end = noop } = callbacks;
             this._startCallback = start;
             this._moveCallback = move;
             this._endCallback = end;
+            this._rawUpdates = rawUpdates && 'onpointerrawupdate' in window;
             // Add listeners
@@ -190,3 +190,3 @@ if (self.PointerEvent) {
             this._element.removeEventListener('touchcancel', this._touchEnd);
-            this._element.removeEventListener('pointermove', this._move);
+            this._element.removeEventListener(this._rawUpdates ? 'pointerrawupdate' : 'pointermove', this._move);
             this._element.removeEventListener('pointerup', this._pointerEnd);
@@ -193,0 +193,0 @@ this._element.removeEventListener('pointercancel', this._pointerEnd);

lib/index.ts

@@ -51,3 +51,3 @@ /**
     if ('getCoalescedEvents' in this.nativePointer) {
-      return this.nativePointer.getCoalescedEvents().map(p => new Pointer(p));
+      return this.nativePointer.getCoalescedEvents().map((p) => new Pointer(p));
     }
@@ -80,3 +80,3 @@ return [this];
 
-interface PointerTrackerCallbacks {
+interface PointerTrackerOptions {
   /**
@@ -111,2 +111,7 @@ * Called when a pointer is pressed/touched within the element.
   end?: EndCallback;
+  /**
+   * 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.
+   */
+  rawUpdates?: boolean;
 }
@@ -131,2 +136,3 @@
   private _endCallback: EndCallback;
+  private _rawUpdates: boolean;
 
@@ -137,13 +143,17 @@ /**
    * @param element Element to monitor.
-   * @param callbacks
+   * @param options
    */
   constructor(
     private _element: HTMLElement,
-    callbacks: PointerTrackerCallbacks = {},
+    {
+      start = () => true,
+      move = noop,
+      end = noop,
+      rawUpdates = false,
+    }: PointerTrackerOptions = {},
   ) {
-    const { start = () => true, move = noop, end = noop } = callbacks;
-
     this._startCallback = start;
     this._moveCallback = move;
     this._endCallback = end;
+    this._rawUpdates = rawUpdates && 'onpointerrawupdate' in window;
 
@@ -172,3 +182,6 @@ // Add listeners
     this._element.removeEventListener('touchcancel', this._touchEnd);
-    this._element.removeEventListener('pointermove', this._move);
+    this._element.removeEventListener(
+      this._rawUpdates ? 'pointerrawupdate' : 'pointermove',
+      this._move,
+    );
     this._element.removeEventListener('pointerup', this._pointerEnd);
@@ -212,3 +225,6 @@ this._element.removeEventListener('pointercancel', this._pointerEnd);
       capturingElement.setPointerCapture(event.pointerId);
-      this._element.addEventListener('pointermove', this._move);
+      this._element.addEventListener(
+        this._rawUpdates ? 'pointerrawupdate' : 'pointermove',
+        this._move,
+      );
       this._element.addEventListener('pointerup', this._pointerEnd);
@@ -240,3 +256,3 @@ this._element.addEventListener('pointercancel', this._pointerEnd);
       'changedTouches' in event // Shortcut for 'is touch event'.
-        ? Array.from(event.changedTouches).map(t => new Pointer(t))
+        ? Array.from(event.changedTouches).map((t) => new Pointer(t))
         : [new Pointer(event)];
@@ -246,3 +262,3 @@ const trackedChangedPointers = [];
     for (const pointer of changedPointers) {
-      const index = this.currentPointers.findIndex(p => p.id === pointer.id);
+      const index = this.currentPointers.findIndex((p) => p.id === pointer.id);
       if (index === -1) continue; // Not a pointer we're tracking
@@ -268,3 +284,3 @@ trackedChangedPointers.push(pointer);
   ): boolean => {
-    const index = this.currentPointers.findIndex(p => p.id === pointer.id);
+    const index = this.currentPointers.findIndex((p) => p.id === pointer.id);
     // Not a pointer we're interested in?
@@ -293,3 +309,6 @@ if (index === -1) return false;
       if (this.currentPointers.length) return;
-      this._element.removeEventListener('pointermove', this._move);
+      this._element.removeEventListener(
+        this._rawUpdates ? 'pointerrawupdate' : 'pointermove',
+        this._move,
+      );
       this._element.removeEventListener('pointerup', this._pointerEnd);
@@ -296,0 +315,0 @@ this._element.removeEventListener('pointercancel', this._pointerEnd);

lib/missing-types.d.ts

@@ -23,1 +23,5 @@ /**
 }
+
+interface HTMLElementEventMap {
+  pointerrawupdate: PointerEvent;
+}

package.json

 {
   "name": "pointer-tracker",
-  "version": "2.2.1",
+  "version": "2.3.0",
   "description": "Track mouse/touch/pointer events through one interface",
@@ -29,7 +29,7 @@ "main": "dist/PointerTracker.js",
     "husky": "^4.2.3",
-    "lint-staged": "^10.0.8",
-    "prettier": "1.19.1",
-    "rollup": "^2.1.0",
+    "lint-staged": "^10.1.0",
+    "prettier": "^2.0.2",
+    "rollup": "^2.3.1",
     "rollup-plugin-terser": "^5.3.0",
-    "rollup-plugin-typescript2": "^0.26.0",
+    "rollup-plugin-typescript2": "^0.27.0",
     "typescript": "^3.8.3"
@@ -36,0 +36,0 @@ },

README.md

@@ -34,2 +34,6 @@ # PointerTracker
   },
+  // 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.
+  // The default is false.
+  rawUpdates: false,
 });
@@ -36,0 +40,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

57076

increased by7.07%

Number of package files

14

increased by7.69%

Lines of code

928

increased by3.34%

Number of lines in readme file

80

increased by5.26%

No dependency changes