add user title attribute

config/index.js

@@ -1,5 +1,5 @@
-let API_HOST = 'http://127.0.0.1:3000';
-// let API_HOST = 'http://192.168.172.3:3000';
+// let API_HOST = 'http://127.0.0.1:3000';
+let API_HOST = 'http://192.168.172.3:3000';
 
 switch (process.env.NODE_ENV) {
   case 'production':

containers/Annotation.tsx

@@ -10,6 +10,7 @@ import Line from '../components/Line';
 import DeleteDialog from '../components/DeleteDialog';
 import useCursorPosition from '../hooks/useCursorPosition';
 import ClickAwayListener from '../components/ClickAwayListener';
+import { appendUserId } from '../helpers/annotation';
 
 import useStore from '../store';
 import useActions from '../actions';
@@ -61,7 +62,7 @@ const Annotation: React.FC<Props> = ({
     };
 
     annotations[index].obj_attr = newAttributes;
-
+    annotations[index] = appendUserId(annotations[index]);
     updateAnnots(annotations);
   };
 

containers/FreeTextTools.tsx

@@ -7,7 +7,7 @@ import ExpansionPanel from '../components/ExpansionPanel';
 import FreeTextOption from '../components/FreeTextOption';
 
 import { getAbsoluteCoordinate } from '../helpers/position';
-import { parseAnnotationObject } from '../helpers/annotation';
+import { parseAnnotationObject, appendUserId } from '../helpers/annotation';
 
 import useActions from '../actions';
 import useStore from '../store';
@@ -76,7 +76,9 @@ const HighlightTools: React.FC<Props> = ({
       },
     };
 
-    const freeText = parseAnnotationObject(annotData, viewport.height, scale);
+    const freeText = appendUserId(
+      parseAnnotationObject(annotData, viewport.height, scale)
+    );
 
     addAnnots([freeText]);
   };

containers/FreehandTools.tsx

@@ -11,7 +11,7 @@ import {
   getAbsoluteCoordinate,
   parsePositionForBackend,
 } from '../helpers/position';
-import { parseAnnotationObject } from '../helpers/annotation';
+import { parseAnnotationObject, appendUserId } from '../helpers/annotation';
 import { switchPdfViewerScrollState } from '../helpers/pdf';
 import useCursorPosition from '../hooks/useCursorPosition';
 
@@ -73,10 +73,8 @@ const FreehandTools: React.FC<Props> = ({
             transparency: data.opacity,
           },
         };
-        const freehand = parseAnnotationObject(
-          annotData,
-          viewport.height,
-          scale
+        const freehand = appendUserId(
+          parseAnnotationObject(annotData, viewport.height, scale)
         );
 
         addAnnots([freehand]);
@@ -101,6 +99,7 @@ const FreehandTools: React.FC<Props> = ({
           { x: point.x + 5, y: point.y + 5 },
         ],
       ];
+      annotations[index] = appendUserId(annotations[index]);
       updateAnnots([...annotations]);
     }
 
@@ -134,6 +133,7 @@ const FreehandTools: React.FC<Props> = ({
       ) {
         position[0].push(coordinates);
         annotations[index].obj_attr.position = position;
+        annotations[index] = appendUserId(annotations[index]);
         updateAnnots([...annotations]);
       }
     }

containers/HighlightTools.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { v4 as uuidv4 } from 'uuid';
 
 import Icon from '../components/Icon';
 import Button from '../components/Button';
@@ -19,6 +18,7 @@ type Props = {
 
 let timer: any = null;
 let textLayer: any = null;
+// let currentId: string = '';
 
 const HighlightTools: React.FC<Props> = ({
   title,
@@ -67,8 +67,9 @@ const HighlightTools: React.FC<Props> = ({
               '[data-id="text-layer"]'
             ) as HTMLElement;
           }
-
           if (textLayer) {
+            textLayer.style.zIndex = 10;
+
             const newMarkup = getMarkupWithSelection({
               ...data,
               scale,
@@ -76,15 +77,17 @@ const HighlightTools: React.FC<Props> = ({
             });
 
             if (newMarkup) {
-              const id = uuidv4();
-              newMarkup.id = id;
-              setCurrentId(id);
+              setCurrentId(newMarkup.id as string);
               addAnnots([newMarkup]);
             }
           }
         }
       }
       if (selection?.isCollapsed) {
+        if (textLayer) {
+          textLayer.style.zIndex = 0;
+        }
+
         setCurrentId('');
       }
     },
@@ -107,22 +110,20 @@ const HighlightTools: React.FC<Props> = ({
         });
 
         if (newMarkup) {
-          const newAnnota = annotations.reduce(
-            (acc: AnnotationType[], cur: AnnotationType) => {
-              if (cur.id === newMarkup.id) {
-                acc.push(newMarkup);
-              } else {
-                acc.push(cur);
-              }
-              return acc;
-            },
-            []
-          );
-          updateAnnots(newAnnota);
+          const array: any = [];
+          annotations.forEach(ele => {
+            if (ele.id === currentId) {
+              // eslint-disable-next-line no-param-reassign
+              ele.obj_attr.position = newMarkup.obj_attr.position;
+            }
+            array.push(ele);
+          });
+
+          updateAnnots(array);
         }
       }
     }
