Multi pages support (#7)

Author: manhtai

.github/workflows/publish.yml

@@ -20,7 +20,7 @@ jobs:
       - name: Install Node, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: 15
+          node-version: 14
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/test.yml

@@ -1,6 +1,6 @@
 name: Test
 
-on: [push, pull_request]
+on: [pull_request]
 
 jobs:
   release:
@@ -17,7 +17,7 @@ jobs:
       - name: Install Node.js, NPM and Yarn
         uses: actions/setup-node@v1
         with:
-          node-version: 15
+          node-version: 14
 
       - name: yarn install
         run: |

README.md

@@ -10,10 +10,11 @@
 ## Features
 
 - Drag & drop fields to customize PDF template
-- Support `.xlsx`, `.xls`, `.ods` Excel files
-- Support PDF forms
+- Support native PDF forms
+- Edit multiple-pages PDFs
+- Support `.xlsx`, `.xls` and `.ods` Excel files
+- Cross-platform: macOS, Windows, Linux
 - Work offline
-- Cross-platform
 
 ## Demo
 

src/components/pdf/PdfEditor.tsx

@@ -33,14 +33,14 @@ interface MyTextbox extends Textbox {
 }
 export interface CanvasObjects {
   objects: [MyTextbox | Rect];
+  clientWidth: number;
 }
 export interface RenderPdfState {
   pdfFile: string;
   excelFile: string;
   combinePdf: boolean;
   pageNumber: number;
-  canvasData?: CanvasObjects;
-  canvasWidth?: number;
+  canvasData?: Record<number, CanvasObjects>;
   formData?: Record<string, number>;
 }
 
@@ -151,22 +151,34 @@ const PdfEditor = () => {
   };
 
   const getCurrentState = (): RenderPdfState => {
+    let canvasData = currentState?.canvasData;
+    if (parentRef.current) {
+      canvasData = {
+        ...canvasData,
+        [pageNumber]: {
+          ...editor?.dump(),
+          clientWidth: parentRef.current.clientWidth,
+        },
+      };
+    }
+
+    const formData = formFields.reduce(
+      (p, c) => ({ ...p, [c.name]: c.index }),
+      {}
+    );
+
     return {
       pdfFile,
       pageNumber,
       excelFile,
       combinePdf,
-      formData: formFields.reduce((p, c) => ({ ...p, [c.name]: c.index }), {}),
-
-      // FIXME: Better way to keep canvas state?
-      canvasData: parentRef.current ? editor?.dump() : currentState?.canvasData,
-      canvasWidth: parentRef.current
-        ? parentRef.current?.clientWidth
-        : currentState?.canvasWidth,
+      formData,
+      canvasData,
     };
   };
 
   const handleRender = async (action: string) => {
+    setProgressTotal(pages);
     await ipcRenderer.invoke(action, getCurrentState());
   };
 
@@ -184,6 +196,18 @@ const PdfEditor = () => {
     setPageLoaded(true);
   };
 
+  const handleClickNext = () => {
+    setCurrentState(getCurrentState());
+    setShowCanvas(false);
+    setPageNumber(pageNumber + 1);
+  };
+
+  const handleClickBack = () => {
+    setCurrentState(getCurrentState());
+    setShowCanvas(false);
+    setPageNumber(pageNumber - 1);
+  };
+
   const handlePageLoadSuccess = () => {
     setShowCanvas(true);
   };
@@ -259,15 +283,6 @@ const PdfEditor = () => {
     }
   };
 
