From 9ac2ff22263da6cdcea2e4c42cffeeb87fa97bbe Mon Sep 17 00:00:00 2001 From: Abdulraahman Dabbagh <1924466@stud.hs-mannheim.de> Date: Wed, 4 Jun 2025 22:46:36 +0200 Subject: [PATCH] Fix: Mergekonflikt bereinigt & Wort-Highlighting im PDF integriert --- project/frontend/src/components/pdfViewer.tsx | 309 +++++++----------- 1 file changed, 110 insertions(+), 199 deletions(-) diff --git a/project/frontend/src/components/pdfViewer.tsx b/project/frontend/src/components/pdfViewer.tsx index b524c68..b1069fb 100644 --- a/project/frontend/src/components/pdfViewer.tsx +++ b/project/frontend/src/components/pdfViewer.tsx @@ -1,220 +1,131 @@ -<<<<<<< HEAD +import { useEffect, useRef, useState, useCallback } from "react"; import { Document, Page, pdfjs } from "react-pdf"; -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'; - - - - -pdfjs.GlobalWorkerOptions.workerSrc = new URL( - "pdfjs-dist/build/pdf.worker.min.mjs", - import.meta.url, -).toString(); - -type Props = { - selectedLabel: string | null; - }; - - export default function PDFViewer({ selectedLabel }: Props) { - const [numPages, setNumPages] = useState(null); - const [pageNumber, setPageNumber] = useState(1); - const [containerWidth, setContainerWidth] = useState(null); -======= -import { useEffect, useRef, useState } from "react"; -import { Document, Page } from "react-pdf"; import "react-pdf/dist/esm/Page/AnnotationLayer.css"; import "react-pdf/dist/esm/Page/TextLayer.css"; import ArrowCircleLeftIcon from "@mui/icons-material/ArrowCircleLeft"; import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight"; import { Box, IconButton } from "@mui/material"; +pdfjs.GlobalWorkerOptions.workerSrc = new URL( + "pdfjs-dist/build/pdf.worker.min.mjs", + import.meta.url +).toString(); + interface PDFViewerProps { - pitchBookId: string; + pitchBookId: string; + currentPage?: number; } -export default function PDFViewer({ pitchBookId }: PDFViewerProps) { - const [numPages, setNumPages] = useState(null); - const [pageNumber, setPageNumber] = useState(1); - const [containerWidth, setContainerWidth] = useState(null); - const containerRef = useRef(null); - const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { - setNumPages(numPages); - }; ->>>>>>> origin/main +export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps) { + const [numPages, setNumPages] = useState(null); + const [pageNumber, setPageNumber] = useState(currentPage || 1); + const [containerWidth, setContainerWidth] = useState(null); + const containerRef = useRef(null); - useEffect(() => { - const updateWidth = () => { - if (containerRef.current) { - setContainerWidth(containerRef.current.offsetWidth); - } - }; + const [highlightLabels, setHighlightLabels] = useState([]); - updateWidth(); - window.addEventListener("resize", updateWidth); - return () => window.removeEventListener("resize", updateWidth); - }, []); + const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { + setNumPages(numPages); + }; -<<<<<<< HEAD - const [highlightLabels, setHighlightLabels] = useState([]); + // Aktuelle Containergröße berechnen + useEffect(() => { + const updateWidth = () => { + if (containerRef.current) { + setContainerWidth(containerRef.current.offsetWidth); + } + }; + updateWidth(); + window.addEventListener("resize", updateWidth); + return () => window.removeEventListener("resize", updateWidth); + }, []); - // 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, '$1'); - } - return text; + // Seite ändern, wenn prop sich ändert + useEffect(() => { + if (currentPage && currentPage !== pageNumber) { + setPageNumber(currentPage); } + }, [currentPage]); - // TextRenderer für PDF - const textRenderer = useCallback( + // Highlight-Logik + useEffect(() => { + setHighlightLabels(["LTV", "Fondsmanager", "Risikoprofil"]); + }, []); + + function highlightPattern(text: string, patterns: string[]) { + for (const word of patterns) { + const regex = new RegExp(`(${word})`, "gi"); + text = text.replace(regex, "$1"); + } + return text; + } + + 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) { - setContainerWidth(containerRef.current.offsetWidth); - } - }; - - updateWidth(); - window.addEventListener('resize', updateWidth); - return () => window.removeEventListener('resize', updateWidth); - }, []); - - return ( - + + + console.error("Es gab ein Fehler beim Laden des PDFs:", error) + } + onSourceError={(error) => console.error("Ungültige PDF:", error)} > - - console.error('Fehler beim Laden:', error)} - onSourceError={(error) => console.error('Ungültige PDF:', error)} - > - {containerWidth && ( - - - - - )} - - - - - setPageNumber(p => p - 1)}> - - - {pageNumber} / {numPages} - = (numPages || 1)} - onClick={() => setPageNumber(p => p + 1)} - > - - - - - ); + {containerWidth && ( + + )} + + + + setPageNumber((p) => p - 1)} + > + + + + {pageNumber} / {numPages} + + = (numPages || 1)} + onClick={() => setPageNumber((p) => p + 1)} + > + + + + + ); } -======= - return ( - - - - console.error("Es gab ein Fehler beim Laden des PDFs:", error) - } - onSourceError={(error) => console.error("Ungültige PDF:", error)} - > - {containerWidth && ( - - )} - - - - setPageNumber((p) => p - 1)} - > - - - - {pageNumber} / {numPages} - - = (numPages || 1)} - onClick={() => setPageNumber((p) => p + 1)} - > - - - - - ); -} ->>>>>>> origin/main