feat(verify-page): new verify page design #151
@ -31,7 +31,7 @@ import {
|
||||
addMarks,
|
||||
convertToPdfBlob,
|
||||
convertToPdfFile,
|
||||
groupMarksByPage,
|
||||
groupMarksByFileNamePage,
|
||||
inPx
|
||||
} from '../../utils/pdf.ts'
|
||||
import { State } from '../../store/rootReducer.ts'
|
||||
@ -415,10 +415,10 @@ export const VerifyPage = () => {
|
||||
zip.file('meta.json', stringifiedMeta)
|
||||
|
||||
const marks = extractMarksFromSignedMeta(updatedMeta)
|
||||
const marksByPage = groupMarksByPage(marks)
|
||||
const marksByPage = groupMarksByFileNamePage(marks)
|
||||
|
||||
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)
|
||||
zip.file(`files/${fileName}`, blob)
|
||||
}
|
||||
|
@ -1,6 +1,6 @@
|
||||
import { Meta } from '../types'
|
||||
import { extractMarksFromSignedMeta } from './mark.ts'
|
||||
import { addMarks, convertToPdfBlob, groupMarksByPage } from './pdf.ts'
|
||||
import { addMarks, convertToPdfBlob, groupMarksByFileNamePage } from './pdf.ts'
|
||||
import JSZip from 'jszip'
|
||||
import { PdfFile } from '../types/drawing.ts'
|
||||
|
||||
@ -10,10 +10,10 @@ const getZipWithFiles = async (
|
||||
): Promise<JSZip> => {
|
||||
const zip = new JSZip()
|
||||
const marks = extractMarksFromSignedMeta(meta)
|
||||
const marksByPage = groupMarksByPage(marks)
|
||||
const marksByFileNamePage = groupMarksByFileNamePage(marks)
|
||||
|
||||
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)
|
||||
zip.file(`files/${fileName}`, blob)
|
||||
}
|
||||
|
@ -71,14 +71,19 @@ const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
|
||||
/**
|
||||
* Reads the pdf file binaries
|
||||
*/
|
||||
const readPdf = (file: File): Promise<string> => {
|
||||
const readPdf = (file: File): Promise<string | ArrayBuffer> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader()
|
||||
|
||||
reader.onload = (e: any) => {
|
||||
const data = e.target.result
|
||||
|
||||
resolve(data)
|
||||
reader.onload = (e) => {
|
||||
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)
|
||||
} else {
|
||||
reject(new Error('File is null or undefined'))
|
||||
}
|
||||
}
|
||||
|
||||
reader.onerror = (err) => {
|
||||
@ -94,7 +99,7 @@ const readPdf = (file: File): Promise<string> => {
|
||||
* Converts pdf to the images
|
||||
* @param data pdf file bytes
|
||||
*/
|
||||
const pdfToImages = async (data: any): Promise<PdfPage[]> => {
|
||||
const pdfToImages = async (data: string | ArrayBuffer): Promise<PdfPage[]> => {
|
||||
const images: string[] = []
|
||||
const pdf = await PDFJS.getDocument(data).promise
|
||||
const canvas = document.createElement('canvas')
|
||||
@ -142,7 +147,8 @@ const addMarks = async (
|
||||
canvas.width = viewport.width
|
||||
await page.render({ canvasContext: context!, viewport: viewport }).promise
|
||||
|
||||
marksPerPage[i]?.forEach((mark) => draw(mark, context!))
|
||||
if (marksPerPage && Object.hasOwn(marksPerPage, i))
|
||||
marksPerPage[i]?.forEach((mark) => draw(mark, context!))
|
||||
|
||||
images.push(canvas.toDataURL())
|
||||
}
|
||||
@ -230,11 +236,11 @@ const convertToPdfFile = async (
|
||||
* @function scaleMark scales remaining marks in line with SCALE
|
||||
* @function byPage groups remaining Marks by their page marks.location.page
|
||||
*/
|
||||
const groupMarksByPage = (marks: Mark[]) => {
|
||||
const groupMarksByFileNamePage = (marks: Mark[]) => {
|
||||
return marks
|
||||
.filter(hasValue)
|
||||
.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 mark - current value, i.e. Mark being examined
|
||||
*/
|
||||
const byPage = (obj: { [key: number]: Mark[] }, mark: Mark) => {
|
||||
const key = mark.location.page
|
||||
const curGroup = obj[key] ?? []
|
||||
return { ...obj, [key]: [...curGroup, mark] }
|
||||
const byPage = (
|
||||
obj: { [filename: string]: { [page: number]: Mark[] } },
|
||||
mark: 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 {
|
||||
@ -259,5 +276,5 @@ export {
|
||||
convertToPdfFile,
|
||||
addMarks,
|
||||
convertToPdfBlob,
|
||||
groupMarksByPage
|
||||
}
|
||||
groupMarksByFileNamePage
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user