2024-08-02 10:43:51 +00:00
|
|
|
import { CurrentUserMark } from '../../types/mark.ts'
|
2024-07-17 08:25:02 +00:00
|
|
|
import styles from '../DrawPDFFields/style.module.scss'
|
2024-08-23 11:39:49 +00:00
|
|
|
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
|
2024-08-27 13:24:19 +00:00
|
|
|
import { useScale } from '../../hooks/useScale.tsx'
|
2024-07-17 08:25:02 +00:00
|
|
|
|
|
|
|
interface PdfMarkItemProps {
|
2024-08-02 10:43:51 +00:00
|
|
|
userMark: CurrentUserMark
|
2024-07-18 12:38:07 +00:00
|
|
|
handleMarkClick: (id: number) => void
|
2024-08-02 10:43:51 +00:00
|
|
|
selectedMarkValue: string
|
|
|
|
selectedMark: CurrentUserMark | null
|
2024-08-27 13:24:19 +00:00
|
|
|
pageWidth: number
|
2024-07-17 08:25:02 +00:00
|
|
|
}
|
|
|
|
|
2024-08-05 11:11:15 +00:00
|
|
|
/**
|
|
|
|
* Responsible for display an individual Pdf Mark.
|
|
|
|
*/
|
2024-08-11 19:19:26 +00:00
|
|
|
const PdfMarkItem = ({
|
|
|
|
selectedMark,
|
|
|
|
handleMarkClick,
|
|
|
|
selectedMarkValue,
|
2024-08-23 19:30:32 +00:00
|
|
|
userMark,
|
2024-08-27 13:24:19 +00:00
|
|
|
pageWidth
|
2024-08-11 19:19:26 +00:00
|
|
|
}: PdfMarkItemProps) => {
|
|
|
|
const { location } = userMark.mark
|
|
|
|
const handleClick = () => handleMarkClick(userMark.mark.id)
|
|
|
|
const isEdited = () => selectedMark?.mark.id === userMark.mark.id
|
|
|
|
const getMarkValue = () =>
|
|
|
|
isEdited() ? selectedMarkValue : userMark.currentValue
|
2024-08-27 13:24:19 +00:00
|
|
|
const { from } = useScale()
|
2024-07-17 08:25:02 +00:00
|
|
|
return (
|
|
|
|
<div
|
2024-07-18 12:38:07 +00:00
|
|
|
onClick={handleClick}
|
2024-08-23 11:39:49 +00:00
|
|
|
className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
|
2024-07-17 08:25:02 +00:00
|
|
|
style={{
|
2024-08-27 13:24:19 +00:00
|
|
|
left: inPx(from(pageWidth, location.left)),
|
|
|
|
top: inPx(from(pageWidth, location.top)),
|
|
|
|
width: inPx(from(pageWidth, location.width)),
|
|
|
|
height: inPx(from(pageWidth, location.height)),
|
2024-08-23 11:39:49 +00:00
|
|
|
fontFamily: FONT_TYPE,
|
2024-08-27 13:24:19 +00:00
|
|
|
fontSize: inPx(from(pageWidth, FONT_SIZE))
|
2024-07-17 08:25:02 +00:00
|
|
|
}}
|
2024-08-11 19:19:26 +00:00
|
|
|
>
|
|
|
|
{getMarkValue()}
|
|
|
|
</div>
|
2024-07-17 08:25:02 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
2024-08-11 19:19:26 +00:00
|
|
|
export default PdfMarkItem
|