|
|
|
@ -49,7 +49,7 @@ interface Props {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
const { selectedFiles } = props
|
|
|
|
|
const { selectedFiles, onDrawFieldsChange, users } = props
|
|
|
|
|
|
|
|
|
|
const [pdfFiles, setPdfFiles] = useState<PdfFile[]>([])
|
|
|
|
|
const [parsingPdf, setParsingPdf] = useState<boolean>(false)
|
|
|
|
@ -94,6 +94,15 @@ export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
/**
|
|
|
|
|
* 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[] = await toPdfFiles(selectedFiles)
|
|
|
|
|
|
|
|
|
|
setPdfFiles(pdfFiles)
|
|
|
|
|
}
|
|
|
|
|
if (selectedFiles) {
|
|
|
|
|
setParsingPdf(true)
|
|
|
|
|
|
|
|
|
@ -104,8 +113,8 @@ export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
}, [selectedFiles])
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (pdfFiles) props.onDrawFieldsChange(pdfFiles)
|
|
|
|
|
}, [pdfFiles])
|
|
|
|
|
if (pdfFiles) onDrawFieldsChange(pdfFiles)
|
|
|
|
|
}, [onDrawFieldsChange, pdfFiles])
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Drawing events
|
|
|
|
@ -132,12 +141,16 @@ export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
* @param event Mouse event
|
|
|
|
|
* @param page PdfPage where press happened
|
|
|
|
|
*/
|
|
|
|
|
const onMouseDown = (event: any, page: PdfPage) => {
|
|
|
|
|
const onMouseDown = (
|
|
|
|
|
event: React.MouseEvent<HTMLDivElement>,
|
|
|
|
|
page: PdfPage
|
|
|
|
|
) => {
|
|
|
|
|
// Proceed only if left click
|
|
|
|
|
if (event.button !== 0) return
|
|
|
|
|
|
|
|
|
|
// Only allow drawing if mouse is not over other drawn element
|
|
|
|
|
const isOverPdfImageWrapper = event.target.tagName === 'IMG'
|
|
|
|
|
const target = event.target as HTMLElement
|
|
|
|
|
const isOverPdfImageWrapper = target.tagName === 'IMG'
|
|
|
|
|
|
|
|
|
|
if (!selectedTool || !isOverPdfImageWrapper) {
|
|
|
|
|
return
|
|
|
|
@ -185,7 +198,10 @@ export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
* @param event Mouse event
|
|
|
|
|
* @param page PdfPage where moving is happening
|
|
|
|
|
*/
|
|
|
|
|
const onMouseMove = (event: any, page: PdfPage) => {
|
|
|
|
|
const onMouseMove = (
|
|
|
|
|
event: React.MouseEvent<HTMLDivElement>,
|
|
|
|
|
page: PdfPage
|
|
|
|
|
) => {
|
|
|
|
|
if (mouseState.clicked && selectedTool) {
|
|
|
|
|
const lastElementIndex = page.drawnFields.length - 1
|
|
|
|
|
const lastDrawnField = page.drawnFields[lastElementIndex]
|
|
|
|
@ -216,7 +232,7 @@ export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
* @param event Mouse event
|
|
|
|
|
* @param drawnField Which we are moving
|
|
|
|
|
*/
|
|
|
|
|
const onDrawnFieldMouseDown = (event: any) => {
|
|
|
|
|
const onDrawnFieldMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
|
|
|
|
|
event.stopPropagation()
|
|
|
|
|
|
|
|
|
|
// Proceed only if left click
|
|
|
|
@ -239,11 +255,15 @@ export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
* @param event Mouse event
|
|
|
|
|
* @param drawnField which we are moving
|
|
|
|
|
*/
|
|
|
|
|
const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => {
|
|
|
|
|
const onDranwFieldMouseMove = (
|
|
|
|
|
event: React.MouseEvent<HTMLDivElement>,
|
|
|
|
|
drawnField: DrawnField
|
|
|
|
|
) => {
|
|
|
|
|
const target = event.target as HTMLElement | null
|
|
|
|
|
if (mouseState.dragging) {
|
|
|
|
|
const { mouseX, mouseY, rect } = getMouseCoordinates(
|
|
|
|
|
event,
|
|
|
|
|
event.target.parentNode
|
|
|
|
|
target?.parentNode as HTMLElement
|
|
|
|
|
)
|
|
|
|
|
const coordsOffset = mouseState.coordsInWrapper
|
|
|
|
|
|
|
|
|
@ -272,7 +292,7 @@ export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
* @param event Mouse event
|
|
|
|
|
* @param drawnField which we are resizing
|
|
|
|
|
*/
|
|
|
|
|
const onResizeHandleMouseDown = (event: any) => {
|
|
|
|
|
const onResizeHandleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
|
|
|
|
|
// Proceed only if left click
|
|
|
|
|
if (event.button !== 0) return
|
|
|
|
|
|
|
|
|
@ -288,11 +308,15 @@ export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
* @param event Mouse event
|
|
|
|
|
* @param drawnField which we are resizing
|
|
|
|
|
*/
|
|
|
|
|
const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => {
|
|
|
|
|
const onResizeHandleMouseMove = (
|
|
|
|
|
event: React.MouseEvent<HTMLSpanElement | HTMLDivElement>,
|
|
|
|
|
drawnField: DrawnField
|
|
|
|
|
) => {
|
|
|
|
|
const target = event.target as HTMLElement | null
|
|
|
|
|
if (mouseState.resizing) {
|
|
|
|
|
const { mouseX, mouseY } = getMouseCoordinates(
|
|
|
|
|
event,
|
|
|
|
|
event.target.parentNode.parentNode
|
|
|
|
|
target?.parentNode?.parentNode as HTMLElement
|
|
|
|
|
)
|
|
|
|
|
|
|
|
|
|
const width = mouseX - drawnField.left
|
|
|
|
@ -313,7 +337,7 @@ export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
* @param drawnFileIndex drawn file index
|
|
|
|
|
*/
|
|
|
|
|
const onRemoveHandleMouseDown = (
|
|
|
|
|
event: any,
|
|
|
|
|
event: React.MouseEvent<HTMLDivElement | HTMLSpanElement>,
|
|
|
|
|
pdfFileIndex: number,
|
|
|
|
|
pdfPageIndex: number,
|
|
|
|
|
drawnFileIndex: number
|
|
|
|
@ -331,7 +355,9 @@ export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
* so select can work properly
|
|
|
|
|
* @param event Mouse event
|
|
|
|
|
*/
|
|
|
|
|
const onUserSelectHandleMouseDown = (event: any) => {
|
|
|
|
|
const onUserSelectHandleMouseDown = (
|
|
|
|
|
event: React.MouseEvent<HTMLDivElement>
|
|
|
|
|
) => {
|
|
|
|
|
event.stopPropagation()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
@ -341,8 +367,11 @@ export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
* @param customTarget mouse coordinates relative to this element, if not provided
|
|
|
|
|
* event.target will be used
|
|
|
|
|
*/
|
|
|
|
|
const getMouseCoordinates = (event: any, customTarget?: any) => {
|
|
|
|
|
const target = customTarget ? customTarget : event.target
|
|
|
|
|
const getMouseCoordinates = (
|
|
|
|
|
event: React.MouseEvent<HTMLDivElement | HTMLSpanElement>,
|
|
|
|
|
customTarget?: HTMLElement
|
|
|
|
|
) => {
|
|
|
|
|
const target = (customTarget ? customTarget : event.target) as HTMLElement
|
|
|
|
|
const rect = target.getBoundingClientRect()
|
|
|
|
|
const mouseX = event.clientX - rect.left //x position within the element.
|
|
|
|
|
const mouseY = event.clientY - rect.top //y position within the element.
|
|
|
|
@ -354,16 +383,6 @@ 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[] = await toPdfFiles(selectedFiles)
|
|
|
|
|
|
|
|
|
|
setPdfFiles(pdfFiles)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
*
|
|
|
|
|
* @returns if expanded pdf accordion is present
|
|
|
|
@ -477,7 +496,7 @@ export const DrawPDFFields = (props: Props) => {
|
|
|
|
|
labelId="counterparts"
|
|
|
|
|
label="Counterparts"
|
|
|
|
|
>
|
|
|
|
|
{props.users.map((user, index) => {
|
|
|
|
|
{users.map((user, index) => {
|
|
|
|
|
let displayValue = truncate(
|
|
|
|
|
hexToNpub(user.pubkey),
|
|
|
|
|
{
|
|
|
|
|