PSE2_FF
/
pse2_ff
0
0
Fork 0
Code Issues Pull Requests Packages Projects 1 Releases Wiki Activity

Fix formatting in text search logic and highlight rendering 

Adjust PDF container dimensions for better display
pull/97/head
Jaronim Pracht 2025-06-27 21:14:47 +02:00
parent 3b1b7603c4
commit 740637d6a2
1 changed files with 19 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
project/frontend/src/components/pdfViewer.tsx
View File

@ -4,6 +4,8 @@ import "react-pdf/dist/esm/Page/AnnotationLayer.css";
import "react-pdf/dist/esm/Page/TextLayer.css"; import "react-pdf/dist/esm/Page/TextLayer.css";
import ArrowCircleLeftIcon from "@mui/icons-material/ArrowCircleLeft"; import ArrowCircleLeftIcon from "@mui/icons-material/ArrowCircleLeft";
import ArrowCircleRightIcon from "@mui/icons-material/ArrowCircleRight"; 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 { Box, IconButton } from "@mui/material";
import type { import type {
CustomTextRenderer, CustomTextRenderer,
@ -12,8 +14,6 @@ import type {
import { socket } from "../socket"; import { socket } from "../socket";
import { API_HOST } from "../util/api"; import { API_HOST } from "../util/api";
import { highlightPattern } from "../util/highlighting"; import { highlightPattern } from "../util/highlighting";
import ZoomInIcon from "@mui/icons-material/ZoomIn";
import ZoomOutIcon from "@mui/icons-material/ZoomOut";
interface PDFViewerProps { interface PDFViewerProps {
pitchBookId: string; pitchBookId: string;
@ -117,8 +117,9 @@ export default function PDFViewer({
}); });
if (positions.length === 0) { if (positions.length === 0) {
let cumulativeText = ''; let cumulativeText = "";
const textBoundaries: { start: number; end: number; index: number }[] = []; const textBoundaries: { start: number; end: number; index: number }[] =
[];
textContent.forEach((item, index) => { textContent.forEach((item, index) => {
const start = cumulativeText.length; const start = cumulativeText.length;
@ -133,7 +134,7 @@ export default function PDFViewer({
while (searchIndex !== -1) { while (searchIndex !== -1) {
const endIndex = searchIndex + normalizedSearch.length; const endIndex = searchIndex + normalizedSearch.length;
textBoundaries.forEach(boundary => { textBoundaries.forEach((boundary) => {
if ( if (
(boundary.start <= searchIndex && searchIndex < boundary.end) || // Search starts in this item (boundary.start <= searchIndex && searchIndex < boundary.end) || // Search starts in this item
(boundary.start < endIndex && endIndex <= boundary.end) || // Search ends 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); return positions.sort((a, b) => a - b);
}; };
highlight highlight
.filter(h => h.page === pageNumber) .filter((h) => h.page === pageNumber)
.forEach(highlightItem => { .forEach((highlightItem) => {
const positions = findTextPositions(highlightItem.text); const positions = findTextPositions(highlightItem.text);
positions.forEach(pos => { positions.forEach((pos) => {
if (pos >= 0 && pos < textContent.length) { if (pos >= 0 && pos < textContent.length) {
tmpPos.push(textContent[pos].posKey); tmpPos.push(textContent[pos].posKey);
} }
@ -163,7 +167,7 @@ export default function PDFViewer({
if (focusHighlight?.page === pageNumber && focusHighlight.text) { if (focusHighlight?.page === pageNumber && focusHighlight.text) {
const positions = findTextPositions(focusHighlight.text); const positions = findTextPositions(focusHighlight.text);
positions.forEach(pos => { positions.forEach((pos) => {
if (pos >= 0 && pos < textContent.length) { if (pos >= 0 && pos < textContent.length) {
tmpPosHighlight.push(textContent[pos].posKey); tmpPosHighlight.push(textContent[pos].posKey);
} }
@ -191,10 +195,8 @@ export default function PDFViewer({
justifyContent="center" justifyContent="center"
alignItems="center" alignItems="center"
width="100%" width="100%"
maxWidth="900px" maxWidth="850px"
margin="0 auto" margin="0 auto"
minHeight="80vh"
height="auto"
sx={{ sx={{
backgroundColor: "#f5f5f5", backgroundColor: "#f5f5f5",
borderRadius: 2, borderRadius: 2,
@ -204,8 +206,8 @@ export default function PDFViewer({
<Box <Box
ref={containerRef} ref={containerRef}
width="100%" width="100%"
maxWidth="900px" // width="700px"
height="1000px" height="500px"
sx={{ sx={{
backgroundColor: "transparent", backgroundColor: "transparent",
border: "none", border: "none",
@ -248,7 +250,7 @@ export default function PDFViewer({
> >
<IconButton <IconButton
disabled={zoomLevel <= 0.3} disabled={zoomLevel <= 0.3}
onClick={() => setZoomLevel(z => Math.max(0.3, z - 0.1))} onClick={() => setZoomLevel((z) => Math.max(0.3, z - 0.1))}
title="Verkleinern" title="Verkleinern"
> >
<ZoomOutIcon fontSize="large" /> <ZoomOutIcon fontSize="large" />
@ -269,7 +271,7 @@ export default function PDFViewer({
<ArrowCircleRightIcon fontSize="large" /> <ArrowCircleRightIcon fontSize="large" />
</IconButton> </IconButton>
<IconButton <IconButton
onClick={() => setZoomLevel(z => Math.min(3, z + 0.1))} onClick={() => setZoomLevel((z) => Math.min(3, z + 0.1))}
title="Vergrößern" title="Vergrößern"
> >
<ZoomInIcon fontSize="large" /> <ZoomInIcon fontSize="large" />