fix print and download feature

containers/FreehandTools.tsx

@@ -89,24 +89,26 @@ const FreehandTools: React.FC<Props> = ({
     switchPdfViewerScrollState('scroll');
 
     const index = annotations.length - 1;
-    const position = annotations[index].obj_attr.position as PointType[][];
-
-    if (!position[0]) return;
-
-    if (position[0].length === 1 && annotations[index].id === uuid) {
-      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 },
-        ],
-      ];
-      annotations[index] = appendUserIdAndDate(annotations[index]);
-      updateAnnots([...annotations]);
-    }
+    if (annotations[index]) {
+      const position = annotations[index].obj_attr.position as PointType[][];
+
+      if (!position[0]) return;
+
+      if (position[0].length === 1 && annotations[index].id === uuid) {
+        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 },
+          ],
+        ];
+        annotations[index] = appendUserIdAndDate(annotations[index]);
+        updateAnnots([...annotations]);
+      }
 
-    setRef(null);
-    setUuid('');
+      setRef(null);
+      setUuid('');
+    }
   }, [annotations, uuid]);
 
   useEffect(() => {

containers/Navbar.tsx

@@ -22,7 +22,9 @@ const Navbar: React.FC = () => {
         const fileName = atob(info.token as string);
         let outputPath = `/api/v1/output.pdf?f=${info.token}`;
         if (parsed.watermark) {
-          outputPath = `/api/v1/output.pdf?f=${info.token}&user_id=${parsed.watermark}&pages=0-${totalPage}`;
+          outputPath = `/api/v1/output.pdf?f=${
+            info.token
+          }&user_id=${window.encodeURI(parsed.watermark)}&pages=0-${totalPage}`;
         }
 
         setLoading(true);
@@ -37,7 +39,9 @@ const Navbar: React.FC = () => {
         const parsed = queryString.parse(window.location.search);
         let outputPath = `/api/v1/output.pdf?f=${info.token}`;
         if (parsed.watermark) {
-          outputPath = `/api/v1/output.pdf?f=${info.token}&user_id=${parsed.watermark}&pages=0-${totalPage}`;
+          outputPath = `/api/v1/output.pdf?f=${
+            info.token
+          }&user_id=${window.encodeURI(parsed.watermark)}&pages=0-${totalPage}`;
         }
         setLoading(true);
         printPdf(outputPath).then(() => {

containers/ShapeTools.tsx

@@ -35,7 +35,7 @@ const Shape: React.FC<Props> = ({ title, isActive, onClick }: Props) => {
     type: 'fill',
     color: '#FBB705',
     opacity: 35,
-    width: 3,
+    width: 0,
   });
   const [cursorPosition, setRef] = useCursorPosition();
 

helpers/utility.ts

@@ -46,7 +46,7 @@ export const watchScroll = (
   };
 
   const subscriber = fromEvent(element, 'scroll')
-    .pipe(throttleTime(150), debounceTime(150))
+    .pipe(throttleTime(100), debounceTime(100))
     .subscribe(debounceScroll);
 
   state.subscriber = subscriber;
@@ -279,48 +279,27 @@ export const printPdf = async (url: string) => {
   const printJS = require('print-js');
   const isIE11 = !!(window.navigator && window.navigator.msSaveOrOpenBlob);
 
-  await fetch(url, {
-    headers: {
-      'Content-type': 'application/pdf',
-    },
-  })
-    .then(data => data.blob())
-    .then(res => {
-      if (isIE11) {
-        const wrapper = document.getElementById('embed-wrapper') as HTMLElement;
-        wrapper.style.display = 'flex';
-        const ele = document.createElement('embed');
-        ele.setAttribute('type', 'application/pdf');
-        ele.setAttribute('id', 'pdf-embed');
-        ele.style.width = '70%';
-        ele.style.height = '70%';
-        ele.style.position = 'fixed';
-        ele.style.top = '0';
-        ele.style.left = '0';
-        ele.style.bottom = '0';
-        ele.style.right = '0';
-        ele.style.margin = 'auto';
-        ele.setAttribute('src', url);
-        wrapper.appendChild(ele);
-
-        printDocument('pdf-embed');
-      } else {
-        const fileReader = new FileReader();
-        fileReader.readAsDataURL(res);
-        fileReader.onload = fileLoadedEvent => {
-          if (fileLoadedEvent.target) {
-            const base64 = fileLoadedEvent.target.result as string;
-
-            printJS({
-              printable: base64.replace('data:application/pdf;base64,', ''),
-              type: 'pdf',
-              base64: true,
-              showModal: true,
-            });
-          }
-        };
-      }
-    });
+  if (!isIE11) {
+    printJS(url);
+  } else {
+    const wrapper = document.getElementById('embed-wrapper') as HTMLElement;
+    wrapper.style.display = 'flex';
+    const ele = document.createElement('embed');
+    ele.setAttribute('type', 'application/pdf');
+    ele.setAttribute('id', 'pdf-embed');
+    ele.style.width = '70%';
+    ele.style.height = '70%';
+    ele.style.position = 'fixed';
+    ele.style.top = '0';
+    ele.style.left = '0';
+    ele.style.bottom = '0';
+    ele.style.right = '0';
+    ele.style.margin = 'auto';
+    ele.setAttribute('src', url);
+    wrapper.appendChild(ele);
+
+    printDocument('pdf-embed');
+  }
 };
 
 export const strip = (number: number): number => {