refactor: optimization performance

.eslintignore

@@ -1,7 +1,8 @@
 **/node_modules/**
 **/public/**
+**/out/**
 **/__mocks__/**
 **/next-env.d.ts
 **/next.config.js
 **/_document.js
-**/_app.js
+**/_app.js

components/TextField/styled.ts

@@ -4,9 +4,28 @@ const style: Record<string, string> = {
   textfield: '',
   checkbox: `
     border-radius: 8px;
+    :after {
+      content: '';
+      background-image: url('/icons/check-mark.svg');
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: contain;
+      width: 32px;
+      height: 32px;
+      opacity: 0.25;
+    }
   `,
   radio: `
     border-radius: 100%;
+
+    :after {
+      content: '';
+      background-color: black;
+      border-radius: 50%;
+      width: 50%;
+      height: 50%;
+      opacity: 0.25;
+    }
   `,
 };
 
@@ -14,7 +33,7 @@ export const TextBox = styled.div<{ type: string }>`
   width: 100%;
   height: 100%;
   background-color: rgba(51, 190, 219, 0.3);
-  font-size: 1.3rem;
+  font-size: 1.4rem;
   color: rgba(0, 0, 0, 0.5);
   display: flex;
   justify-content: center;

containers/FreehandTool.tsx

@@ -1,5 +1,6 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { v4 as uuidv4 } from 'uuid';
+import MobileDetect from 'mobile-detect';
 
 import { ANNOTATION_TYPE } from '../constants';
 import Icon from '../components/Icon';
@@ -28,7 +29,7 @@ type Props = {
 };
 
 const FreehandTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
-  const [cursorPosition, setRef] = useCursorPosition(30);
+  const [cursorPosition, setRef] = useCursorPosition(20);
 
   const [uuid, setUuid] = useState('');
   const [data, setData] = useState({
@@ -94,8 +95,8 @@ const FreehandTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
         const point = position[0][0];
         annotations[index].obj_attr.position = [
           [
-            { x: point.x - 5, y: point.y - 5 },
-            { x: point.x + 5, y: point.y + 5 },
+            { x: point.x - 3, y: point.y - 3 },
+            { x: point.x + 3, y: point.y + 3 },
           ],
         ];
         annotations[index] = appendUserIdAndDate(annotations[index]);
@@ -140,19 +141,29 @@ const FreehandTool: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
   }, [annotations, cursorPosition, uuid]);
 
   const subscribeEvent = (): void => {
+    const md = new MobileDetect(window.navigator.userAgent);
     const pdfViewer = document.getElementById('pdf_viewer') as HTMLDivElement;
-    pdfViewer.addEventListener('mousedown', handleMouseDown);
-    pdfViewer.addEventListener('mouseup', handleMouseUp);
-    pdfViewer.addEventListener('touchstart', handleMouseDown);
-    pdfViewer.addEventListener('touchend', handleMouseUp);
+
+    if (md.mobile() || md.tablet()) {
+      pdfViewer.addEventListener('touchstart', handleMouseDown);
+      pdfViewer.addEventListener('touchend', handleMouseUp);
+    } else {
+      pdfViewer.addEventListener('mousedown', handleMouseDown);
+      pdfViewer.addEventListener('mouseup', handleMouseUp);
+    }
   };
 
   const unsubscribeEvent = (): void => {
+    const md = new MobileDetect(window.navigator.userAgent);
     const pdfViewer = document.getElementById('pdf_viewer') as HTMLDivElement;
-    pdfViewer.removeEventListener('mousedown', handleMouseDown);
-    pdfViewer.removeEventListener('mouseup', handleMouseUp);
-    pdfViewer.removeEventListener('touchstart', handleMouseDown);
-    pdfViewer.removeEventListener('touchend', handleMouseUp);
+
+    if (md.mobile() || md.tablet()) {
+      pdfViewer.removeEventListener('touchstart', handleMouseDown);
+      pdfViewer.removeEventListener('touchend', handleMouseUp);
+    } else {
+      pdfViewer.removeEventListener('mousedown', handleMouseDown);
+      pdfViewer.removeEventListener('mouseup', handleMouseUp);
+    }
   };
 
   useEffect(() => {

containers/HighlightTools.tsx

@@ -130,13 +130,13 @@ const HighlightTools: React.FC<Props> = ({
 
     if (isActive) {
       document.addEventListener('mousedown', handleDown);
-      document.addEventListener('touchstart', handleDown);
       document.addEventListener('mousemove', handleMove);
-      document.addEventListener('touchmove', handleMove);
       document.addEventListener('mouseup', handleUp);
-      document.addEventListener('touchend', handleUp);
       document.addEventListener('selectstart', handleSelectStart);
       if (md.mobile() || md.tablet()) {
+        document.addEventListener('touchstart', handleDown);
+        document.addEventListener('touchmove', handleMove);
+        document.addEventListener('touchend', handleUp);
         document.addEventListener('selectionchange', handleSelectChange);
       }
     } else if (textLayer) {
@@ -145,13 +145,13 @@ const HighlightTools: React.FC<Props> = ({
 
     return (): void => {
       document.removeEventListener('mousedown', handleDown);
-      document.removeEventListener('touchstart', handleDown);
       document.removeEventListener('mousemove', handleMove);
-      document.removeEventListener('touchmove', handleMove);
       document.removeEventListener('mouseup', handleUp);
-      document.removeEventListener('touchend', handleUp);
       document.removeEventListener('selectstart', handleSelectStart);
       if (md.mobile() || md.tablet()) {
+        document.removeEventListener('touchstart', handleDown);
+        document.removeEventListener('touchmove', handleMove);
+        document.removeEventListener('touchend', handleUp);
         document.removeEventListener('selectionchange', handleSelectChange);
       }
     };

containers/PdfPage.tsx

@@ -25,6 +25,7 @@ const PdfPage: React.FC<Props> = ({ index }: Props) => {
       currentPage,
       queryString,
       matchesMap,
+      toolState,
     },
   ] = useStore();
 
@@ -69,6 +70,7 @@ const PdfPage: React.FC<Props> = ({ index }: Props) => {
       annotations={getAnnotationWithPage(annotations, index)}
       queryString={queryString}
       matchesMap={matchesMap}
+      toolState={toolState}
     />
   );
 };

containers/ShapeTools.tsx

@@ -37,7 +37,7 @@ const Shape: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
     opacity: 35,
     width: 0,
   });
-  const [cursorPosition, setRef] = useCursorPosition();
+  const [cursorPosition, setRef] = useCursorPosition(20);
 
   const [{ viewport, scale, annotations }, dispatch] = useStore();
   const { addAnnots, updateAnnots } = useActions(dispatch);

custom.d.ts

@@ -21,13 +21,26 @@ type SelectOptionType = {
 
 type RenderingStateType = 'RENDERING' | 'LOADING' | 'FINISHED' | 'PAUSED';
 
-type LineType = 'Highlight' | 'Underline' | 'Squiggly' | 'StrikeOut';
-
-type FormType = 'textfield' | 'checkbox' | 'radio';
+enum FormType {
+  textfield = 'textfield',
+  checkbox = 'checkbox',
+  radio = 'radio',
+}
 
-type ToolType = 'highlight' | 'freehand' | 'text' | 'sticky' | 'shape';
+enum ToolType {
+  highlight = 'highlight',
+  freehand = 'freehand',
+  text = 'text',
+  sticky = 'sticky',
+  shape = 'shape',
+}
 
-type SidebarType = 'markup-tools' | 'create-form' | 'watermark' | 'image';
+enum SidebarType {
+  'markup-tools' = 'markup-tools',
+  'create-form' = 'create-form',
+  watermark = 'watermark',
+  image = 'image',
+}
 
 type ViewportType = {
   width: number;

package.json

@@ -14,12 +14,11 @@
   "husky": {
     "hooks": {
       "prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
-      "pre-commit": "lint-staged && yarn type-check"
+      "pre-commit": "lint-staged && yarn test && yarn type-check"
     }
   },
   "lint-staged": {
     "*.@(js|ts|tsx)": [
-      "yarn test",
       "yarn lint",
       "yarn format"
     ]
@@ -34,7 +33,7 @@
     "mobile-detect": "^1.4.4",
     "next": "9.5.0",
     "next-i18next": "4.3.0",
-    "pdfjs-dist": "2.5.207",
+    "pdfjs-dist": "2.4.456",
     "print-js": "^1.0.63",
     "query-string": "5",
     "react": "16.13.0",

yarn.lock

@@ -7470,10 +7470,10 @@ pbkdf2@^3.0.3:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-pdfjs-dist@2.5.207:
-  version "2.5.207"
-  resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-2.5.207.tgz#b5e8c19627be64269cd3fb6df3eaaf45ddffe7b6"
-  integrity sha512-xGDUhnCYPfHy+unMXCLCJtlpZaaZ17Ew3WIL0tnSgKFUZXHAPD49GO9xScyszSsQMoutNDgRb+rfBXIaX/lJbw==
+pdfjs-dist@2.4.456:
+  version "2.4.456"
+  resolved "https://registry.yarnpkg.com/pdfjs-dist/-/pdfjs-dist-2.4.456.tgz#0eaad2906cda866bbb393e79a0e5b4e68bd75520"
+  integrity sha512-yckJEHq3F48hcp6wStEpbN9McOj328Ib09UrBlGAKxvN2k+qYPN5iq6TH6jD1C0pso7zTep+g/CKsYgdrQd5QA==
 
 performance-now@^2.1.0:
   version "2.1.0"