src/components/DrawPDFFields/index.tsx

@@ -113,12 +113,11 @@ export const DrawPDFFields = (props: Props) => {
       return
     }
 
-    const { mouseX, mouseY, rect } = getMouseCoordinates(event)
+    const { mouseX, mouseY } = getMouseCoordinates(event)
 
     const newField: DrawnField = {
       left: mouseX,
       top: mouseY,
-      bottom: rect.height - mouseY,
       width: 0,
       height: 0,
       counterpart: '',
@@ -161,15 +160,13 @@ export const DrawPDFFields = (props: Props) => {
       const lastElementIndex = page.drawnFields.length -1
       const lastDrawnField = page.drawnFields[lastElementIndex]
 
-      const { mouseX, mouseY, rect } = getMouseCoordinates(event)
+      const { mouseX, mouseY } = getMouseCoordinates(event)
       
       const width = mouseX - lastDrawnField.left
       const height = mouseY - lastDrawnField.top
-      const bottom = rect.height - height - lastDrawnField.top - 3
 
       lastDrawnField.width = width
       lastDrawnField.height = height
-      lastDrawnField.bottom = bottom
 
       const currentDrawnFields = page.drawnFields
 
@@ -212,7 +209,7 @@ export const DrawPDFFields = (props: Props) => {
    * @param event Mouse event
    * @param drawnField which we are moving
    */
-  const onDrawnFieldMouseMove = (event: any, drawnField: DrawnField) => {
+  const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => {
     if (mouseState.dragging) {
       const { mouseX, mouseY, rect } = getMouseCoordinates(event, event.target.parentNode)
       const coordsOffset = mouseState.coordsInWrapper
@@ -231,7 +228,6 @@ export const DrawPDFFields = (props: Props) => {
 
         drawnField.left = left
         drawnField.top = top
-        drawnField.bottom = rect.height - drawnField.height - top - 3
 
         refreshPdfFiles()
       }
@@ -239,9 +235,7 @@ export const DrawPDFFields = (props: Props) => {
   }
 
   /**
-   * Fired when clicked 
+   * Fired when clicked on the resize handle, sets the state for a resize action
-        drawnField.top = top
-on the resize handle, sets the state for a resize action
    * @param event Mouse event
    * @param drawnField which we are resizing
    */
@@ -263,14 +257,13 @@ on the resize handle, sets the state for a resize action
    */
   const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => {
     if (mouseState.resizing) {
-      const { mouseX, mouseY, rect } = getMouseCoordinates(event, event.target.parentNode.parentNode)
+      const { mouseX, mouseY } = getMouseCoordinates(event, event.target.parentNode.parentNode)
       
       const width = mouseX - drawnField.left
       const height = mouseY - drawnField.top
 
       drawnField.width = width
       drawnField.height = height
-      drawnField.bottom = rect.height - height - drawnField.top - 3
 
       refreshPdfFiles()
     }
@@ -351,7 +344,7 @@ on the resize handle, sets the state for a resize action
   
     for (let i = 0; i < pdf.numPages; i++) {
       const page = await pdf.getPage(i + 1);
-      const viewport = page.getViewport({ scale: 1 });
+      const viewport = page.getViewport({ scale: 3 });
       const context = canvas.getContext("2d");
       canvas.height = viewport.height;
       canvas.width = viewport.width;
@@ -445,7 +438,7 @@ on the resize handle, sets the state for a resize action
                   <div
                     key={drawnFieldIndex}
                     onMouseDown={(event) => { onDrawnFieldMouseDown(event, drawnField) }}
-                    onMouseMove={(event) => { onDrawnFieldMouseMove(event, drawnField)}}
+                    onMouseMove={(event) => { onDranwFieldMouseMove(event, drawnField)}}
                     className={styles.drawingRectangle}
                     style={{
                       left: `${drawnField.left}px`,

src/types/drawing.ts

@@ -22,7 +22,6 @@ export interface PdfPage {
 export interface DrawnField {
   left: number
   top: number
-  bottom: number
   width: number
   height: number
   type: MarkType