From 277710718813cd9ee3f229268b7ef7e688d340dd Mon Sep 17 00:00:00 2001
From: Elliott Ewing <quentillionaire@gmail.com>
Date: Thu, 19 Oct 2023 10:04:23 -0700
Subject: [PATCH] feat: Add Left, Right, and Middle click pan options (#420)

Co-authored-by: Elliott Ewing <quent@rivalesports.com>
---
 src/constants/state.constants.ts |  3 +++
 src/core/instance.core.ts        |  4 ++++
 src/models/context.model.ts      |  3 +++
 src/stories/docs/props.tsx       | 18 ++++++++++++++++++
 4 files changed, 28 insertions(+)

diff --git a/src/constants/state.constants.ts b/src/constants/state.constants.ts
index a83008d7..64f68bdc 100644
--- a/src/constants/state.constants.ts
+++ b/src/constants/state.constants.ts
@@ -34,6 +34,9 @@ export const initialSetup: LibrarySetup = {
     velocityDisabled: false,
     lockAxisX: false,
     lockAxisY: false,
+    allowLeftClickPan: true,
+    allowMiddleClickPan: true,
+    allowRightClickPan: true,
     activationKeys: [],
     excluded: [],
   },
diff --git a/src/core/instance.core.ts b/src/core/instance.core.ts
index 4b17a520..d3f16c56 100644
--- a/src/core/instance.core.ts
+++ b/src/core/instance.core.ts
@@ -208,6 +208,10 @@ export class ZoomPanPinch {
     const keysPressed = this.isPressingKeys(this.setup.panning.activationKeys);
     if (!keysPressed) return;
 
+    if(event.button == 0 && !this.setup.panning.allowLeftClickPan) return;
+    if(event.button == 1 && !this.setup.panning.allowMiddleClickPan) return;
+    if(event.button == 2 && !this.setup.panning.allowRightClickPan) return;
+
     event.preventDefault();
     event.stopPropagation();
 
diff --git a/src/models/context.model.ts b/src/models/context.model.ts
index fbe78511..be13e0d5 100644
--- a/src/models/context.model.ts
+++ b/src/models/context.model.ts
@@ -81,6 +81,9 @@ export type ReactZoomPanPinchProps = {
     velocityDisabled?: boolean;
     lockAxisX?: boolean;
     lockAxisY?: boolean;
+    allowLeftClickPan?: boolean;
+    allowMiddleClickPan?: boolean;
+    allowRightClickPan?: boolean;
     activationKeys?: string[];
     excluded?: string[];
   };
diff --git a/src/stories/docs/props.tsx b/src/stories/docs/props.tsx
index 5b0da6c8..be8b3bee 100644
--- a/src/stories/docs/props.tsx
+++ b/src/stories/docs/props.tsx
@@ -248,6 +248,24 @@ export const wrapperPropsTable: ComponentProps = {
       description:
         "Disable the panning feature for the Y axis (prevents vertical panning).",
     },
+    allowLeftClickPan: {
+      type: ["boolean"],
+      defaultValue: String(initialSetup.panning.allowLeftClickPan),
+      description:
+        "Allow left click to initiate panning",
+    },
+    allowMiddleClickPan: {
+      type: ["boolean"],
+      defaultValue: String(initialSetup.panning.allowMiddleClickPan),
+      description:
+        "Allow middle click to initiate panning",
+    },
+    allowRightClickPan: {
+      type: ["boolean"],
+      defaultValue: String(initialSetup.panning.allowRightClickPan),
+      description:
+        "Allow right click to initiate panning",
+    },
     activationKeys: {
       type: ["string[]"],
       defaultValue: String(initialSetup.panning.activationKeys),