WIP: Pdf annotate

package.json

@@ -168,6 +168,7 @@
     "@types/diff": "^5.0.1",
     "@types/enzyme": "^3.10.5",
     "@types/enzyme-adapter-react-16": "^1.0.6",
+    "@types/fabric": "^4.5.1",
     "@types/history": "4.7.6",
     "@types/jest": "^26.0.15",
     "@types/marked": "^2.0.4",
@@ -177,6 +178,7 @@
     "@types/react": "^16.9.44",
     "@types/react-dom": "^16.9.9",
     "@types/react-helmet": "^6.1.2",
+    "@types/react-pdf": "^5.0.5",
     "@types/react-router-dom": "^5.1.6",
     "@types/react-test-renderer": "^16.9.3",
     "@types/webpack-env": "^1.15.2",
@@ -262,11 +264,13 @@
     "history": "^5.0.0",
     "jsqr": "^1.4.0",
     "marked": "^2.1.3",
+    "pdf-lib": "^1.16.0",
     "pngjs": "^6.0.0",
     "qrcode": "^1.4.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
     "react-helmet": "^6.1.0",
+    "react-pdf": "^5.3.2",
     "react-router-dom": "^5.2.0",
     "regenerator-runtime": "^0.13.5",
     "source-map-support": "^0.5.19",

src/components/Main.tsx

@@ -15,6 +15,7 @@ import JsonFormatter from './json/JsonFormatter';
 import QRCodeReader from './qrcode/QrCodeReader';
 import RegexTester from './regex/RegexTester';
 import Auto from './auto/Auto';
+import PdfAnnotate from './pdf/PdfAnnotate';
 
 const defaultRoutes = [
   {
@@ -83,6 +84,12 @@ const defaultRoutes = [
     name: 'SQL Formatter',
     Component: SqlFormatter,
   },
+  {
+    icon: <FontAwesomeIcon icon={['far', 'file-pdf']} />,
+    path: '/pdf-annotate',
+    name: 'Pdf Annotate',
+    Component: PdfAnnotate,
+  },
 ];
 
 const Main = () => {

src/components/fabric/Fabric.tsx

@@ -0,0 +1,47 @@
+import React, { CSSProperties, useEffect, useRef } from 'react';
+import { fabric } from 'fabric';
+
+import { useFabricJSEditor } from './editor';
+
+export interface Props {
+  className?: string;
+  onReady?: (canvas: fabric.Canvas) => void;
+  style?: CSSProperties;
+}
+
+const FabricJSCanvas = ({ className, onReady, style }: Props) => {
+  const canvasEl = useRef(null);
+  const canvasElParent = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const canvas = new fabric.Canvas(canvasEl.current);
+    const setCurrentDimensions = () => {
+      canvas.setHeight(canvasElParent.current?.clientHeight || 0);
+      canvas.setWidth(canvasElParent.current?.clientWidth || 0);
+      canvas.renderAll();
+    };
+    const resizeCanvas = () => {
+      setCurrentDimensions();
+    };
+    setCurrentDimensions();
+
+    window.addEventListener('resize', resizeCanvas, false);
+
+    if (onReady) {
+      onReady(canvas);
+    }
+
+    return () => {
+      canvas.dispose();
+      window.removeEventListener('resize', resizeCanvas);
+    };
+  }, []);
+
+  return (
+    <div ref={canvasElParent} className={className} style={style}>
+      <canvas ref={canvasEl} />
+    </div>
+  );
+};
+
+export { FabricJSCanvas, useFabricJSEditor };

src/components/fabric/defaultShapes.ts

@@ -0,0 +1,38 @@
+export const STROKE = '#000000';
+export const FILL = 'rgba(255, 255, 255, 0.0)';
+
+export const CIRCLE = {
+  radius: 20,
+  left: 100,
+  top: 100,
+  fill: FILL,
+  stroke: STROKE,
+};
+
+export const RECTANGLE = {
+  left: 100,
+  top: 100,
+  fill: FILL,
+  stroke: STROKE,
+  width: 40,
+  height: 40,
+  angle: 0,
+};
+
+export const LINE = {
+  points: [50, 100, 200, 200],
+  options: {
+    left: 170,
+    top: 150,
+    stroke: STROKE,
+  },
+};
+
+export const TEXT = {
+  type: 'text',
+  left: 100,
+  top: 100,
+  fontSize: 16,
+  fontFamily: 'Arial',
+  fill: STROKE,
+};

src/components/fabric/editor.ts

