src/components/DrawPDFFields/index.tsx

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

src/types/drawing.ts

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