Support QR code rendering (#13)

* Support qrcode type

* Upgrade fabric

* Handle type properly

Author: manhtai

.tool-versions

@@ -1 +1 @@
-nodejs 14.17.5
+nodejs 14.18.1

README.md

@@ -23,6 +23,7 @@ You got 100 different PDFs for each employee now.
 - [x] Drag & drop fields to customize PDF template
 - [x] Support native PDF forms
 - [x] Support multiple-pages PDFs
+- [x] Support rendering QR code
 - [x] Support `.xlsx`, `.xls` and `.ods` Excel files
 - [x] Send out emails with PDF attachments
 - [x] Cross-platform: macOS, Windows, Linux

package.json

@@ -168,10 +168,11 @@
     "@types/diff": "^5.0.1",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
-    "@types/fabric": "^4.5.1",
+    "@types/fabric": "^4.5.7",
     "@types/history": "4.7.6",
     "@types/jest": "^26.0.15",
     "@types/node": "14.14.10",
+    "@types/qrcode": "^1.4.2",
     "@types/qs": "^6.9.7",
     "@types/react": "^16.9.44",
     "@types/react-color": "^3.0.5",
@@ -199,7 +200,7 @@
     "css-loader": "^5.0.1",
     "css-minimizer-webpack-plugin": "^1.1.5",
     "detect-port": "^1.3.0",
-    "electron": "^11.0.1",
+    "electron": "^11.5.0",
     "electron-builder": "^22.10.5",
     "electron-devtools-installer": "^3.1.1",
     "electron-notarize": "^1.0.0",
@@ -265,6 +266,7 @@
     "jsqr": "^1.4.0",
     "nodemailer": "^6.6.3",
     "pdf-lib": "^1.16.0",
+    "qrcode": "^1.5.0",
     "qs": "^6.10.1",
     "react": "^17.0.1",
     "react-color": "^2.19.3",

src/components/fabric/editor.ts

@@ -3,7 +3,7 @@ import { fabric } from 'fabric';
 import { ITextboxOptions, Textbox } from 'fabric/fabric-impl';
 
 const TextOptions: ITextboxOptions = {
-  type: 'text',
+  type: 'textbox',
   left: 100,
   top: 100,
   fontSize: 16,
@@ -22,12 +22,26 @@ const TextOptions: ITextboxOptions = {
   padding: 1,
 };
 
+const props = [
+  'lockScalingY',
+  'lockSkewingX',
+  'lockSkewingY',
+  'lockRotation',
+  'lockScalingFlip',
+  'lockUniScaling',
+];
+
+export interface Fieldbox extends Textbox {
+  index: number;
+  renderType: string;
+}
+
 export interface FabricJSEditor {
   canvas: fabric.Canvas;
   dump: () => any;
   load: (data: any) => void;
   addText: (text: string, extraOptions?: ITextboxOptions) => void;
-  updateText: (extraOptions?: Partial<Textbox>) => void;
+  updateText: (extraOptions?: Partial<Fieldbox>) => void;
   deleteAll: () => void;
   deleteSelected: () => void;
 }
@@ -38,8 +52,9 @@ const buildEditor = (canvas: fabric.Canvas): FabricJSEditor => {
     dump: () => {
       return {
         objects: canvas.getObjects().map((o) => {
-          const out = o.toJSON();
+          const out = o.toJSON(props);
           out.index = o.data && parseInt(o.data.index, 10);
+          out.renderType = o.data?.renderType || 'text';
           return out;
         }),
       };
@@ -48,7 +63,15 @@ const buildEditor = (canvas: fabric.Canvas): FabricJSEditor => {
       canvas.loadFromJSON(data, () => {});
       canvas.getObjects().forEach((o, i) => {
         if (data.objects[i].index !== undefined) {
-          o.data = { index: data.objects[i].index };
+          o.data = {
+            index: data.objects[i].index,
+            renderType: data.objects[i].renderType,
+          };
+
+          // Handle legacy text type
+          if (o.type === 'text') {
+            o.type = 'textbox';
+          }
         }
       });
       canvas.renderAll();
@@ -61,11 +84,15 @@ const buildEditor = (canvas: fabric.Canvas): FabricJSEditor => {
       object.set({ text });
       canvas.add(object);
     },
-    updateText: (extraOptions?: Partial<Textbox>) => {
+    updateText: (extraOptions?: Partial<Fieldbox>) => {
       const objects: any[] = canvas.getActiveObjects();
-      if (objects.length && objects[0].type === 'text') {
-        const textObject: fabric.Textbox = objects[0];
+      if (objects.length && objects[0].type.includes('text')) {
+        const textObject: Fieldbox = objects[0];
         if (extraOptions) {
+          extraOptions.data = {
+            ...textObject.data,
+            renderType: extraOptions.renderType,
+          };
           textObject.set(extraOptions);
           canvas.renderAll();
         }

src/components/pdf/PdfEditor.tsx

@@ -9,7 +9,7 @@ import { ipcRenderer } from 'electron';
 // @ts-ignore
 import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
 import { StandardFonts, StandardFontValues } from 'pdf-lib';
-import { Rect, Textbox } from 'fabric/fabric-impl';
+import { Rect } from 'fabric/fabric-impl';
 import { TwitterPicker } from 'react-color';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { SizeMe } from 'react-sizeme';
@@ -18,6 +18,7 @@ import { useLocation } from 'react-router-dom';
 import { IconName } from '@fortawesome/fontawesome-svg-core';
 import { FabricJSCanvas, useFabricJSEditor } from '../fabric/Canvas';
 import { readExcelMeta } from '../utils/excel';
+import { Fieldbox } from '../fabric/editor';
 
 pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker;
 export interface DataHeader {
@@ -27,11 +28,8 @@ export interface DataHeader {
 
 type Align = 'left' | 'center' | 'right';
 
-interface MyTextbox extends Textbox {
-  index: number;
-}
 export interface CanvasObjects {
-  objects: [MyTextbox | Rect];
+  objects: [Fieldbox | Rect];
   clientWidth: number;
 }
 export interface RenderPdfState {
@@ -66,6 +64,7 @@ const PdfEditor = () => {
   const [fill, setFill] = useState('#000');
   const [showPicker, setShowPicker] = useState(false);
   const [align, setAlign] = useState<Align>('left');
+  const [renderType, setRenderType] = useState('text');
 
   const [pdfFile, setPdfFile] = useState('');
   const [excelFile, setExcelFile] = useState('');
@@ -213,6 +212,10 @@ const PdfEditor = () => {
   }));
 
   const fontSizes = [8, 10, 12, 14, 16, 18, 24, 30, 36, 48, 60];
+  const renderTypes = [
+    { value: 'text', label: 'Text' },
+    { value: 'qrcode', label: 'QR code' },
+  ];
 
   const handleKeyDown = (key: string) => {
     if (selectedObject) {
@@ -258,17 +261,19 @@ const PdfEditor = () => {
       fontSize,
       fill,
       textAlign: align as string,
+      renderType,
     });
 
     setCurrentState(getCurrentState());
-  }, [fontFamily, fontSize, fill, align]);
+  }, [fontFamily, fontSize, fill, align, renderType]);
 
   useEffect(() => {
-    const text = selectedObject as Textbox;
+    const text = selectedObject as Fieldbox;
     setFontFamily(text?.fontFamily || 'Helvetica');
     setFontSize(text?.fontSize || 16);
     setFill((text?.fill as string) || '#000');
     setAlign((text?.textAlign as Align) || 'left');
+    setRenderType(text?.renderType || 'text');
   }, [selectedObject]);
 
   useEffect(() => {
@@ -292,7 +297,7 @@ const PdfEditor = () => {
       }
 
       setCombinePdf(currentState.combinePdf);
-      ipcRenderer.invoke('save-config', currentState);
+      ipcRenderer.invoke('save-config', getCurrentState());
     }
   }, [currentState]);
 
@@ -460,10 +465,23 @@ const PdfEditor = () => {
                 selectedObject && !formLayout ? '' : 'opacity-50 cursor-default'
               }`}
             >
+              <select
+                className="w-24"
+                onChange={(e) => setRenderType(e.target.value)}
+                value={renderType}
+                disabled={!selectedObject}
+              >
+                {renderTypes.map((r) => (
+                  <option value={r.value} key={r.value}>
+                    {r.label}
+                  </option>
+                ))}
+              </select>
+
               <select
                 onChange={(e) => setFontFamily(e.target.value)}
                 value={fontFamily}
-                disabled={!selectedObject}
+                disabled={!selectedObject || renderType !== 'text'}
               >
                 {fonts.map(({ label, value }) => (
                   <option value={value} key={value}>
@@ -478,7 +496,7 @@ const PdfEditor = () => {
                   setFontSize(parseInt(e.target.value, 10) || 16)
                 }
                 value={fontSize}
-                disabled={!selectedObject}
+                disabled={!selectedObject || renderType !== 'text'}
               >
                 {fontSizes.map((v) => (
                   <option value={v} key={v}>
@@ -487,7 +505,11 @@ const PdfEditor = () => {
                 ))}
               </select>
 
-              <section className="flex items-center justify-center border-t border-b rounded-sm">
+              <section
+                className={`flex items-center justify-center border-t border-b rounded-sm ${
+                  renderType !== 'text' ? 'opacity-50' : ''
+                }`}
+              >
                 {['left', 'center', 'right'].map((al) => (
                   <button
                     type="button"
@@ -505,12 +527,18 @@ const PdfEditor = () => {
               </section>
 
               <div
-                className="p-2 border-2 border-white rounded shadow outline-none w-7 h-7 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                className={`p-2 border-2 border-white rounded shadow outline-none w-7 h-7 focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+                  renderType !== 'text' ? 'opacity-50 cursor-default' : ''
+                }`}
                 style={{ backgroundColor: fill }}
-                onClick={() => selectedObject && setShowPicker(true)}
+                onClick={() =>
+                  selectedObject && renderType === 'text' && setShowPicker(true)
+                }
                 role="button"
                 aria-labelledby="pick"
-                onKeyPress={() => selectedObject && setShowPicker(true)}
+                onKeyPress={() =>
+                  selectedObject && renderType === 'text' && setShowPicker(true)
+                }
                 tabIndex={0}
               />
               {showPicker ? (

src/main.dev.ts

@@ -42,7 +42,7 @@ const store = new Store();
 const writeFile = promisify(fs.writeFile);
 const readFile = promisify(fs.readFile);
 
-const configSuffix = '.merge.json';
+const configSuffix = 'merge.json';
 
 const getRowsLimit = () => {
   if (process.env.PAID) {