@@ -0,0 +1,178 @@
+import { useEffect, useState } from 'react';
+import { fabric } from 'fabric';
+import { CIRCLE, RECTANGLE, LINE, TEXT, FILL, STROKE } from './defaultShapes';
+
+export interface FabricJSEditor {
+  canvas: fabric.Canvas;
+  addCircle: () => void;
+  addRectangle: () => void;
+  addLine: () => void;
+  addText: (text: string, options: any) => void;
+  updateText: (text: string) => void;
+  deleteAll: () => void;
+  deleteSelected: () => void;
+  fillColor: string;
+  strokeColor: string;
+  setFillColor: (color: string) => void;
+  setStrokeColor: (color: string) => void;
+  zoomIn: () => void;
+  zoomOut: () => void;
+}
+
+const buildEditor = (
+  canvas: fabric.Canvas,
+  fillColor: string,
+  strokeColor: string,
+  _setFillColor: (color: string) => void,
+  _setStrokeColor: (color: string) => void,
+  scaleStep: number
+): FabricJSEditor => {
+  return {
+    canvas,
+    addCircle: () => {
+      const object = new fabric.Circle({
+        ...CIRCLE,
+        fill: fillColor,
+        stroke: strokeColor,
+      });
+      canvas.add(object);
+    },
+    addRectangle: () => {
+      const object = new fabric.Rect({
+        ...RECTANGLE,
+        fill: fillColor,
+        stroke: strokeColor,
+      });
+      canvas.add(object);
+    },
+    addLine: () => {
+      const object = new fabric.Line(LINE.points, {
+        ...LINE.options,
+        stroke: strokeColor,
+      });
+      canvas.add(object);
+    },
+    addText: (text: string, options: any = {}) => {
+      const object = new fabric.Textbox(text, {
+        ...options,
+        ...TEXT,
+        fill: strokeColor,
+      });
+      object.set({ text });
+      canvas.add(object);
+    },
+    updateText: (text: string) => {
+      const objects: any[] = canvas.getActiveObjects();
+      if (objects.length && objects[0].type === TEXT.type) {
+        const textObject: fabric.Textbox = objects[0];
+        textObject.set({ text });
+        canvas.renderAll();
+      }
+    },
+    deleteAll: () => {
+      canvas.getObjects().forEach((object) => canvas.remove(object));
+      canvas.discardActiveObject();
+      canvas.renderAll();
+    },
+    deleteSelected: () => {
+      canvas.getActiveObjects().forEach((object) => canvas.remove(object));
+      canvas.discardActiveObject();
+      canvas.renderAll();
+    },
+    fillColor,
+    strokeColor,
+    setFillColor: (fill: string) => {
+      _setFillColor(fill);
+      canvas.getActiveObjects().forEach((object) => object.set({ fill }));
+      canvas.renderAll();
+    },
+    setStrokeColor: (stroke: string) => {
+      _setStrokeColor(stroke);
+      canvas.getActiveObjects().forEach((object) => {
+        if (object.type === TEXT.type) {
+          // use stroke in text fill
+          object.set({ fill: stroke });
+          return;
+        }
+        object.set({ stroke });
+      });
+      canvas.renderAll();
+    },
+    zoomIn: () => {
+      const zoom = canvas.getZoom();
+      canvas.setZoom(zoom / scaleStep);
+    },
+    zoomOut: () => {
+      const zoom = canvas.getZoom();
+      canvas.setZoom(zoom * scaleStep);
+    },
+  };
+};
+
+interface FabricJSEditorState {
+  editor?: FabricJSEditor;
+}
+
+export interface FabricJSEditorHook extends FabricJSEditorState {
+  selectedObjects?: fabric.Object[];
+  onReady: (canvas: fabric.Canvas) => void;
+}
+
+interface FabricJSEditorHookProps {
+  defaultFillColor?: string;
+  defaultStrokeColor?: string;
+  scaleStep?: number;
+}
+
+const useFabricJSEditor = (
+  props: FabricJSEditorHookProps = {}
+): FabricJSEditorHook => {
+  const scaleStep = props.scaleStep || 0.5;
+  const { defaultFillColor, defaultStrokeColor } = props;
+  const [canvas, setCanvas] = useState<null | fabric.Canvas>(null);
+  const [fillColor, setFillColor] = useState<string>(defaultFillColor || FILL);
+  const [strokeColor, setStrokeColor] = useState<string>(
+    defaultStrokeColor || STROKE
+  );
+  const [selectedObjects, setSelectedObject] = useState<fabric.Object[]>([]);
+
+  useEffect(() => {
+    const bindEvents = (canva: fabric.Canvas) => {
+      canva.on('selection:cleared', () => {
+        setSelectedObject([]);
+      });
+      canva.on('selection:created', (e: any) => {
+        setSelectedObject(e.selected);
+      });
+      canva.on('selection:updated', (e: any) => {
+        setSelectedObject(e.selected);
+      });
+      canva.on('selection:updated', (e: any) => {
+        setSelectedObject(e.selected);
+      });
+    };
+    if (canvas) {
+      bindEvents(canvas);
+    }
+  }, [canvas]);
+
+  return {
+    selectedObjects,
+    onReady: (canvasReady: fabric.Canvas): void => {
+      console.log('Fabric canvas ready');
+      setCanvas(canvasReady);
+    },
+    editor: canvas
+      ? buildEditor(
+          canvas,
+          fillColor,
+          strokeColor,
+          setFillColor,
+          setStrokeColor,
+          scaleStep
+        )
+      : undefined,
+  };
+};
+
+export { buildEditor, useFabricJSEditor };