feat(verify-page): new verify page design #151

Merged
enes merged 11 commits from 136-verify-page-after-merges into staging 2024-08-20 11:57:40 +00:00
3 changed files with 38 additions and 21 deletions
Showing only changes of commit b6479db266 - Show all commits

View File

@ -31,7 +31,7 @@ import {
addMarks, addMarks,
convertToPdfBlob, convertToPdfBlob,
convertToPdfFile, convertToPdfFile,
groupMarksByPage, groupMarksByFileNamePage,
inPx inPx
} from '../../utils/pdf.ts' } from '../../utils/pdf.ts'
import { State } from '../../store/rootReducer.ts' import { State } from '../../store/rootReducer.ts'
@ -415,10 +415,10 @@ export const VerifyPage = () => {
zip.file('meta.json', stringifiedMeta) zip.file('meta.json', stringifiedMeta)
const marks = extractMarksFromSignedMeta(updatedMeta) const marks = extractMarksFromSignedMeta(updatedMeta)
const marksByPage = groupMarksByPage(marks) const marksByPage = groupMarksByFileNamePage(marks)
for (const [fileName, pdf] of Object.entries(files)) { for (const [fileName, pdf] of Object.entries(files)) {
const pages = await addMarks(pdf.file, marksByPage) const pages = await addMarks(pdf.file, marksByPage[fileName])
const blob = await convertToPdfBlob(pages) const blob = await convertToPdfBlob(pages)
zip.file(`files/${fileName}`, blob) zip.file(`files/${fileName}`, blob)
} }

View File

@ -1,6 +1,6 @@
import { Meta } from '../types' import { Meta } from '../types'
import { extractMarksFromSignedMeta } from './mark.ts' import { extractMarksFromSignedMeta } from './mark.ts'
import { addMarks, convertToPdfBlob, groupMarksByPage } from './pdf.ts' import { addMarks, convertToPdfBlob, groupMarksByFileNamePage } from './pdf.ts'
import JSZip from 'jszip' import JSZip from 'jszip'
import { PdfFile } from '../types/drawing.ts' import { PdfFile } from '../types/drawing.ts'
@ -10,10 +10,10 @@ const getZipWithFiles = async (
): Promise<JSZip> => { ): Promise<JSZip> => {
const zip = new JSZip() const zip = new JSZip()
const marks = extractMarksFromSignedMeta(meta) const marks = extractMarksFromSignedMeta(meta)
const marksByPage = groupMarksByPage(marks) const marksByFileNamePage = groupMarksByFileNamePage(marks)
for (const [fileName, pdf] of Object.entries(files)) { for (const [fileName, pdf] of Object.entries(files)) {
const pages = await addMarks(pdf.file, marksByPage) const pages = await addMarks(pdf.file, marksByFileNamePage[fileName])
const blob = await convertToPdfBlob(pages) const blob = await convertToPdfBlob(pages)
zip.file(`files/${fileName}`, blob) zip.file(`files/${fileName}`, blob)
} }

View File

@ -71,14 +71,19 @@ 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 | ArrayBuffer> => {
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) => {
const data = e.target.result const data = e.target?.result
// Make sure we only resolve for string or ArrayBuffer type
// They are accepted by PDFJS.getDocument function
if (data && typeof data !== 'undefined') {
resolve(data) resolve(data)
} else {
reject(new Error('File is null or undefined'))
}
} }
reader.onerror = (err) => { reader.onerror = (err) => {
@ -94,7 +99,7 @@ const readPdf = (file: File): Promise<string> => {
* Converts pdf to the images * Converts pdf to the images
* @param data pdf file bytes * @param data pdf file bytes
*/ */
const pdfToImages = async (data: any): Promise<PdfPage[]> => { const pdfToImages = async (data: string | ArrayBuffer): 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')
@ -142,6 +147,7 @@ const addMarks = async (
canvas.width = viewport.width canvas.width = viewport.width
await page.render({ canvasContext: context!, viewport: viewport }).promise await page.render({ canvasContext: context!, viewport: viewport }).promise
if (marksPerPage && Object.hasOwn(marksPerPage, i))
marksPerPage[i]?.forEach((mark) => draw(mark, context!)) marksPerPage[i]?.forEach((mark) => draw(mark, context!))
images.push(canvas.toDataURL()) images.push(canvas.toDataURL())
@ -230,11 +236,11 @@ const convertToPdfFile = async (
* @function scaleMark scales remaining marks in line with SCALE * @function scaleMark scales remaining marks in line with SCALE
* @function byPage groups remaining Marks by their page marks.location.page * @function byPage groups remaining Marks by their page marks.location.page
*/ */
const groupMarksByPage = (marks: Mark[]) => { const groupMarksByFileNamePage = (marks: Mark[]) => {
return marks return marks
.filter(hasValue) .filter(hasValue)
.map(scaleMark) .map(scaleMark)
.reduce<{ [key: number]: Mark[] }>(byPage, {}) .reduce<{ [filename: string]: { [page: number]: Mark[] } }>(byPage, {})
} }
/** /**
@ -245,10 +251,21 @@ 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 = (
const key = mark.location.page obj: { [filename: string]: { [page: number]: Mark[] } },
const curGroup = obj[key] ?? [] mark: Mark
return { ...obj, [key]: [...curGroup, mark] } ) => {
const filename = mark.fileName
const pageNumber = mark.location.page
const pages = obj[filename] ?? {}
const marks = pages[pageNumber] ?? []
return {
...obj,
[filename]: {
...pages,
[pageNumber]: [...marks, mark]
}
}
} }
export { export {
@ -259,5 +276,5 @@ export {
convertToPdfFile, convertToPdfFile,
addMarks, addMarks,
convertToPdfBlob, convertToPdfBlob,
groupMarksByPage groupMarksByFileNamePage
} }