diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx index c01eacf..c23bf70 100644 --- a/src/components/DrawPDFFields/index.tsx +++ b/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 @@ -228,10 +225,9 @@ 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() } @@ -239,9 +235,7 @@ export const DrawPDFFields = (props: Props) => { } /** - * Fired when clicked - drawnField.top = top -on the resize handle, sets the state for a resize action + * Fired when clicked 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
{ onDrawnFieldMouseDown(event, drawnField) }} - onMouseMove={(event) => { onDrawnFieldMouseMove(event, drawnField)}} + onMouseMove={(event) => { onDranwFieldMouseMove(event, drawnField)}} className={styles.drawingRectangle} style={{ left: `${drawnField.left}px`, diff --git a/src/types/drawing.ts b/src/types/drawing.ts index ba118a8..702343f 100644 --- a/src/types/drawing.ts +++ b/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