Fix Lightbox Issues

frontend/package.json

@@ -33,11 +33,11 @@
     "react-dropzone": "^14.2.2",
     "react-hotkeys-hook": "4.0.2",
     "react-icons": "^4.4.0",
-    "react-image-pan-zoom-rotate": "^1.6.0",
     "react-konva": "^18.2.3",
     "react-konva-utils": "^0.3.0",
     "react-redux": "^8.0.2",
     "react-transition-group": "^4.4.5",
+    "react-zoom-pan-pinch": "^2.1.3",
     "redux-deep-persist": "^1.0.6",
     "redux-persist": "^6.0.0",
     "socket.io": "^4.5.2",

frontend/src/features/lightbox/components/ReactPanZoom.tsx

@@ -8,7 +8,7 @@ import {
   BiZoomOut,
 } from 'react-icons/bi';
 import { MdFlip } from 'react-icons/md';
-import { PanViewer } from 'react-image-pan-zoom-rotate';
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 
 type ReactPanZoomProps = {
   image: string;
@@ -23,29 +23,9 @@ export default function ReactPanZoom({
   ref,
   styleClass,
 }: ReactPanZoomProps) {
-  const [dx, setDx] = React.useState(0);
-  const [dy, setDy] = React.useState(0);
-  const [zoom, setZoom] = React.useState(1);
   const [rotation, setRotation] = React.useState(0);
   const [flip, setFlip] = React.useState(false);
 
-  const resetAll = () => {
-    setDx(0);
-    setDy(0);
-    setZoom(1);
-    setRotation(0);
-    setFlip(false);
-  };
-  const zoomIn = () => {
-    setZoom(zoom + 0.2);
-  };
-
-  const zoomOut = () => {
-    if (zoom >= 0.5) {
-      setZoom(zoom - 0.2);
-    }
-  };
-
   const rotateLeft = () => {
     if (rotation === -3) {
       setRotation(0);
@@ -66,90 +46,90 @@ export default function ReactPanZoom({
     setFlip(!flip);
   };
 
-  const onPan = (dx: number, dy: number) => {
-    setDx(dx);
-    setDy(dy);
-  };
-
   return (
-    <div>
+    <>
-      <div className="lightbox-image-options">
+      <TransformWrapper
-        <IAIIconButton
+        initialScale={1}
-          icon={<BiZoomIn />}
+        initialPositionX={200}
-          aria-label="Zoom In"
+        initialPositionY={100}
-          tooltip="Zoom In"
-          onClick={zoomIn}
-          fontSize={20}
-        />
-
-        <IAIIconButton
-          icon={<BiZoomOut />}
-          aria-label="Zoom Out"
-          tooltip="Zoom Out"
-          onClick={zoomOut}
-          fontSize={20}
-        />
-
-        <IAIIconButton
-          icon={<BiRotateLeft />}
-          aria-label="Rotate Left"
-          tooltip="Rotate Left"
-          onClick={rotateLeft}
-          fontSize={20}
-        />
-
-        <IAIIconButton
-          icon={<BiRotateRight />}
-          aria-label="Rotate Right"
-          tooltip="Rotate Right"
-          onClick={rotateRight}
-          fontSize={20}
-        />
-
-        <IAIIconButton
-          icon={<MdFlip />}
-          aria-label="Flip Image"
-          tooltip="Flip Image"
-          onClick={flipImage}
-          fontSize={20}
-        />
-
-        <IAIIconButton
-          icon={<BiReset />}
-          aria-label="Reset"
-          tooltip="Reset"
-          onClick={resetAll}
-          fontSize={20}
-        />
-      </div>
-      <PanViewer
-        style={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
-          zIndex: 1,
-        }}
-        zoom={zoom}
-        setZoom={setZoom}
-        pandx={dx}
-        pandy={dy}
-        onPan={onPan}
-        rotation={rotation}
-        key={dx}
       >
-        <img
+        {({ zoomIn, zoomOut, resetTransform }) => (
-          style={{
+          <>
-            transform: `rotate(${rotation * 90}deg) scaleX(${flip ? -1 : 1})`,
+            <div className="lightbox-image-options">
-            width: '100%',
+              <IAIIconButton
-          }}
+                icon={<BiZoomIn />}
-          src={image}
+                aria-label="Zoom In"
-          alt={alt}
+                tooltip="Zoom In"
-          ref={ref}
+                onClick={() => zoomIn()}
-          className={styleClass ? styleClass : ''}
+                fontSize={20}
-        />
+              />
-      </PanViewer>
+
-    </div>
+              <IAIIconButton
+                icon={<BiZoomOut />}
+                aria-label="Zoom Out"
+                tooltip="Zoom Out"
+                onClick={() => zoomOut()}
+                fontSize={20}
+              />
+
+              <IAIIconButton
+                icon={<BiRotateLeft />}
+                aria-label="Rotate Left"
+                tooltip="Rotate Left"
+                onClick={rotateLeft}
+                fontSize={20}
+              />
+
+              <IAIIconButton
+                icon={<BiRotateRight />}
+                aria-label="Rotate Right"
+                tooltip="Rotate Right"
+                onClick={rotateRight}
+                fontSize={20}
+              />
+
+              <IAIIconButton
+                icon={<MdFlip />}
+                aria-label="Flip Image"
+                tooltip="Flip Image"
+                onClick={flipImage}
+                fontSize={20}
+              />
+
+              <IAIIconButton
+                icon={<BiReset />}
+                aria-label="Reset"
+                tooltip="Reset"
+                onClick={() => {
+                  resetTransform();
+                  setRotation(0);
+                  setFlip(false);
+                }}
+                fontSize={20}
+              />
+            </div>
+
+            <TransformComponent
+              wrapperStyle={{ width: '100%', height: '100%' }}
+            >
+              <div>
+                <img
+                  style={{
+                    transform: `rotate(${rotation * 90}deg) scaleX(${
+                      flip ? -1 : 1
+                    })`,
+                    width: '100%',
+                  }}
+                  src={image}
+                  alt={alt}
+                  ref={ref}
+                  className={styleClass ? styleClass : ''}
+                />
+              </div>
+            </TransformComponent>
+          </>
+        )}
+      </TransformWrapper>
+    </>
   );
 }

frontend/yarn.lock

@@ -3405,11 +3405,6 @@ react-icons@^4.4.0:
   resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.6.0.tgz#f83eda179af5d02c047449a20b702c858653d397"
   integrity sha512-rR/L9m9340yO8yv1QT1QurxWQvWpbNHqVX0fzMln2HEb9TEIrQRGsqiNFQfiv9/JEUbyHmHPlNTB2LWm2Ttz0g==
 
-react-image-pan-zoom-rotate@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/react-image-pan-zoom-rotate/-/react-image-pan-zoom-rotate-1.6.0.tgz#4b79dd5a160e61e1ec8d5481541e37ade4c28c6f"
-  integrity sha512-YpuMjhA9TlcyuC1vcKeTGnECAial0uEsjXUHcCk3GTeznwtnfpgLfMDhejCrilUud/hxueXrr9SJiQiycWjYVA==
-
 react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
@@ -3500,6 +3495,11 @@ react-transition-group@^4.4.5:
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
 
+react-zoom-pan-pinch@^2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/react-zoom-pan-pinch/-/react-zoom-pan-pinch-2.1.3.tgz#3b84594200343136c0d4397c33fec38dc0ee06ad"
+  integrity sha512-a5AChOWhjo0RmxsNZXGQIlNh3e3nLU6m4V6M+6dlbPNk5d+MtMxgKWyA5zpR06Lp3OZkZVF9nR8JeWSvKwck9g==
+
 react@^18.2.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5"