Merge pull request #430 from littleboarx/master

fix #422

Author: davidfig

package.json

@@ -48,14 +48,13 @@
         "url": "https://github.com/davidfig/pixi-viewport/issues"
     },
     "homepage": "https://github.com/davidfig/pixi-viewport#readme",
-    "peerDependencies": {},
     "devDependencies": {
-        "@pixi/core": "^7.0.4",
-        "@pixi/display": "^7.0.4",
+        "@pixi/core": "^7.1.1",
+        "@pixi/display": "^7.1.1",
         "@pixi/eslint-config": "^4.0.1",
-        "@pixi/events": "^7.0.4",
-        "@pixi/math": "^7.0.4",
-        "@pixi/ticker": "^7.0.4",
+        "@pixi/events": "^7.1.1",
+        "@pixi/math": "^7.1.1",
+        "@pixi/ticker": "^7.1.1",
         "@typescript-eslint/parser": "^5.5.0",
         "chai": "^4.3.4",
         "clicked": "^4.0.3",
@@ -68,7 +67,7 @@
         "jsdoc": "^3.6.3",
         "lint-staged": "^13.1.0",
         "pixi-ease": "^3.0.7",
-        "pixi.js": "^7.0.5",
+        "pixi.js": "^7.1.1",
         "raf": "^3.4.1",
         "typescript": "^4.5.2",
         "vite": "^3.2.4",

src/InputManager.ts

@@ -45,11 +45,24 @@ export class InputManager
             this.viewport.hitArea = new Rectangle(0, 0, this.viewport.worldWidth, this.viewport.worldHeight);
         }
         this.viewport.on('pointerdown', this.down, this);
-        this.viewport.on('pointermove', this.move, this);
+        if (this.viewport.options.allowPreserveDragOutside)
+
+        {
+            this.viewport.on('globalpointermove', this.move, this);
+        }
+        else
+        {
+            this.viewport.on('pointermove', this.move, this);
+        }
+
         this.viewport.on('pointerup', this.up, this);
         this.viewport.on('pointerupoutside', this.up, this);
         this.viewport.on('pointercancel', this.up, this);
-        this.viewport.on('pointerout', this.up, this);
+        if (!this.viewport.options.allowPreserveDragOutside)
+        {
+            this.viewport.on('pointerleave', this.up, this);
+        }
+
         this.wheelFunction = (e) => this.handleWheel(e);
         this.viewport.options.events.domElement.addEventListener(
             'wheel',

src/Viewport.ts

@@ -56,6 +56,12 @@ export interface IViewportOptions
      */
     stopPropagation?: boolean;
 
+    /**
+     * Whether to stop drag when the pointer is out of the viewport
+     */
+
+    allowPreserveDragOutside?:boolean;
+
     /**
      * Change the default hitArea from world size to a new value
      */
@@ -117,6 +123,7 @@ const DEFAULT_VIEWPORT_OPTIONS: Partial<ICompleteViewportOptions> = {
     noTicker: false,
     disableOnContextMenu: false,
     ticker: Ticker.shared,
+    allowPreserveDragOutside: false,
 };
 
 /**
@@ -226,6 +233,7 @@ export class Viewport extends Container
         {
             this.options.events.domElement.addEventListener('contextmenu', this._disableOnContextMenu);
         }
+
         if (!this.options.noTicker)
         {
             this.tickerFunction = () => this.update(this.options.ticker.elapsedMS);