diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx index c23bf70..c01eacf 100644 --- a/src/components/DrawPDFFields/index.tsx +++ b/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 @@ -225,9 +228,10 @@ export const DrawPDFFields = (props: Props) => { if (top < 0) top = 0 if (left > rightLimit) left = rightLimit if (top > bottomLimit) top = bottomLimit - + 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) => {
{ onDrawnFieldMouseDown(event, drawnField) }} - onMouseMove={(event) => { onDranwFieldMouseMove(event, drawnField)}} + onMouseMove={(event) => { onDrawnFieldMouseMove(event, drawnField)}} className={styles.drawingRectangle} style={{ left: `${drawnField.left}px`, diff --git a/src/types/drawing.ts b/src/types/drawing.ts index 702343f..ba118a8 100644 --- a/src/types/drawing.ts +++ b/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