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

View File

@ -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({
<Box
ref={containerRef}
width="100%"
maxWidth="900px"
height="1000px"
// width="700px"
height="500px"
sx={{
backgroundColor: "transparent",
border: "none",
@ -248,7 +250,7 @@ export default function PDFViewer({
>
<IconButton
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"
>
<ZoomOutIcon fontSize="large" />
@ -269,7 +271,7 @@ export default function PDFViewer({
<ArrowCircleRightIcon fontSize="large" />
</IconButton>
<IconButton
onClick={() => setZoomLevel(z => Math.min(3, z + 0.1))}
onClick={() => setZoomLevel((z) => Math.min(3, z + 0.1))}
title="Vergrößern"
>
<ZoomInIcon fontSize="large" />