refactor(freehand component): hide text layer when drawing

* fix scaling error

components/Ink/index.tsx

@@ -11,9 +11,6 @@ import {
 import { AnnotationContainer } from '../../global/otherStyled';
 import { SVG } from './styled';
 
-let points: PointType[][] = [];
-let rect: HTMLCoordinateType = { top: 0, left: 0, width: 0, height: 0 };
-
 const Ink: React.FC<AnnotationElementPropsType> = ({
   obj_attr: { position, bdcolor, bdwidth = 0, transparency },
   isCollapse,
@@ -22,6 +19,8 @@ const Ink: React.FC<AnnotationElementPropsType> = ({
   scale,
   id,
 }: AnnotationElementPropsType) => {
+  let points: PointType[][] = [];
+  let rect: HTMLCoordinateType = { top: 0, left: 0, width: 0, height: 0 };
   const borderWidth = bdwidth * scale;
 
   const pointCalc = (
@@ -102,9 +101,14 @@ const Ink: React.FC<AnnotationElementPropsType> = ({
   const calcViewBox = (
     { top, left, width, height }: HTMLCoordinateType,
     _borderWidth: number,
-  ): string => `
-    ${left - _borderWidth / 2} ${top - _borderWidth / 2} ${width} ${height}
+  ): string => {
+    const distance = _borderWidth / 2;
+    return `
+    ${left - distance} ${top - distance} ${width + distance} ${
+      height + distance
+    }
   `;
+  };
 
   return (
     <>

components/OuterRect/index.tsx

@@ -51,7 +51,7 @@ const index: React.FC<Props> = ({
 }: Props) => {
   const data = generateCirclesData(width, height);
   const [state, setState] = useState(initState);
-  const [cursorPosition, setRef] = useCursorPosition(25);
+  const [cursorPosition, setRef] = useCursorPosition(20);
 
   const handleMouseDown = (e: React.MouseEvent | React.TouchEvent): void => {
     e.preventDefault();

components/OuterRectForLine/index.tsx

@@ -40,7 +40,7 @@ const index: React.FC<Props> = ({
   completeEnd,
 }: Props) => {
   const [state, setState] = useState(initState);
-  const [cursorPosition, setRef] = useCursorPosition();
+  const [cursorPosition, setRef] = useCursorPosition(20);
 
   const handleMouseDown = (e: React.MouseEvent): void => {
     const operatorId = (e.target as HTMLElement).getAttribute(

components/Page/index.tsx

@@ -26,6 +26,7 @@ type Props = {
   watermark: WatermarkType;
   queryString: string;
   matchesMap: MatchType[];
+  toolState: ToolType | FormType | '';
 };
 
 const PageView: React.FC<Props> = ({
@@ -39,6 +40,7 @@ const PageView: React.FC<Props> = ({
   watermark = {},
   queryString,
   matchesMap,
+  toolState,
 }: Props) => {
   const rootEle = useRef<HTMLDivElement | null>(null);
   const [renderTask, setRenderTask] = useState<RenderTaskType | null>(null);
@@ -111,7 +113,15 @@ const PageView: React.FC<Props> = ({
           ) : (
             ''
           )}
-          <TextLayer data-id="text-layer" />
+          <TextLayer
+            data-id="text-layer"
+            style={{
+              display:
+                toolState === 'freehand' || toolState === 'shape'
+                  ? 'none'
+                  : 'block',
+            }}
+          />
           <AnnotationLayer data-id="annotation-layer">
             {annotations}
           </AnnotationLayer>

helpers/pdf.ts

@@ -1,5 +1,8 @@
+import pdfjs from 'pdfjs-dist/es5/build/pdf.js';
 import { delay } from './time';
 
+pdfjs.GlobalWorkerOptions.workerSrc = '/static/build/pdf.worker.min.js';
+
 let normalizationRegex: RegExp | null = null;
 const CHARACTERS_TO_NORMALIZE: { [index: string]: string } = {
   '\u2018': "'", // Left single quotation mark
@@ -20,9 +23,6 @@ export const fetchPdf = async (
   cb?: (progress: ProgressType) => void,
 ): Promise<PdfType> => {
   try {
-    const pdfjs = await import('pdfjs-dist/es5/build/pdf.js');
-    pdfjs.GlobalWorkerOptions.workerSrc = '/static/build/pdf.worker.min.js';
-
     const loadingTask = pdfjs.getDocument({
       url: src,
       cMapUrl: '/static/cmaps/',
@@ -56,10 +56,6 @@ export const renderTextLayer = async ({
   setTextDivs?: (elements: HTMLElement[]) => void;
 }): Promise<void> => {
   if (!pdfPage) return;
-
-  const pdfjs = await import('pdfjs-dist/es5/build/pdf.js');
-  pdfjs.GlobalWorkerOptions.workerSrc = '/static/build/pdf.worker.min.js';
-
   const textContent = await pdfPage.getTextContent({
     normalizeWhitespace: true,
   });

hooks/useCursorPosition.ts

@@ -1,6 +1,7 @@
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { fromEvent, Subscription } from 'rxjs';
 import { throttleTime } from 'rxjs/operators';
+import MobileDetect from 'mobile-detect';
 
 import { getAbsoluteCoordinate } from '../helpers/position';
 
@@ -83,6 +84,8 @@ const useCursorPosition: UseCursorPositionType = (time = defaultTime) => {
   );
 
   useEffect(() => {
+    const md = new MobileDetect(window.navigator.userAgent);
+
     let mouseSubscription: Subscription | null = null;
     let touchSubscription: Subscription | null = null;
 
@@ -116,31 +119,40 @@ const useCursorPosition: UseCursorPositionType = (time = defaultTime) => {
     };
 
     if (element) {
-      mouseSubscription = fromEvent(element, 'mousemove')
-        .pipe(throttleTime(time))
-        .subscribe(onMouseMoveEvent);
-      touchSubscription = fromEvent(element, 'touchmove')
-        .pipe(throttleTime(time))
-        .subscribe(onTouchMoveEvent);
-
       const addEvent = element.addEventListener.bind(element);
-      addEvent('mouseenter', onEnter);
-      addEvent('mouseleave', onLeave);
-      addEvent('mousedown', onDown);
-      addEvent('touchstart', onTouch);
-      addEvent('mouseup', onUp);
-      addEvent('touchend', onUp);
+
+      if (md.mobile() || md.tablet()) {
+        touchSubscription = fromEvent(element, 'touchmove')
+          .pipe(throttleTime(time))
+          .subscribe(onTouchMoveEvent);
+
+        addEvent('touchstart', onTouch);
+        addEvent('touchend', onUp);
+      } else {
+        mouseSubscription = fromEvent(element, 'mousemove')
+          .pipe(throttleTime(time))
+          .subscribe(onMouseMoveEvent);
+
+        addEvent('mouseenter', onEnter);
+        addEvent('mouseleave', onLeave);
+        addEvent('mousedown', onDown);
+        addEvent('mouseup', onUp);
+      }
     }
 
     return (): void => {
       if (element) {
         const removeEvent = element.removeEventListener.bind(element);
-        removeEvent('mouseenter', onEnter);
-        removeEvent('mouseleave', onLeave);
-        removeEvent('mousedown', onDown);
-        removeEvent('touchstart', onTouch);
-        removeEvent('mouseup', onUp);
-        removeEvent('touchend', onUp);
+
+        if (md.mobile() || md.tablet()) {
+          removeEvent('touchstart', onTouch);
+          removeEvent('touchend', onUp);
+        } else {
+          removeEvent('mouseenter', onEnter);
+          removeEvent('mouseleave', onLeave);
+          removeEvent('mousedown', onDown);
+          removeEvent('mouseup', onUp);
+        }
       }
     };
   }, [element]);