fix: simplify events, more ts and clean up
This commit is contained in:
parent
4cf578b514
commit
6641cf2ee7
@ -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>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user