From 5f92906032ab0ea6a09ae9d104a64f81fd10c095 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Thu, 19 Sep 2024 15:02:19 +0200
Subject: [PATCH] fix: add file and page index, hide select if not active

---
 src/components/DrawPDFFields/index.tsx | 199 +++++++++++++++----------
 1 file changed, 123 insertions(+), 76 deletions(-)

diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx
index 194291f..f2e962e 100644
--- a/src/components/DrawPDFFields/index.tsx
+++ b/src/components/DrawPDFFields/index.tsx
@@ -49,7 +49,19 @@ export const DrawPDFFields = (props: Props) => {
     clicked: false
   })
 
-  const [activeDrawField, setActiveDrawField] = useState<number>()
+  const [activeDrawnField, setActiveDrawnField] = useState<{
+    fileIndex: number
+    pageIndex: number
+    drawnFieldIndex: number
+  }>()
+  const isActiveDrawnField = (
+    fileIndex: number,
+    pageIndex: number,
+    drawnFieldIndex: number
+  ) =>
+    activeDrawnField?.fileIndex === fileIndex &&
+    activeDrawnField?.pageIndex === pageIndex &&
+    activeDrawnField?.drawnFieldIndex === drawnFieldIndex
 
   useEffect(() => {
     if (selectedFiles) {
@@ -103,7 +115,12 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Pointer event
    * @param page PdfPage where press happened
    */
-  const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
+  const handlePointerDown = (
+    event: React.PointerEvent,
+    page: PdfPage,
+    fileIndex: number,
+    pageIndex: number
+  ) => {
     // Proceed only if left click
     if (event.button !== 0) return
 
@@ -124,6 +141,11 @@ export const DrawPDFFields = (props: Props) => {
 
     page.drawnFields.push(newField)
 
+    setActiveDrawnField({
+      fileIndex,
+      pageIndex,
+      drawnFieldIndex: page.drawnFields.length - 1
+    })
     setMouseState((prev) => {
       return {
         ...prev,
@@ -192,6 +214,8 @@ export const DrawPDFFields = (props: Props) => {
    */
   const handleDrawnFieldPointerDown = (
     event: React.PointerEvent,
+    fileIndex: number,
+    pageIndex: number,
     drawnFieldIndex: number
   ) => {
     event.stopPropagation()
@@ -201,7 +225,7 @@ export const DrawPDFFields = (props: Props) => {
 
     const drawingRectangleCoords = getPointerCoordinates(event)
 
-    setActiveDrawField(drawnFieldIndex)
+    setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
     setMouseState({
       dragging: true,
       clicked: false,
@@ -257,13 +281,15 @@ export const DrawPDFFields = (props: Props) => {
    */
   const handleResizePointerDown = (
     event: React.PointerEvent,
+    fileIndex: number,
+    pageIndex: number,
     drawnFieldIndex: number
   ) => {
     // Proceed only if left click
     if (event.button !== 0) return
     event.stopPropagation()
 
-    setActiveDrawField(drawnFieldIndex)
+    setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
     setMouseState({
       resizing: true
     })
@@ -372,7 +398,7 @@ export const DrawPDFFields = (props: Props) => {
                   handlePointerMove(event, page)
                 }}
                 onPointerDown={(event) => {
-                  handlePointerDown(event, page)
+                  handlePointerDown(event, page, fileIndex, pageIndex)
                 }}
                 draggable="false"
                 src={page.image}
@@ -384,7 +410,12 @@ export const DrawPDFFields = (props: Props) => {
                   <div
                     key={drawnFieldIndex}
                     onPointerDown={(event) =>
-                      handleDrawnFieldPointerDown(event, drawnFieldIndex)
+                      handleDrawnFieldPointerDown(
+                        event,
+                        fileIndex,
+                        pageIndex,
+                        drawnFieldIndex
+                      )
                     }
                     onPointerMove={(event) => {
                       handleDrawnFieldPointerMove(event, drawnField, page.width)
@@ -405,7 +436,11 @@ export const DrawPDFFields = (props: Props) => {
                       touchAction: 'none',
                       opacity:
                         mouseState.dragging &&
-                        activeDrawField === drawnFieldIndex
+                        isActiveDrawnField(
+                          fileIndex,
+                          pageIndex,
+                          drawnFieldIndex
+                        )
                           ? 0.8
                           : undefined
                     }}
@@ -422,7 +457,12 @@ export const DrawPDFFields = (props: Props) => {
                     </div>
                     <span
                       onPointerDown={(event) =>
-                        handleResizePointerDown(event, drawnFieldIndex)
+                        handleResizePointerDown(
+                          event,
+                          fileIndex,
+                          pageIndex,
+                          drawnFieldIndex
+                        )
                       }
                       onPointerMove={(event) => {
                         handleResizePointerMove(event, drawnField, page.width)
@@ -431,7 +471,11 @@ export const DrawPDFFields = (props: Props) => {
                       style={{
                         background:
                           mouseState.resizing &&
-                          activeDrawField === drawnFieldIndex
+                          isActiveDrawnField(
+                            fileIndex,
+                            pageIndex,
+                            drawnFieldIndex
+                          )
                             ? 'var(--primary-main)'
                             : undefined
                       }}
@@ -449,75 +493,78 @@ export const DrawPDFFields = (props: Props) => {
                     >
                       <Close fontSize="small" />
                     </span>
-                    <div
-                      onPointerDown={handleUserSelectPointerDown}
-                      className={styles.userSelect}
-                    >
-                      <FormControl fullWidth size="small">
-                        <InputLabel id="counterparts">Counterpart</InputLabel>
-                        <Select
-                          value={
-                            drawnField.counterpart ||
-                            lastSigner ||
-                            defaultSignerNpub ||
-                            ''
-                          }
-                          onChange={(event) => {
-                            drawnField.counterpart = event.target.value
-                            setLastSigner(event.target.value)
-                            refreshPdfFiles()
-                          }}
-                          labelId="counterparts"
-                          label="Counterparts"
-                          sx={{
-                            background: 'white'
-                          }}
-                          renderValue={(value) => renderCounterpartValue(value)}
-                        >
-                          {signers.map((signer, index) => {
-                            const npub = hexToNpub(signer.pubkey)
-                            let displayValue = truncate(npub, {
-                              length: 16
-                            })
-
-                            const metadata = props.metadata[signer.pubkey]
-
-                            if (metadata) {
-                              displayValue = truncate(
-                                metadata.name ||
-                                  metadata.display_name ||
-                                  metadata.username ||
-                                  npub,
-                                {
-                                  length: 16
-                                }
-                              )
+                    {isActiveDrawnField(
+                      fileIndex,
+                      pageIndex,
+                      drawnFieldIndex
+                    ) && (
+                      <div
+                        onPointerDown={handleUserSelectPointerDown}
+                        className={styles.userSelect}
+                      >
+                        <FormControl fullWidth size="small">
+                          <InputLabel id="counterparts">Counterpart</InputLabel>
+                          <Select
+                            value={drawnField.counterpart}
+                            onChange={(event) => {
+                              drawnField.counterpart = event.target.value
+                              setLastSigner(event.target.value)
+                              refreshPdfFiles()
+                            }}
+                            labelId="counterparts"
+                            label="Counterparts"
+                            sx={{
+                              background: 'white'
+                            }}
+                            renderValue={(value) =>
+                              renderCounterpartValue(value)
                             }
+                          >
+                            {signers.map((signer, index) => {
+                              const npub = hexToNpub(signer.pubkey)
+                              let displayValue = truncate(npub, {
+                                length: 16
+                              })
 
-                            return (
-                              <MenuItem key={index} value={npub}>
-                                <ListItemIcon>
-                                  <AvatarIconButton
-                                    src={metadata?.picture}
-                                    hexKey={signer.pubkey}
-                                    aria-label={`account of user ${displayValue}`}
-                                    color="inherit"
-                                    sx={{
-                                      padding: 0,
-                                      '> img': {
-                                        width: '30px',
-                                        height: '30px'
-                                      }
-                                    }}
-                                  />
-                                </ListItemIcon>
-                                <ListItemText>{displayValue}</ListItemText>
-                              </MenuItem>
-                            )
-                          })}
-                        </Select>
-                      </FormControl>
-                    </div>
+                              const metadata = props.metadata[signer.pubkey]
+
+                              if (metadata) {
+                                displayValue = truncate(
+                                  metadata.name ||
+                                    metadata.display_name ||
+                                    metadata.username ||
+                                    npub,
+                                  {
+                                    length: 16
+                                  }
+                                )
+                              }
+
+                              return (
+                                <MenuItem key={index} value={npub}>
+                                  <ListItemIcon>
+                                    <AvatarIconButton
+                                      src={metadata?.picture}
+                                      hexKey={signer.pubkey}
+                                      aria-label={`account of user ${displayValue}`}
+                                      color="inherit"
+                                      sx={{
+                                        padding: 0,
+                                        '> img': {
+                                          width: '30px',
+                                          height: '30px'
+                                        }
+                                      }}
+                                    />
+                                  </ListItemIcon>
+                                  <ListItemText>{displayValue}</ListItemText>
+                                </MenuItem>
+                              )
+                            })}
+                          </Select>
+                        </FormControl>
+                      </div>
+                    )}
                   </div>
                 )
               })}