feat(verify-page): new verify page design #151
@ -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)
|
||||||
}
|
}
|
||||||
|
@ -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)
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
resolve(data)
|
// 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) => {
|
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,7 +147,8 @@ 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
|
||||||
|
|
||||||
marksPerPage[i]?.forEach((mark) => draw(mark, context!))
|
if (marksPerPage && Object.hasOwn(marksPerPage, i))
|
||||||
|
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
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user