From 6641cf2ee703c4c973c69ecde864030fb2e91596 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 15 Aug 2024 19:50:44 +0200
Subject: [PATCH] fix: simplify events, more ts and clean up

---
 src/components/DrawPDFFields/index.tsx        | 82 ++++++++++---------
 .../DrawPDFFields/style.module.scss           |  7 ++
 2 files changed, 49 insertions(+), 40 deletions(-)

diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx
index 1b36cd7..6bf9ed7 100644
--- a/src/components/DrawPDFFields/index.tsx
+++ b/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
-    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 : ''}`}
-              onMouseMove={(event) => {
-                onMouseMove(event, page)
-              }}
-              onMouseDown={(event) => {
-                onMouseDown(event, page)
-              }}
             >
               <img
+                onMouseMove={(event) => {
+                  onMouseMove(event, page)
+                }}
+                onMouseDown={(event) => {
+                  onMouseDown(event, page)
+                }}
                 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,32 +547,30 @@ export const DrawPDFFields = (props: Props) => {
                 File Separator
               </Divider>
             )}
-          </>
+          </div>
         )
       })}
 
-      {showDrawToolBox && (
-        <Box className={styles.drawToolBoxContainer}>
-          <Box className={styles.drawToolBox}>
-            {toolbox
-              .filter((drawTool) => drawTool.active)
-              .map((drawTool: DrawTool, index: number) => {
-                return (
-                  <div
-                    key={index}
-                    onClick={() => {
-                      handleToolSelect(drawTool)
-                    }}
-                    className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''}`}
-                  >
-                    {drawTool.icon}
-                    {drawTool.label}
-                  </div>
-                )
-              })}
-          </Box>
+      <Box className={styles.drawToolBoxContainer}>
+        <Box className={styles.drawToolBox}>
+          {toolbox
+            .filter((drawTool) => drawTool.active)
+            .map((drawTool: DrawTool, index: number) => {
+              return (
+                <div
+                  key={index}
+                  onClick={() => {
+                    handleToolSelect(drawTool)
+                  }}
+                  className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''}`}
+                >
+                  {drawTool.icon}
+                  {drawTool.label}
+                </div>
+              )
+            })}
         </Box>
-      )}
+      </Box>
     </div>
   )
 }
diff --git a/src/components/DrawPDFFields/style.module.scss b/src/components/DrawPDFFields/style.module.scss
index 0d84c4b..249b66c 100644
--- a/src/components/DrawPDFFields/style.module.scss
+++ b/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 {