sigit/sigit.io
6
2
Fork 0
Code Issues 55 Pull Requests 2 Actions Packages Projects 1 Releases Wiki Activity

fix: pdf to png scaling is 1, bottom position is now included

Browse Source
This commit is contained in:
Stixx 2024-07-26 15:24:23 +02:00
parent 3ae7d09fa4
commit 4556bd0c66
2 changed files with 16 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/DrawPDFFields/index.tsx
View File

@ -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`,

1
src/types/drawing.ts
View File

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