[QuickSignPDF] Allow editing annotations until it is signed and downl…

…oaded. Also add Text annotation. (#29)

* [QuickSignPDF] Allow editing annotations until it is signed and downloaded. Also add Text annotation.

README.md

@@ -14,6 +14,7 @@ This is the project that will include a collection of simple tools around the sa
 - [Split PDF](https://humantools.io/split-pdf) - This tool helps you to quickly split a large PDF file pages into a lot of single-file PDF files.
 - [Photos Slideshow](https://humantools.io/split-pdf) - This tool helps you to quickly turn your photos into a video slideshow.
 - [Images to PDF](https://humantools.io/images-to-pdf) - This tool helps you to quickly merge bunch of images into one PDF file.
+- [Quick Sign](https://humantools.io/quick-sign-pdf) - Quickly sign and add text to PDF files.
 
 # Deploying New Version
 

package.json

@@ -8,14 +8,15 @@
     "@human-tools/use-sortable": "^0.0.5",
     "@tailwindcss/forms": "^0.2.1",
     "exif-auto-rotate": "^0.2.0",
+    "fabric": "^5.2.4",
+    "fabricjs-react": "1.0.8",
     "file-saver": "^2.0.5",
     "jszip": "^3.6.0",
     "pdf-lib": "^1.16.0",
     "pdfjs-dist": "^2.6.347",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-dropzone": "^11.3.1",
-    "react-hooks-svgdrawing": "^2.1.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "4.0.2",
     "react-spinners": "^0.10.6",
@@ -54,6 +55,7 @@
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^11.2.5",
     "@testing-library/user-event": "^12.7.1",
+    "@types/fabric": "^4.5.14",
     "@types/file-saver": "^2.0.1",
     "@types/jest": "^26.0.20",
     "@types/node": "^12.20.1",

src/PDFViewer/DrawablePagePreview.tsx → src/PDFViewer/FabricPagePreview.tsx

@@ -1,3 +1,8 @@
+import {
+  FabricJSCanvas,
+  FabricJSEditor,
+  useFabricJSEditor,
+} from 'fabricjs-react';
 import { GlobalWorkerOptions } from 'pdfjs-dist';
 import { PDFDocumentProxy } from 'pdfjs-dist/types/display/api';
 import { PageViewport } from 'pdfjs-dist/types/display/display_utils';
@@ -9,8 +14,6 @@ import {
   useRef,
   useState,
 } from 'react';
-import { useSvgDrawing } from 'react-hooks-svgdrawing';
-import { DrawingOption, SvgDrawing } from 'svg-drawing';
 import workerContent from '../pdfjs.worker.min.json';
 
 const workerBlob = new Blob([workerContent], { type: 'text/javascript' });
@@ -23,37 +26,14 @@ interface Props {
   scale?: number;
 }
 
-export interface UseSvgDrawing {
-  instance: SvgDrawing | null;
-  clear: () => void;
-  undo: () => void;
-  changePenColor: (penColor: DrawingOption['penColor']) => void;
-  changePenWidth: (penwidth: DrawingOption['penWidth']) => void;
-  changeFill: (penColor: DrawingOption['fill']) => void;
-  changeClose: (penwidth: DrawingOption['close']) => void;
-  changeDelay: (penColor: DrawingOption['delay']) => void;
-  changeCurve: (penwidth: DrawingOption['curve']) => void;
-  getSvgXML: () => string | null;
-  download: (ext: 'svg' | 'png' | 'jpg') => void;
-}
-
-const DrawablePagePreview = forwardRef<UseSvgDrawing, Props>(function (
+const FabricPagePreview = forwardRef<FabricJSEditor, Props>(function (
   { pdf, pageNumber, scale }: Props,
   ref
 ): JSX.Element {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [viewport, setViewport] = useState<PageViewport>();
-  // const drawingDivRef = useRef<HTMLDivElement>(null);
-  const [renderRef, draw] = useSvgDrawing({
-    penWidth: 2, // pen width
-    penColor: '#000', // pen color
-    close: false, // Use close command for path. Default is false.
-    curve: true, // Use curve command for path. Default is true.
-    delay: 60, // Set how many ms to draw points every.
-    fill: 'none', // Set fill attribute for path. default is `none`
-  });
-
-  useImperativeHandle(ref, () => draw);
+  const { editor, onReady } = useFabricJSEditor();
+  useImperativeHandle(ref, () => editor!);
 
   const load = useCallback(async () => {
     const page = await pdf.getPage(pageNumber);
@@ -86,16 +66,18 @@ const DrawablePagePreview = forwardRef<UseSvgDrawing, Props>(function (
         height={viewport?.height}
       ></canvas>
       {/* Drawing Canvas */}
-      <div
-        className="absolute top-0 right-0 left-0 bottom-0"
-        ref={renderRef}
-        style={{
-          width: viewport?.width,
-          height: viewport?.height,
-        }}
-      ></div>
+      {viewport && (
+        <FabricJSCanvas
+          className="absolute top-0 right-0 left-0 bottom-0"
+          onReady={(canvas) => {
+            canvas.width = viewport!.width;
+            canvas.height = viewport!.height;
+            onReady(canvas);
+          }}
+        />
+      )}
     </div>
   );
 });
 
-export default DrawablePagePreview;
+export default FabricPagePreview;