Use forked version of react-zoom-pan-pinch

Remove a bunch of hacks and hopefully make it work on mobile now
jboolean · Dec 22, 2024 · bf2e723 · bf2e723
1 parent 9c25777
commit bf2e723
Show file tree

Hide file tree

Showing 7 changed files with 215 additions and 161 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -17,6 +17,7 @@
   "author": "Julian Boilen",
   "license": "UNLICENSED",
   "dependencies": {
+    "@jboolean/react-zoom-pan-pinch": "^3.7.0",
     "@sentry/react": "^7.119.2",
     "@sentry/tracing": "^7.114.0",
     "@stripe/stripe-js": "^1.42.0",
@@ -42,7 +43,6 @@
     "react-virtualized-auto-sizer": "^1.0.7",
     "react-window": "^1.8.7",
     "react-window-infinite-loader": "^1.0.9",
-    "react-zoom-pan-pinch": "^3.6.1",
     "zustand": "^4.1.5"
   },
   "devDependencies": {

diff --git a/frontend/src/screens/App/screens/ViewerPane/ViewerPane.less b/frontend/src/screens/App/screens/ViewerPane/ViewerPane.less
@@ -96,6 +96,8 @@
     box-sizing: border-box;
 
     color: white;
+
+    user-select: all;
   }
 
   .buttons {
@@ -136,6 +138,15 @@
     grid-area: zoomHitArea;
   }
 
+  // Class name to exclude from pinch zoom
+  .panPinchExcluded {
+    user-select: text;
+  }
+
+  .panning {
+    cursor: grabbing !important;
+  }
+
   .transformWrapper,
   .transformContent {
     width: 100% !important;