Improving pinch (virtual joystick stops when pinch begins)

front/src/Phaser/UserInput/PinchManager.ts

@@ -1,5 +1,6 @@
 import {Pinch} from "phaser3-rex-plugins/plugins/gestures.js";
 import {waScaleManager} from "../Services/WaScaleManager";
+import {GameScene} from "../Game/GameScene";
 
 export class PinchManager {
     private scene: Phaser.Scene;
@@ -8,9 +9,29 @@ export class PinchManager {
     constructor(scene: Phaser.Scene) {
         this.scene = scene;
         this.pinch = new Pinch(scene);
+        this.pinch.setDragThreshold(10);
+
+        // The "pinch.scaleFactor" value is very sensitive and causes the screen to flicker.
+        // We are smoothing its value with previous values to prevent the flicking.
+        let smoothPinch = 1;
+
+        this.pinch.on('pinchstart', () => {
+            smoothPinch = 1;
+        });
+
 
         this.pinch.on('pinch', (pinch:any) => { // eslint-disable-line
-            waScaleManager.zoomModifier *= pinch.scaleFactor;
+            if (pinch.scaleFactor > 1.2 || pinch.scaleFactor < 0.8) {
+                // Pinch too fast! Probably a bad measure.
+                return;
+            }
+
+            smoothPinch = 3/5*smoothPinch + 2/5*pinch.scaleFactor;
+            if (this.scene instanceof GameScene) {
+                this.scene.zoomByFactor(smoothPinch);
+            } else {
+                waScaleManager.zoomModifier *= smoothPinch;
+            }
         });
     }
 

front/src/Phaser/UserInput/UserInputManager.ts

@@ -3,6 +3,7 @@ import {GameScene} from "../Game/GameScene";
 import {touchScreenManager} from "../../Touch/TouchScreenManager";
 import {MobileJoystick} from "../Components/MobileJoystick";
 import MouseWheelToUpDown from 'phaser3-rex-plugins/plugins/mousewheeltoupdown.js';
+import {waScaleManager} from "../Services/WaScaleManager";
 
 interface UserInputManagerDatum {
     keyInstance: Phaser.Input.Keyboard.Key;
@@ -55,6 +56,7 @@ export class UserInputManager {
         this.Scene = Scene;
         this.isInputDisabled = false;
         this.initKeyBoardEvent();
+        this.initMouseWheel();
         if (touchScreenManager.supportTouchScreen) {
             this.initVirtualJoystick();
         }
@@ -175,4 +177,10 @@ export class UserInputManager {
     destroy(): void {
         this.joystick.destroy();
     }
+
+    private initMouseWheel() {
+        this.Scene.input.on('wheel', (pointer: unknown, gameObjects: unknown, deltaX: number, deltaY: number, deltaZ: number) => {
+            this.Scene.zoomByFactor(1 - deltaY / 53 * 0.1);
+        });
+    }
 }