-  ipcRenderer.on('keydown', (_event, key) => {
-    handleKeyDown(key);
-  });
-
-  ipcRenderer.on('render-progress', (_event, p) => {
-    setProgressPage(p.page);
-    setProgressTotal(p.total);
-  });
-
   const handleChangeFormField = (e: any, fld: FieldType) => {
     setFormFields(
       formFields.map((f) =>
@@ -321,8 +336,13 @@ const PdfEditor = () => {
   }, [currentState]);
 
   useEffect(() => {
-    if (editor && currentState && currentState.canvasData) {
-      editor.load(currentState.canvasData);
+    if (
+      editor &&
+      currentState &&
+      currentState.canvasData &&
+      currentState.canvasData[pageNumber]
+    ) {
+      editor.load(currentState.canvasData[pageNumber]);
     }
   }, [editor]);
 
@@ -369,6 +389,17 @@ const PdfEditor = () => {
     }
   }, [searchField]);
 
+  useEffect(() => {
+    ipcRenderer.on('keydown', (_event, key) => {
+      handleKeyDown(key);
+    });
+
+    ipcRenderer.on('render-progress', (_event, p) => {
+      setProgressPage(p.page);
+      setProgressTotal(p.total);
+    });
+  }, []);
+
   return (
     <div className="flex flex-1">
       <section className="flex flex-col flex-shrink-0 p-4 space-y-4 bg-gray-200 w-60">
@@ -691,7 +722,7 @@ const PdfEditor = () => {
             {pageNumber > 1 ? (
               <button
                 type="button"
-                onClick={() => setPageNumber(pageNumber - 1)}
+                onClick={handleClickBack}
                 className="btn-link"
               >
                 &lt; Back
@@ -705,7 +736,7 @@ const PdfEditor = () => {
             {pageNumber < numPages ? (
               <button
                 type="button"
-                onClick={() => setPageNumber(pageNumber + 1)}
+                onClick={handleClickNext}
                 className="btn-link"
               >
                 Next &gt;

src/main.dev.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint global-require: off, no-console: off */
 
 /**
@@ -195,15 +196,7 @@ const savePdf = async (params: RenderPdfState) => {
     console.error(e);
   }
 
-  const {
-    pdfFile,
-    pageNumber,
-    excelFile,
-    combinePdf,
-    canvasData,
-    canvasWidth,
-    formData,
-  } = params;
+  const { pdfFile, excelFile, combinePdf, canvasData, formData } = params;
 
   const file = await dialog.showSaveDialog({
     filters: [{ name: 'PDF Files', extensions: ['pdf'] }],
@@ -215,12 +208,10 @@ const savePdf = async (params: RenderPdfState) => {
     const created = await renderPdf(
       file.filePath,
       pdfFile,
-      pageNumber - 1,
       excelFile,
       getRowsLimit(),
       combinePdf,
       canvasData,
-      canvasWidth,
       formData,
       (o) => mainWindow?.webContents.send('render-progress', o)
     );
@@ -264,32 +255,25 @@ const previewPdf = async (params: RenderPdfState) => {
     console.error(e);
   }
 
-  const {
-    pdfFile,
-    pageNumber,
-    excelFile,
-    combinePdf,
-    canvasData,
-    canvasWidth,
-    formData,
-  } = params;
+  const { pdfFile, excelFile, combinePdf, canvasData, formData } = params;
 
   try {
     const filePath = path.join(
       app.getPath('temp'),
       `preview-${path.basename(pdfFile)}`
     );
+    const updateProgress = (o: any) =>
+      mainWindow?.webContents.send('render-progress', o);
+
     await renderPdf(
       filePath,
       pdfFile,
-      pageNumber - 1,
       excelFile,
       1,
       combinePdf,
       canvasData,
-      canvasWidth,
       formData || {},
-      (o) => mainWindow?.webContents.send('render-progress', o)
+      updateProgress
     );
     openPdf(filePath);
   } catch (e) {

src/package.json

@@ -1,7 +1,7 @@
 {
   "name": "plainmerge",
   "productName": "PlainMerge",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Offline PDF mail merger",
   "main": "./main.prod.js",
   "author": {

src/render.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-loop-func */
 /* eslint-disable no-await-in-loop */
 import { Rect, Textbox } from 'fabric/fabric-impl';
@@ -29,21 +30,21 @@ interface MyTextbox extends Textbox {
 }
 export interface CanvasObjects {
   objects: [MyTextbox | Rect];
+  clientWidth: number;
 }
 
 export interface RenderPdfState {
   pdfFile: string;
   excelFile: string;
   combinePdf: boolean;
-  pageNumber: number;
-  canvasData?: CanvasObjects;
-  canvasWidth?: number;
+  canvasData?: CanvasMap;
   formData?: FormMap;
 }
 
 type FontMap = Record<string, PDFFont>;
 type RowMap = Record<number, string>;
 type FormMap = Record<string, number>;
+type CanvasMap = Record<number, CanvasObjects>;
 
 function hexToRgb(hex: string) {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
@@ -193,15 +194,14 @@ const renderPage = async (
   page: PDFPage,
   pdfDoc: PDFDocument,
   cachedFonts: FontMap,
-  canvasData?: CanvasObjects,
-  canvasWidth?: number
+  canvasData?: CanvasObjects
 ) => {
-  if (!canvasData || !canvasWidth) {
+  if (!canvasData) {
     return;
   }
 
   const { width, height } = page.getSize();
-  const ratio = width / canvasWidth;
+  const ratio = width / canvasData.clientWidth;
 
   for (let i = 0; i < canvasData.objects.length; i += 1) {
     const obj = canvasData.objects[i];
@@ -278,12 +278,10 @@ export const loadForm = async (filename: string) => {
 const renderPdf = async (
   output: string,
   pdfFile: string,
-  pageIndex: number,
   excelFile: string,
   rowsLimit: number,
   combinePdf: boolean,
-  canvasData?: CanvasObjects,
-  canvasWidth?: number,
+  canvasData?: CanvasMap,
   formData?: FormMap,
   updateProgress?: (o: any) => void
 ) => {
@@ -294,22 +292,28 @@ const renderPdf = async (
 
   const rows: RowMap[] = readFirstSheet(excelFile, rowsLimit);
   for (let i = 0; i < rows.length; i += 1) {
-    // Render all with form
+    // Step 1: Render pages with form
     renderForm(rows[i], formData, pdfDoc.getForm());
 
-    // Render 1 page with canvas for now
-    // TODO: support multiple
-    const page = pdfDoc.getPage(pageIndex);
-    await renderPage(
-      rows[i],
-      page,
-      pdfDoc,
-      cachedFonts,
-      canvasData,
-      canvasWidth
-    );
+    // Step 2: Render pages with canvas for now
+    if (canvasData) {
+      await Promise.all(
+        pdfDoc.getPageIndices().map(async (pageIndex) => {
+          if (canvasData[pageIndex + 1]) {
+            const page = pdfDoc.getPage(pageIndex);
+            await renderPage(
+              rows[i],
+              page,
+              pdfDoc,
+              cachedFonts,
+              canvasData[pageIndex + 1]
+            );
+          }
+        })
+      );
+    }
 
-    // Copy to new pdf, load and save will remove fields, but retain value
+    // Step 3: Copy to new pdf, load and save will remove fields, but retain value
     const newPages = await newDoc.copyPages(
       await PDFDocument.load(await pdfDoc.save()),
       pdfDoc.getPageIndices()