Improve panning and wheel configuration

HorusGoul · Dec 23, 2024 · 168b024 · 168b024
1 parent 2420d23
commit 168b024
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/apps/pwa/package.json b/apps/pwa/package.json
@@ -40,7 +40,7 @@
     "react-helmet-async": "^1.3.0",
     "react-hyper-scroller": "^3.1.0-beta.2",
     "react-router-dom": "6.28.0",
-    "react-zoom-pan-pinch": "^3.0.7",
+    "react-zoom-pan-pinch": "^3.5.1",
     "tailwind-merge": "2.5.5",
     "workbox-precaching": "^6.5.4",
     "zustand": "^4.3.2"

diff --git a/apps/pwa/src/components/periodic-table/PeriodicTable.tsx b/apps/pwa/src/components/periodic-table/PeriodicTable.tsx
@@ -183,6 +183,15 @@ function PeriodicTable({ elementRenderer, className }: PeriodicTableProps) {
           disabled: true,
         }}
         ref={reactZoomRef}
+        wheel={{
+          step: 0.2,
+          smoothStep: 0.001,
+        }}
+        panning={{
+          allowRightClickPan: false,
+          allowMiddleClickPan: false,
+          velocityDisabled: true,
+        }}
       >
         <TransformComponent
           contentStyle={{ width: "100%", height: "100%" }}

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml