From 3b1b7603c4c2a3ad83ebcabaefa7aa16cadea925 Mon Sep 17 00:00:00 2001 From: Zainab2604 Date: Wed, 25 Jun 2025 21:04:45 +0200 Subject: [PATCH 1/2] Add bold headline and zoom in pdf viewer --- project/frontend/src/components/pdfViewer.tsx | 46 ++++++++++++++++--- .../extractedResult_.$pitchBook.$kpi.tsx | 4 +- 2 files changed, 42 insertions(+), 8 deletions(-) diff --git a/project/frontend/src/components/pdfViewer.tsx b/project/frontend/src/components/pdfViewer.tsx index 4d171a7..4749c3e 100644 --- a/project/frontend/src/components/pdfViewer.tsx +++ b/project/frontend/src/components/pdfViewer.tsx @@ -12,6 +12,8 @@ import type { import { socket } from "../socket"; import { API_HOST } from "../util/api"; import { highlightPattern } from "../util/highlighting"; +import ZoomInIcon from "@mui/icons-material/ZoomIn"; +import ZoomOutIcon from "@mui/icons-material/ZoomOut"; interface PDFViewerProps { pitchBookId: string; @@ -30,7 +32,7 @@ export default function PDFViewer({ }: PDFViewerProps) { const [numPages, setNumPages] = useState(null); const [pageNumber, setPageNumber] = useState(currentPage || 1); - const [containerWidth, setContainerWidth] = useState(null); + const [baseWidth, setBaseWidth] = useState(null); const [pdfKey, setPdfKey] = useState(Date.now()); const containerRef = useRef(null); const [posHighlight, setPosHighlight] = useState([]); @@ -38,6 +40,7 @@ export default function PDFViewer({ const [textContent, setTextContent] = useState< { posKey: string; text: string; i: number }[] >([]); + const [zoomLevel, setZoomLevel] = useState(1.0); const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => { setNumPages(numPages); @@ -46,7 +49,9 @@ export default function PDFViewer({ useEffect(() => { const updateWidth = () => { if (containerRef.current) { - setContainerWidth(containerRef.current.offsetWidth); + if (!baseWidth) { + setBaseWidth(containerRef.current.offsetWidth); + } } }; @@ -186,16 +191,32 @@ export default function PDFViewer({ justifyContent="center" alignItems="center" width="100%" + maxWidth="900px" + margin="0 auto" + minHeight="80vh" height="auto" + sx={{ + backgroundColor: "#f5f5f5", + borderRadius: 2, + boxShadow: 2, + }} > console.error("Ungültige PDF:", error)} > - {containerWidth && ( + {baseWidth && ( @@ -225,6 +246,13 @@ export default function PDFViewer({ gap={1} p={1} > + setZoomLevel(z => Math.max(0.3, z - 0.1))} + title="Verkleinern" + > + + handlePageChange(pageNumber - 1)} @@ -240,6 +268,12 @@ export default function PDFViewer({ > + setZoomLevel(z => Math.min(3, z + 0.1))} + title="Vergrößern" + > + + ); diff --git a/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx b/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx index 0194c09..1fbf5fd 100644 --- a/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx +++ b/project/frontend/src/routes/extractedResult_.$pitchBook.$kpi.tsx @@ -256,8 +256,8 @@ function ExtractedResultsPage() { - - Überprüfung der Kennzahl: {kpi} + + Überprüfung der Kennzahl: {kpi} -- 2.43.0 From 740637d6a2bf41add303258a471340ebccaafc8f Mon Sep 17 00:00:00 2001 From: Jaronim Pracht Date: Fri, 27 Jun 2025 21:14:47 +0200 Subject: [PATCH 2/2] Fix formatting in text search logic and highlight rendering Adjust PDF container dimensions for better display --- project/frontend/src/components/pdfViewer.tsx | 36 ++++++++++--------- 1 file changed, 19 insertions(+), 17 deletions(-) diff --git a/project/frontend/src/components/pdfViewer.tsx b/project/frontend/src/components/pdfViewer.tsx index 4749c3e..35e5a4d 100644 --- a/project/frontend/src/components/pdfViewer.tsx +++ b/project/frontend/src/components/pdfViewer.tsx @@ -4,6 +4,8 @@ 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 ZoomInIcon from "@mui/icons-material/ZoomIn"; +import ZoomOutIcon from "@mui/icons-material/ZoomOut"; import { Box, IconButton } from "@mui/material"; import type { CustomTextRenderer, @@ -12,8 +14,6 @@ import type { import { socket } from "../socket"; import { API_HOST } from "../util/api"; import { highlightPattern } from "../util/highlighting"; -import ZoomInIcon from "@mui/icons-material/ZoomIn"; -import ZoomOutIcon from "@mui/icons-material/ZoomOut"; interface PDFViewerProps { pitchBookId: string; @@ -117,8 +117,9 @@ export default function PDFViewer({ }); if (positions.length === 0) { - let cumulativeText = ''; - const textBoundaries: { start: number; end: number; index: number }[] = []; + let cumulativeText = ""; + const textBoundaries: { start: number; end: number; index: number }[] = + []; textContent.forEach((item, index) => { const start = cumulativeText.length; @@ -133,7 +134,7 @@ export default function PDFViewer({ while (searchIndex !== -1) { const endIndex = searchIndex + normalizedSearch.length; - textBoundaries.forEach(boundary => { + textBoundaries.forEach((boundary) => { if ( (boundary.start <= searchIndex && searchIndex < boundary.end) || // Search starts in this item (boundary.start < endIndex && endIndex <= boundary.end) || // Search ends in this item @@ -144,16 +145,19 @@ export default function PDFViewer({ } } }); - searchIndex = lowerCumulative.indexOf(normalizedSearch, searchIndex + 1); + searchIndex = lowerCumulative.indexOf( + normalizedSearch, + searchIndex + 1, + ); } } return positions.sort((a, b) => a - b); }; highlight - .filter(h => h.page === pageNumber) - .forEach(highlightItem => { + .filter((h) => h.page === pageNumber) + .forEach((highlightItem) => { const positions = findTextPositions(highlightItem.text); - positions.forEach(pos => { + positions.forEach((pos) => { if (pos >= 0 && pos < textContent.length) { tmpPos.push(textContent[pos].posKey); } @@ -163,7 +167,7 @@ export default function PDFViewer({ if (focusHighlight?.page === pageNumber && focusHighlight.text) { const positions = findTextPositions(focusHighlight.text); - positions.forEach(pos => { + positions.forEach((pos) => { if (pos >= 0 && pos < textContent.length) { tmpPosHighlight.push(textContent[pos].posKey); } @@ -191,10 +195,8 @@ export default function PDFViewer({ justifyContent="center" alignItems="center" width="100%" - maxWidth="900px" + maxWidth="850px" margin="0 auto" - minHeight="80vh" - height="auto" sx={{ backgroundColor: "#f5f5f5", borderRadius: 2, @@ -204,8 +206,8 @@ export default function PDFViewer({ setZoomLevel(z => Math.max(0.3, z - 0.1))} + onClick={() => setZoomLevel((z) => Math.max(0.3, z - 0.1))} title="Verkleinern" > @@ -269,7 +271,7 @@ export default function PDFViewer({ setZoomLevel(z => Math.min(3, z + 0.1))} + onClick={() => setZoomLevel((z) => Math.min(3, z + 0.1))} title="Vergrößern" > -- 2.43.0