fix: simplify events, more ts and clean up

This commit is contained in:
enes 2024-08-15 19:50:44 +02:00
parent 4cf578b514
commit 6641cf2ee7
2 changed files with 49 additions and 40 deletions

View File

@ -48,7 +48,6 @@ export const DrawPDFFields = (props: Props) => {
const [pdfFiles, setPdfFiles] = useState<PdfFile[]>([])
const [parsingPdf, setParsingPdf] = useState<boolean>(false)
const [showDrawToolBox] = useState<boolean>(true)
const [selectedTool, setSelectedTool] = useState<DrawTool | null>()
const [toolbox] = useState<DrawTool[]>([
@ -144,10 +143,7 @@ export const DrawPDFFields = (props: Props) => {
// Proceed only if left click
if (event.button !== 0) return
// Only allow drawing if mouse is not over other drawn element
const isOverPdfImageWrapper = event.currentTarget.tagName === 'IMG'
if (!selectedTool || !isOverPdfImageWrapper) {
if (!selectedTool) {
return
}
@ -199,8 +195,14 @@ export const DrawPDFFields = (props: Props) => {
) => {
if (mouseState.clicked && selectedTool) {
const lastElementIndex = page.drawnFields.length - 1
const lastDrawnField = page.drawnFields[lastElementIndex]
// Return early if we don't have lastDrawnField
// Issue noticed in the console when dragging out of bounds
// to the page below (without releaseing mouse click)
if (!lastDrawnField) return
const { mouseX, mouseY } = getMouseCoordinates(event)
const width = mouseX - lastDrawnField.left
@ -252,14 +254,14 @@ export const DrawPDFFields = (props: Props) => {
* @param event Mouse event
* @param drawnField which we are moving
*/
const onDranwFieldMouseMove = (
const onDrawnFieldMouseMove = (
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
drawnField: DrawnField
) => {
if (mouseState.dragging) {
const { mouseX, mouseY, rect } = getMouseCoordinates(
event,
event.currentTarget.parentNode as HTMLElement
event.currentTarget.parentElement
)
const coordsOffset = mouseState.coordsInWrapper
@ -313,7 +315,10 @@ export const DrawPDFFields = (props: Props) => {
if (mouseState.resizing) {
const { mouseX, mouseY } = getMouseCoordinates(
event,
event.currentTarget.parentNode as HTMLElement
// currentTarget = span handle
// 1st parent = drawnField
// 2nd parent = img
event.currentTarget.parentElement?.parentElement
)
const width = mouseX - drawnField.left
@ -366,7 +371,7 @@ export const DrawPDFFields = (props: Props) => {
*/
const getMouseCoordinates = (
event: React.MouseEvent<HTMLElement, MouseEvent>,
customTarget?: HTMLElement
customTarget?: HTMLElement | null
) => {
const target = customTarget ? customTarget : event.currentTarget
const rect = target.getBoundingClientRect()
@ -405,16 +410,15 @@ export const DrawPDFFields = (props: Props) => {
<div
key={pdfPageIndex}
className={`${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
>
<img
onMouseMove={(event) => {
onMouseMove(event, page)
}}
onMouseDown={(event) => {
onMouseDown(event, page)
}}
>
<img
draggable="false"
style={{ width: '100%' }}
src={page.image}
/>
@ -424,7 +428,7 @@ export const DrawPDFFields = (props: Props) => {
key={drawnFieldIndex}
onMouseDown={onDrawnFieldMouseDown}
onMouseMove={(event) => {
onDranwFieldMouseMove(event, drawnField)
onDrawnFieldMouseMove(event, drawnField)
}}
className={styles.drawingRectangle}
style={{
@ -529,7 +533,7 @@ export const DrawPDFFields = (props: Props) => {
<div className={styles.view}>
{pdfFiles.map((pdfFile, pdfFileIndex: number) => {
return (
<>
<div key={pdfFile.file.name + pdfFileIndex}>
<div className={styles.fileWrapper}>
{getPdfPages(pdfFile, pdfFileIndex)}
</div>
@ -543,11 +547,10 @@ export const DrawPDFFields = (props: Props) => {
File Separator
</Divider>
)}
</>
</div>
)
})}
{showDrawToolBox && (
<Box className={styles.drawToolBoxContainer}>
<Box className={styles.drawToolBox}>
{toolbox
@ -568,7 +571,6 @@ export const DrawPDFFields = (props: Props) => {
})}
</Box>
</Box>
)}
</div>
)
}

View File

@ -93,6 +93,13 @@
border: 1px solid rgb(160, 160, 160);
border-radius: 50%;
cursor: pointer;
// Increase the area a bit so it's easier to click
&::after {
content: '';
position: absolute;
inset: -14px;
}
}
.removeHandle {