fix: add file and page index, hide select if not active

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,6 +493,11 @@ export const DrawPDFFields = (props: Props) => {
                     >
                       <Close fontSize="small" />
                     </span>
+                    {isActiveDrawnField(
+                      fileIndex,
+                      pageIndex,
+                      drawnFieldIndex
+                    ) && (
                       <div
                         onPointerDown={handleUserSelectPointerDown}
                         className={styles.userSelect}
@@ -456,12 +505,7 @@ export const DrawPDFFields = (props: Props) => {
                         <FormControl fullWidth size="small">
                           <InputLabel id="counterparts">Counterpart</InputLabel>
                           <Select
-                          value={
+                            value={drawnField.counterpart}
-                            drawnField.counterpart ||
-                            lastSigner ||
-                            defaultSignerNpub ||
-                            ''
-                          }
                             onChange={(event) => {
                               drawnField.counterpart = event.target.value
                               setLastSigner(event.target.value)
@@ -472,7 +516,9 @@ export const DrawPDFFields = (props: Props) => {
                             sx={{
                               background: 'white'
                             }}
-                          renderValue={(value) => renderCounterpartValue(value)}
+                            renderValue={(value) =>
+                              renderCounterpartValue(value)
+                            }
                           >
                             {signers.map((signer, index) => {
                               const npub = hexToNpub(signer.pubkey)
@@ -518,6 +564,7 @@ export const DrawPDFFields = (props: Props) => {
                           </Select>
                         </FormControl>
                       </div>
+                    )}
                   </div>
                 )
               })}