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'
|
|
|
|
import { inPx } from '../../utils/pdf.ts'
|
|
|
|
|
|
|
|
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-07-17 08:25:02 +00:00
|
|
|
}
|
|
|
|
|
2024-08-02 10:43:51 +00:00
|
|
|
//selectedMark represents the mark that the user is actively editing
|
|
|
|
// selectedMarkValue representsnthe edited value
|
|
|
|
// userMark is part of the overall currentUserMark array
|
|
|
|
|
|
|
|
const PdfMarkItem = ({ selectedMark, handleMarkClick, selectedMarkValue, userMark }: PdfMarkItemProps) => {
|
|
|
|
const { location } = userMark.mark;
|
|
|
|
const handleClick = () => handleMarkClick(userMark.mark.id);
|
2024-07-23 09:22:53 +00:00
|
|
|
const getMarkValue = () => (
|
2024-08-02 10:43:51 +00:00
|
|
|
selectedMark?.mark.id === userMark.mark.id
|
|
|
|
? selectedMarkValue
|
|
|
|
: userMark.mark.value
|
2024-07-23 09:22:53 +00:00
|
|
|
)
|
2024-07-17 08:25:02 +00:00
|
|
|
return (
|
|
|
|
<div
|
2024-07-18 12:38:07 +00:00
|
|
|
onClick={handleClick}
|
2024-08-02 10:43:51 +00:00
|
|
|
className={styles.drawingRectangle}
|
2024-07-17 08:25:02 +00:00
|
|
|
style={{
|
2024-08-02 10:43:51 +00:00
|
|
|
left: inPx(location.left),
|
|
|
|
top: inPx(location.top),
|
|
|
|
width: inPx(location.width),
|
|
|
|
height: inPx(location.height)
|
2024-07-17 08:25:02 +00:00
|
|
|
}}
|
2024-07-23 09:22:53 +00:00
|
|
|
>{getMarkValue()}</div>
|
2024-07-17 08:25:02 +00:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default PdfMarkItem
|