feat: Add print option for diagrams only

frontend/src/components/Lightbox.jsx

@@ -2,10 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { useEffect } from 'react';
-import {
-  TransformWrapper,
-  TransformComponent
-} from 'react-zoom-pan-pinch';
+import { TransformWrapper, TransformComponent } from 'react-zoom-pan-pinch';
+import { Printer, XIcon } from 'lucide-react';
+import { LightboxButton } from './LightboxButton';
 
 export const Lightbox = ({ onClose, imageSource }) => {
   useEffect(() => {
@@ -30,10 +29,23 @@ export const Lightbox = ({ onClose, imageSource }) => {
   }, [onClose]);
 
   return (
-    <div className="fixed inset-0 z-50 flex justify-center items-center">
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
       <div
-        className="fixed inset-0 bg-black bg-opacity-50"
+        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">
+          <LightboxButton onClick={() => window.print()} className="mr-4">
+            <Printer />
+          </LightboxButton>
+          <LightboxButton onClick={onClose}>
+            <XIcon />
+          </LightboxButton>
+        </div>
+      </div>
       <div
         style={{
           position: 'absolute',

frontend/src/components/LightboxButton.jsx

@@ -0,0 +1,14 @@
+// Copyright DB InfraGO AG and contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export const LightboxButton = ({ onClick, children, className = '' }) => {
+  return (
+    <div
+      onClick={onClick}
+      className={`flex cursor-pointer items-center justify-center
+    rounded-full p-2 text-white transition-colors duration-700
+    ease-in-out hover:bg-custom-dark-4 ${className}`}>
+      {children}
+    </div>
+  );
+};

frontend/src/components/SVGDisplay.jsx

@@ -1,39 +1,47 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { Lightbox } from './Lightbox';
 
 export const SVGDisplay = ({ content }) => {
   const [showLightbox, setShowLightbox] = useState(false);
 
+  useEffect(() => {
+    if (showLightbox) {
+      document.body.classList.add('svg-visible');
+      document.body.classList.remove('svg-hidden');
+    } else {
+      document.body.classList.add('svg-hidden');
+      document.body.classList.remove('svg-visible');
+    }
+  }, [showLightbox]);
+
   const handleSvgClick = () => {
     setShowLightbox(true);
   };
 
   return (
     <>
       <div
-        className="relative group"
+        className="group relative"
         style={{ maxWidth: '100%', height: 'auto' }}
         onClick={handleSvgClick}>
         <div
           className={
-            'absolute rounded inset-0 flex justify-center items-center ' +
-            'bg-black bg-opacity-0 group-hover:bg-opacity-50 duration-200 ' +
+            'absolute inset-0 flex items-center justify-center rounded ' +
+            'bg-black bg-opacity-0 duration-200 group-hover:bg-opacity-50 ' +
             'cursor-pointer'
           }
           style={{ pointerEvents: 'none' }}>
           <div
             className={
-              'text-transparent group-hover:text-white text-2xl font-bold'
+              'text-2xl font-bold text-transparent group-hover:text-white'
             }>
             Click to enlarge
           </div>
         </div>
-        {content && (
-          <div dangerouslySetInnerHTML={{ __html: content }}></div>
-        )}
+        {content && <div dangerouslySetInnerHTML={{ __html: content }}></div>}
       </div>
       {showLightbox && (
         <Lightbox

frontend/src/index.css

@@ -108,17 +108,30 @@ ul {
 }
 
 @media print {
-  body,
+  body.svg-hidden,
   .html-wrapper,
   .flex-1,
   .html-content {
     overflow: hidden !important;
     height: auto !important;
   }
-  .print\\:hidden {
+  body.svg-hidden .print\\:hidden {
     display: none !important;
   }
+  body.svg-hidden .html-content {
+    border: none !important;
+    box-shadow: none !important;
+    margin: auto !important;
+    width: 100% !important;
+  }
+  body.svg-visible,
+  .html-wrapper,
+  .flex-1,
   .html-content {
+    overflow: hidden !important;
+    height: 100vh !important;
+  }
+  body.svg-visible .html-content {
     border: none !important;
     box-shadow: none !important;
     margin: auto !important;