fix: Adjust image ratio for larger SVGs

DSD-DBS · Jun 24, 2024 · 2c43b6f · 2c43b6f
1 parent c6fabf7
commit 2c43b6f
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 31 deletions.
diff --git a/frontend/src/components/Lightbox.jsx b/frontend/src/components/Lightbox.jsx
@@ -1,12 +1,15 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
 import { Printer, XIcon } from 'lucide-react';
 import { LightboxButton } from './LightboxButton';
 
 export const Lightbox = ({ onClose, imageSource }) => {
+  const [adjustedWidth, setAdjustedWidth] = useState(0);
+  const [adjustedHeight, setAdjustedHeight] = useState(0);
+
   useEffect(() => {
     const handleEscape = (event) => {
       if (event.key === 'Escape') {
@@ -28,44 +31,66 @@ 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 > window.innerHeight) {
+        let widthScale = window.innerWidth / imgWidth;
+        let heightScale =
+          (window.innerHeight - controlBar.clientHeight - 20) / imgHeight;
+        const scalingFactor = Math.min(heightScale, widthScale);
+
+        let adjustedHeight = imgHeight * scalingFactor;
+        let adjustedWidth = imgWidth * scalingFactor;
+        setAdjustedHeight(adjustedHeight);
+        setAdjustedWidth(adjustedWidth);
+      } else {
+        setAdjustedHeight('100%');
+        setAdjustedWidth('100%');
+      }
+    }
+  }, [imageSource]);
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div
         className="fixed inset-0 bg-black bg-opacity-85"
         onClick={onClose}></div>
-      <div
-        className={`
-          absolute left-0 right-0 top-0 z-50 bg-black py-4 print:hidden
-        `}>
-        <div className="flex justify-center">
+      <div className="z-50 flex flex-col items-center justify-center">
+        <div
+          id="control-bar"
+          className={`
+            fixed top-0 z-50 flex w-screen justify-center bg-black py-4
+             print:hidden
+          `}>
           <LightboxButton onClick={() => window.print()} className="mr-4">
             <Printer />
           </LightboxButton>
           <LightboxButton onClick={onClose}>
             <XIcon />
           </LightboxButton>
         </div>
-      </div>
-      <div
-        style={{
-          position: 'absolute',
-          maxWidth: '100%',
-          height: 'auto',
-          zIndex: 1
-        }}>
-        {imageSource && (
-          <TransformWrapper>
-            <TransformComponent>
-              <div
-                dangerouslySetInnerHTML={{ __html: imageSource }}
-                style={{
-                  width: '100%',
-                  overflow: 'auto',
-                  userSelect: 'text'
-                }}></div>
-            </TransformComponent>
-          </TransformWrapper>
-        )}
+        <div className="flex h-full w-full overflow-visible pt-16">
+          {imageSource && (
+            <TransformWrapper
+              options={{ limitToBounds: true, centerContent: true }}>
+              <TransformComponent>
+                <div
+                  dangerouslySetInnerHTML={{ __html: imageSource }}
+                  className="select-text overflow-visible"
+                  style={{
+                    width: adjustedWidth,
+                    height: adjustedHeight
+                  }}></div>
+              </TransformComponent>
+            </TransformWrapper>
+          )}
+        </div>
       </div>
     </div>
   );

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -124,10 +124,7 @@ ul {
     margin: auto !important;
     width: 100% !important;
   }
-  body.svg-visible,
-  .html-wrapper,
-  .flex-1,
-  .html-content {
+  body.svg-visible {
     overflow: hidden !important;
     height: 100vh !important;
   }