sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

Compare commits

base: sigit:d41d577c29af2135e4352186af1b4b434d22cc95
Branches Tags
sigit:staging
sigit:issue-232
sigit:main
sigit:92-send-completion-dm
sigit:hotfix-nostr-discovery-error-9-20
sigit:issue-168
sigit:signing-page-design
sigit:issue-99
sigit:issue-99-signing-page-refactor
sigit:relay-management-fixed
sigit:relays-management
sigit:issue-38
sigit:v0.0.0-beta
..
compare: sigit:070193c8df8bd9cf61ef70526770b11212bc128a
Branches Tags
sigit:issue-232
sigit:staging
sigit:main
sigit:92-send-completion-dm
sigit:hotfix-nostr-discovery-error-9-20
sigit:issue-168
sigit:signing-page-design
sigit:issue-99
sigit:issue-99-signing-page-refactor
sigit:relay-management-fixed
sigit:relays-management
sigit:issue-38
sigit:v0.0.0-beta

No commits in common. "d41d577c29af2135e4352186af1b4b434d22cc95" and "070193c8df8bd9cf61ef70526770b11212bc128a" have entirely different histories.
d41d577c29 ... 070193c8df

25 changed files with 333 additions and 1086 deletions
Show Stats Expand all files Collapse all files

5
src/components/DrawPDFFields/style.module.scss
View File