-  }, [data, scale, currentId]);
+  }, [annotations, data, scale, currentId]);
 
   useEffect(() => {
     if (isActive) {
@@ -134,6 +135,8 @@ const HighlightTools: React.FC<Props> = ({
       document.addEventListener('touchend', handleUp);
       document.addEventListener('selectstart', handleSelectStart);
       document.addEventListener('selectionchange', handleSelectChange);
+    } else if (textLayer) {
+      textLayer.style.zIndex = 0;
     }
 
     return (): void => {

containers/ShapeTools.tsx

@@ -11,7 +11,7 @@ import {
   getAbsoluteCoordinate,
   parsePositionForBackend,
 } from '../helpers/position';
-import { parseAnnotationObject } from '../helpers/annotation';
+import { parseAnnotationObject, appendUserId } from '../helpers/annotation';
 import { switchPdfViewerScrollState } from '../helpers/pdf';
 import useCursorPosition from '../hooks/useCursorPosition';
 
@@ -111,10 +111,8 @@ const Shape: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
           is_arrow: shape === 'arrow',
         },
       };
-      const shapeAnnotation = parseAnnotationObject(
-        annoteData,
-        viewport.height,
-        scale
+      const shapeAnnotation = appendUserId(
+        parseAnnotationObject(annoteData, viewport.height, scale)
       );
 
       addAnnots([shapeAnnotation]);
@@ -187,6 +185,8 @@ const Shape: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
           viewport.height,
           scale
         );
+        annotations[index] = appendUserId(annotations[index]);
+
         updateAnnots([...annotations]);
       }
     },

containers/StickyNoteTools.tsx

@@ -4,7 +4,7 @@ import { ANNOTATION_TYPE } from '../constants';
 import Button from '../components/Button';
 import Icon from '../components/Icon';
 import { getAbsoluteCoordinate } from '../helpers/position';
-import { parseAnnotationObject } from '../helpers/annotation';
+import { parseAnnotationObject, appendUserId } from '../helpers/annotation';
 import { BtnWrapper } from '../global/toolStyled';
 
 import useActions from '../actions';
@@ -44,7 +44,9 @@ const StickyNoteTools: React.FC<Props> = ({
         content: '',
       },
     };
-    const stickyNote = parseAnnotationObject(annotData, viewport.height, scale);
+    const stickyNote = appendUserId(
+      parseAnnotationObject(annotData, viewport.height, scale)
+    );
 
     addAnnots([stickyNote]);
   };

custom.d.ts

@@ -75,6 +75,7 @@ type AnnotationPositionType =
   | (PositionType | PointType[])[];
 
 type AnnotationAttributeType = {
+  title?: string;
   page: number;
   bdcolor?: string | undefined;
   position?: AnnotationPositionType;

helpers/annotation.ts

@@ -1,4 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
+import queryString from 'query-string';
 
 import { ANNOTATION_TYPE } from '../constants';
 import { getPdfPage, renderTextLayer } from './pdf';
@@ -223,3 +224,11 @@ export const parseAnnotationObject = (
     is_arrow,
   },
 });
+
+export const appendUserId = (annotateObj: AnnotationType): AnnotationType => {
+  const parsed = queryString.parse(window.location.search);
+  if (!annotateObj || !parsed.watermark) return annotateObj;
+  // eslint-disable-next-line no-param-reassign
+  annotateObj.obj_attr.title = parsed.watermark;
+  return annotateObj;
+};

helpers/markup.ts

@@ -1,5 +1,5 @@
 import { ANNOTATION_TYPE } from '../constants';
-import { parseAnnotationObject } from './annotation';
+import { parseAnnotationObject, appendUserId } from './annotation';
 
 type GetMarkupWithSelectionFunc = ({
   color,
@@ -142,7 +142,7 @@ export const getMarkupWithSelection: GetMarkupWithSelectionFunc = ({
     transparency: opacity,
   };
 
-  return parseAnnotationObject(info, pageHeight, scale);
+  return appendUserId(parseAnnotationObject(info, pageHeight, scale));
 };
 
 export default getMarkupWithSelection;