PDF Markings #114
@ -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'>
|
||||||
|
@ -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);
|
||||||
|
@ -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);
|
||||||
|
@ -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 (
|
||||||
<>
|
<>
|
||||||
|
@ -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
|
||||||
|
@ -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)
|
||||||
|
@ -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 () => {
|
||||||
|
@ -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';
|
||||||
|
Loading…
Reference in New Issue
Block a user