@ -50,7 +50,6 @@
.pdfImageWrapper { .pdfImageWrapper {
position: relative; position: relative;
user-select: none; user-select: none;
margin-bottom: 10px;
&.drawing { &.drawing {
cursor: crosshair; cursor: crosshair;
@ -72,10 +71,6 @@
visibility: hidden; visibility: hidden;
} }
&.edited {
border: 1px dotted #01aaad
}
.resizeHandle { .resizeHandle {
position: absolute; position: absolute;
right: -5px; right: -5px;

42
src/components/FileList/index.tsx
View File

@ -1,42 +0,0 @@
import { CurrentUserFile } from '../../types/file.ts'
import styles from './style.module.scss'
import { Button } from '@mui/material'
interface FileListProps {
files: CurrentUserFile[]
currentFile: CurrentUserFile
setCurrentFile: (file: CurrentUserFile) => void
handleDownload: () => void
}
const FileList = ({
files,
currentFile,
setCurrentFile,
handleDownload
}: FileListProps) => {
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
return (
<div className={styles.wrap}>
<div className={styles.container}>
<ul className={styles.files}>
{files.map((file: CurrentUserFile) => (
<li
key={file.id}
className={`${styles.fileItem} ${isActive(file) && styles.active}`}
onClick={() => setCurrentFile(file)}
>
<span className={styles.fileNumber}>{file.id}</span>
<span className={styles.fileName}>{file.filename}</span>
</li>
))}
</ul>
</div>
<Button variant="contained" fullWidth onClick={handleDownload}>
Download Files
</Button>
</div>
)
}
export default FileList

106
src/components/FileList/style.module.scss
View File

@ -1,106 +0,0 @@
.container {
border-radius: 4px;
background: white;
padding: 15px;
display: flex;
flex-direction: column;
grid-gap: 0px;
}
.filesPageContainer {
width: 100%;
display: grid;
grid-template-columns: 0.75fr 1.5fr 0.75fr;
grid-gap: 30px;
flex-grow: 1;
}
ul {
list-style-type: none; /* Removes bullet points */
margin: 0; /* Removes default margin */
padding: 0; /* Removes default padding */
}
.wrap {
position: sticky;
top: 15px;
display: flex;
flex-direction: column;
grid-gap: 15px;
}
.files {
display: flex;
flex-direction: column;
width: 100%;
grid-gap: 15px;
max-height: 350px;
overflow: auto;
padding: 0 5px 0 0;
margin: 0 -5px 0 0;
}
.files::-webkit-scrollbar {
width: 10px;
}
.files::-webkit-scrollbar-track {
background-color: rgba(0,0,0,0.15);
}
.files::-webkit-scrollbar-thumb {
max-width: 10px;
border-radius: 2px;
background-color: #4c82a3;
cursor: grab;
}
.wrap {
margin-top: 5px;
}
.fileItem {
transition: ease 0.2s;
display: flex;
flex-direction: row;
grid-gap: 10px;
border-radius: 4px;
overflow: hidden;
background: #ffffff;
padding: 5px 10px;
align-items: center;
color: rgba(0,0,0,0.5);
cursor: pointer;
flex-grow: 1;
font-size: 16px;
font-weight: 500;
&.active {
background: #4c82a3;
color: white;
}
}
.fileItem:hover {
transition: ease 0.2s;
background: #4c82a3;
color: white;
}
.fileName {
display: -webkit-box;
-webkit-box-orient: vertical;
overflow: hidden;
-webkit-line-clamp: 1;
}
.fileNumber {
font-size: 14px;
font-weight: 500;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

124
src/components/MarkFormField/index.tsx
View File

@ -1,124 +0,0 @@
import { CurrentUserMark } from '../../types/mark.ts'
import styles from './style.module.scss'
import { MARK_TYPE_TRANSLATION, NEXT, SIGN } from '../../utils/const.ts'
import {
findNextIncompleteCurrentUserMark,
isCurrentUserMarksComplete,
isCurrentValueLast
} from '../../utils'
import { useState } from 'react'
interface MarkFormFieldProps {
handleSubmit: (event: any) => void
handleSelectedMarkValueChange: (event: any) => void
selectedMark: CurrentUserMark
selectedMarkValue: string
currentUserMarks: CurrentUserMark[]
handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
}
/**
* Responsible for rendering a form field connected to a mark and keeping track of its value.
*/
const MarkFormField = ({
handleSubmit,
handleSelectedMarkValueChange,
selectedMark,
selectedMarkValue,
currentUserMarks,
handleCurrentUserMarkChange
}: MarkFormFieldProps) => {
const [displayActions, setDisplayActions] = useState(true)
const getSubmitButtonText = () => (isReadyToSign() ? SIGN : NEXT)
const isReadyToSign = () =>
isCurrentUserMarksComplete(currentUserMarks) ||
isCurrentValueLast(currentUserMarks, selectedMark, selectedMarkValue)
const isCurrent = (currentMark: CurrentUserMark) =>
currentMark.id === selectedMark.id
const isDone = (currentMark: CurrentUserMark) =>
isCurrent(currentMark) ? !!selectedMarkValue : currentMark.isCompleted
const findNext = () => {
return (
currentUserMarks[selectedMark.id] ||
findNextIncompleteCurrentUserMark(currentUserMarks)
)
}
const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault()
console.log('handle form submit runs...')
return isReadyToSign()
? handleSubmit(event)
: handleCurrentUserMarkChange(findNext()!)
}
const toggleActions = () => setDisplayActions(!displayActions)
return (
<div className={styles.container}>
<div className={styles.trigger}>
<button
onClick={toggleActions}
className={styles.triggerBtn}
type="button"
>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="-64 0 512 512"
width="1em"
height="1em"
fill="currentColor"
transform={displayActions ? 'rotate(180)' : 'rotate(0)'}
>
<path d="M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z"></path>
</svg>
</button>
</div>
<div className={`${styles.actions} ${displayActions && styles.expanded}`}>
<div className={styles.actionsWrapper}>
<div className={styles.actionsTop}>
<div className={styles.actionsTopInfo}>
<p className={styles.actionsTopInfoText}>Add your signature</p>
</div>
</div>
<div className={styles.inputWrapper}>
<form onSubmit={(e) => handleFormSubmit(e)}>
<input
className={styles.input}
placeholder={
MARK_TYPE_TRANSLATION[selectedMark.mark.type.valueOf()]
}
onChange={handleSelectedMarkValueChange}
value={selectedMarkValue}
/>
<div className={styles.actionsBottom}>
<button type="submit" className={styles.submitButton}>
{getSubmitButtonText()}
</button>
</div>
</form>
<div className={styles.footerContainer}>
<div className={styles.footer}>
{currentUserMarks.map((mark, index) => {
return (
<div className={styles.pagination} key={index}>
<button
className={`${styles.paginationButton} ${isDone(mark) && styles.paginationButtonDone}`}
onClick={() => handleCurrentUserMarkChange(mark)}
>
{mark.id}
</button>
{isCurrent(mark) && (
<div className={styles.paginationButtonCurrent}></div>
)}
</div>
)
})}
</div>
</div>
</div>
</div>
</div>
</div>
)
}
export default MarkFormField

209
src/components/MarkFormField/style.module.scss
View File

@ -1,209 +0,0 @@
.container {
width: 100%;
display: flex;
flex-direction: column;
position: fixed;
bottom: 0;
right: 0;
left: 0;
align-items: center;
}
.actions {
background: white;
width: 100%;
border-radius: 4px;
padding: 10px 20px;
display: none;
flex-direction: column;
align-items: center;
grid-gap: 15px;
box-shadow: 0 -2px 4px 0 rgb(0,0,0,0.1);
max-width: 750px;
&.expanded {
display: flex;
}
}
.actionsWrapper {
display: flex;
flex-direction: column;
grid-gap: 20px;
flex-grow: 1;
width: 100%;
}
.actionsTop {
display: flex;
flex-direction: row;
grid-gap: 10px;
align-items: center;
}
.actionsTopInfo {
flex-grow: 1;
}
.actionsTopInfoText {
font-size: 16px;
color: #434343;
}
.actionsTrigger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.actionButtons {
display: flex;
flex-direction: row;
grid-gap: 5px;
}
.inputWrapper {
display: flex;
flex-direction: column;
grid-gap: 10px;
}
.textInput {
height: 100px;
background: rgba(0,0,0,0.1);
border-radius: 4px;
border: solid 2px #4c82a3;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.input {
border-radius: 4px;
border: solid 1px rgba(0,0,0,0.15);
padding: 5px 10px;
font-size: 16px;
width: 100%;
background: linear-gradient(rgba(0,0,0,0.00), rgba(0,0,0,0.00) 100%), linear-gradient(white, white);
}
.input:focus {
border: solid 1px rgba(0,0,0,0.15);
outline: none;
background: linear-gradient(rgba(0,0,0,0.05), rgba(0,0,0,0.05) 100%), linear-gradient(white, white);
}
.actionsBottom {
display: flex;
flex-direction: row;
grid-gap: 5px;
justify-content: center;
align-items: center;
}
button {
transition: ease 0.2s;
width: auto;
border-radius: 4px;
outline: unset;
border: unset;
background: unset;
color: #ffffff;
background: #4c82a3;
font-weight: 500;
font-size: 14px;
padding: 8px 15px;
white-space: nowrap;
display: flex;
flex-direction: row;
grid-gap: 12px;
justify-content: center;
align-items: center;
text-decoration: unset;
position: relative;
cursor: pointer;
}
button:hover {
transition: ease 0.2s;
background: #5e8eab;
color: white;
}
button:active {
transition: ease 0.2s;
background: #447592;
color: white;
}
.submitButton {
width: 100%;
max-width: 300px;
margin-top: 10px;
}
.footerContainer {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.footer {
display: flex;
flex-direction: row;
grid-gap: 5px;
align-items: start;
justify-content: center;
width: 100%;
}
.pagination {
display: flex;
flex-direction: column;
grid-gap: 5px;
}
.paginationButton {
font-size: 12px;
padding: 5px 10px;
border-radius: 3px;
background: rgba(0,0,0,0.1);
color: rgba(0,0,0,0.5);
}
.paginationButton:hover {
background: #447592;
color: rgba(255,255,255,0.5);
}
.paginationButtonDone {
background: #5e8eab;
color: rgb(255,255,255);
}
.paginationButtonCurrent {
height: 2px;
width: 100%;
background: #4c82a3;
}
.trigger {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
}
.triggerBtn {
background: white;
color: #434343;
padding: 5px 30px;
box-shadow: 0px -3px 4px 0 rgb(0,0,0,0.1);
position: absolute;
top: -25px;
}

42
src/components/PDFView/PdfItem.tsx
View File

@ -1,6 +1,6 @@
import { PdfFile } from '../../types/drawing.ts' import { PdfFile } from '../../types/drawing.ts'
import { CurrentUserMark } from '../../types/mark.ts' import { CurrentUserMark } from '../../types/mark.ts'
import PdfPageItem from './PdfPageItem.tsx' import PdfPageItem from './PdfPageItem.tsx';
interface PdfItemProps { interface PdfItemProps {
pdfFile: PdfFile pdfFile: PdfFile
@ -13,31 +13,23 @@ interface PdfItemProps {
/** /**
* Responsible for displaying pages of a single Pdf File. * Responsible for displaying pages of a single Pdf File.
*/ */
const PdfItem = ({ const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => {
pdfFile, const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => {
currentUserMarks, return marks.filter((m) => m.mark.location.page === page);
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 (
return ( pdfFile.pages.map((page, i) => {
<PdfPageItem return (
page={page} <PdfPageItem
key={i} page={page}
currentUserMarks={filterByPage(currentUserMarks, i)} key={i}
handleMarkClick={handleMarkClick} currentUserMarks={filterByPage(currentUserMarks, i)}
selectedMarkValue={selectedMarkValue} handleMarkClick={handleMarkClick}
selectedMark={selectedMark} selectedMarkValue={selectedMarkValue}
/> selectedMark={selectedMark}
) />
}) )
}))
} }
export default PdfItem export default PdfItem

25
src/components/PDFView/PdfMarkItem.tsx
View File

@ -12,30 +12,25 @@ interface PdfMarkItemProps {
/** /**
* Responsible for display an individual Pdf Mark. * Responsible for display an individual Pdf Mark.
*/ */
const PdfMarkItem = ({ const PdfMarkItem = ({ selectedMark, handleMarkClick, selectedMarkValue, userMark }: PdfMarkItemProps) => {
selectedMark, const { location } = userMark.mark;
handleMarkClick, const handleClick = () => handleMarkClick(userMark.mark.id);
selectedMarkValue, const getMarkValue = () => (
userMark selectedMark?.mark.id === userMark.mark.id
}: PdfMarkItemProps) => { ? selectedMarkValue
const { location } = userMark.mark : userMark.mark.value
const handleClick = () => handleMarkClick(userMark.mark.id) )
const isEdited = () => selectedMark?.mark.id === userMark.mark.id
const getMarkValue = () =>
isEdited() ? selectedMarkValue : userMark.currentValue
return ( return (
<div <div
onClick={handleClick} onClick={handleClick}
className={`${styles.drawingRectangle} ${isEdited() && styles.edited}`} className={styles.drawingRectangle}
style={{ style={{
left: inPx(location.left), left: inPx(location.left),
top: inPx(location.top), top: inPx(location.top),
width: inPx(location.width), width: inPx(location.width),
height: inPx(location.height) height: inPx(location.height)
}} }}
> >{getMarkValue()}</div>
{getMarkValue()}
</div>
) )
} }

162
src/components/PDFView/PdfMarking.tsx
View File

@ -1,27 +1,23 @@
import PdfView from './index.tsx' import PdfView from './index.tsx'
import MarkFormField from '../MarkFormField' import MarkFormField from '../../pages/sign/MarkFormField.tsx'
import { PdfFile } from '../../types/drawing.ts'
import { CurrentUserMark, Mark } from '../../types/mark.ts' import { CurrentUserMark, Mark } from '../../types/mark.ts'
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { import {
findNextIncompleteCurrentUserMark, findNextCurrentUserMark,
getUpdatedMark, isCurrentUserMarksComplete,
updateCurrentUserMarks updateCurrentUserMarks,
} from '../../utils' } from '../../utils'
import { EMPTY } from '../../utils/const.ts' import { EMPTY } from '../../utils/const.ts'
import { Container } from '../Container' import { Container } from '../Container'
import signPageStyles from '../../pages/sign/style.module.scss' import styles from '../../pages/sign/style.module.scss'
import styles from './style.module.scss'
import { CurrentUserFile } from '../../types/file.ts'
import FileList from '../FileList'
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
interface PdfMarkingProps { interface PdfMarkingProps {
files: CurrentUserFile[] files: { pdfFile: PdfFile, filename: string, hash: string | null }[],
currentUserMarks: CurrentUserMark[] currentUserMarks: CurrentUserMark[],
setIsReadyToSign: (isReadyToSign: boolean) => void setIsReadyToSign: (isReadyToSign: boolean) => void,
setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void,
setUpdatedMarks: (markToUpdate: Mark) => void setUpdatedMarks: (markToUpdate: Mark) => void
handleDownload: () => void
} }
/** /**
@ -36,122 +32,66 @@ const PdfMarking = (props: PdfMarkingProps) => {
currentUserMarks, currentUserMarks,
setIsReadyToSign, setIsReadyToSign,
setCurrentUserMarks, setCurrentUserMarks,
setUpdatedMarks, setUpdatedMarks
handleDownload
} = props } = props
const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null) const [selectedMark, setSelectedMark] = useState<CurrentUserMark | null>(null)
const [selectedMarkValue, setSelectedMarkValue] = useState<string>('') const [selectedMarkValue, setSelectedMarkValue] = useState<string>("")
const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
useEffect(() => { useEffect(() => {
if (selectedMark === null && currentUserMarks.length > 0) { setSelectedMark(findNextCurrentUserMark(currentUserMarks) || null)
setSelectedMark( }, [currentUserMarks])
findNextIncompleteCurrentUserMark(currentUserMarks) ||
currentUserMarks[0]
)
}
}, [currentUserMarks, selectedMark])
useEffect(() => {
if (currentFile === null && files.length > 0) {
setCurrentFile(files[0])
}
}, [files, currentFile])
const handleMarkClick = (id: number) => { const handleMarkClick = (id: number) => {
const nextMark = currentUserMarks.find((mark) => mark.mark.id === id) const nextMark = currentUserMarks.find((mark) => mark.mark.id === id);
setSelectedMark(nextMark!) setSelectedMark(nextMark!);
setSelectedMarkValue(nextMark?.mark.value ?? EMPTY) setSelectedMarkValue(nextMark?.mark.value ?? EMPTY);
}
const handleCurrentUserMarkChange = (mark: CurrentUserMark) => {
if (!selectedMark) return
const updatedSelectedMark: CurrentUserMark = getUpdatedMark(
selectedMark,
selectedMarkValue
)
const updatedCurrentUserMarks = updateCurrentUserMarks(
currentUserMarks,
updatedSelectedMark
)
setCurrentUserMarks(updatedCurrentUserMarks)
setSelectedMarkValue(mark.currentValue ?? EMPTY)
setSelectedMark(mark)
} }
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => { const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault() event.preventDefault();
if (!selectedMarkValue || !selectedMark) return if (!selectedMarkValue || !selectedMark) return;
const updatedMark: CurrentUserMark = getUpdatedMark( const updatedMark: CurrentUserMark = {
selectedMark, ...selectedMark,
selectedMarkValue mark: {
) ...selectedMark.mark,
value: selectedMarkValue
},
isCompleted: true
}
setSelectedMarkValue(EMPTY) setSelectedMarkValue(EMPTY)
const updatedCurrentUserMarks = updateCurrentUserMarks( const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark);
currentUserMarks,
updatedMark
)
setCurrentUserMarks(updatedCurrentUserMarks) setCurrentUserMarks(updatedCurrentUserMarks)
setSelectedMark(null) setSelectedMark(findNextCurrentUserMark(updatedCurrentUserMarks) || null)
setIsReadyToSign(true) console.log(isCurrentUserMarksComplete(updatedCurrentUserMarks))
setIsReadyToSign(isCurrentUserMarksComplete(updatedCurrentUserMarks))
setUpdatedMarks(updatedMark.mark) setUpdatedMarks(updatedMark.mark)
} }
// const updateCurrentUserMarkValues = () => { const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => setSelectedMarkValue(event.target.value)
// const updatedMark: CurrentUserMark = getUpdatedMark(selectedMark!, selectedMarkValue)
// const updatedCurrentUserMarks = updateCurrentUserMarks(currentUserMarks, updatedMark)
// setSelectedMarkValue(EMPTY)
// setCurrentUserMarks(updatedCurrentUserMarks)
// }
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
setSelectedMarkValue(event.target.value)
return ( return (
<> <>
<Container className={signPageStyles.container}> <Container className={styles.container}>
<StickySideColumns {
left={ currentUserMarks?.length > 0 && (
<div> <PdfView
{currentFile !== null && ( files={files}
<FileList handleMarkClick={handleMarkClick}
files={files} selectedMarkValue={selectedMarkValue}
currentFile={currentFile} selectedMark={selectedMark}
setCurrentFile={setCurrentFile} currentUserMarks={currentUserMarks}
handleDownload={handleDownload} />)}
/> {
)} selectedMark !== null && (
</div> <MarkFormField
} handleSubmit={handleSubmit}
> handleChange={handleChange}
<div className={styles.container}> selectedMark={selectedMark}
{currentUserMarks?.length > 0 && ( selectedMarkValue={selectedMarkValue}
<div className={styles.pdfView}> />
<PdfView )}
currentFile={currentFile}
files={files}
handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue}
selectedMark={selectedMark}
currentUserMarks={currentUserMarks}
/>
</div>
)}
</div>
</StickySideColumns>
{selectedMark !== null && (
<MarkFormField
handleSubmit={handleSubmit}
handleSelectedMarkValueChange={handleChange}
selectedMark={selectedMark}
selectedMarkValue={selectedMarkValue}
currentUserMarks={currentUserMarks}
handleCurrentUserMarkChange={handleCurrentUserMarkChange}
/>
)}
</Container> </Container>
</> </>
) )

36
src/components/PDFView/PdfPageItem.tsx
View File

@ -2,7 +2,6 @@ import styles from '../DrawPDFFields/style.module.scss'
import { PdfPage } from '../../types/drawing.ts' import { PdfPage } from '../../types/drawing.ts'
import { CurrentUserMark } from '../../types/mark.ts' import { CurrentUserMark } from '../../types/mark.ts'
import PdfMarkItem from './PdfMarkItem.tsx' import PdfMarkItem from './PdfMarkItem.tsx'
import { useEffect, useRef } from 'react'
interface PdfPageProps { interface PdfPageProps {
page: PdfPage page: PdfPage
currentUserMarks: CurrentUserMark[] currentUserMarks: CurrentUserMark[]
@ -14,40 +13,31 @@ interface PdfPageProps {
/** /**
* Responsible for rendering a single Pdf Page and its Marks * Responsible for rendering a single Pdf Page and its Marks
*/ */
const PdfPageItem = ({ const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfPageProps) => {
page,
currentUserMarks,
handleMarkClick,
selectedMarkValue,
selectedMark
}: PdfPageProps) => {
useEffect(() => {
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
markRefs.current[selectedMark.id]?.scrollIntoView({
behavior: 'smooth',
block: 'end'
})
}
}, [selectedMark])
const markRefs = useRef<(HTMLDivElement | null)[]>([])
return ( return (
<div <div
className={styles.pdfImageWrapper} className={styles.pdfImageWrapper}
style={{ style={{
border: '1px solid #c4c4c4' border: '1px solid #c4c4c4',
marginBottom: '10px',
marginTop: '10px'
}} }}
> >
<img draggable="false" src={page.image} style={{ width: '100%' }} /> <img
{currentUserMarks.map((m, i) => ( draggable="false"
<div key={i} ref={(el) => (markRefs.current[m.id] = el)}> src={page.image}
style={{ width: '100%'}}
/>
{
currentUserMarks.map((m, i) => (
<PdfMarkItem <PdfMarkItem
key={i} key={i}
handleMarkClick={handleMarkClick} handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue} selectedMarkValue={selectedMarkValue}
userMark={m} userMark={m}
selectedMark={selectedMark} selectedMark={selectedMark}
/> />
</div>
))} ))}
</div> </div>
) )

68
src/components/PDFView/index.tsx
View File

@ -1,72 +1,42 @@
import { Box, Divider } from '@mui/material' import { PdfFile } from '../../types/drawing.ts'
import { Box } from '@mui/material'
import PdfItem from './PdfItem.tsx' import PdfItem from './PdfItem.tsx'
import { CurrentUserMark } from '../../types/mark.ts' import { CurrentUserMark } from '../../types/mark.ts'
import { CurrentUserFile } from '../../types/file.ts'
import { useEffect, useRef } from 'react'
interface PdfViewProps { interface PdfViewProps {
files: CurrentUserFile[] files: { pdfFile: PdfFile, filename: string, hash: string | null }[]
currentUserMarks: CurrentUserMark[] currentUserMarks: CurrentUserMark[]
handleMarkClick: (id: number) => void handleMarkClick: (id: number) => void
selectedMarkValue: string selectedMarkValue: string
selectedMark: CurrentUserMark | null selectedMark: CurrentUserMark | null
currentFile: CurrentUserFile | null
} }
/** /**
* Responsible for rendering Pdf files. * Responsible for rendering Pdf files.
*/ */
const PdfView = ({ const PdfView = ({ files, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfViewProps) => {
files, const filterByFile = (currentUserMarks: CurrentUserMark[], hash: string): CurrentUserMark[] => {
currentUserMarks, return currentUserMarks.filter((currentUserMark) => currentUserMark.mark.pdfFileHash === hash)
handleMarkClick,
selectedMarkValue,
selectedMark,
currentFile
}: PdfViewProps) => {
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
useEffect(() => {
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
pdfRefs.current[currentFile.id]?.scrollIntoView({
behavior: 'smooth',
block: 'end'
})
}
}, [currentFile])
const filterByFile = (
currentUserMarks: CurrentUserMark[],
fileName: string
): CurrentUserMark[] => {
return currentUserMarks.filter(
(currentUserMark) => currentUserMark.mark.fileName === fileName
)
} }
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
index !== files.length - 1
return ( return (
<> <Box sx={{ width: '100%' }}>
{files.map((currentUserFile, index, arr) => { {
const { hash, pdfFile, filename, id } = currentUserFile files.map(({ pdfFile, hash }, i) => {
if (!hash) return if (!hash) return
return ( return (
<div
id={pdfFile.file.name}
ref={(el) => (pdfRefs.current[id] = el)}
key={index}
>
<PdfItem <PdfItem
pdfFile={pdfFile} pdfFile={pdfFile}
currentUserMarks={filterByFile(currentUserMarks, filename)} key={i}
currentUserMarks={filterByFile(currentUserMarks, hash)}
selectedMark={selectedMark} selectedMark={selectedMark}
handleMarkClick={handleMarkClick} handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue} selectedMarkValue={selectedMarkValue}
/> />
{isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>} )
</div> })
) }
})} </Box>
</>
) )
} }
export default PdfView export default PdfView;

15
src/components/PDFView/style.module.scss
View File

@ -14,18 +14,3 @@
max-height: 100%; max-height: 100%;
object-fit: contain; /* Ensure the image fits within the container */ object-fit: contain; /* Ensure the image fits within the container */
} }
.container {
display: flex;
width: 100%;
flex-direction: column;
}
.pdfView {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
gap: 10px;
}

29
src/layouts/StickySideColumns.module.scss
View File

@ -1,29 +0,0 @@
@import '../styles/colors.scss';
@import '../styles/sizes.scss';
.container {
display: grid;
grid-template-columns: 0.75fr 1.5fr 0.75fr;
grid-gap: 30px;
flex-grow: 1;
}
.sidesWrap {
position: relative;
}
.sides {
position: sticky;
top: $header-height + $body-vertical-padding;
}
.files {
display: flex;
flex-direction: column;
grid-gap: 15px;
}
.content {
max-width: 550px;
width: 550px;
margin: 0 auto;
}

26
src/layouts/StickySideColumns.tsx
View File

@ -1,26 +0,0 @@
import { PropsWithChildren, ReactNode } from 'react'
import styles from './StickySideColumns.module.scss'
interface StickySideColumnsProps {
left?: ReactNode
right?: ReactNode
}
export const StickySideColumns = ({
left,
right,
children
}: PropsWithChildren<StickySideColumnsProps>) => {
return (
<div className={styles.container}>
<div className={`${styles.sidesWrap} ${styles.files}`}>
<div className={styles.sides}>{left}</div>
</div>
<div className={styles.content}>{children}</div>
<div className={styles.sidesWrap}>
<div className={styles.sides}>{right}</div>
</div>
</div>
)
}

58
src/pages/create/index.tsx
View File

@ -338,36 +338,32 @@ export const CreatePage = () => {
fileHashes[file.name] = hash fileHashes[file.name] = hash
} }
console.log('file hashes: ', fileHashes)
return fileHashes return fileHashes
} }
const createMarks = (fileHashes: { [key: string]: string }): Mark[] => { const createMarks = (fileHashes: { [key: string]: string }) : Mark[] => {
return drawnPdfs return drawnPdfs.flatMap((drawnPdf) => {
.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) => { return page.drawnFields.map((drawnField) => {
return page.drawnFields.map((drawnField) => { return {
return { type: drawnField.type,
type: drawnField.type, location: {
location: { page: index,
page: index, top: drawnField.top,
top: drawnField.top, left: drawnField.left,
left: drawnField.left, height: drawnField.height,
height: drawnField.height, width: drawnField.width,
width: drawnField.width },
}, npub: drawnField.counterpart,
npub: drawnField.counterpart, pdfFileHash: fileHash
pdfFileHash: fileHash, }
fileName: drawnPdf.file.name
}
})
}) })
}) })
})
.map((mark, index) => { .map((mark, index) => {
return { ...mark, id: index } return {...mark, id: index }
}) });
} }
// Handle errors during zip file generation // Handle errors during zip file generation
@ -435,9 +431,13 @@ export const CreatePage = () => {
if (!arraybuffer) return null if (!arraybuffer) return null
return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, { return new File(
type: 'application/zip' [new Blob([arraybuffer])],
}) `${unixNow}.sigit.zip`,
{
type: 'application/zip'
}
)
} }
// Handle errors during file upload // Handle errors during file upload
@ -545,7 +545,9 @@ export const CreatePage = () => {
: viewers.map((viewer) => viewer.pubkey) : viewers.map((viewer) => viewer.pubkey)
).filter((receiver) => receiver !== usersPubkey) ).filter((receiver) => receiver !== usersPubkey)
return receivers.map((receiver) => sendNotification(receiver, meta)) return receivers.map((receiver) =>
sendNotification(receiver, meta)
)
} }
const handleCreate = async () => { const handleCreate = async () => {

37
src/pages/sign/MarkFormField.tsx Normal file
View File

@ -0,0 +1,37 @@
import { CurrentUserMark } 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
}
/**
* Responsible for rendering a form field connected to a mark and keeping track of its value.
*/
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;

98
src/pages/sign/index.tsx
View File

@ -16,16 +16,13 @@ import { State } from '../../store/rootReducer'
import { CreateSignatureEventContent, Meta, SignedEvent } from '../../types' import { CreateSignatureEventContent, Meta, SignedEvent } from '../../types'
import { import {
decryptArrayBuffer, decryptArrayBuffer,
encryptArrayBuffer, encryptArrayBuffer, extractMarksFromSignedMeta,
extractMarksFromSignedMeta,
extractZipUrlAndEncryptionKey, extractZipUrlAndEncryptionKey,
generateEncryptionKey, generateEncryptionKey,
generateKeysFile, generateKeysFile, getFilesWithHashes,
getCurrentUserFiles,
getHash, getHash,
hexToNpub, hexToNpub,
isOnline, isOnline, loadZip,
loadZip,
now, now,
npubToHex, npubToHex,
parseJson, parseJson,
@ -44,12 +41,9 @@ import { getLastSignersSig } from '../../utils/sign.ts'
import { import {
filterMarksByPubkey, filterMarksByPubkey,
getCurrentUserMarks, getCurrentUserMarks,
isCurrentUserMarksComplete, isCurrentUserMarksComplete, updateMarks
updateMarks
} from '../../utils' } from '../../utils'
import PdfMarking from '../../components/PDFView/PdfMarking.tsx' import PdfMarking from '../../components/PDFView/PdfMarking.tsx'
import { getZipWithFiles } from '../../utils/file.ts'
import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
enum SignedStatus { enum SignedStatus {
Fully_Signed, Fully_Signed,
User_Is_Next_Signer, User_Is_Next_Signer,
@ -87,7 +81,7 @@ export const SignPage = () => {
const [signers, setSigners] = useState<`npub1${string}`[]>([]) const [signers, setSigners] = useState<`npub1${string}`[]>([])
const [viewers, setViewers] = useState<`npub1${string}`[]>([]) const [viewers, setViewers] = useState<`npub1${string}`[]>([])
const [marks, setMarks] = useState<Mark[]>([]) const [marks, setMarks] = useState<Mark[] >([])
const [creatorFileHashes, setCreatorFileHashes] = useState<{ const [creatorFileHashes, setCreatorFileHashes] = useState<{
[key: string]: string [key: string]: string
}>({}) }>({})
@ -106,10 +100,8 @@ export const SignPage = () => {
const [authUrl, setAuthUrl] = useState<string>() const [authUrl, setAuthUrl] = useState<string>()
const nostrController = NostrController.getInstance() const nostrController = NostrController.getInstance()
const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>( const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>([]);
[] const [isReadyToSign, setIsReadyToSign] = useState(false);
)
const [isReadyToSign, setIsReadyToSign] = useState(false)
useEffect(() => { useEffect(() => {
if (signers.length > 0) { if (signers.length > 0) {
@ -200,16 +192,13 @@ export const SignPage = () => {
setViewers(createSignatureContent.viewers) setViewers(createSignatureContent.viewers)
setCreatorFileHashes(createSignatureContent.fileHashes) setCreatorFileHashes(createSignatureContent.fileHashes)
setSubmittedBy(createSignatureEvent.pubkey) setSubmittedBy(createSignatureEvent.pubkey)
setMarks(createSignatureContent.markConfig) setMarks(createSignatureContent.markConfig);
if (usersPubkey) { if (usersPubkey) {
const metaMarks = filterMarksByPubkey( const metaMarks = filterMarksByPubkey(createSignatureContent.markConfig, usersPubkey!)
createSignatureContent.markConfig,
usersPubkey!
)
const signedMarks = extractMarksFromSignedMeta(meta) const signedMarks = extractMarksFromSignedMeta(meta)
const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks) const currentUserMarks = getCurrentUserMarks(metaMarks, signedMarks);
setCurrentUserMarks(currentUserMarks) setCurrentUserMarks(currentUserMarks);
// setCurrentUserMark(findNextCurrentUserMark(currentUserMarks) || null) // setCurrentUserMark(findNextCurrentUserMark(currentUserMarks) || null)
setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks)) setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
} }
@ -318,7 +307,7 @@ export const SignPage = () => {
) )
if (arrayBuffer) { if (arrayBuffer) {
files[fileName] = await convertToPdfFile(arrayBuffer, fileName) files[fileName] = await convertToPdfFile(arrayBuffer, fileName);
const hash = await getHash(arrayBuffer) const hash = await getHash(arrayBuffer)
if (hash) { if (hash) {
@ -359,7 +348,7 @@ export const SignPage = () => {
const decrypt = async (file: File) => { const decrypt = async (file: File) => {
setLoadingSpinnerDesc('Decrypting file') setLoadingSpinnerDesc('Decrypting file')
const zip = await loadZip(file) const zip = await loadZip(file);
if (!zip) return if (!zip) return
const parsedKeysJson = await parseKeysJson(zip) const parsedKeysJson = await parseKeysJson(zip)
@ -425,27 +414,6 @@ export const SignPage = () => {
return null return null
} }
const handleDownload = async () => {
if (Object.entries(files).length === 0 || !meta || !usersPubkey) return
setLoadingSpinnerDesc('Generating file')
try {
const zip = await getZipWithFiles(meta, files)
const arrayBuffer = await zip.generateAsync({
type: ARRAY_BUFFER,
compression: DEFLATE,
compressionOptions: {
level: 6
}
})
if (!arrayBuffer) return
const blob = new Blob([arrayBuffer])
saveAs(blob, `exported-${now()}.sigit.zip`)
} catch (error: any) {
console.log('error in zip:>> ', error)
toast.error(error.message || 'Error occurred in generating zip file')
}
}
const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => { const handleDecryptedArrayBuffer = async (arrayBuffer: ArrayBuffer) => {
const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip') const decryptedZipFile = new File([arrayBuffer], 'decrypted.zip')
@ -471,7 +439,7 @@ export const SignPage = () => {
) )
if (arrayBuffer) { if (arrayBuffer) {
files[fileName] = await convertToPdfFile(arrayBuffer, fileName) files[fileName] = await convertToPdfFile(arrayBuffer, fileName);
const hash = await getHash(arrayBuffer) const hash = await getHash(arrayBuffer)
if (hash) { if (hash) {
@ -552,10 +520,7 @@ export const SignPage = () => {
} }
// Sign the event for the meta file // Sign the event for the meta file
const signEventForMeta = async (signerContent: { const signEventForMeta = async (signerContent: { prevSig: string, marks: Mark[] }) => {
prevSig: string
marks: Mark[]
}) => {
return await signEventForMetaFile( return await signEventForMetaFile(
JSON.stringify(signerContent), JSON.stringify(signerContent),
nostrController, nostrController,
@ -564,8 +529,8 @@ export const SignPage = () => {
} }
const getSignerMarksForMeta = (): Mark[] | undefined => { const getSignerMarksForMeta = (): Mark[] | undefined => {
if (currentUserMarks.length === 0) return if (currentUserMarks.length === 0) return;
return currentUserMarks.map(({ mark }: CurrentUserMark) => mark) return currentUserMarks.map(( { mark }: CurrentUserMark) => mark);
} }
// Update the meta signatures // Update the meta signatures
@ -635,9 +600,13 @@ export const SignPage = () => {
if (!arraybuffer) return null if (!arraybuffer) return null
return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, { return new File(
type: 'application/zip' [new Blob([arraybuffer])],
}) `${unixNow}.sigit.zip`,
{
type: 'application/zip'
}
)
} }
// Handle errors during zip file generation // Handle errors during zip file generation
@ -725,7 +694,7 @@ export const SignPage = () => {
setIsLoading(true) setIsLoading(true)
setLoadingSpinnerDesc('Signing nostr event') setLoadingSpinnerDesc('Signing nostr event')
if (!meta) return if (!meta) return;
const prevSig = getLastSignersSig(meta, signers) const prevSig = getLastSignersSig(meta, signers)
if (!prevSig) return if (!prevSig) return
@ -949,14 +918,11 @@ export const SignPage = () => {
) )
} }
return ( return <PdfMarking
<PdfMarking files={getFilesWithHashes(files, currentFileHashes)}
files={getCurrentUserFiles(files, currentFileHashes)} currentUserMarks={currentUserMarks}
currentUserMarks={currentUserMarks} setIsReadyToSign={setIsReadyToSign}
setIsReadyToSign={setIsReadyToSign} setCurrentUserMarks={setCurrentUserMarks}
setCurrentUserMarks={setCurrentUserMarks} setUpdatedMarks={setUpdatedMarks}
setUpdatedMarks={setUpdatedMarks} />
handleDownload={handleDownload}
/>
)
} }

4
src/pages/sign/style.module.scss
View File

@ -2,8 +2,8 @@
.container { .container {
color: $text-color; color: $text-color;
//width: 550px; width: 550px;
//max-width: 550px; max-width: 550px;
.inputBlock { .inputBlock {
position: relative; position: relative;

31
src/pages/verify/index.tsx
View File

@ -23,17 +23,14 @@ import {
SignedEventContent SignedEventContent
} from '../../types' } from '../../types'
import { import {
decryptArrayBuffer, decryptArrayBuffer, extractMarksFromSignedMeta,
extractMarksFromSignedMeta,
extractZipUrlAndEncryptionKey, extractZipUrlAndEncryptionKey,
getHash, getHash,
hexToNpub, hexToNpub, now,
now,
npubToHex, npubToHex,
parseJson, parseJson,
readContentOfZipEntry, readContentOfZipEntry,
shorten, shorten, signEventForMetaFile
signEventForMetaFile
} from '../../utils' } from '../../utils'
import styles from './style.module.scss' import styles from './style.module.scss'
import { Cancel, CheckCircle } from '@mui/icons-material' import { Cancel, CheckCircle } from '@mui/icons-material'
@ -44,7 +41,7 @@ import {
addMarks, addMarks,
convertToPdfBlob, convertToPdfBlob,
convertToPdfFile, convertToPdfFile,
groupMarksByPage groupMarksByPage,
} from '../../utils/pdf.ts' } from '../../utils/pdf.ts'
import { State } from '../../store/rootReducer.ts' import { State } from '../../store/rootReducer.ts'
import { useSelector } from 'react-redux' import { useSelector } from 'react-redux'
@ -81,7 +78,7 @@ export const VerifyPage = () => {
const [currentFileHashes, setCurrentFileHashes] = useState<{ const [currentFileHashes, setCurrentFileHashes] = useState<{
[key: string]: string | null [key: string]: string | null
}>({}) }>({})
const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({}) const [files, setFiles] = useState<{ [filename: string]: PdfFile}>({})
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>( const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
{} {}
@ -158,10 +155,7 @@ export const VerifyPage = () => {
) )
if (arrayBuffer) { if (arrayBuffer) {
files[fileName] = await convertToPdfFile( files[fileName] = await convertToPdfFile(arrayBuffer, fileName!)
arrayBuffer,
fileName!
)
const hash = await getHash(arrayBuffer) const hash = await getHash(arrayBuffer)
if (hash) { if (hash) {
@ -175,6 +169,7 @@ export const VerifyPage = () => {
setCurrentFileHashes(fileHashes) setCurrentFileHashes(fileHashes)
setFiles(files) setFiles(files)
setSigners(createSignatureContent.signers) setSigners(createSignatureContent.signers)
setViewers(createSignatureContent.viewers) setViewers(createSignatureContent.viewers)
setCreatorFileHashes(createSignatureContent.fileHashes) setCreatorFileHashes(createSignatureContent.fileHashes)
@ -182,6 +177,8 @@ export const VerifyPage = () => {
setMeta(metaInNavState) setMeta(metaInNavState)
setIsLoading(false) setIsLoading(false)
} }
}) })
.catch((err) => { .catch((err) => {
@ -384,7 +381,7 @@ export const VerifyPage = () => {
} }
const handleExport = async () => { const handleExport = async () => {
if (Object.entries(files).length === 0 || !meta || !usersPubkey) return if (Object.entries(files).length === 0 ||!meta ||!usersPubkey) return;
const usersNpub = hexToNpub(usersPubkey) const usersNpub = hexToNpub(usersPubkey)
if ( if (
@ -398,8 +395,10 @@ export const VerifyPage = () => {
setIsLoading(true) setIsLoading(true)
setLoadingSpinnerDesc('Signing nostr event') setLoadingSpinnerDesc('Signing nostr event')
if (!meta) return;
const prevSig = getLastSignersSig(meta, signers) const prevSig = getLastSignersSig(meta, signers)
if (!prevSig) return if (!prevSig) return;
const signedEvent = await signEventForMetaFile( const signedEvent = await signEventForMetaFile(
JSON.stringify({ prevSig }), JSON.stringify({ prevSig }),
@ -407,10 +406,10 @@ export const VerifyPage = () => {
setIsLoading setIsLoading
) )
if (!signedEvent) return if (!signedEvent) return;
const exportSignature = JSON.stringify(signedEvent, null, 2) const exportSignature = JSON.stringify(signedEvent, null, 2)
const updatedMeta = { ...meta, exportSignature } const updatedMeta = {...meta, exportSignature }
const stringifiedMeta = JSON.stringify(updatedMeta, null, 2) const stringifiedMeta = JSON.stringify(updatedMeta, null, 2)
const zip = new JSZip() const zip = new JSZip()

8
src/types/file.ts
View File

@ -1,8 +0,0 @@
import { PdfFile } from './drawing.ts'
export interface CurrentUserFile {
id: number
pdfFile: PdfFile
filename: string
hash?: string
}

27
src/types/mark.ts
View File

@ -1,27 +1,24 @@
import { MarkType } from './drawing' import { MarkType } from "./drawing";
export interface CurrentUserMark { export interface CurrentUserMark {
id: number
mark: Mark mark: Mark
isLast: boolean isLast: boolean
isCompleted: boolean isCompleted: boolean
currentValue?: string
} }
export interface Mark { export interface Mark {
id: number id: number;
npub: string npub: string;
pdfFileHash: string pdfFileHash: string;
type: MarkType type: MarkType;
location: MarkLocation location: MarkLocation;
fileName: string value?: string;
value?: string
} }
export interface MarkLocation { export interface MarkLocation {
top: number top: number;
left: number left: number;
height: number height: number;
width: number width: number;
page: number page: number;
} }

4
src/utils/const.ts
View File

@ -4,7 +4,3 @@ export const EMPTY: string = ''
export const MARK_TYPE_TRANSLATION: { [key: string]: string } = { export const MARK_TYPE_TRANSLATION: { [key: string]: string } = {
[MarkType.FULLNAME.valueOf()]: 'Full Name' [MarkType.FULLNAME.valueOf()]: 'Full Name'
} }
export const SIGN: string = 'Sign'
export const NEXT: string = 'Next'
export const ARRAY_BUFFER = 'arraybuffer'
export const DEFLATE = 'DEFLATE'

24
src/utils/file.ts
View File

@ -1,24 +0,0 @@
import { Meta } from '../types'
import { extractMarksFromSignedMeta } from './mark.ts'
import { addMarks, convertToPdfBlob, groupMarksByPage } from './pdf.ts'
import JSZip from 'jszip'
import { PdfFile } from '../types/drawing.ts'
const getZipWithFiles = async (
meta: Meta,
files: { [filename: string]: PdfFile }
): Promise<JSZip> => {
const zip = new JSZip()
const marks = extractMarksFromSignedMeta(meta)
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)
}
return zip
}
export { getZipWithFiles }

68
src/utils/mark.ts
View File

@ -2,7 +2,6 @@ import { CurrentUserMark, Mark } from '../types/mark.ts'
import { hexToNpub } from './nostr.ts' import { hexToNpub } from './nostr.ts'
import { Meta, SignedEventContent } from '../types' import { Meta, SignedEventContent } from '../types'
import { Event } from 'nostr-tools' import { Event } from 'nostr-tools'
import { EMPTY } from './const.ts'
/** /**
* Takes in an array of Marks already filtered by User. * Takes in an array of Marks already filtered by User.
@ -10,18 +9,16 @@ import { EMPTY } from './const.ts'
* @param marks - default Marks extracted from Meta * @param marks - default Marks extracted from Meta
* @param signedMetaMarks - signed user Marks extracted from DocSignatures * @param signedMetaMarks - signed user Marks extracted from DocSignatures
*/ */
const getCurrentUserMarks = ( const getCurrentUserMarks = (marks: Mark[], signedMetaMarks: Mark[]): CurrentUserMark[] => {
marks: Mark[],
signedMetaMarks: Mark[]
): CurrentUserMark[] => {
return marks.map((mark, index, arr) => { return marks.map((mark, index, arr) => {
const signedMark = signedMetaMarks.find((m) => m.id === mark.id) const signedMark = signedMetaMarks.find((m) => m.id === mark.id);
if (signedMark && !!signedMark.value) {
mark.value = signedMark.value
}
return { return {
mark, mark,
currentValue: signedMark?.value ?? EMPTY,
id: index + 1,
isLast: isLast(index, arr), isLast: isLast(index, arr),
isCompleted: !!signedMark?.value isCompleted: !!mark.value
} }
}) })
} }
@ -30,10 +27,8 @@ const getCurrentUserMarks = (
* Returns next incomplete CurrentUserMark if there is one * Returns next incomplete CurrentUserMark if there is one
* @param usersMarks * @param usersMarks
*/ */
const findNextIncompleteCurrentUserMark = ( const findNextCurrentUserMark = (usersMarks: CurrentUserMark[]): CurrentUserMark | undefined => {
usersMarks: CurrentUserMark[] return usersMarks.find((mark) => !mark.isCompleted);
): CurrentUserMark | undefined => {
return usersMarks.find((mark) => !mark.isCompleted)
} }
/** /**
@ -42,7 +37,7 @@ const findNextIncompleteCurrentUserMark = (
* @param pubkey * @param pubkey
*/ */
const filterMarksByPubkey = (marks: Mark[], pubkey: string): Mark[] => { const filterMarksByPubkey = (marks: Mark[], pubkey: string): Mark[] => {
return marks.filter((mark) => mark.npub === hexToNpub(pubkey)) return marks.filter(mark => mark.npub === hexToNpub(pubkey))
} }
/** /**
@ -62,9 +57,7 @@ const extractMarksFromSignedMeta = (meta: Meta): Mark[] => {
* marked as complete. * marked as complete.
* @param currentUserMarks * @param currentUserMarks
*/ */
const isCurrentUserMarksComplete = ( const isCurrentUserMarksComplete = (currentUserMarks: CurrentUserMark[]): boolean => {
currentUserMarks: CurrentUserMark[]
): boolean => {
return currentUserMarks.every((mark) => mark.isCompleted) return currentUserMarks.every((mark) => mark.isCompleted)
} }
@ -75,7 +68,7 @@ const isCurrentUserMarksComplete = (
* @param markToUpdate * @param markToUpdate
*/ */
const updateMarks = (marks: Mark[], markToUpdate: Mark): Mark[] => { const updateMarks = (marks: Mark[], markToUpdate: Mark): Mark[] => {
const indexToUpdate = marks.findIndex((mark) => mark.id === markToUpdate.id) const indexToUpdate = marks.findIndex(mark => mark.id === markToUpdate.id);
return [ return [
...marks.slice(0, indexToUpdate), ...marks.slice(0, indexToUpdate),
markToUpdate, markToUpdate,
@ -83,13 +76,8 @@ const updateMarks = (marks: Mark[], markToUpdate: Mark): Mark[] => {
] ]
} }
const updateCurrentUserMarks = ( const updateCurrentUserMarks = (currentUserMarks: CurrentUserMark[], markToUpdate: CurrentUserMark): CurrentUserMark[] => {
currentUserMarks: CurrentUserMark[], const indexToUpdate = currentUserMarks.findIndex((m) => m.mark.id === markToUpdate.mark.id)
markToUpdate: CurrentUserMark
): CurrentUserMark[] => {
const indexToUpdate = currentUserMarks.findIndex(
(m) => m.mark.id === markToUpdate.mark.id
)
return [ return [
...currentUserMarks.slice(0, indexToUpdate), ...currentUserMarks.slice(0, indexToUpdate),
markToUpdate, markToUpdate,
@ -97,40 +85,14 @@ const updateCurrentUserMarks = (
] ]
} }
const isLast = <T>(index: number, arr: T[]) => index === arr.length - 1 const isLast = <T>(index: number, arr: T[]) => (index === (arr.length -1))
const isCurrentValueLast = (
currentUserMarks: CurrentUserMark[],
selectedMark: CurrentUserMark,
selectedMarkValue: string
) => {
const filteredMarks = currentUserMarks.filter(
(mark) => mark.id !== selectedMark.id
)
return (
isCurrentUserMarksComplete(filteredMarks) && selectedMarkValue.length > 0
)
}
const getUpdatedMark = (
selectedMark: CurrentUserMark,
selectedMarkValue: string
): CurrentUserMark => {
return {
...selectedMark,
currentValue: selectedMarkValue,
isCompleted: !!selectedMarkValue
}
}
export { export {
getCurrentUserMarks, getCurrentUserMarks,
filterMarksByPubkey, filterMarksByPubkey,
extractMarksFromSignedMeta, extractMarksFromSignedMeta,
isCurrentUserMarksComplete, isCurrentUserMarksComplete,
findNextIncompleteCurrentUserMark, findNextCurrentUserMark,
updateMarks, updateMarks,
updateCurrentUserMarks, updateCurrentUserMarks,
isCurrentValueLast,
getUpdatedMark
} }

141
src/utils/pdf.ts
View File

@ -3,14 +3,13 @@ import * as PDFJS from 'pdfjs-dist'
import { PDFDocument } from 'pdf-lib' import { PDFDocument } from 'pdf-lib'
import { Mark } from '../types/mark.ts' import { Mark } from '../types/mark.ts'
PDFJS.GlobalWorkerOptions.workerSrc = PDFJS.GlobalWorkerOptions.workerSrc = 'node_modules/pdfjs-dist/build/pdf.worker.mjs';
'node_modules/pdfjs-dist/build/pdf.worker.mjs'
/** /**
* Scale between the PDF page's natural size and rendered size * Scale between the PDF page's natural size and rendered size
* @constant {number} * @constant {number}
*/ */
const SCALE: number = 3 const SCALE: number = 3;
/** /**
* Defined font size used when generating a PDF. Currently it is difficult to fully * 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 * correlate font size used at the time of filling in / drawing on the PDF
@ -18,20 +17,20 @@ const SCALE: number = 3
* This should be fixed going forward. * This should be fixed going forward.
* Switching to PDF-Lib will most likely make this problem redundant. * Switching to PDF-Lib will most likely make this problem redundant.
*/ */
const FONT_SIZE: number = 40 const FONT_SIZE: number = 40;
/** /**
* Current font type used when generating a PDF. * Current font type used when generating a PDF.
*/ */
const FONT_TYPE: string = 'Arial' const FONT_TYPE: string = 'Arial';
/** /**
* Converts a PDF ArrayBuffer to a generic PDF File * Converts a PDF ArrayBuffer to a generic PDF File
* @param arrayBuffer of a PDF * @param arrayBuffer of a PDF
* @param fileName identifier of the pdf file * @param fileName identifier of the pdf file
*/ */
const toFile = (arrayBuffer: ArrayBuffer, fileName: string): File => { const toFile = (arrayBuffer: ArrayBuffer, fileName: string) : File => {
const blob = new Blob([arrayBuffer], { type: 'application/pdf' }) const blob = new Blob([arrayBuffer], { type: "application/pdf" });
return new File([blob], fileName, { type: 'application/pdf' }) return new File([blob], fileName, { type: "application/pdf" });
} }
/** /**
@ -51,40 +50,42 @@ const toPdfFile = async (file: File): Promise<PdfFile> => {
* @return PdfFile[] - an array of Sigit's internal Pdf File type * @return PdfFile[] - an array of Sigit's internal Pdf File type
*/ */
const toPdfFiles = async (selectedFiles: File[]): Promise<PdfFile[]> => { const toPdfFiles = async (selectedFiles: File[]): Promise<PdfFile[]> => {
return Promise.all(selectedFiles.filter(isPdf).map(toPdfFile)) return Promise.all(selectedFiles
.filter(isPdf)
.map(toPdfFile));
} }
/** /**
* A utility that transforms a drawing coordinate number into a CSS-compatible string * A utility that transforms a drawing coordinate number into a CSS-compatible string
* @param coordinate * @param coordinate
*/ */
const inPx = (coordinate: number): string => `${coordinate}px` const inPx = (coordinate: number): string => `${coordinate}px`;
/** /**
* A utility that checks if a given file is of the pdf type * A utility that checks if a given file is of the pdf type
* @param file * @param file
*/ */
const isPdf = (file: File) => file.type.toLowerCase().includes('pdf') const isPdf = (file: File) => file.type.toLowerCase().includes('pdf');
/** /**
* Reads the pdf file binaries * Reads the pdf file binaries
*/ */
const readPdf = (file: File): Promise<string> => { const readPdf = (file: File): Promise<string> => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const reader = new FileReader() const reader = new FileReader();
reader.onload = (e: any) => { reader.onload = (e: any) => {
const data = e.target.result const data = e.target.result
resolve(data) resolve(data)
} };
reader.onerror = (err) => { reader.onerror = (err) => {
console.error('err', err) console.error('err', err)
reject(err) reject(err)
} };
reader.readAsDataURL(file) reader.readAsDataURL(file);
}) })
} }
@ -93,28 +94,26 @@ const readPdf = (file: File): Promise<string> => {
* @param data pdf file bytes * @param data pdf file bytes
*/ */
const pdfToImages = async (data: any): Promise<PdfPage[]> => { const pdfToImages = async (data: any): Promise<PdfPage[]> => {
const images: string[] = [] const images: string[] = [];
const pdf = await PDFJS.getDocument(data).promise const pdf = await PDFJS.getDocument(data).promise;
const canvas = document.createElement('canvas') const canvas = document.createElement("canvas");
for (let i = 0; i < pdf.numPages; i++) { for (let i = 0; i < pdf.numPages; i++) {
const page = await pdf.getPage(i + 1) const page = await pdf.getPage(i + 1);
const viewport = page.getViewport({ scale: SCALE }) const viewport = page.getViewport({ scale: SCALE });
const context = canvas.getContext('2d') const context = canvas.getContext("2d");
canvas.height = viewport.height canvas.height = viewport.height;
canvas.width = viewport.width canvas.width = viewport.width;
await page.render({ canvasContext: context!, viewport: viewport }).promise await page.render({ canvasContext: context!, viewport: viewport }).promise;
images.push(canvas.toDataURL()) images.push(canvas.toDataURL());
} }
return Promise.resolve( return Promise.resolve(images.map((image) => {
images.map((image) => { return {
return { image,
image, drawnFields: []
drawnFields: [] }
} }))
})
)
} }
/** /**
@ -122,37 +121,34 @@ const pdfToImages = async (data: any): Promise<PdfPage[]> => {
* Returns an array of encoded images where each image is a representation * Returns an array of encoded images where each image is a representation
* of a PDF page with completed and signed marks from all users * of a PDF page with completed and signed marks from all users
*/ */
const addMarks = async ( const addMarks = async (file: File, marksPerPage: {[key: string]: Mark[]}) => {
file: File, const p = await readPdf(file);
marksPerPage: { [key: string]: Mark[] } const pdf = await PDFJS.getDocument(p).promise;
) => { const canvas = document.createElement("canvas");
const p = await readPdf(file)
const pdf = await PDFJS.getDocument(p).promise
const canvas = document.createElement('canvas')
const images: string[] = [] const images: string[] = [];
for (let i = 0; i < pdf.numPages; i++) { for (let i = 0; i< pdf.numPages; i++) {
const page = await pdf.getPage(i + 1) const page = await pdf.getPage(i+1)
const viewport = page.getViewport({ scale: SCALE }) const viewport = page.getViewport({ scale: SCALE });
const context = canvas.getContext('2d') const context = canvas.getContext("2d");
canvas.height = viewport.height canvas.height = viewport.height;
canvas.width = viewport.width canvas.width = viewport.width;
await page.render({ canvasContext: context!, viewport: viewport }).promise await page.render({ canvasContext: context!, viewport: viewport }).promise;
marksPerPage[i]?.forEach((mark) => draw(mark, context!)) marksPerPage[i].forEach(mark => draw(mark, context!))
images.push(canvas.toDataURL()) images.push(canvas.toDataURL());
} }
return Promise.resolve(images) return Promise.resolve(images);
} }
/** /**
* Utility to scale mark in line with the PDF-to-PNG scale * Utility to scale mark in line with the PDF-to-PNG scale
*/ */
const scaleMark = (mark: Mark): Mark => { const scaleMark = (mark: Mark): Mark => {
const { location } = mark const { location } = mark;
return { return {
...mark, ...mark,
location: { location: {
@ -169,7 +165,7 @@ const scaleMark = (mark: Mark): Mark => {
* Utility to check if a Mark has value * Utility to check if a Mark has value
* @param mark * @param mark
*/ */
const hasValue = (mark: Mark): boolean => !!mark.value const hasValue = (mark: Mark): boolean => !!mark.value;
/** /**
* Draws a Mark on a Canvas representation of a PDF Page * Draws a Mark on a Canvas representation of a PDF Page
@ -177,14 +173,14 @@ const hasValue = (mark: Mark): boolean => !!mark.value
* @param ctx a Canvas representation of a specific PDF Page * @param ctx a Canvas representation of a specific PDF Page
*/ */
const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => { const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
const { location } = mark const { location } = mark;
ctx!.font = FONT_SIZE + 'px ' + FONT_TYPE ctx!.font = FONT_SIZE + 'px ' + FONT_TYPE;
ctx!.fillStyle = 'black' ctx!.fillStyle = 'black';
const textMetrics = ctx!.measureText(mark.value!) const textMetrics = ctx!.measureText(mark.value!);
const textX = location.left + (location.width - textMetrics.width) / 2 const textX = location.left + (location.width - textMetrics.width) / 2;
const textY = location.top + (location.height + parseInt(ctx!.font)) / 2 const textY = location.top + (location.height + parseInt(ctx!.font)) / 2;
ctx!.fillText(mark.value!, textX, textY) ctx!.fillText(mark.value!, textX, textY);
} }
/** /**
@ -192,7 +188,7 @@ const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
* @param markedPdfPages * @param markedPdfPages
*/ */
const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => { const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
const pdfDoc = await PDFDocument.create() const pdfDoc = await PDFDocument.create();
for (const page of markedPdfPages) { for (const page of markedPdfPages) {
const pngImage = await pdfDoc.embedPng(page) const pngImage = await pdfDoc.embedPng(page)
@ -207,6 +203,7 @@ const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
const pdfBytes = await pdfDoc.save() const pdfBytes = await pdfDoc.save()
return new Blob([pdfBytes], { type: 'application/pdf' }) return new Blob([pdfBytes], { type: 'application/pdf' })
} }
/** /**
@ -214,12 +211,9 @@ const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
* @param arrayBuffer * @param arrayBuffer
* @param fileName * @param fileName
*/ */
const convertToPdfFile = async ( const convertToPdfFile = async (arrayBuffer: ArrayBuffer, fileName: string): Promise<PdfFile> => {
arrayBuffer: ArrayBuffer, const file = toFile(arrayBuffer, fileName);
fileName: string return toPdfFile(file);
): Promise<PdfFile> => {
const file = toFile(arrayBuffer, fileName)
return toPdfFile(file)
} }
/** /**
@ -232,7 +226,7 @@ const groupMarksByPage = (marks: Mark[]) => {
return marks return marks
.filter(hasValue) .filter(hasValue)
.map(scaleMark) .map(scaleMark)
.reduce<{ [key: number]: Mark[] }>(byPage, {}) .reduce<{[key: number]: Mark[]}>(byPage, {})
} }
/** /**
@ -243,10 +237,11 @@ const groupMarksByPage = (marks: Mark[]) => {
* @param obj - accumulator in the reducer callback * @param obj - accumulator in the reducer callback
* @param mark - current value, i.e. Mark being examined * @param mark - current value, i.e. Mark being examined
*/ */
const byPage = (obj: { [key: number]: Mark[] }, mark: Mark) => { const byPage = (obj: { [key: number]: Mark[]}, mark: Mark) => {
const key = mark.location.page const key = mark.location.page;
const curGroup = obj[key] ?? [] const curGroup = obj[key] ?? [];
return { ...obj, [key]: [...curGroup, mark] } return { ...obj, [key]: [...curGroup, mark]
}
} }
export { export {
@ -257,5 +252,5 @@ export {
convertToPdfFile, convertToPdfFile,
addMarks, addMarks,
convertToPdfBlob, convertToPdfBlob,
groupMarksByPage groupMarksByPage,
} }

16
src/utils/utils.ts
View File

@ -1,5 +1,4 @@
import { PdfFile } from '../types/drawing.ts' import { PdfFile } from '../types/drawing.ts'
import { CurrentUserFile } from '../types/file.ts'
export const compareObjects = ( export const compareObjects = (
obj1: object | null | undefined, obj1: object | null | undefined,
@ -73,16 +72,11 @@ export const timeout = (ms: number = 60000) => {
* @param files * @param files
* @param fileHashes * @param fileHashes
*/ */
export const getCurrentUserFiles = ( export const getFilesWithHashes = (
files: { [filename: string]: PdfFile }, files: { [filename: string ]: PdfFile },
fileHashes: { [key: string]: string | null } fileHashes: { [key: string]: string | null }
): CurrentUserFile[] => { ) => {
return Object.entries(files).map(([filename, pdfFile], index) => { return Object.entries(files).map(([filename, pdfFile]) => {
return { return { pdfFile, filename, hash: fileHashes[filename] }
pdfFile,
filename,
id: index + 1,
...(!!fileHashes[filename] && { hash: fileHashes[filename]! })
}
}) })
} }