src/components/DrawPDFFields/index.tsx

@@ -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
+    if (!selectedTool) {
-    const isOverPdfImageWrapper = event.currentTarget.tagName === 'IMG'
-
-    if (!selectedTool || !isOverPdfImageWrapper) {
       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>
   )
 }

src/components/DrawPDFFields/style.module.scss

@@ -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 {