Customize event key code when enable trackpadPinch but wheel by mouse

[alexzhang1030]

Currently, when enabling trackpadPinch and disabling wheelZoom on the Wheel plugin, we can only use ctrlKey with mouse scroll to zoom.

Can we customize the key? If you think this is a good feature, I will open a PR.

[uinz]

I totally agree with this idea. Mac users prefer to use CMD instead of Ctrl.

[alexzhang1030]

FIY, this is a patch:

diff --git a/dist/pixi_viewport.js b/dist/pixi_viewport.js
index afe733ca61bf52f14653e6ec478016b2362ccbad..0d903af03b0f69bf4fd75eaa3372e009a0788f93 100644
--- a/dist/pixi_viewport.js
+++ b/dist/pixi_viewport.js
@@ -683,7 +683,7 @@ class D extends u {
       return !1;
     if (this.options.wheel) {
       const e = this.parent.plugins.get("wheel", !0);
-      if (!e || !e.options.wheelZoom && !t.ctrlKey) {
+      if (!e || !e.options.wheelZoom && !t.ctrlKey && !t.metaKey && !t.altKey) {
         const n = t.deltaMode ? this.options.lineHeight : 1, i = [t.deltaX, t.deltaY], [s, h] = this.options.wheelSwapAxes ? i.reverse() : i;
         return this.xDirection && (this.parent.x += s * n * this.options.wheelScroll * this.reverse), this.yDirection && (this.parent.y += h * n * this.options.wheelScroll * this.reverse), this.options.clampWheel && this.clamp(), this.parent.emit("wheel-scroll", this.parent), this.parent.emit("moved", { viewport: this.parent, type: "wheel" }), this.parent.options.passiveWheel || t.preventDefault(), this.parent.options.stopPropagation && t.stopPropagation(), !0;
       }
@@ -1092,7 +1092,7 @@ class G extends u {
   wheel(t) {
     if (this.paused || !this.checkKeyPress())
       return !1;
-    if (t.ctrlKey && this.options.trackpadPinch)
+    if ((t.ctrlKey || t.altKey || t.metaKey) && this.options.trackpadPinch)
       this.pinch(t);
     else if (this.options.wheelZoom) {
       const e = this.parent.input.getPointerPosition(t), i = (this.options.reverse ? -1 : 1) * -t.deltaY * (t.deltaMode ? this.options.lineHeight : 1) / 500, s = Math.pow(2, (1 + this.options.percent) * i);

[uinz]

@alexzhang1030 thanks, and this is my patches

diff --git a/dist/pixi_viewport.js b/dist/pixi_viewport.js
index afe733ca61bf52f14653e6ec478016b2362ccbad..d6e9d4224eaa035d6a4013cffec6999a18c9368d 100644
--- a/dist/pixi_viewport.js
+++ b/dist/pixi_viewport.js
@@ -1,4 +1,8 @@
 import { Point as c, Rectangle as y, Ticker as b, Container as H } from "pixi.js";
+
+const modKey = navigator.platform.toUpperCase().includes('MAC')
+  ? 'metaKey' : 'ctrlKey';
+
 class u {
   /** @param {Viewport} parent */
   constructor(t) {
@@ -683,7 +687,7 @@ class D extends u {
       return !1;
     if (this.options.wheel) {
       const e = this.parent.plugins.get("wheel", !0);
-      if (!e || !e.options.wheelZoom && !t.ctrlKey) {
+      if (!e || !e.options.wheelZoom && !t[modKey]) {
         const n = t.deltaMode ? this.options.lineHeight : 1, i = [t.deltaX, t.deltaY], [s, h] = this.options.wheelSwapAxes ? i.reverse() : i;
         return this.xDirection && (this.parent.x += s * n * this.options.wheelScroll * this.reverse), this.yDirection && (this.parent.y += h * n * this.options.wheelScroll * this.reverse), this.options.clampWheel && this.clamp(), this.parent.emit("wheel-scroll", this.parent), this.parent.emit("moved", { viewport: this.parent, type: "wheel" }), this.parent.options.passiveWheel || t.preventDefault(), this.parent.options.stopPropagation && t.stopPropagation(), !0;
       }
@@ -1092,7 +1096,7 @@ class G extends u {
   wheel(t) {
     if (this.paused || !this.checkKeyPress())
       return !1;
-    if (t.ctrlKey && this.options.trackpadPinch)
+    if (t[modKey] && this.options.trackpadPinch)
       this.pinch(t);
     else if (this.options.wheelZoom) {
       const e = this.parent.input.getPointerPosition(t), i = (this.options.reverse ? -1 : 1) * -t.deltaY * (t.deltaMode ? this.options.lineHeight : 1) / 500, s = Math.pow(2, (1 + this.options.percent) * i);
@@ -1409,7 +1413,7 @@ const $ = {
   ticker: b.shared,
   allowPreserveDragOutside: !1
 };
-class et extends H {
+class Viewport extends H {
   /**
    * @param {IViewportOptions} ViewportOptions
    * @param {number} [options.screenWidth=window.innerWidth]
@@ -2067,6 +2071,6 @@ export {
   J as PluginManager,
   j as Snap,
   K as SnapZoom,
-  et as Viewport,
+  Viewport as Viewport,
   G as Wheel
 };
diff --git a/dist/pixi_viewport.umd.cjs b/dist/pixi_viewport.umd.cjs
deleted file mode 100644
index a277244d221cde5f5a570437e359c8a5653130e9..0000000000000000000000000000000000000000
diff --git a/package.json b/package.json
index 2171e1291236a1b20a6826b36989fa5123012873..385859b85ae58d4a62b69dae935278805dc56dc5 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
     "name": "pixi-viewport",
     "version": "5.0.3",
     "description": "A highly configurable viewport/2D camera designed to work with pixi.js. Features include dragging, pinch-to-zoom, mouse wheel zooming, decelerated dragging, follow target, snap to point, snap to zoom, clamping, bouncing on edges, and move on mouse edges.",
-    "main": "./dist/pixi_viewport.umd.cjs",
+    "main": "./dist/pixi_viewport.js",
     "module": "./dist/pixi_viewport.js",
     "type": "module",
     "types": "./dist/index.d.ts",