Feature: More customizable pointer events for advanced use cases

src/InputManager.ts

@@ -8,6 +8,19 @@ export interface IViewportTouch
     last: PointData | null;
 }
 
+export interface ICustomPointerConfig
+{
+    down: 'pointerdown' | 'pointerdowncapture';
+    move: 'pointermove' | 'pointermovecapture' | 'globalpointermove';
+    up: Partial<{
+        'pointerup': 'pointerup' | 'pointerupcapture',
+        'pointerupoutside': 'pointerupoutside' | 'pointerupoutsidecapture',
+        'pointertap': 'pointertap' | 'pointertapcapture',
+        'pointercancel': 'pointercancel' | 'pointercancelcapture',
+        'pointerleave': 'pointerleave' | 'pointerleavecapture'
+    }>;
+}
+
 /**
  * Handles all input for Viewport
  *
@@ -42,9 +55,26 @@ export class InputManager
         {
             this.viewport.hitArea = new Rectangle(0, 0, this.viewport.worldWidth, this.viewport.worldHeight);
         }
+        if (!this.viewport.options.customPointerConfig)
+        {
+            this.addPointerListeners();
+        }
+        else
+        {
+            this.addCustomPointerListeners(this.viewport.options.customPointerConfig);
+        }
+
+        this.wheelFunction = (e) => this.handleWheel(e);
+        this.viewport.options.events.domElement.addEventListener(
+            'wheel',
+            this.wheelFunction as any,
+            { passive: this.viewport.options.passiveWheel });
+        this.isMouseDown = false;
+    }
+
+    private addPointerListeners() {
         this.viewport.on('pointerdown', this.down, this);
         if (this.viewport.options.allowPreserveDragOutside)
-
         {
             this.viewport.on('globalpointermove', this.move, this);
         }
@@ -60,13 +90,6 @@ export class InputManager
         {
             this.viewport.on('pointerleave', this.up, this);
         }
-
-        this.wheelFunction = (e) => this.handleWheel(e);
-        this.viewport.options.events.domElement.addEventListener(
-            'wheel',
-            this.wheelFunction as any,
-            { passive: this.viewport.options.passiveWheel });
-        this.isMouseDown = false;
     }
 
     /**
@@ -289,4 +312,15 @@ export class InputManager
     {
         return (this.isMouseDown ? 1 : 0) + this.touches.length;
     }
+
+    private addCustomPointerListeners(config: ICustomPointerConfig)
+    {
+        this.viewport.on(config.down, this.down, this);
+        this.viewport.on(config.move, this.move, this);
+        for (const key of Object.keys(config.up)) {
+            // just for bypassing type check
+            const event = (config.up as Record<string, string>)[key];
+            this.viewport.on(event, this.up, this);
+        }
+    }
 }

src/Viewport.ts

@@ -1,5 +1,5 @@
 import { Container, DestroyOptions, EventSystem, IHitArea, Point, PointData, Rectangle, Ticker, View } from 'pixi.js';
-import { InputManager } from './InputManager';
+import { InputManager, type ICustomPointerConfig } from './InputManager';
 import { PluginManager } from './PluginManager';
 import {
     Animate, Bounce, Clamp, ClampZoom, Decelerate, Drag, Follow, IAnimateOptions,
@@ -55,7 +55,6 @@ export interface IViewportOptions
     /**
      * Whether to stop drag when the pointer is out of the viewport
      */
-
     allowPreserveDragOutside?:boolean;
 
     /**
@@ -86,6 +85,12 @@ export interface IViewportOptions
      * @default PIXI.Ticker.shared
      */
     ticker?: Ticker;
+
+    /**
+     * Give you more control over which event listeners will be added.
+     * Configure only if you fully understand "InputManager.addCustomPointerListeners".
+     */
+    customPointerConfig?: ICustomPointerConfig;
 }
 
 export interface ICompleteViewportOptions extends IViewportOptions
@@ -208,6 +213,8 @@ export class Viewport extends Container
      * @param {PIXI.EventSystem} [options.events] EventSystem available from app.events or added manually and passed here
      * location on screen
      * @param {boolean} [options.disableOnContextMenu] remove oncontextmenu=() => {} from the pixi's events.domElement
+     * @param {ICustomPointerConfig} [options.customPointerConfig] Give you more control over which event listeners will be added.
+     * Configure only if you fully understand "InputManager.addCustomPointerListeners".
      */
     constructor(options: IViewportOptions)
     {