WIP: Lokale Änderungen vor Merge gespeichert

project/frontend/src/components/HighlightOverlay.tsx

@@ -1,30 +0,0 @@
-import { Box } from '@mui/material';
-
-type Props = {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-  type: 'all' | 'selected';
-};
-
-// Eine farbige Box, die über dem PDF angezeigt wird
-export default function HighlightOverlay({ x, y, width, height, type }: Props) {
-  return (
-    <Box
-      sx={{
-        position: 'absolute',
-        top: y,
-        left: x,
-        width: width,
-        height: height,
-        backgroundColor: type === 'all' ? 'rgba(255, 255, 0, 0.4)' : 'rgba(255, 165, 0, 0.4)',
-        border: '1px solid',
-        borderColor: type === 'all' ? '#FFD700' : '#FF8C00',
-        borderRadius: '2px',
-        pointerEvents: 'none',
-        zIndex: 10,
-      }}
-    />
-  );
-}

project/frontend/src/components/KennzahlenTable.tsx

@@ -8,7 +8,6 @@ import {
   import SearchIcon from '@mui/icons-material/Search';
   import EditIcon from '@mui/icons-material/Edit';
   import { useState } from 'react';
-  import { Dispatch, SetStateAction } from 'react';
   
   
   //  Beispiel-Daten
@@ -20,7 +19,7 @@ import {
   ];
   
   // React-Komponente
-
+  import { Dispatch, SetStateAction } from 'react';
   type Props = {
     setSelectedLabel: Dispatch<SetStateAction<string | null>>;
   };

project/frontend/src/components/highlightData.ts

@@ -1,21 +0,0 @@
-// Beispielhafte Highlight-Daten mit Labels
-export const highlightData = [
-  {
-    label: 'Risikoprofil',
-    page: 1,
-    x: 100,
-    y: 200,
-    width: 120,
-    height: 20,
-    type: 'all', // gelb
-  },
-  {
-    label: 'Risikoprofil',
-    page: 1,
-    x: 100,
-    y: 300,
-    width: 140,
-    height: 25,
-    type: 'selected', // orange (nur wenn ausgewählt)
-  }
-];

project/frontend/src/components/pdfViewer.tsx

@@ -1,13 +1,11 @@
 import { Document, Page, pdfjs } from "react-pdf";
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect, useCallback } from 'react';
 import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
 import 'react-pdf/dist/esm/Page/TextLayer.css';
 import { Box, IconButton } from '@mui/material';
 import ArrowCircleLeftIcon from '@mui/icons-material/ArrowCircleLeft';
 import ArrowCircleRightIcon from '@mui/icons-material/ArrowCircleRight';
 import testPDF from '/example.pdf';
-import HighlightOverlay from './HighlightOverlay';
-import { highlightData } from './highlightData';
 
 
   
@@ -32,6 +30,29 @@ type Props = {
         setNumPages(numPages);
     };
 
+    const [highlightLabels, setHighlightLabels] = useState<string[]>([]);
+
+    // Funktion zum Einfärben von Text
+    function highlightPattern(text: string, patterns: string[]) {
+        for (const word of patterns) {
+            const regex = new RegExp(`(${word})`, 'gi');
+            text = text.replace(regex, '<mark>$1</mark>');
+        }
+        return text;
+    }
+
+    // TextRenderer für PDF 
+    const textRenderer = useCallback(
+    (textItem: { str: string }) => highlightPattern(textItem.str, highlightLabels),
+    [highlightLabels]
+    );
+
+    // Beispielanzatz zum Einfärben von Text
+    useEffect(() => {
+        setHighlightLabels(['LTV']);
+    }, []);
+
+
     useEffect(() => {
         const updateWidth = () => {
             if (containerRef.current) {
@@ -76,19 +97,9 @@ type Props = {
                     <Page
                         pageNumber={pageNumber}
                         width={containerWidth * 0.8}
+                        customTextRenderer={textRenderer}
                     />
 
-                    {/* Highlights einfügen */}
-                    {highlightData
-                        .filter((h) => h.page === pageNumber)
-                        .map((h, idx) => (
-                        <HighlightOverlay
-                            key={idx}
-                            {...h}
-                            type={selectedLabel && h.label === selectedLabel ? 'selected' : 'all'}
-                        />
-                          
-                        ))}
                     </Box>
                 )}
                 </Document>