Releasing new design #161
@ -94,6 +94,14 @@ export const DrawPDFFields = (props: Props) => {
|
||||
setPdfFiles([...pdfFiles])
|
||||
}
|
||||
|
||||
/**
|
||||
* Fired only when left click and mouse over pdf page
|
||||
* Creates new drawnElement and pushes in the array
|
||||
* It is re rendered and visible right away
|
||||
*
|
||||
* @param event Mouse event
|
||||
* @param page PdfPage where press happened
|
||||
*/
|
||||
const onMouseDown = (event: any, page: PdfPage) => {
|
||||
// Proceed only if left click
|
||||
if (event.button !== 0) return
|
||||
@ -126,6 +134,10 @@ export const DrawPDFFields = (props: Props) => {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Drawing is finished, resets all the variables used to draw
|
||||
* @param event Mouse event
|
||||
*/
|
||||
const onMouseUp = (event: MouseEvent) => {
|
||||
setMouseState((prev) => {
|
||||
return {
|
||||
@ -137,6 +149,12 @@ export const DrawPDFFields = (props: Props) => {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* After {@link onMouseDown} create an drawing element, this function gets called on every pixel moved
|
||||
* which alters the newly created drawing element, resizing it while mouse move
|
||||
* @param event Mouse event
|
||||
* @param page PdfPage where moving is happening
|
||||
*/
|
||||
const onMouseMove = (event: any, page: PdfPage) => {
|
||||
if (mouseState.clicked && selectedTool) {
|
||||
const lastElementIndex = page.drawnFields.length -1
|
||||
@ -158,6 +176,16 @@ export const DrawPDFFields = (props: Props) => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fired when event happens on the drawn element which will be moved
|
||||
* mouse coordinates relative to drawn element will be stored
|
||||
* so when we start moving, offset can be calculated
|
||||
* mouseX - offsetX
|
||||
* mouseY - offsetY
|
||||
*
|
||||
* @param event Mouse event
|
||||
* @param drawnField Which we are moving
|
||||
*/
|
||||
const onDrawnFieldMouseDown = (event: any, drawnField: DrawnField) => {
|
||||
event.stopPropagation()
|
||||
|
||||
@ -176,6 +204,11 @@ export const DrawPDFFields = (props: Props) => {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Moves the drawnElement by the mouse position (mouse can grab anywhere on the drawn element)
|
||||
* @param event Mouse event
|
||||
* @param drawnField which we are moving
|
||||
*/
|
||||
const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => {
|
||||
if (mouseState.dragging) {
|
||||
const { mouseX, mouseY, rect } = getMouseCoordinates(event, event.target.parentNode)
|
||||
@ -201,6 +234,11 @@ export const DrawPDFFields = (props: Props) => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Fired when clicked on the resize handle, sets the state for a resize action
|
||||
* @param event Mouse event
|
||||
* @param drawnField which we are resizing
|
||||
*/
|
||||
const onResizeHandleMouseDown = (event: any, drawnField: DrawnField) => {
|
||||
// Proceed only if left click
|
||||
if (event.button !== 0) return
|
||||
@ -212,6 +250,11 @@ export const DrawPDFFields = (props: Props) => {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Resizes the drawn element by the mouse position
|
||||
* @param event Mouse event
|
||||
* @param drawnField which we are resizing
|
||||
*/
|
||||
const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => {
|
||||
if (mouseState.resizing) {
|
||||
const { mouseX, mouseY } = getMouseCoordinates(event, event.target.parentNode.parentNode)
|
||||
@ -226,12 +269,24 @@ export const DrawPDFFields = (props: Props) => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes the drawn element using the indexes in the params
|
||||
* @param event Mouse event
|
||||
* @param pdfFileIndex pdf file index
|
||||
* @param pdfPageIndex pdf page index
|
||||
* @param drawnFileIndex drawn file index
|
||||
*/
|
||||
const onRemoveHandleMouseDown = (event: any, pdfFileIndex: number, pdfPageIndex: number, drawnFileIndex: number) => {
|
||||
event.stopPropagation()
|
||||
|
||||
pdfFiles[pdfFileIndex].pages[pdfPageIndex].drawnFields.splice(drawnFileIndex, 1)
|
||||
}
|
||||
|
||||
/**
|
||||
* Used to stop mouse click propagating to the parent elements
|
||||
* so select can work properly
|
||||
* @param event Mouse event
|
||||
*/
|
||||
const onUserSelectHandleMouseDown = (event: any) => {
|
||||
event.stopPropagation()
|
||||
}
|
||||
@ -255,6 +310,10 @@ export const DrawPDFFields = (props: Props) => {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads the pdf binary files and converts it's pages to images
|
||||
* creates the pdfFiles object and sets to a state
|
||||
*/
|
||||
const parsePdfPages = async () => {
|
||||
const pdfFiles: PdfFile[] = []
|
||||
|
||||
@ -301,6 +360,9 @@ export const DrawPDFFields = (props: Props) => {
|
||||
}))
|
||||
}
|
||||
|
||||
/**
|
||||
* Reads the pdf file binaries
|
||||
*/
|
||||
const readPdf = (file: File) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
@ -320,6 +382,10 @@ export const DrawPDFFields = (props: Props) => {
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns if expanded pdf accordion is present
|
||||
*/
|
||||
const hasExpandedPdf = () => {
|
||||
return !!pdfFiles.filter(pdfFile => !!pdfFile.expanded).length
|
||||
}
|
||||
@ -331,6 +397,10 @@ export const DrawPDFFields = (props: Props) => {
|
||||
setShowDrawToolBox(hasExpandedPdf())
|
||||
}
|
||||
|
||||
/**
|
||||
* Changes the drawing tool
|
||||
* @param drawTool to draw with
|
||||
*/
|
||||
const handleToolSelect = (drawTool: DrawTool) => {
|
||||
// If clicked on the same tool, unselect
|
||||
if (drawTool.identifier === selectedTool?.identifier) {
|
||||
@ -341,6 +411,9 @@ export const DrawPDFFields = (props: Props) => {
|
||||
setSelectedTool(drawTool)
|
||||
}
|
||||
|
||||
/**
|
||||
* Renders the pdf pages and drawing elements
|
||||
*/
|
||||
const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => {
|
||||
return (
|
||||
<Box sx={{
|
||||
|
Loading…
Reference in New Issue
Block a user