feat: Add Left, Right, and Middle click pan options (#420)

Co-authored-by: Elliott Ewing <[email protected]>
BetterTyped · Oct 19, 2023 · 2777107 · 2777107
1 parent 1e38727
commit 2777107
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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),