Fix: Mergekonflikt bereinigt & Wort-Highlighting im PDF integriert
parent
2d88e793e0
commit
9ac2ff2226
|
|
@ -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<number | null>(null);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [containerWidth, setContainerWidth] = useState<number | null>(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<number | null>(null);
|
||||
const [pageNumber, setPageNumber] = useState(1);
|
||||
const [containerWidth, setContainerWidth] = useState<number | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
|
||||
setNumPages(numPages);
|
||||
};
|
||||
>>>>>>> origin/main
|
||||
export default function PDFViewer({ pitchBookId, currentPage }: PDFViewerProps) {
|
||||
const [numPages, setNumPages] = useState<number | null>(null);
|
||||
const [pageNumber, setPageNumber] = useState(currentPage || 1);
|
||||
const [containerWidth, setContainerWidth] = useState<number | null>(null);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
const updateWidth = () => {
|
||||
if (containerRef.current) {
|
||||
setContainerWidth(containerRef.current.offsetWidth);
|
||||
}
|
||||
};
|
||||
const [highlightLabels, setHighlightLabels] = useState<string[]>([]);
|
||||
|
||||
updateWidth();
|
||||
window.addEventListener("resize", updateWidth);
|
||||
return () => window.removeEventListener("resize", updateWidth);
|
||||
}, []);
|
||||
const onDocumentLoadSuccess = ({ numPages }: { numPages: number }) => {
|
||||
setNumPages(numPages);
|
||||
};
|
||||
|
||||
<<<<<<< HEAD
|
||||
const [highlightLabels, setHighlightLabels] = useState<string[]>([]);
|
||||
// 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, '<mark>$1</mark>');
|
||||
}
|
||||
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, "<mark>$1</mark>");
|
||||
}
|
||||
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 (
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="100%"
|
||||
height="100%"
|
||||
p={2}
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="100%"
|
||||
height="100%"
|
||||
p={2}
|
||||
>
|
||||
<Box
|
||||
ref={containerRef}
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxHeight: "90vh",
|
||||
overflow: "auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Document
|
||||
file={`http://localhost:5050/api/pitch_book/${pitchBookId}/download`}
|
||||
onLoadSuccess={onDocumentLoadSuccess}
|
||||
onLoadError={(error) =>
|
||||
console.error("Es gab ein Fehler beim Laden des PDFs:", error)
|
||||
}
|
||||
onSourceError={(error) => console.error("Ungültige PDF:", error)}
|
||||
>
|
||||
<Box
|
||||
ref={containerRef}
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxHeight: '90vh',
|
||||
overflow: 'auto',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Document
|
||||
file={testPDF}
|
||||
onLoadSuccess={onDocumentLoadSuccess}
|
||||
onLoadError={(error) => console.error('Fehler beim Laden:', error)}
|
||||
onSourceError={(error) => console.error('Ungültige PDF:', error)}
|
||||
>
|
||||
{containerWidth && (
|
||||
<Box position="relative">
|
||||
<Page
|
||||
pageNumber={pageNumber}
|
||||
width={containerWidth * 0.8}
|
||||
customTextRenderer={textRenderer}
|
||||
/>
|
||||
|
||||
</Box>
|
||||
)}
|
||||
</Document>
|
||||
|
||||
</Box>
|
||||
<Box
|
||||
mt={2}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
gap={1}
|
||||
>
|
||||
<IconButton disabled={pageNumber <= 1} onClick={() => setPageNumber(p => p - 1)}>
|
||||
<ArrowCircleLeftIcon fontSize="large" />
|
||||
</IconButton>
|
||||
<span>{pageNumber} / {numPages}</span>
|
||||
<IconButton
|
||||
disabled={pageNumber >= (numPages || 1)}
|
||||
onClick={() => setPageNumber(p => p + 1)}
|
||||
>
|
||||
<ArrowCircleRightIcon fontSize="large" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
{containerWidth && (
|
||||
<Page
|
||||
pageNumber={pageNumber}
|
||||
width={containerWidth * 0.8}
|
||||
customTextRenderer={textRenderer}
|
||||
/>
|
||||
)}
|
||||
</Document>
|
||||
</Box>
|
||||
<Box
|
||||
mt={2}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
gap={1}
|
||||
>
|
||||
<IconButton
|
||||
disabled={pageNumber <= 1}
|
||||
onClick={() => setPageNumber((p) => p - 1)}
|
||||
>
|
||||
<ArrowCircleLeftIcon fontSize="large" />
|
||||
</IconButton>
|
||||
<span>
|
||||
{pageNumber} / {numPages}
|
||||
</span>
|
||||
<IconButton
|
||||
disabled={pageNumber >= (numPages || 1)}
|
||||
onClick={() => setPageNumber((p) => p + 1)}
|
||||
>
|
||||
<ArrowCircleRightIcon fontSize="large" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
=======
|
||||
return (
|
||||
<Box
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
justifyContent="center"
|
||||
alignItems="center"
|
||||
width="100%"
|
||||
height="100%"
|
||||
p={2}
|
||||
>
|
||||
<Box
|
||||
ref={containerRef}
|
||||
sx={{
|
||||
width: "100%",
|
||||
maxHeight: "90vh",
|
||||
overflow: "auto",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Document
|
||||
file={`http://localhost:5050/api/pitch_book/${pitchBookId}/download`}
|
||||
onLoadSuccess={onDocumentLoadSuccess}
|
||||
onLoadError={(error) =>
|
||||
console.error("Es gab ein Fehler beim Laden des PDFs:", error)
|
||||
}
|
||||
onSourceError={(error) => console.error("Ungültige PDF:", error)}
|
||||
>
|
||||
{containerWidth && (
|
||||
<Page pageNumber={pageNumber} width={containerWidth * 0.8} />
|
||||
)}
|
||||
</Document>
|
||||
</Box>
|
||||
<Box
|
||||
mt={2}
|
||||
display="flex"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
gap={1}
|
||||
>
|
||||
<IconButton
|
||||
disabled={pageNumber <= 1}
|
||||
onClick={() => setPageNumber((p) => p - 1)}
|
||||
>
|
||||
<ArrowCircleLeftIcon fontSize="large" />
|
||||
</IconButton>
|
||||
<span>
|
||||
{pageNumber} / {numPages}
|
||||
</span>
|
||||
<IconButton
|
||||
disabled={pageNumber >= (numPages || 1)}
|
||||
onClick={() => setPageNumber((p) => p + 1)}
|
||||
>
|
||||
<ArrowCircleRightIcon fontSize="large" />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
>>>>>>> origin/main
|
||||
|
|
|
|||
Loading…
Reference in New Issue