PDF Markings #114

Merged
eugene merged 33 commits from issue-99 into staging 2024-08-06 10:02:04 +00:00
9 changed files with 39 additions and 33 deletions
Showing only changes of commit c9c874ae98 - Show all commits

View File

@ -139,7 +139,7 @@ export const DrawPDFFields = (props: Props) => {
* Drawing is finished, resets all the variables used to draw * Drawing is finished, resets all the variables used to draw
* @param event Mouse event * @param event Mouse event
*/ */
const onMouseUp = (event: MouseEvent) => { const onMouseUp = () => {
setMouseState((prev) => { setMouseState((prev) => {
return { return {
...prev, ...prev,
@ -187,7 +187,7 @@ export const DrawPDFFields = (props: Props) => {
* @param event Mouse event * @param event Mouse event
* @param drawnField Which we are moving * @param drawnField Which we are moving
*/ */
const onDrawnFieldMouseDown = (event: any, drawnField: DrawnField) => { const onDrawnFieldMouseDown = (event: any) => {
event.stopPropagation() event.stopPropagation()
// Proceed only if left click // Proceed only if left click
@ -240,7 +240,7 @@ export const DrawPDFFields = (props: Props) => {
* @param event Mouse event * @param event Mouse event
* @param drawnField which we are resizing * @param drawnField which we are resizing
*/ */
const onResizeHandleMouseDown = (event: any, drawnField: DrawnField) => { const onResizeHandleMouseDown = (event: any) => {
// Proceed only if left click // Proceed only if left click
if (event.button !== 0) return if (event.button !== 0) return
@ -377,7 +377,7 @@ export const DrawPDFFields = (props: Props) => {
return ( return (
<div <div
key={drawnFieldIndex} key={drawnFieldIndex}
onMouseDown={(event) => { onDrawnFieldMouseDown(event, drawnField) }} onMouseDown={onDrawnFieldMouseDown}
onMouseMove={(event) => { onDranwFieldMouseMove(event, drawnField)}} onMouseMove={(event) => { onDranwFieldMouseMove(event, drawnField)}}
className={styles.drawingRectangle} className={styles.drawingRectangle}
style={{ style={{
@ -389,7 +389,7 @@ export const DrawPDFFields = (props: Props) => {
}} }}
> >
<span <span
onMouseDown={(event) => {onResizeHandleMouseDown(event, drawnField)}} onMouseDown={onResizeHandleMouseDown}
onMouseMove={(event) => {onResizeHandleMouseMove(event, drawnField)}} onMouseMove={(event) => {onResizeHandleMouseMove(event, drawnField)}}
className={styles.resizeHandle} className={styles.resizeHandle}
></span> ></span>
@ -400,7 +400,7 @@ export const DrawPDFFields = (props: Props) => {
<Close fontSize='small'/> <Close fontSize='small'/>
</span> </span>
<div <div
onMouseDown={(event) => {onUserSelectHandleMouseDown(event)}} onMouseDown={onUserSelectHandleMouseDown}
className={styles.userSelect} className={styles.userSelect}
> >
<FormControl fullWidth size='small'> <FormControl fullWidth size='small'>

View File

@ -10,6 +10,9 @@ interface PdfItemProps {
selectedMark: CurrentUserMark | null selectedMark: CurrentUserMark | null
} }
/**
* Responsible for displaying pages of a single Pdf File.
*/
const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => { const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => {
const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => { const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => {
return marks.filter((m) => m.mark.location.page === page); return marks.filter((m) => m.mark.location.page === page);

View File

@ -9,10 +9,9 @@ interface PdfMarkItemProps {
selectedMark: CurrentUserMark | null selectedMark: CurrentUserMark | null
} }
//selectedMark represents the mark that the user is actively editing /**
// selectedMarkValue representsnthe edited value * Responsible for display an individual Pdf Mark.
// userMark is part of the overall currentUserMark array */
const PdfMarkItem = ({ selectedMark, handleMarkClick, selectedMarkValue, userMark }: PdfMarkItemProps) => { const PdfMarkItem = ({ selectedMark, handleMarkClick, selectedMarkValue, userMark }: PdfMarkItemProps) => {
const { location } = userMark.mark; const { location } = userMark.mark;
const handleClick = () => handleMarkClick(userMark.mark.id); const handleClick = () => handleMarkClick(userMark.mark.id);

View File

@ -4,7 +4,7 @@ import PdfView from './index.tsx'
import MarkFormField from '../../pages/sign/MarkFormField.tsx' import MarkFormField from '../../pages/sign/MarkFormField.tsx'
import { PdfFile } from '../../types/drawing.ts' import { PdfFile } from '../../types/drawing.ts'
import { CurrentUserMark, Mark } from '../../types/mark.ts' import { CurrentUserMark, Mark } from '../../types/mark.ts'
import { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { import {
findNextCurrentUserMark, findNextCurrentUserMark,
isCurrentUserMarksComplete, isCurrentUserMarksComplete,
@ -21,6 +21,12 @@ interface PdfMarkingProps {
setUpdatedMarks: (markToUpdate: Mark) => void setUpdatedMarks: (markToUpdate: Mark) => void
} }
/**
* Top-level component responsible for displaying Pdfs, Pages, and Marks,
* as well as tracking if the document is ready to be signed.
* @param props
* @constructor
*/
const PdfMarking = (props: PdfMarkingProps) => { const PdfMarking = (props: PdfMarkingProps) => {
const { const {
files, files,
@ -42,7 +48,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
setSelectedMarkValue(nextMark?.mark.value ?? EMPTY); setSelectedMarkValue(nextMark?.mark.value ?? EMPTY);
} }
const handleSubmit = (event: any) => { const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault(); event.preventDefault();
if (!selectedMarkValue || !selectedMark) return; if (!selectedMarkValue || !selectedMark) return;
@ -64,7 +70,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
setUpdatedMarks(updatedMark.mark) setUpdatedMarks(updatedMark.mark)
} }
const handleChange = (event: any) => setSelectedMarkValue(event.target.value) const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setSelectedMarkValue(event.target.value)
return ( return (
<> <>

View File

@ -10,6 +10,9 @@ interface PdfPageProps {
selectedMark: CurrentUserMark | null selectedMark: CurrentUserMark | null
} }
/**
* Responsible for rendering a single Pdf Page and its Marks
*/
const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfPageProps) => { const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfPageProps) => {
return ( return (
<div <div

View File

@ -11,6 +11,9 @@ interface PdfViewProps {
selectedMark: CurrentUserMark | null selectedMark: CurrentUserMark | null
} }
/**
* Responsible for rendering Pdf files.
*/
const PdfView = ({ files, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfViewProps) => { const PdfView = ({ files, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfViewProps) => {
const filterByFile = (currentUserMarks: CurrentUserMark[], hash: string): CurrentUserMark[] => { const filterByFile = (currentUserMarks: CurrentUserMark[], hash: string): CurrentUserMark[] => {
return currentUserMarks.filter((currentUserMark) => currentUserMark.mark.pdfFileHash === hash) return currentUserMarks.filter((currentUserMark) => currentUserMark.mark.pdfFileHash === hash)

View File

@ -63,7 +63,6 @@ import styles from './style.module.scss'
import { PdfFile } from '../../types/drawing' import { PdfFile } from '../../types/drawing'
import { DrawPDFFields } from '../../components/DrawPDFFields' import { DrawPDFFields } from '../../components/DrawPDFFields'
import { Mark } from '../../types/mark.ts' import { Mark } from '../../types/mark.ts'
import { v4 as uuidv4 } from 'uuid';
export const CreatePage = () => { export const CreatePage = () => {
const navigate = useNavigate() const navigate = useNavigate()
@ -341,7 +340,7 @@ export const CreatePage = () => {
return fileHashes return fileHashes
} }
const createMarkConfig = (fileHashes: { [key: string]: string }) : Mark[] => { const createMarks = (fileHashes: { [key: string]: string }) : Mark[] => {
return drawnPdfs.flatMap((drawnPdf) => { return drawnPdfs.flatMap((drawnPdf) => {
const fileHash = fileHashes[drawnPdf.file.name]; const fileHash = fileHashes[drawnPdf.file.name];
return drawnPdf.pages.flatMap((page, index) => { return drawnPdf.pages.flatMap((page, index) => {
@ -378,15 +377,13 @@ export const CreatePage = () => {
const generateZipFile = async (zip: JSZip): Promise<ArrayBuffer | null> => { const generateZipFile = async (zip: JSZip): Promise<ArrayBuffer | null> => {
setLoadingSpinnerDesc('Generating zip file') setLoadingSpinnerDesc('Generating zip file')
const arraybuffer = await zip return await zip
.generateAsync({ .generateAsync({
type: 'arraybuffer', type: 'arraybuffer',
compression: 'DEFLATE', compression: 'DEFLATE',
compressionOptions: { level: 6 } compressionOptions: { level: 6 }
}) })
.catch(handleZipError) .catch(handleZipError)
return arraybuffer
} }
// Encrypt the zip file with the generated encryption key // Encrypt the zip file with the generated encryption key
@ -433,15 +430,13 @@ export const CreatePage = () => {
if (!arraybuffer) return null if (!arraybuffer) return null
const finalZipFile = new File( return new File(
[new Blob([arraybuffer])], [new Blob([arraybuffer])],
`${unixNow}.sigit.zip`, `${unixNow}.sigit.zip`,
{ {
type: 'application/zip' type: 'application/zip'
} }
) )
return finalZipFile
} }
// Handle errors during file upload // Handle errors during file upload
@ -463,14 +458,12 @@ export const CreatePage = () => {
type: 'application/sigit' type: 'application/sigit'
}) })
const fileUrl = await uploadToFileStorage(file) return await uploadToFileStorage(file)
.then((url) => { .then((url) => {
toast.success('files.zip uploaded to file storage') toast.success('files.zip uploaded to file storage')
return url return url
}) })
.catch(handleUploadError) .catch(handleUploadError)
return fileUrl
} }
// Manage offline scenarios for signing or viewing the file // Manage offline scenarios for signing or viewing the file
@ -494,15 +487,13 @@ export const CreatePage = () => {
zip.file(file.name, file) zip.file(file.name, file)
}) })
const arraybuffer = await zip return await zip
.generateAsync({ .generateAsync({
type: 'arraybuffer', type: 'arraybuffer',
compression: 'DEFLATE', compression: 'DEFLATE',
compressionOptions: { level: 6 } compressionOptions: { level: 6 }
}) })
.catch(handleZipError) .catch(handleZipError)
return arraybuffer
} }
const generateCreateSignature = async ( const generateCreateSignature = async (
@ -513,9 +504,7 @@ export const CreatePage = () => {
) => { ) => {
const signers = users.filter((user) => user.role === UserRole.signer) const signers = users.filter((user) => user.role === UserRole.signer)
const viewers = users.filter((user) => user.role === UserRole.viewer) const viewers = users.filter((user) => user.role === UserRole.viewer)
const markConfig = createMarkConfig(fileHashes) const markConfig = createMarks(fileHashes)
console.log('mark config: ', markConfig)
const content: CreateSignatureEventContent = { const content: CreateSignatureEventContent = {
signers: signers.map((signer) => hexToNpub(signer.pubkey)), signers: signers.map((signer) => hexToNpub(signer.pubkey)),
@ -555,11 +544,9 @@ export const CreatePage = () => {
: viewers.map((viewer) => viewer.pubkey) : viewers.map((viewer) => viewer.pubkey)
).filter((receiver) => receiver !== usersPubkey) ).filter((receiver) => receiver !== usersPubkey)
const promises = receivers.map((receiver) => return receivers.map((receiver) =>
sendNotification(receiver, meta) sendNotification(receiver, meta)
) )
return promises
} }
const handleCreate = async () => { const handleCreate = async () => {

View File

@ -11,6 +11,11 @@ interface MarkFormFieldProps {
selectedMarkValue: string selectedMarkValue: string
} }
/**
* Responsible for rendering a form field connected to a mark and keeping track of its value.
* @param props
* @constructor
*/
const MarkFormField = (props: MarkFormFieldProps) => { const MarkFormField = (props: MarkFormFieldProps) => {
const { handleSubmit, handleChange, selectedMark, selectedMarkValue } = props; const { handleSubmit, handleChange, selectedMark, selectedMarkValue } = props;
const getSubmitButton = () => selectedMark.isLast ? 'Complete' : 'Next'; const getSubmitButton = () => selectedMark.isLast ? 'Complete' : 'Next';