moves pdf marking and rendering one level down

package.json

@@ -32,6 +32,7 @@
     "lodash": "4.17.21",
     "mui-file-input": "4.0.4",
     "nostr-tools": "2.7.0",
+    "pdf-lib": "^1.17.1",
     "pdfjs-dist": "^4.4.168",
     "react": "^18.2.0",
     "react-dnd": "16.0.1",

src/components/DrawPDFFields/index.tsx

@@ -8,10 +8,11 @@ import { ProfileMetadata, User } from '../../types';
 import { PdfFile, DrawTool, MouseState, PdfPage, DrawnField, MarkType } from '../../types/drawing';
 import { truncate } from 'lodash';
 import { hexToNpub } from '../../utils';
+import { toPdfFiles } from '../../utils/pdf.ts'
 PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
 
 interface Props {
-  selectedFiles: any[]
+  selectedFiles: File[]
   users: User[]
   metadata: { [key: string]: ProfileMetadata }
   onDrawFieldsChange: (pdfFiles: PdfFile[]) => void
@@ -100,7 +101,7 @@ export const DrawPDFFields = (props: Props) => {
    * It is re rendered and visible right away
    * 
    * @param event Mouse event
-   * @param page PdfPage where press happened
+   * @param page PdfItem where press happened
    */
   const onMouseDown = (event: any, page: PdfPage) => {
     // Proceed only if left click
@@ -153,7 +154,7 @@ export const DrawPDFFields = (props: Props) => {
    * After {@link onMouseDown} create an drawing element, this function gets called on every pixel moved
    * which alters the newly created drawing element, resizing it while mouse move
    * @param event Mouse event
-   * @param page PdfPage where moving is happening
+   * @param page PdfItem where moving is happening
    */
   const onMouseMove = (event: any, page: PdfPage) => {
     if (mouseState.clicked && selectedTool) {
@@ -315,73 +316,12 @@ export const DrawPDFFields = (props: Props) => {
    * creates the pdfFiles object and sets to a state
    */
   const parsePdfPages = async () => {
-    const pdfFiles: PdfFile[] = []
+    const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles);
-
+    console.log('pdf files: ', pdfFiles);
-    for (const file of selectedFiles) {
-      if (file.type.toLowerCase().includes('pdf')) {
-        const data = await readPdf(file)
-        const pages = await pdfToImages(data)
-
-        pdfFiles.push({
-          file: file,
-          pages: pages,
-          expanded: false
-        })
-      }
-    }
     
     setPdfFiles(pdfFiles)
   }
 
-  /**
-   * Converts pdf to the images
-   * @param data pdf file bytes
-   */
-  const pdfToImages = async (data: any): Promise<PdfPage[]> => {
-    const images: string[] = [];
-    const pdf = await PDFJS.getDocument(data).promise;
-    const canvas = document.createElement("canvas");
-  
-    for (let i = 0; i < pdf.numPages; i++) {
-      const page = await pdf.getPage(i + 1);
-      const viewport = page.getViewport({ scale: 3 });
-      const context = canvas.getContext("2d");
-      canvas.height = viewport.height;
-      canvas.width = viewport.width;
-      await page.render({ canvasContext: context!, viewport: viewport }).promise;
-      images.push(canvas.toDataURL());
-    }
-  
-    return Promise.resolve(images.map((image) => {
-      return {
-        image,
-        drawnFields: []
-      }
-    }))
-  }
-  
-  /**
-   * Reads the pdf file binaries 
-   */
-  const readPdf = (file: File) => {
-    return new Promise((resolve, reject) => {
-      const reader = new FileReader();
-  
-      reader.onload = (e: any) => {
-        const data = e.target.result
-    
-        resolve(data)
-      };
-      
-      reader.onerror = (err) => {
-        console.error('err', err)
-        reject(err)
-      };
-
-      reader.readAsDataURL(file);
-    })
-  }
-
   /**
    * 
    * @returns if expanded pdf accordion is present

src/components/DrawPDFFields/style.module.scss

@@ -59,13 +59,19 @@
 .drawingRectangle {
   position: absolute;
   border: 1px solid #01aaad;
-  width: 40px;
+  //width: 40px;
-  height: 40px;
+  //height: 40px;
   z-index: 50;
   background-color: #01aaad4b;
   cursor: pointer;
   display: flex;
   justify-content: center;
+  align-items: center;
+
+  &.nonEditable {
+    cursor: default;
+    visibility: hidden;
+  }
 
   .resizeHandle {
     position: absolute;

src/components/PDFView/PdfItem.tsx

@@ -0,0 +1,32 @@
+import { PdfFile } from '../../types/drawing.ts'
+import { CurrentUserMark } from '../../types/mark.ts'
+import PdfPageItem  from './PdfPageItem.tsx';
+
+interface PdfItemProps {
+  pdfFile: PdfFile
+  currentUserMarks: CurrentUserMark[]
+  handleMarkClick: (id: number) => void
+  selectedMarkValue: string
+  selectedMark: CurrentUserMark | null
+}
+
+const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => {
+  const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => {
+    return marks.filter((m) => m.mark.location.page === page);
+  }
+  return (
+    pdfFile.pages.map((page, i) => {
+      return (
+        <PdfPageItem
+          page={page}
+          key={i}
+          currentUserMarks={filterByPage(currentUserMarks, i)}
+          handleMarkClick={handleMarkClick}
+          selectedMarkValue={selectedMarkValue}
+          selectedMark={selectedMark}
+        />
+      )
+  }))
+}
+
+export default PdfItem

src/components/PDFView/PdfMarkItem.tsx

@@ -0,0 +1,38 @@
+import { CurrentUserMark } from '../../types/mark.ts'
+import styles from '../DrawPDFFields/style.module.scss'
+import { inPx } from '../../utils/pdf.ts'
+
+interface PdfMarkItemProps {
+  userMark: CurrentUserMark
+  handleMarkClick: (id: number) => void
+  selectedMarkValue: string
+  selectedMark: CurrentUserMark | null
+}
+
+//selectedMark represents the mark that the user is actively editing
+// selectedMarkValue representsnthe edited value
+// userMark is part of the overall currentUserMark array
+
+const PdfMarkItem = ({ selectedMark, handleMarkClick, selectedMarkValue, userMark }: PdfMarkItemProps) => {
+  const { location } = userMark.mark;
+  const handleClick = () => handleMarkClick(userMark.mark.id);
+  const getMarkValue = () => (
+    selectedMark?.mark.id === userMark.mark.id
+      ? selectedMarkValue
+      : userMark.mark.value
+  )
+  return (
+    <div
+      onClick={handleClick}
+      className={styles.drawingRectangle}
+      style={{
+        left: inPx(location.left),
+        top: inPx(location.top),
+        width: inPx(location.width),
+        height: inPx(location.height)
+      }}
+    >{getMarkValue()}</div>
+  )
+}
+
+export default PdfMarkItem

src/components/PDFView/PdfMarking.tsx

@@ -0,0 +1,95 @@
+import { Box } from '@mui/material'
+import styles from '../../pages/sign/style.module.scss'
+import PdfView from './index.tsx'
+import MarkFormField from '../../pages/sign/MarkFormField.tsx'
+import { PdfFile } from '../../types/drawing.ts'
+import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import { useState, useEffect } from 'react'
+import {
+  findNextCurrentUserMark,
+  isCurrentUserMarksComplete,
+  updateCurrentUserMarks,
+} from '../../utils/mark.ts'
+
+import { EMPTY } from '../../utils/const.ts'
+
+interface PdfMarkingProps {
+  files: { pdfFile: PdfFile, filename: string, hash: string | null }[],
+  currentUserMarks: CurrentUserMark[],
+  setIsReadyToSign: (isReadyToSign: boolean) => void,
+  setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void,
+  setUpdatedMarks: (markToUpdate: Mark) => void
+}
+
+const PdfMarking = (props: PdfMarkingProps) => {
+  const {
+    files,
+    currentUserMarks,
+    setIsReadyToSign,
+    setCurrentUserMarks,
+    setUpdatedMarks
+  } = props
+  const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
+  const [selectedMarkValue, setSelectedMarkValue] = useState<string>("")
+
+  useEffect(() => {
+    setSelectedMark(findNextCurrentUserMark(currentUserMarks) || null)
+  }, [currentUserMarks])
+
+  const handleMarkClick = (id: number) => {
+    const nextMark = currentUserMarks.find((mark) => mark.mark.id === id);
+    setSelectedMark(nextMark!);
+    setSelectedMarkValue(nextMark?.mark.value ?? EMPTY);
+  }
+
+  const handleSubmit = (event: any) => {
+    event.preventDefault();
+    if (!selectedMarkValue || !selectedMark) return;
+
+    const updatedMark: CurrentUserMark = {
+      ...selectedMark,
+      mark: {
+        ...selectedMark.mark,
+        value: selectedMarkValue
+      },
+      isCompleted: true
+    }
+
+    setSelectedMarkValue(EMPTY)
+    const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark);
+    setCurrentUserMarks(updatedCurrentUserMarks)
+    setSelectedMark(findNextCurrentUserMark(updatedCurrentUserMarks) || null)
+    console.log(isCurrentUserMarksComplete(updatedCurrentUserMarks))
+    setIsReadyToSign(isCurrentUserMarksComplete(updatedCurrentUserMarks))
+    setUpdatedMarks(updatedMark.mark)
+  }
+
+  const handleChange = (event: any) => setSelectedMarkValue(event.target.value)
+
+  return (
+    <>
+      <Box className={styles.container}>
+        {
+          currentUserMarks?.length > 0 && (
+            <PdfView
+              files={files}
+              handleMarkClick={handleMarkClick}
+              selectedMarkValue={selectedMarkValue}
+              selectedMark={selectedMark}
+              currentUserMarks={currentUserMarks}
+            />)}
+        {
+          selectedMark !== null && (
+            <MarkFormField
+              handleSubmit={handleSubmit}
+              handleChange={handleChange}
+              selectedMark={selectedMark}
+              selectedMarkValue={selectedMarkValue}
+            />
+          )}
+      </Box>
+    </>
+  )
+}
+
+export default PdfMarking

src/components/PDFView/PdfPageItem.tsx

@@ -0,0 +1,43 @@
+import styles from '../DrawPDFFields/style.module.scss'
+import { PdfPage } from '../../types/drawing.ts'
+import { CurrentUserMark } from '../../types/mark.ts'
+import PdfMarkItem from './PdfMarkItem.tsx'
+interface PdfPageProps {
+  page: PdfPage
+  currentUserMarks: CurrentUserMark[]
+  handleMarkClick: (id: number) => void
+  selectedMarkValue: string
+  selectedMark: CurrentUserMark | null
+}
+
+const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfPageProps) => {
+  return (
+    <div
+      className={styles.pdfImageWrapper}
+      style={{
+        border: '1px solid #c4c4c4',
+        marginBottom: '10px',
+        marginTop: '10px'
+      }}
+    >
+      <img
+        draggable="false"
+        src={page.image}
+        style={{ width: '100%'}}
+
+      />
+      {
+        currentUserMarks.map((m, i) => (
+          <PdfMarkItem
+            key={i}
+            handleMarkClick={handleMarkClick}
+            selectedMarkValue={selectedMarkValue}
+            userMark={m}
+            selectedMark={selectedMark}
+        />
+      ))}
+    </div>
+  )
+}
+
+export default PdfPageItem

src/components/PDFView/index.tsx

@@ -0,0 +1,39 @@
+import { PdfFile } from '../../types/drawing.ts'
+import { Box } from '@mui/material'
+import PdfItem from './PdfItem.tsx'
+import { CurrentUserMark } from '../../types/mark.ts'
+
+interface PdfViewProps {
+  files: { pdfFile: PdfFile, filename: string, hash: string | null }[]
+  currentUserMarks: CurrentUserMark[]
+  handleMarkClick: (id: number) => void
+  selectedMarkValue: string
+  selectedMark: CurrentUserMark | null
+}
+
+const PdfView = ({ files, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfViewProps) => {
+  const filterByFile = (currentUserMarks: CurrentUserMark[], hash: string): CurrentUserMark[] => {
+    return currentUserMarks.filter((currentUserMark) => currentUserMark.mark.pdfFileHash === hash)
+  }
+  return (
+    <Box sx={{ width: '100%' }}>
+      {
+        files.map(({ pdfFile, hash }, i) => {
+          if (!hash) return
+          return (
+            <PdfItem
+              pdfFile={pdfFile}
+              key={i}
+              currentUserMarks={filterByFile(currentUserMarks, hash)}
+              selectedMark={selectedMark}
+              handleMarkClick={handleMarkClick}
+              selectedMarkValue={selectedMarkValue}
+          />
+          )
+        })
+      }
+    </Box>
+  )
+}
+
+export default PdfView;

src/components/PDFView/style.module.scss

@@ -0,0 +1,16 @@
+.imageWrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%; /* Adjust as needed */
+  height: 100%; /* Adjust as needed */
+  overflow: hidden; /* Ensure no overflow */
+  border: 1px solid #ccc; /* Optional: for visual debugging */
+  background-color: #e0f7fa; /* Optional: for visual debugging */
+}
+
+.image {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain; /* Ensure the image fits within the container */
+}

src/pages/create/index.tsx

@@ -62,6 +62,8 @@ import {
 import styles from './style.module.scss'
 import { PdfFile } from '../../types/drawing'
 import { DrawPDFFields } from '../../components/DrawPDFFields'
+import { Mark } from '../../types/mark.ts'
+import { v4 as uuidv4 } from 'uuid';
 
 export const CreatePage = () => {
   const navigate = useNavigate()
@@ -339,26 +341,29 @@ export const CreatePage = () => {
     return fileHashes
   }
 
-  const createMarkConfig = (fileHashes: { [key: string]: string }) => {
+  const createMarkConfig = (fileHashes: { [key: string]: string }) : Mark[] => {
-    let markConfig: any = {}
+    return drawnPdfs.flatMap((drawnPdf) => {
-    
+      const fileHash = fileHashes[drawnPdf.file.name];
-    drawnPdfs.forEach(drawnPdf => {
+      return drawnPdf.pages.flatMap((page, index) => {
-      const fileHash = fileHashes[drawnPdf.file.name]
+        return page.drawnFields.map((drawnField) => {
-
+          return {
-      drawnPdf.pages.forEach((page, pageIndex) => {
+            type: drawnField.type,
-        page.drawnFields.forEach(drawnField => {
+            location: {
-          if (!markConfig[drawnField.counterpart]) markConfig[drawnField.counterpart] = {}
+              page: index,
-          if (!markConfig[drawnField.counterpart][fileHash]) markConfig[drawnField.counterpart][fileHash] = []
+              top: drawnField.top,
-
+              left: drawnField.left,
-          markConfig[drawnField.counterpart][fileHash].push({
+              height: drawnField.height,
-            markType: drawnField.type,
+              width: drawnField.width,
-            markLocation: `P:${pageIndex};X:${drawnField.left};Y:${drawnField.top}`
+            },
+            npub: drawnField.counterpart,
+            pdfFileHash: fileHash
+          }
         })
       })
     })
-    })
+      .map((mark, index) => {
-
+        return {...mark, id: index }
-    return markConfig
+      });
   }
 
   // Handle errors during zip file generation
@@ -510,6 +515,8 @@ export const CreatePage = () => {
     const viewers = users.filter((user) => user.role === UserRole.viewer)
     const markConfig = createMarkConfig(fileHashes)
 
+    console.log('mark config: ', markConfig)
+
     const content: CreateSignatureEventContent = {
       signers: signers.map((signer) => hexToNpub(signer.pubkey)),
       viewers: viewers.map((viewer) => hexToNpub(viewer.pubkey)),
@@ -519,6 +526,8 @@ export const CreatePage = () => {
       title
     }
 
+    console.log('content: ', content)
+
     setLoadingSpinnerDesc('Signing nostr event for create signature')
 
     const createSignature = await signEventForMetaFile(

src/pages/sign/MarkFormField.tsx

@@ -0,0 +1,34 @@
+import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import styles from './style.module.scss'
+import { Box, Button, TextField } from '@mui/material'
+
+import { MARK_TYPE_TRANSLATION } from '../../utils/const.ts'
+
+interface MarkFormFieldProps {
+  handleSubmit: (event: any) => void
+  handleChange: (event: any) => void
+  selectedMark: CurrentUserMark
+  selectedMarkValue: string
+}
+
+const MarkFormField = (props: MarkFormFieldProps) => {
+  const { handleSubmit, handleChange, selectedMark, selectedMarkValue } = props;
+  const getSubmitButton = () => selectedMark.isLast ? 'Complete' : 'Next';
+  return (
+    <div className={styles.fixedBottomForm}>
+      <Box component="form" onSubmit={handleSubmit}>
+        <TextField
+          id="mark-value"
+          label={MARK_TYPE_TRANSLATION[selectedMark.mark.type.valueOf()]}
+          value={selectedMarkValue}
+          onChange={handleChange}
+        />
+        <Button type="submit" variant="contained">
+          {getSubmitButton()}
+        </Button>
+      </Box>
+    </div>
+  )
+}
+
+export default MarkFormField;

src/pages/sign/index.tsx

@@ -16,13 +16,13 @@ import { State } from '../../store/rootReducer'
 import { CreateSignatureEventContent, Meta, SignedEvent } from '../../types'
 import {
   decryptArrayBuffer,
-  encryptArrayBuffer,
+  encryptArrayBuffer, extractMarksFromSignedMeta,
   extractZipUrlAndEncryptionKey,
   generateEncryptionKey,
-  generateKeysFile,
+  generateKeysFile, getFilesWithHashes,
   getHash,
   hexToNpub,
-  isOnline,
+  isOnline, loadZip,
   now,
   npubToHex,
   parseJson,
@@ -33,6 +33,17 @@ import {
 } from '../../utils'
 import { DisplayMeta } from './internal/displayMeta'
 import styles from './style.module.scss'
+import { PdfFile } from '../../types/drawing.ts'
+import { convertToPdfFile } from '../../utils/pdf.ts'
+// import PdfView from '../../components/PDFView'
+import { CurrentUserMark, Mark } from '../../types/mark.ts'
+import { getLastSignersSig } from '../../utils/sign.ts'
+import {
+  filterMarksByPubkey,
+  getCurrentUserMarks,
+  isCurrentUserMarksComplete, updateMarks
+} from '../../utils/mark.ts'
+import PdfMarking from '../../components/PDFView/PdfMarking.tsx'
 enum SignedStatus {
   Fully_Signed,
   User_Is_Next_Signer,
@@ -58,7 +69,7 @@ export const SignPage = () => {
 
   const [selectedFile, setSelectedFile] = useState<File | null>(null)
 
-  const [files, setFiles] = useState<{ [filename: string]: ArrayBuffer }>({})
+  const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
 
   const [isLoading, setIsLoading] = useState(true)
   const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
@@ -70,6 +81,7 @@ export const SignPage = () => {
 
   const [signers, setSigners] = useState<`npub1${string}`[]>([])
   const [viewers, setViewers] = useState<`npub1${string}`[]>([])
+  const [marks, setMarks] = useState<Mark[] >([])
   const [creatorFileHashes, setCreatorFileHashes] = useState<{
     [key: string]: string
   }>({})
@@ -88,6 +100,8 @@ export const SignPage = () => {
 
   const [authUrl, setAuthUrl] = useState<string>()
   const nostrController = NostrController.getInstance()
+  const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>([]);
+  const [isReadyToSign, setIsReadyToSign] = useState(false);
 
   useEffect(() => {
     if (signers.length > 0) {
@@ -178,6 +192,16 @@ export const SignPage = () => {
       setViewers(createSignatureContent.viewers)
       setCreatorFileHashes(createSignatureContent.fileHashes)
       setSubmittedBy(createSignatureEvent.pubkey)
+      setMarks(createSignatureContent.markConfig);
+
+      if (usersPubkey) {
+        const metaMarks = filterMarksByPubkey(createSignatureContent.markConfig, usersPubkey!)
+        const signedMarks = extractMarksFromSignedMeta(meta)
+        const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks);
+        setCurrentUserMarks(currentUserMarks);
+        // setCurrentUserMark(findNextCurrentUserMark(currentUserMarks) || null)
+        setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
+      }
 
       setSignedBy(Object.keys(meta.docSignatures) as `npub1${string}`[])
     }
@@ -188,6 +212,7 @@ export const SignPage = () => {
   }, [meta])
 
   useEffect(() => {
+    // online mode - from create and home page views
     if (metaInNavState) {
       const processSigit = async () => {
         setIsLoading(true)
@@ -209,6 +234,7 @@ export const SignPage = () => {
           .then((res) => {
             handleArrayBufferFromBlossom(res.data, encryptionKey)
             setMeta(metaInNavState)
+            console.log('meta in nav state runs.')
           })
           .catch((err) => {
             console.error(`error occurred in getting file from ${zipUrl}`, err)
@@ -262,16 +288,13 @@ export const SignPage = () => {
 
     if (!decrypted) return
 
-    const zip = await JSZip.loadAsync(decrypted).catch((err) => {
+    const zip = await loadZip(decrypted)
-      console.log('err in loading zip file :>> ', err)
+    if (!zip) {
-      toast.error(err.message || 'An error occurred in loading zip file.')
       setIsLoading(false)
-      return null
+      return
-    })
+    }
 
-    if (!zip) return
+    const files: { [filename: string]: PdfFile } = {}
-
-    const files: { [filename: string]: ArrayBuffer } = {}
     const fileHashes: { [key: string]: string | null } = {}
     const fileNames = Object.values(zip.files).map((entry) => entry.name)
 
@@ -285,7 +308,7 @@ export const SignPage = () => {
       )
 
       if (arrayBuffer) {
-        files[fileName] = arrayBuffer
+        files[fileName] = await convertToPdfFile(arrayBuffer, fileName);
 
         const hash = await getHash(arrayBuffer)
         if (hash) {
@@ -296,10 +319,17 @@ export const SignPage = () => {
       }
     }
 
+    console.log('processed files: ', files);
+
     setFiles(files)
     setCurrentFileHashes(fileHashes)
   }
 
+  const setUpdatedMarks = (markToUpdate: Mark) => {
+    const updatedMarks = updateMarks(marks, markToUpdate)
+    setMarks(updatedMarks)
+  }
+
   const parseKeysJson = async (zip: JSZip) => {
     const keysFileContent = await readContentOfZipEntry(
       zip,
@@ -323,11 +353,7 @@ export const SignPage = () => {
   const decrypt = async (file: File) => {
     setLoadingSpinnerDesc('Decrypting file')
 
-    const zip = await JSZip.loadAsync(file).catch((err) => {
+    const zip = await loadZip(file);
-      console.log('err in loading zip file :>> ', err)
-      toast.error(err.message || 'An error occurred in loading zip file.')
-      return null
-    })
     if (!zip) return
 
     const parsedKeysJson = await parseKeysJson(zip)
@@ -398,32 +424,27 @@ export const SignPage = () => {
 
     setLoadingSpinnerDesc('Parsing zip file')
 
-    const zip = await JSZip.loadAsync(decryptedZipFile).catch((err) => {
+    const zip = await loadZip(decryptedZipFile)
-      console.log('err in loading zip file :>> ', err)
-      toast.error(err.message || 'An error occurred in loading zip file.')
-      return null
-    })
-
     if (!zip) return
 
-    const files: { [filename: string]: ArrayBuffer } = {}
+    const files: { [filename: string]: PdfFile } = {}
     const fileHashes: { [key: string]: string | null } = {}
     const fileNames = Object.values(zip.files)
       .filter((entry) => entry.name.startsWith('files/') && !entry.dir)
       .map((entry) => entry.name)
+      .map((entry) => entry.replace(/^files\//, ''))
 
     // generate hashes for all entries in files folder of zipArchive
     // these hashes can be used to verify the originality of files
-    for (let fileName of fileNames) {
+    for (const fileName of fileNames) {
       const arrayBuffer = await readContentOfZipEntry(
         zip,
         fileName,
         'arraybuffer'
       )
 
-      fileName = fileName.replace(/^files\//, '')
       if (arrayBuffer) {
-        files[fileName] = arrayBuffer
+        files[fileName] = await convertToPdfFile(arrayBuffer, fileName);
 
         const hash = await getHash(arrayBuffer)
         if (hash) {
@@ -434,6 +455,8 @@ export const SignPage = () => {
       }
     }
 
+    console.log('processed files: ', files);
+
     setFiles(files)
     setCurrentFileHashes(fileHashes)
 
@@ -487,7 +510,10 @@ export const SignPage = () => {
     const prevSig = getPrevSignersSig(hexToNpub(usersPubkey!))
     if (!prevSig) return
 
-    const signedEvent = await signEventForMeta(prevSig)
+    const marks = getSignerMarksForMeta()
+    if (!marks) return
+
+    const signedEvent = await signEventForMeta({ prevSig, marks })
     if (!signedEvent) return
 
     const updatedMeta = updateMetaSignatures(meta, signedEvent)
@@ -501,14 +527,55 @@ export const SignPage = () => {
   }
 
   // Sign the event for the meta file
-  const signEventForMeta = async (prevSig: string) => {
+  const signEventForMeta = async (signerContent: { prevSig: string, marks: Mark[] }) => {
     return await signEventForMetaFile(
-      JSON.stringify({ prevSig }),
+      JSON.stringify(signerContent),
       nostrController,
       setIsLoading
     )
   }
 
+  const getSignerMarksForMeta = (): Mark[] | undefined => {
+    if (currentUserMarks.length === 0) return;
+    return currentUserMarks.map(( { mark }: CurrentUserMark) => mark);
+  }
+
+  // const handleMarkClick = (id: number) => {
+  //   const nextMark = currentUserMarks.find(mark => mark.mark.id === id)
+  //   setCurrentUserMark(nextMark!)
+  //   setCurrentMarkValue(nextMark?.mark.value || "")
+  // }
+
+  // const getMarkConfigPerUser = (markConfig: MarkConfig) => {
+  //   if (!usersPubkey) return;
+  //   return markConfig[hexToNpub(usersPubkey)];
+  // }
+
+  // const handleChange = (event: any) => setCurrentMarkValue(event.target.value);
+  //
+  // const handleSubmit = (event: any) => {
+  //   event.preventDefault();
+  //   if (!currentMarkValue || !currentUserMark) return;
+  //
+  //   const curMark: Mark = {
+  //     ...currentUserMark.mark,
+  //     value: currentMarkValue
+  //   };
+  //
+  //   const updatedMarks: Mark[] = updateMarks(marks, curMark)
+  //
+  //   setMarks(updatedMarks)
+  //   setCurrentMarkValue("")
+  //
+  //   // do the similar thing to the thing above
+  //   const metaMarks = filterMarksByPubkey(updatedMarks, usersPubkey!)
+  //   const signedMarks = extractMarksFromSignedMeta(meta!)
+  //   const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks)
+  //   setCurrentUserMarks(currentUserMarks)
+  //   setCurrentUserMark(findNextCurrentUserMark(currentUserMarks) || null)
+  //   setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
+  // }
+
   // Update the meta signatures
   const updateMetaSignatures = (meta: Meta, signedEvent: SignedEvent): Meta => {
     const metaCopy = _.cloneDeep(meta)
@@ -526,7 +593,7 @@ export const SignPage = () => {
     encryptionKey: string
   ): Promise<File | null> => {
     // Get the current timestamp in seconds
-    const unixNow = Math.floor(Date.now() / 1000)
+    const unixNow = now()
     const blob = new Blob([encryptedArrayBuffer])
     // Create a File object with the Blob data
     const file = new File([blob], `compressed.sigit`, {
@@ -672,7 +739,9 @@ export const SignPage = () => {
     setIsLoading(true)
     setLoadingSpinnerDesc('Signing nostr event')
 
-    const prevSig = getLastSignersSig()
+    if (!meta) return;
+
+    const prevSig = getLastSignersSig(meta, signers)
     if (!prevSig) return
 
     const signedEvent = await signEventForMetaFile(
@@ -722,7 +791,7 @@ export const SignPage = () => {
     if (!arrayBuffer) return
 
     const blob = new Blob([arrayBuffer])
-    const unixNow = Math.floor(Date.now() / 1000)
+    const unixNow = now()
     saveAs(blob, `exported-${unixNow}.sigit.zip`)
 
     setIsLoading(false)
@@ -768,7 +837,7 @@ export const SignPage = () => {
     const finalZipFile = await createFinalZipFile(encryptedArrayBuffer, key)
 
     if (!finalZipFile) return
-    const unixNow = Math.floor(Date.now() / 1000)
+    const unixNow = now()
     saveAs(finalZipFile, `exported-${unixNow}.sigit.zip`)
   }
 
@@ -805,37 +874,6 @@ export const SignPage = () => {
     }
   }
 
-  /**
-   * This function returns the signature of last signer
-   * It will be used in the content of export signature's signedEvent
-   */
-  const getLastSignersSig = () => {
-    if (!meta) return null
-
-    // if there're no signers then use creator's signature
-    if (signers.length === 0) {
-      try {
-        const createSignatureEvent: Event = JSON.parse(meta.createSignature)
-        return createSignatureEvent.sig
-      } catch (error) {
-        return null
-      }
-    }
-
-    // get last signer
-    const lastSigner = signers[signers.length - 1]
-
-    // get the signature of last signer
-    try {
-      const lastSignatureEvent: Event = JSON.parse(
-        meta.docSignatures[lastSigner]
-      )
-      return lastSignatureEvent.sig
-    } catch (error) {
-      return null
-    }
-  }
-
   if (authUrl) {
     return (
       <iframe
@@ -847,9 +885,13 @@ export const SignPage = () => {
     )
   }
 
+  if (isLoading) {
+    return <LoadingSpinner desc={loadingSpinnerDesc} />
+  }
+
+  if (isReadyToSign) {
     return (
       <>
-      {isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
         <Box className={styles.container}>
           {displayInput && (
             <>
@@ -919,4 +961,39 @@ export const SignPage = () => {
         </Box>
       </>
     )
+  }
+
+  return <PdfMarking
+    files={getFilesWithHashes(files, currentFileHashes)}
+    currentUserMarks={currentUserMarks}
+    setIsReadyToSign={setIsReadyToSign}
+    setCurrentUserMarks={setCurrentUserMarks}
+    setUpdatedMarks={setUpdatedMarks}
+  />
+
+    // return (
+    //   <>
+    //     <Box className={styles.container}>
+    //     {
+    //       marks.length > 0 && (
+    //         <PdfView
+    //           files={files}
+    //           marks={marks}
+    //           fileHashes={currentFileHashes}
+    //           handleMarkClick={handleMarkClick}
+    //           currentMarkValue={currentMarkValue}
+    //           currentUserMark={currentUserMark}
+    //         />)}
+    //     {
+    //       currentUserMark !== null && (
+    //         <MarkFormField
+    //           handleSubmit={handleSubmit}
+    //           handleChange={handleChange}
+    //           currentMark={currentUserMark}
+    //           currentMarkValue={currentMarkValue}
+    //         />
+    //       )}
+    //     </Box>
+    //   </>
+    // )
 }

src/pages/sign/internal/displayMeta.tsx

@@ -34,10 +34,11 @@ import { UserComponent } from '../../../components/username'
 import { MetadataController } from '../../../controllers'
 import { npubToHex, shorten, hexToNpub, parseJson } from '../../../utils'
 import styles from '../style.module.scss'
+import { PdfFile } from '../../../types/drawing.ts'
 
 type DisplayMetaProps = {
   meta: Meta
-  files: { [filename: string]: ArrayBuffer }
+  files: { [filename: string]: PdfFile }
   submittedBy: string
   signers: `npub1${string}`[]
   viewers: `npub1${string}`[]
@@ -143,7 +144,7 @@ export const DisplayMeta = ({
   }, [users, submittedBy])
 
   const downloadFile = async (filename: string) => {
-    const arrayBuffer = files[filename]
+    const arrayBuffer = await files[filename].file.arrayBuffer()
     if (!arrayBuffer) return
 
     const blob = new Blob([arrayBuffer])

src/pages/sign/style.module.scss

@@ -47,4 +47,40 @@
       @extend .user;
     }
   }
+
+  .fixedBottomForm {
+    position: fixed;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 100%;
+    max-width: 500px;
+    height: 100px;
+    border-top: 1px solid #ccc;
+    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
+    padding: 10px 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    //z-index: 200;
+  }
+
+  .fixedBottomForm input[type="text"] {
+    width: 80%;
+    padding: 10px;
+    font-size: 16px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  .fixedBottomForm button {
+    background-color: #3f3d56;
+    color: white;
+    border: none;
+    padding: 10px 20px;
+    font-size: 16px;
+    margin-left: 10px;
+    border-radius: 4px;
+    cursor: pointer;
+  }
 }

src/pages/verify/index.tsx

@@ -15,7 +15,7 @@ import { useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 import { LoadingSpinner } from '../../components/LoadingSpinner'
 import { UserComponent } from '../../components/username'
-import { MetadataController } from '../../controllers'
+import { MetadataController, NostrController } from '../../controllers'
 import {
   CreateSignatureEventContent,
   Meta,
@@ -23,19 +23,30 @@ import {
   SignedEventContent
 } from '../../types'
 import {
-  decryptArrayBuffer,
+  decryptArrayBuffer, extractMarksFromSignedMeta,
   extractZipUrlAndEncryptionKey,
   getHash,
-  hexToNpub,
+  hexToNpub, now,
   npubToHex,
   parseJson,
   readContentOfZipEntry,
-  shorten
+  shorten, signEventForMetaFile
 } from '../../utils'
 import styles from './style.module.scss'
 import { Cancel, CheckCircle } from '@mui/icons-material'
 import { useLocation } from 'react-router-dom'
 import axios from 'axios'
+import { PdfFile } from '../../types/drawing.ts'
+import {
+  addMarks,
+  convertToPdfBlob,
+  convertToPdfFile,
+  groupMarksByPage,
+} from '../../utils/pdf.ts'
+import { State } from '../../store/rootReducer.ts'
+import { useSelector } from 'react-redux'
+import { getLastSignersSig } from '../../utils/sign.ts'
+import { saveAs } from 'file-saver'
 
 export const VerifyPage = () => {
   const theme = useTheme()
@@ -66,10 +77,13 @@ export const VerifyPage = () => {
   const [currentFileHashes, setCurrentFileHashes] = useState<{
     [key: string]: string | null
   }>({})
+  const [files, setFiles] = useState<{ [filename: string]: PdfFile}>({})
 
   const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
     {}
   )
+  const usersPubkey = useSelector((state: State) => state.auth.usersPubkey)
+  const nostrController = NostrController.getInstance()
 
   useEffect(() => {
     if (uploadedZip) {
@@ -124,6 +138,7 @@ export const VerifyPage = () => {
 
               if (!zip) return
 
+              const files: { [filename: string]: PdfFile } = {}
               const fileHashes: { [key: string]: string | null } = {}
               const fileNames = Object.values(zip.files).map(
                 (entry) => entry.name
@@ -139,6 +154,7 @@ export const VerifyPage = () => {
                 )
 
                 if (arrayBuffer) {
+                  files[fileName] = await convertToPdfFile(arrayBuffer, fileName!)
                   const hash = await getHash(arrayBuffer)
 
                   if (hash) {
@@ -150,6 +166,8 @@ export const VerifyPage = () => {
               }
 
               setCurrentFileHashes(fileHashes)
+              setFiles(files)
+
 
               setSigners(createSignatureContent.signers)
               setViewers(createSignatureContent.viewers)
@@ -158,6 +176,8 @@ export const VerifyPage = () => {
 
               setMeta(metaInNavState)
               setIsLoading(false)
+
+
             }
           })
           .catch((err) => {
@@ -359,6 +379,77 @@ export const VerifyPage = () => {
     }
   }
 
+  const handleExport = async () => {
+    // const proverbialUrls = await addMarksV2(Object.values(files)[0].file, meta!)
+    // await convertToFinalPdf(proverbialUrls)
+
+
+    if (Object.entries(files).length === 0 ||!meta ||!usersPubkey) return;
+
+    const usersNpub = hexToNpub(usersPubkey)
+    if (
+      !signers.includes(usersNpub) &&
+      !viewers.includes(usersNpub) &&
+      submittedBy !== usersNpub
+    ) {
+      return
+    }
+
+    setIsLoading(true)
+    setLoadingSpinnerDesc('Signing nostr event')
+
+    if (!meta) return;
+
+    const prevSig = getLastSignersSig(meta, signers)
+    if (!prevSig) return;
+
+    const signedEvent = await signEventForMetaFile(
+      JSON.stringify({ prevSig }),
+      nostrController,
+      setIsLoading
+    )
+
+    if (!signedEvent) return;
+
+    const exportSignature = JSON.stringify(signedEvent, null, 2)
+    const updatedMeta = {...meta, exportSignature }
+    const stringifiedMeta = JSON.stringify(updatedMeta, null, 2)
+
+    const zip = new JSZip()
+    zip.file('meta.json', stringifiedMeta)
+
+    const marks = extractMarksFromSignedMeta(updatedMeta)
+    const marksByPage = groupMarksByPage(marks)
+
+    for (const [fileName, pdf] of Object.entries(files)) {
+      const pages = await addMarks(pdf.file, marksByPage)
+      const blob = await convertToPdfBlob(pages)
+      zip.file(`/files/${fileName}`, blob)
+    }
+
+    const arrayBuffer = await zip
+      .generateAsync({
+        type: 'arraybuffer',
+        compression: 'DEFLATE',
+        compressionOptions: {
+          level: 6
+        }
+      })
+      .catch((err) => {
+        console.log('err in zip:>> ', err)
+        setIsLoading(false)
+        toast.error(err.message || 'Error occurred in generating zip file')
+        return null
+      })
+
+    if (!arrayBuffer) return
+
+    const blob = new Blob([arrayBuffer])
+    saveAs(blob, `exported-${now()}.sigit.zip`)
+
+    setIsLoading(false)
+  }
+
   const displayUser = (pubkey: string, verifySignature = false) => {
     const profile = metadata[pubkey]
 
@@ -521,6 +612,11 @@ export const VerifyPage = () => {
                   Exported By
                 </Typography>
                 {displayExportedBy()}
+                <Box sx={{ mt: 1, display: 'flex', justifyContent: 'center' }}>
+                  <Button onClick={handleExport} variant="contained">
+                    Export Sigit
+                  </Button>
+                </Box>
               </ListItem>
 
               {signers.length > 0 && (

src/types/core.ts

@@ -1,4 +1,4 @@
-import { MarkConfig } from "./mark"
+import { Mark } from './mark'
 import { Keys } from '../store/auth/types'
 
 export enum UserRole {
@@ -23,13 +23,14 @@ export interface CreateSignatureEventContent {
   signers: `npub1${string}`[]
   viewers: `npub1${string}`[]
   fileHashes: { [key: string]: string }
-  markConfig: MarkConfig
+  markConfig: Mark[]
   title: string
   zipUrl: string
 }
 
 export interface SignedEventContent {
   prevSig: string
+  marks: Mark[]
 }
 
 export interface Sigit {

src/types/mark.ts

@@ -1,10 +1,25 @@
 import { MarkType } from "./drawing";
 
+// export interface Mark {
+//    /**
+//    * @key png (pdf page) file hash
+//    */
+//    [key: string]: MarkConfigDetails[]
+// }
+
+export interface CurrentUserMark {
+  mark: Mark
+  isLast: boolean
+  isCompleted: boolean
+}
+
 export interface Mark {
-   /**
+  id: number;
-   * @key png (pdf page) file hash
+  npub: string;
-   */
+  pdfFileHash: string;
-   [key: string]: MarkConfigDetails[]
+  type: MarkType;
+  location: MarkLocation;
+  value?: string;
 }
 
 export interface MarkConfig {
@@ -33,11 +48,20 @@ export interface MarkValue {
 }
 
 export interface MarkConfigDetails {
-  markType: MarkType;
+  type: MarkType;
   /**
    * Coordinates in format: X:10;Y:50
    */
-  markLocation: string;
+  location: MarkLocation;
+  value?: MarkValue
+}
+
+export interface MarkLocation {
+  top: number;
+  left: number;
+  height: number;
+  width: number;
+  page: number;
 }
 
 // Creator Meta Object Example

src/types/zip.ts

@@ -1,4 +1,4 @@
-export interface OutputByType {
+  export interface OutputByType {
   base64: string
   string: string
   text: string
@@ -10,4 +10,17 @@ export interface OutputByType {
   nodebuffer: Buffer
 }
 
+interface InputByType {
+  base64: string;
+  string: string;
+  text: string;
+  binarystring: string;
+  array: number[];
+  uint8array: Uint8Array;
+  arraybuffer: ArrayBuffer;
+  blob: Blob;
+  stream: NodeJS.ReadableStream;
+}
+
 export type OutputType = keyof OutputByType
+export type InputFileFormat = InputByType[keyof InputByType] | Promise<InputByType[keyof InputByType]>;

src/utils/const.ts

@@ -0,0 +1,6 @@
+import { MarkType } from '../types/drawing.ts'
+
+export const EMPTY: string = ''
+export const MARK_TYPE_TRANSLATION: { [key: string]: string } = {
+  [MarkType.FULLNAME.valueOf()]: 'Full Name'
+}

src/utils/index.ts

@@ -6,3 +6,4 @@ export * from './nostr'
 export * from './string'
 export * from './zip'
 export * from './utils'
+export { extractMarksFromSignedMeta } from './mark.ts'

src/utils/mark.ts

@@ -0,0 +1,98 @@
+import { CurrentUserMark, Mark } from '../types/mark.ts'
+import { hexToNpub } from './nostr.ts'
+import { Meta, SignedEventContent } from '../types'
+import { Event } from 'nostr-tools'
+
+/**
+ * Takes in an array of Marks already filtered by User.
+ * Returns an array of CurrentUserMarks with correct values mix-and-matched.
+ * @param marks - default Marks extracted from Meta
+ * @param signedMetaMarks - signed user Marks extracted from DocSignatures
+ */
+const getCurrentUserMarks = (marks: Mark[], signedMetaMarks: Mark[]): CurrentUserMark[] => {
+  return marks.map((mark, index, arr) => {
+    const signedMark = signedMetaMarks.find((m) => m.id === mark.id);
+    if (signedMark && !!signedMark.value) {
+      mark.value = signedMark.value
+    }
+    return {
+      mark,
+      isLast: isLast(index, arr),
+      isCompleted: !!mark.value
+    }
+  })
+}
+
+/**
+ * Returns next incomplete CurrentUserMark if there is one
+ * @param usersMarks
+ */
+const findNextCurrentUserMark = (usersMarks: CurrentUserMark[]): CurrentUserMark | undefined => {
+  return usersMarks.find((mark) => !mark.isCompleted);
+}
+
+/**
+ * Returns Marks that are assigned to a specific user
+ * @param marks
+ * @param pubkey
+ */
+const filterMarksByPubkey = (marks: Mark[], pubkey: string): Mark[] => {
+  return marks.filter(mark => mark.npub === hexToNpub(pubkey))
+}
+
+/**
+ * Takes Signed Doc Signatures part of Meta and extracts
+ * all Marks into one flar array, regardless of the user.
+ * @param meta
+ */
+const extractMarksFromSignedMeta = (meta: Meta): Mark[] => {
+  return Object.values(meta.docSignatures)
+    .map((val: string) => JSON.parse(val as string))
+    .map((val: Event) => JSON.parse(val.content))
+    .flatMap((val: SignedEventContent) => val.marks)
+}
+
+/**
+ * Checks the CurrentUserMarks array that every element in that array has been
+ * marked as complete.
+ * @param currentUserMarks
+ */
+const isCurrentUserMarksComplete = (currentUserMarks: CurrentUserMark[]): boolean => {
+  return currentUserMarks.every((mark) => mark.isCompleted)
+}
+
+/**
+ * Inserts an updated mark into an existing array of marks. Returns a copy of the
+ * existing array with a new value inserted
+ * @param marks
+ * @param markToUpdate
+ */
+const updateMarks = (marks: Mark[], markToUpdate: Mark): Mark[] => {
+  const indexToUpdate = marks.findIndex(mark => mark.id === markToUpdate.id);
+  return [
+    ...marks.slice(0, indexToUpdate),
+    markToUpdate,
+    ...marks.slice(indexToUpdate + 1)
+  ]
+}
+
+const updateCurrentUserMarks = (currentUserMarks: CurrentUserMark[], markToUpdate: CurrentUserMark): CurrentUserMark[] => {
+  const indexToUpdate = currentUserMarks.findIndex((m) => m.mark.id === markToUpdate.mark.id)
+  return [
+    ...currentUserMarks.slice(0, indexToUpdate),
+    markToUpdate,
+    ...currentUserMarks.slice(indexToUpdate + 1)
+  ]
+}
+
+const isLast = (index: number, arr: any[]) => (index === (arr.length -1))
+
+export {
+  getCurrentUserMarks,
+  filterMarksByPubkey,
+  extractMarksFromSignedMeta,
+  isCurrentUserMarksComplete,
+  findNextCurrentUserMark,
+  updateMarks,
+  updateCurrentUserMarks,
+}

src/utils/misc.ts

@@ -12,10 +12,11 @@ import { toast } from 'react-toastify'
 import { NostrController } from '../controllers'
 import { AuthState } from '../store/auth/types'
 import store from '../store/store'
-import { CreateSignatureEventContent, Meta } from '../types'
+import { CreateSignatureEventContent, Meta, SignedEventContent } from '../types'
 import { hexToNpub, now } from './nostr'
 import { parseJson } from './string'
 import { hexToBytes } from '@noble/hashes/utils'
+import { Mark } from '../types/mark.ts'
 
 /**
  * Uploads a file to a file storage service.
@@ -264,3 +265,10 @@ export const extractZipUrlAndEncryptionKey = async (meta: Meta) => {
 
   return null
 }
+
+export const extractMarksFromSignedMeta = (meta: Meta): Mark[] => {
+  return Object.values(meta.docSignatures)
+    .map((val: string) => JSON.parse(val as string))
+    .map((val: Event) => JSON.parse(val.content))
+    .flatMap((val: SignedEventContent) => val.marks);
+}

src/utils/pdf.ts

@@ -0,0 +1,256 @@
+import { PdfFile, PdfPage } from '../types/drawing.ts'
+import * as PDFJS from 'pdfjs-dist'
+import { PDFDocument } from 'pdf-lib'
+import { Mark } from '../types/mark.ts'
+
+PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
+
+/**
+ * Scale between the PDF page's natural size and rendered size
+ * @constant {number}
+ */
+const SCALE: number = 3;
+/**
+ * Defined font size used when generating a PDF. Currently it is difficult to fully
+ * correlate font size used at the time of filling in / drawing on the PDF
+ * because it is dynamically rendered, and the final size.
+ * This should be fixed going forward.
+ * Switching to PDF-Lib will most likely make this problem redundant.
+ */
+const FONT_SIZE: number = 40;
+/**
+ * Current font type used when generating a PDF.
+ */
+const FONT_TYPE: string = 'Arial';
+
+/**
+ * Converts a PDF ArrayBuffer to a generic PDF File
+ * @param arrayBuffer of a PDF
+ * @param fileName identifier of the pdf file
+ */
+const toFile = (arrayBuffer: ArrayBuffer, fileName: string) : File => {
+  const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+  return new File([blob], fileName, { type: "application/pdf" });
+}
+
+/**
+ * Converts a generic PDF File to Sigit's internal Pdf File type
+ * @param {File} file
+ * @return {PdfFile} Sigit's internal PDF File type
+ */
+const toPdfFile = async (file: File): Promise<PdfFile> => {
+  const data = await readPdf(file)
+  const pages = await pdfToImages(data)
+  return { file, pages, expanded: false }
+}
+/**
+ * Transforms an array of generic PDF Files into an array of Sigit's
+ * internal representation of Pdf Files
+ * @param selectedFiles - an array of generic PDF Files
+ * @return PdfFile[] - an array of Sigit's internal Pdf File type
+ */
+const toPdfFiles = async (selectedFiles: File[]): Promise<PdfFile[]> => {
+  return Promise.all(selectedFiles
+    .filter(isPdf)
+    .map(toPdfFile));
+}
+
+/**
+ * A utility that transforms a drawing coordinate number into a CSS-compatible string
+ * @param coordinate
+ */
+const inPx = (coordinate: number): string => `${coordinate}px`;
+
+/**
+ * A utility that checks if a given file is of the pdf type
+ * @param file
+ */
+const isPdf = (file: File) => file.type.toLowerCase().includes('pdf');
+
+/**
+ * Reads the pdf file binaries
+ */
+const readPdf = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+
+    reader.onload = (e: any) => {
+      const data = e.target.result
+
+      resolve(data)
+    };
+
+    reader.onerror = (err) => {
+      console.error('err', err)
+      reject(err)
+    };
+
+    reader.readAsDataURL(file);
+  })
+}
+
+/**
+ * Converts pdf to the images
+ * @param data pdf file bytes
+ */
+const pdfToImages = async (data: any): Promise<PdfPage[]> => {
+  const images: string[] = [];
+  const pdf = await PDFJS.getDocument(data).promise;
+  const canvas = document.createElement("canvas");
+
+  for (let i = 0; i < pdf.numPages; i++) {
+    const page = await pdf.getPage(i + 1);
+    const viewport = page.getViewport({ scale: SCALE });
+    const context = canvas.getContext("2d");
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+    await page.render({ canvasContext: context!, viewport: viewport }).promise;
+    images.push(canvas.toDataURL());
+  }
+
+  return Promise.resolve(images.map((image) => {
+    return {
+      image,
+      drawnFields: []
+    }
+  }))
+}
+
+/**
+ * Takes in individual pdf file and an object with Marks grouped by Page number
+ * Returns an array of encoded images where each image is a representation
+ * of a PDF page with completed and signed marks from all users
+ */
+const addMarks = async (file: File, marksPerPage: {[key: string]: Mark[]}) => {
+  const p = await readPdf(file);
+  const pdf = await PDFJS.getDocument(p).promise;
+  const canvas = document.createElement("canvas");
+
+  const images: string[] = [];
+
+  for (let i = 0; i< pdf.numPages; i++) {
+    const page = await pdf.getPage(i+1)
+    const viewport = page.getViewport({ scale: SCALE });
+    const context = canvas.getContext("2d");
+    canvas.height = viewport.height;
+    canvas.width = viewport.width;
+    await page.render({ canvasContext: context!, viewport: viewport }).promise;
+
+    marksPerPage[i].forEach(mark => draw(mark, context!))
+
+    images.push(canvas.toDataURL());
+  }
+
+  return Promise.resolve(images);
+}
+
+/**
+ * Utility to scale mark in line with the PDF-to-PNG scale
+ */
+const scaleMark = (mark: Mark): Mark => {
+  const { location } = mark;
+  return {
+    ...mark,
+    location: {
+      ...location,
+      width: location.width * SCALE,
+      height: location.height * SCALE,
+      left: location.left * SCALE,
+      top: location.top * SCALE
+    }
+  }
+}
+
+/**
+ * Utility to check if a Mark has value
+ * @param mark
+ */
+const hasValue = (mark: Mark): boolean => !!mark.value;
+
+/**
+ * Draws a Mark on a Canvas representation of a PDF Page
+ * @param mark to be drawn
+ * @param ctx a Canvas representation of a specific PDF Page
+ */
+const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
+  const { location } = mark;
+
+  ctx!.font = FONT_SIZE + 'px ' + FONT_TYPE;
+  ctx!.fillStyle = 'black';
+  const textMetrics = ctx!.measureText(mark.value!);
+  const textX = location.left + (location.width - textMetrics.width) / 2;
+  const textY = location.top + (location.height + parseInt(ctx!.font)) / 2;
+  ctx!.fillText(mark.value!, textX, textY);
+}
+
+/**
+ * Takes an array of encoded PDF pages and returns a blob that is a complete PDF file
+ * @param markedPdfPages
+ */
+const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
+  const pdfDoc = await PDFDocument.create();
+
+  for (const page of markedPdfPages) {
+    const pngImage = await pdfDoc.embedPng(page)
+    const p = pdfDoc.addPage([pngImage.width, pngImage.height])
+    p.drawImage(pngImage, {
+      x: 0,
+      y: 0,
+      width: pngImage.width,
+      height: pngImage.height
+    })
+  }
+
+  const pdfBytes = await pdfDoc.save()
+  return new Blob([pdfBytes], { type: 'application/pdf' })
+
+}
+
+/**
+ * Takes an ArrayBuffer of a PDF file and converts to Sigit's Internal Pdf File type
+ * @param arrayBuffer
+ * @param fileName
+ */
+const convertToPdfFile = async (arrayBuffer: ArrayBuffer, fileName: string): Promise<PdfFile> => {
+  const file = toFile(arrayBuffer, fileName);
+  return toPdfFile(file);
+}
+
+/**
+ * @param marks - an array of Marks
+ * @function hasValue removes any Mark without a property
+ * @function scaleMark scales remaining marks in line with SCALE
+ * @function byPage groups remaining Marks by their page marks.location.page
+ */
+const groupMarksByPage = (marks: Mark[]) => {
+  return marks
+    .filter(hasValue)
+    .map(scaleMark)
+    .reduce<{[key: number]: Mark[]}>(byPage, {})
+}
+
+/**
+ * A reducer callback that transforms an array of marks into an object grouped by the page number
+ * Can be replaced by Object.groupBy https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/groupBy
+ * when it is implemented in TypeScript
+ * Implementation is standard from the Array.prototype.reduce documentation
+ * @param obj - accumulator in the reducer callback
+ * @param mark - current value, i.e. Mark being examined
+ */
+const byPage = (obj: { [key: number]: Mark[]}, mark: Mark) => {
+  const key = mark.location.page;
+  const curGroup = obj[key] ?? [];
+  return { ...obj, [key]: [...curGroup, mark]
+  }
+}
+
+export {
+  toFile,
+  toPdfFile,
+  toPdfFiles,
+  inPx,
+  convertToPdfFile,
+  addMarks,
+  convertToPdfBlob,
+  groupMarksByPage,
+}

src/utils/sign.ts

@@ -0,0 +1,33 @@
+import { Event } from 'nostr-tools'
+import { Meta } from '../types'
+
+/**
+ * This function returns the signature of last signer
+ * It will be used in the content of export signature's signedEvent
+ */
+const getLastSignersSig = (meta: Meta, signers: `npub1${string}`[]): string | null => {
+  // if there're no signers then use creator's signature
+  if (signers.length === 0) {
+    try {
+      const createSignatureEvent: Event = JSON.parse(meta.createSignature)
+      return createSignatureEvent.sig
+    } catch (error) {
+      return null
+    }
+  }
+
+  // get last signer
+  const lastSigner = signers[signers.length - 1]
+
+  // get the signature of last signer
+  try {
+    const lastSignatureEvent: Event = JSON.parse(
+      meta.docSignatures[lastSigner]
+    )
+    return lastSignatureEvent.sig
+  } catch (error) {
+    return null
+  }
+}
+
+export { getLastSignersSig }

src/utils/utils.ts

@@ -1,3 +1,5 @@
+import { PdfFile } from '../types/drawing.ts'
+
 export const compareObjects = (
   obj1: object | null | undefined,
   obj2: object | null | undefined
@@ -64,3 +66,17 @@ export const timeout = (ms: number = 60000) => {
     }, ms) // Timeout duration in milliseconds
   })
 }
+/**
+ * Creates a flat array where each object contains all required information about a Pdf File,
+ * including its name, hash, and content
+ * @param files
+ * @param fileHashes
+ */
+export const getFilesWithHashes = (
+  files: { [filename: string ]: PdfFile },
+  fileHashes: { [key: string]: string | null }
+  ) => {
+  return Object.entries(files).map(([filename, pdfFile]) => {
+    return { pdfFile, filename, hash: fileHashes[filename] }
+  })
+}

src/utils/zip.ts

@@ -1,6 +1,6 @@
 import JSZip from 'jszip'
 import { toast } from 'react-toastify'
-import { OutputByType, OutputType } from '../types'
+import { InputFileFormat, OutputByType, OutputType } from '../types'
 
 /**
  * Read the content of a file within a zip archive.
@@ -9,7 +9,7 @@ import { OutputByType, OutputType } from '../types'
  * @param outputType The type of output to return (e.g., 'string', 'arraybuffer', 'uint8array', etc.).
  * @returns A Promise resolving to the content of the file, or null if an error occurs.
  */
-export const readContentOfZipEntry = async <T extends OutputType>(
+const readContentOfZipEntry = async <T extends OutputType>(
   zip: JSZip,
   filePath: string,
   outputType: T
@@ -35,3 +35,20 @@ export const readContentOfZipEntry = async <T extends OutputType>(
   // Return the file content or null if an error occurred
   return fileContent
 }
+
+const loadZip = async (data: InputFileFormat): Promise<JSZip | null> => {
+  try {
+    return await JSZip.loadAsync(data);
+  } catch (err: any) {
+    console.log('err in loading zip file :>> ', err)
+    toast.error(err.message || 'An error occurred in loading zip file.')
+    return null;
+  }
+}
+
+export {
+  readContentOfZipEntry,
+  loadZip
+}
+
+