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

View File

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