Releasing new design #161
@ -94,6 +94,14 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
setPdfFiles([...pdfFiles])
|
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) => {
|
const onMouseDown = (event: any, page: PdfPage) => {
|
||||||
// Proceed only if left click
|
// Proceed only if left click
|
||||||
if (event.button !== 0) return
|
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) => {
|
const onMouseUp = (event: MouseEvent) => {
|
||||||
setMouseState((prev) => {
|
setMouseState((prev) => {
|
||||||
return {
|
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) => {
|
const onMouseMove = (event: any, page: PdfPage) => {
|
||||||
if (mouseState.clicked && selectedTool) {
|
if (mouseState.clicked && selectedTool) {
|
||||||
const lastElementIndex = page.drawnFields.length -1
|
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) => {
|
const onDrawnFieldMouseDown = (event: any, drawnField: DrawnField) => {
|
||||||
event.stopPropagation()
|
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) => {
|
const onDranwFieldMouseMove = (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)
|
||||||
@ -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) => {
|
const onResizeHandleMouseDown = (event: any, drawnField: DrawnField) => {
|
||||||
// Proceed only if left click
|
// Proceed only if left click
|
||||||
if (event.button !== 0) return
|
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) => {
|
const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => {
|
||||||
if (mouseState.resizing) {
|
if (mouseState.resizing) {
|
||||||
const { mouseX, mouseY } = getMouseCoordinates(event, event.target.parentNode.parentNode)
|
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) => {
|
const onRemoveHandleMouseDown = (event: any, pdfFileIndex: number, pdfPageIndex: number, drawnFileIndex: number) => {
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
|
|
||||||
pdfFiles[pdfFileIndex].pages[pdfPageIndex].drawnFields.splice(drawnFileIndex, 1)
|
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) => {
|
const onUserSelectHandleMouseDown = (event: any) => {
|
||||||
event.stopPropagation()
|
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 parsePdfPages = async () => {
|
||||||
const pdfFiles: PdfFile[] = []
|
const pdfFiles: PdfFile[] = []
|
||||||
|
|
||||||
@ -301,6 +360,9 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
}))
|
}))
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Reads the pdf file binaries
|
||||||
|
*/
|
||||||
const readPdf = (file: File) => {
|
const readPdf = (file: File) => {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const reader = new FileReader();
|
const reader = new FileReader();
|
||||||
@ -320,6 +382,10 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @returns if expanded pdf accordion is present
|
||||||
|
*/
|
||||||
const hasExpandedPdf = () => {
|
const hasExpandedPdf = () => {
|
||||||
return !!pdfFiles.filter(pdfFile => !!pdfFile.expanded).length
|
return !!pdfFiles.filter(pdfFile => !!pdfFile.expanded).length
|
||||||
}
|
}
|
||||||
@ -331,6 +397,10 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
setShowDrawToolBox(hasExpandedPdf())
|
setShowDrawToolBox(hasExpandedPdf())
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Changes the drawing tool
|
||||||
|
* @param drawTool to draw with
|
||||||
|
*/
|
||||||
const handleToolSelect = (drawTool: DrawTool) => {
|
const handleToolSelect = (drawTool: DrawTool) => {
|
||||||
// If clicked on the same tool, unselect
|
// If clicked on the same tool, unselect
|
||||||
if (drawTool.identifier === selectedTool?.identifier) {
|
if (drawTool.identifier === selectedTool?.identifier) {
|
||||||
@ -341,6 +411,9 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
setSelectedTool(drawTool)
|
setSelectedTool(drawTool)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Renders the pdf pages and drawing elements
|
||||||
|
*/
|
||||||
const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => {
|
const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => {
|
||||||
return (
|
return (
|
||||||
<Box sx={{
|
<Box sx={{
|
||||||
|
Loading…
Reference in New Issue
Block a user