sigit.io/src/components/PDFView/PdfPageItem.tsx

74 lines
2.1 KiB
TypeScript
Raw Normal View History

import styles from '../DrawPDFFields/style.module.scss'
import { PdfPage } from '../../types/drawing.ts'
import { CurrentUserMark, Mark } from '../../types/mark.ts'
import PdfMarkItem from './PdfMarkItem.tsx'
2024-08-14 12:24:15 +03:00
import { useEffect, useRef } from 'react'
import pdfViewStyles from './style.module.scss'
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
interface PdfPageProps {
currentUserMarks: CurrentUserMark[]
handleMarkClick: (id: number) => void
otherUserMarks: Mark[]
page: PdfPage
selectedMark: CurrentUserMark | null
selectedMarkValue: string
}
/**
* Responsible for rendering a single Pdf Page and its Marks
*/
2024-08-14 12:24:15 +03:00
const PdfPageItem = ({
page,
currentUserMarks,
handleMarkClick,
selectedMarkValue,
selectedMark,
otherUserMarks
2024-08-14 12:24:15 +03:00
}: PdfPageProps) => {
useEffect(() => {
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
markRefs.current[selectedMark.id]?.scrollIntoView({
behavior: 'smooth'
2024-08-14 12:24:15 +03:00
})
}
}, [selectedMark])
const markRefs = useRef<(HTMLDivElement | null)[]>([])
return (
<div className={`image-wrapper ${styles.pdfImageWrapper}`}>
<img draggable="false" src={page.image} />
2024-08-14 12:24:15 +03:00
{currentUserMarks.map((m, i) => (
<div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
<PdfMarkItem
key={i}
handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue}
userMark={m}
selectedMark={selectedMark}
scale={page.scale}
2024-08-14 12:24:15 +03:00
/>
</div>
))}
{otherUserMarks.map((m, i) => {
return (
<div
key={i}
className={pdfViewStyles.otherUserMarksDisplay}
style={{
left: inPx(m.location.left * page.scale),
top: inPx(m.location.top * page.scale),
width: inPx(m.location.width * page.scale),
height: inPx(m.location.height * page.scale),
fontFamily: FONT_TYPE,
fontSize: inPx(FONT_SIZE * page.scale)
}}
>
{m.value}
</div>
)
})}
</div>
)
}
2024-08-14 12:24:15 +03:00
export default PdfPageItem