fix: pdf to png scaling is 1, bottom position is now included
This commit is contained in:
parent
3ae7d09fa4
commit
4556bd0c66
@ -113,11 +113,12 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const { mouseX, mouseY } = getMouseCoordinates(event)
|
const { mouseX, mouseY, rect } = getMouseCoordinates(event)
|
||||||
|
|
||||||
const newField: DrawnField = {
|
const newField: DrawnField = {
|
||||||
left: mouseX,
|
left: mouseX,
|
||||||
top: mouseY,
|
top: mouseY,
|
||||||
|
bottom: rect.height - mouseY,
|
||||||
width: 0,
|
width: 0,
|
||||||
height: 0,
|
height: 0,
|
||||||
counterpart: '',
|
counterpart: '',
|
||||||
@ -160,13 +161,15 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
const lastElementIndex = page.drawnFields.length -1
|
const lastElementIndex = page.drawnFields.length -1
|
||||||
const lastDrawnField = page.drawnFields[lastElementIndex]
|
const lastDrawnField = page.drawnFields[lastElementIndex]
|
||||||
|
|
||||||
const { mouseX, mouseY } = getMouseCoordinates(event)
|
const { mouseX, mouseY, rect } = getMouseCoordinates(event)
|
||||||
|
|
||||||
const width = mouseX - lastDrawnField.left
|
const width = mouseX - lastDrawnField.left
|
||||||
const height = mouseY - lastDrawnField.top
|
const height = mouseY - lastDrawnField.top
|
||||||
|
const bottom = rect.height - height - lastDrawnField.top - 3
|
||||||
|
|
||||||
lastDrawnField.width = width
|
lastDrawnField.width = width
|
||||||
lastDrawnField.height = height
|
lastDrawnField.height = height
|
||||||
|
lastDrawnField.bottom = bottom
|
||||||
|
|
||||||
const currentDrawnFields = page.drawnFields
|
const currentDrawnFields = page.drawnFields
|
||||||
|
|
||||||
@ -209,7 +212,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
* @param event Mouse event
|
* @param event Mouse event
|
||||||
* @param drawnField which we are moving
|
* @param drawnField which we are moving
|
||||||
*/
|
*/
|
||||||
const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => {
|
const onDrawnFieldMouseMove = (event: any, drawnField: DrawnField) => {
|
||||||
if (mouseState.dragging) {
|
if (mouseState.dragging) {
|
||||||
const { mouseX, mouseY, rect } = getMouseCoordinates(event, event.target.parentNode)
|
const { mouseX, mouseY, rect } = getMouseCoordinates(event, event.target.parentNode)
|
||||||
const coordsOffset = mouseState.coordsInWrapper
|
const coordsOffset = mouseState.coordsInWrapper
|
||||||
@ -225,9 +228,10 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
if (top < 0) top = 0
|
if (top < 0) top = 0
|
||||||
if (left > rightLimit) left = rightLimit
|
if (left > rightLimit) left = rightLimit
|
||||||
if (top > bottomLimit) top = bottomLimit
|
if (top > bottomLimit) top = bottomLimit
|
||||||
|
|
||||||
drawnField.left = left
|
drawnField.left = left
|
||||||
drawnField.top = top
|
drawnField.top = top
|
||||||
|
drawnField.bottom = rect.height - drawnField.height - top - 3
|
||||||
|
|
||||||
refreshPdfFiles()
|
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 event Mouse event
|
||||||
* @param drawnField which we are resizing
|
* @param drawnField which we are resizing
|
||||||
*/
|
*/
|
||||||
@ -257,13 +263,14 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
*/
|
*/
|
||||||
const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => {
|
const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => {
|
||||||
if (mouseState.resizing) {
|
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 width = mouseX - drawnField.left
|
||||||
const height = mouseY - drawnField.top
|
const height = mouseY - drawnField.top
|
||||||
|
|
||||||
drawnField.width = width
|
drawnField.width = width
|
||||||
drawnField.height = height
|
drawnField.height = height
|
||||||
|
drawnField.bottom = rect.height - height - drawnField.top - 3
|
||||||
|
|
||||||
refreshPdfFiles()
|
refreshPdfFiles()
|
||||||
}
|
}
|
||||||
@ -344,7 +351,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
|
|
||||||
for (let i = 0; i < pdf.numPages; i++) {
|
for (let i = 0; i < pdf.numPages; i++) {
|
||||||
const page = await pdf.getPage(i + 1);
|
const page = await pdf.getPage(i + 1);
|
||||||
const viewport = page.getViewport({ scale: 3 });
|
const viewport = page.getViewport({ scale: 1 });
|
||||||
const context = canvas.getContext("2d");
|
const context = canvas.getContext("2d");
|
||||||
canvas.height = viewport.height;
|
canvas.height = viewport.height;
|
||||||
canvas.width = viewport.width;
|
canvas.width = viewport.width;
|
||||||
@ -438,7 +445,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
<div
|
<div
|
||||||
key={drawnFieldIndex}
|
key={drawnFieldIndex}
|
||||||
onMouseDown={(event) => { onDrawnFieldMouseDown(event, drawnField) }}
|
onMouseDown={(event) => { onDrawnFieldMouseDown(event, drawnField) }}
|
||||||
onMouseMove={(event) => { onDranwFieldMouseMove(event, drawnField)}}
|
onMouseMove={(event) => { onDrawnFieldMouseMove(event, drawnField)}}
|
||||||
className={styles.drawingRectangle}
|
className={styles.drawingRectangle}
|
||||||
style={{
|
style={{
|
||||||
left: `${drawnField.left}px`,
|
left: `${drawnField.left}px`,
|
||||||
|
@ -22,6 +22,7 @@ export interface PdfPage {
|
|||||||
export interface DrawnField {
|
export interface DrawnField {
|
||||||
left: number
|
left: number
|
||||||
top: number
|
top: number
|
||||||
|
bottom: number
|
||||||
width: number
|
width: number
|
||||||
height: number
|
height: number
|
||||||
type: MarkType
|
type: MarkType
|
||||||
|
Loading…
Reference in New Issue
Block a user