From 41bcd95f622abe70967bd2a9a8cab9e62c4e0e4c Mon Sep 17 00:00:00 2001
From: freshavocado7 <nikidimitriou97@gmail.com>
Date: Tue, 25 Jun 2024 15:11:16 +0200
Subject: [PATCH] fix: Implement minor Lightbox component improvements

---
 frontend/src/components/Lightbox.jsx | 47 ++++++++--------------------
 1 file changed, 13 insertions(+), 34 deletions(-)

diff --git a/frontend/src/components/Lightbox.jsx b/frontend/src/components/Lightbox.jsx
index 7a65984..00c3a90 100644
--- a/frontend/src/components/Lightbox.jsx
+++ b/frontend/src/components/Lightbox.jsx
@@ -7,8 +7,6 @@ import { Printer, XIcon } from 'lucide-react';
 import { LightboxButton } from './LightboxButton';
 
 export const Lightbox = ({ onClose, imageSource }) => {
-  const [adjustedWidth, setAdjustedWidth] = useState('100%');
-  const [adjustedHeight, setAdjustedHeight] = useState('100%');
   const [isClicked, setIsClicked] = useState(false);
 
   useEffect(() => {
@@ -45,27 +43,12 @@ export const Lightbox = ({ onClose, imageSource }) => {
     };
   }, [onClose]);
 
-  useEffect(() => {
-    if (imageSource) {
-      const controlBar = document.getElementById('control-bar');
-      const heightMatch = imageSource.match(/height="(\d+)"/);
-      const widthMatch = imageSource.match(/width="(\d+)"/);
-      const imgHeight = heightMatch ? heightMatch[1] : 'defaultHeight';
-      const imgWidth = widthMatch ? widthMatch[1] : 'defaultWidth';
-
-      if (imgHeight + controlBar.clientHeight > window.innerHeight) {
-        let widthScale = window.innerWidth / imgWidth;
-        let heightScale =
-          (window.innerHeight - controlBar.clientHeight - 40) / imgHeight;
-        const scalingFactor = Math.min(heightScale, widthScale);
-
-        let adjustedHeight = imgHeight * scalingFactor;
-        let adjustedWidth = imgWidth * scalingFactor;
-        setAdjustedHeight(adjustedHeight);
-        setAdjustedWidth(adjustedWidth);
-      }
-    }
-  }, [imageSource]);
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(imageSource, 'image/svg+xml');
+  const svg = doc.querySelector('svg');
+  svg.setAttribute('height', 'calc(100vh - 72px)');
+  svg.setAttribute('width', '100%');
+  const modifiedSvgString = new XMLSerializer().serializeToString(doc);
 
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
@@ -88,19 +71,15 @@ export const Lightbox = ({ onClose, imageSource }) => {
         </div>
         <div className="mt-2 flex h-full w-full overflow-visible pt-16">
           {imageSource && (
-            <TransformWrapper
-              options={{ limitToBounds: true, centerContent: true }}>
+            <TransformWrapper wheel={{ smoothStep: 0.005 }}>
               <TransformComponent>
                 <div
-                  dangerouslySetInnerHTML={{ __html: imageSource }}
-                  className={`
-                    select-text overflow-visible
-                    ${isClicked ? 'cursor-grabbing' : 'cursor-grab'}`}
-                  onMouseDown={() => setIsClicked(true)}
-                  style={{
-                    width: adjustedWidth,
-                    height: adjustedHeight
-                  }}></div>
+                  dangerouslySetInnerHTML={{ __html: modifiedSvgString }}
+                  className={
+                    'select-text overflow-visible' +
+                    (isClicked ? 'cursor-grabbing' : 'cursor-grab')
+                  }
+                  onMouseDown={() => setIsClicked(true)}></div>
               </TransformComponent>
             </TransformWrapper>
           )}