Releasing new design #161
@ -48,7 +48,6 @@ export const DrawPDFFields = (props: Props) => {
|
||||
|
||||
const [pdfFiles, setPdfFiles] = useState<PdfFile[]>([])
|
||||
const [parsingPdf, setParsingPdf] = useState<boolean>(false)
|
||||
const [showDrawToolBox] = useState<boolean>(true)
|
||||
|
||||
const [selectedTool, setSelectedTool] = useState<DrawTool | null>()
|
||||
const [toolbox] = useState<DrawTool[]>([
|
||||
@ -144,10 +143,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
// Proceed only if left click
|
||||
if (event.button !== 0) return
|
||||
|
||||
// Only allow drawing if mouse is not over other drawn element
|
||||
const isOverPdfImageWrapper = event.currentTarget.tagName === 'IMG'
|
||||
|
||||
if (!selectedTool || !isOverPdfImageWrapper) {
|
||||
if (!selectedTool) {
|
||||
return
|
||||
}
|
||||
|
||||
@ -199,8 +195,14 @@ export const DrawPDFFields = (props: Props) => {
|
||||
) => {
|
||||
if (mouseState.clicked && selectedTool) {
|
||||
const lastElementIndex = page.drawnFields.length - 1
|
||||
|
||||
const lastDrawnField = page.drawnFields[lastElementIndex]
|
||||
|
||||
// Return early if we don't have lastDrawnField
|
||||
// Issue noticed in the console when dragging out of bounds
|
||||
// to the page below (without releaseing mouse click)
|
||||
if (!lastDrawnField) return
|
||||
|
||||
const { mouseX, mouseY } = getMouseCoordinates(event)
|
||||
|
||||
const width = mouseX - lastDrawnField.left
|
||||
@ -252,14 +254,14 @@ export const DrawPDFFields = (props: Props) => {
|
||||
* @param event Mouse event
|
||||
* @param drawnField which we are moving
|
||||
*/
|
||||
const onDranwFieldMouseMove = (
|
||||
const onDrawnFieldMouseMove = (
|
||||
event: React.MouseEvent<HTMLDivElement, MouseEvent>,
|
||||
drawnField: DrawnField
|
||||
) => {
|
||||
if (mouseState.dragging) {
|
||||
const { mouseX, mouseY, rect } = getMouseCoordinates(
|
||||
event,
|
||||
event.currentTarget.parentNode as HTMLElement
|
||||
event.currentTarget.parentElement
|
||||
)
|
||||
const coordsOffset = mouseState.coordsInWrapper
|
||||
|
||||
@ -313,7 +315,10 @@ export const DrawPDFFields = (props: Props) => {
|
||||
if (mouseState.resizing) {
|
||||
const { mouseX, mouseY } = getMouseCoordinates(
|
||||
event,
|
||||
event.currentTarget.parentNode as HTMLElement
|
||||
// currentTarget = span handle
|
||||
// 1st parent = drawnField
|
||||
// 2nd parent = img
|
||||
event.currentTarget.parentElement?.parentElement
|
||||
)
|
||||
|
||||
const width = mouseX - drawnField.left
|
||||
@ -366,7 +371,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
*/
|
||||
const getMouseCoordinates = (
|
||||
event: React.MouseEvent<HTMLElement, MouseEvent>,
|
||||
customTarget?: HTMLElement
|
||||
customTarget?: HTMLElement | null
|
||||
) => {
|
||||
const target = customTarget ? customTarget : event.currentTarget
|
||||
const rect = target.getBoundingClientRect()
|
||||
@ -405,16 +410,15 @@ export const DrawPDFFields = (props: Props) => {
|
||||
<div
|
||||
key={pdfPageIndex}
|
||||
className={`${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
|
||||
>
|
||||
<img
|
||||
onMouseMove={(event) => {
|
||||
onMouseMove(event, page)
|
||||
}}
|
||||
onMouseDown={(event) => {
|
||||
onMouseDown(event, page)
|
||||
}}
|
||||
>
|
||||
<img
|
||||
draggable="false"
|
||||
style={{ width: '100%' }}
|
||||
src={page.image}
|
||||
/>
|
||||
|
||||
@ -424,7 +428,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
key={drawnFieldIndex}
|
||||
onMouseDown={onDrawnFieldMouseDown}
|
||||
onMouseMove={(event) => {
|
||||
onDranwFieldMouseMove(event, drawnField)
|
||||
onDrawnFieldMouseMove(event, drawnField)
|
||||
}}
|
||||
className={styles.drawingRectangle}
|
||||
style={{
|
||||
@ -529,7 +533,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
<div className={styles.view}>
|
||||
{pdfFiles.map((pdfFile, pdfFileIndex: number) => {
|
||||
return (
|
||||
<>
|
||||
<div key={pdfFile.file.name + pdfFileIndex}>
|
||||
<div className={styles.fileWrapper}>
|
||||
{getPdfPages(pdfFile, pdfFileIndex)}
|
||||
</div>
|
||||
@ -543,11 +547,10 @@ export const DrawPDFFields = (props: Props) => {
|
||||
File Separator
|
||||
</Divider>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
|
||||
{showDrawToolBox && (
|
||||
<Box className={styles.drawToolBoxContainer}>
|
||||
<Box className={styles.drawToolBox}>
|
||||
{toolbox
|
||||
@ -568,7 +571,6 @@ export const DrawPDFFields = (props: Props) => {
|
||||
})}
|
||||
</Box>
|
||||
</Box>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
@ -93,6 +93,13 @@
|
||||
border: 1px solid rgb(160, 160, 160);
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
|
||||
// Increase the area a bit so it's easier to click
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: -14px;
|
||||
}
|
||||
}
|
||||
|
||||
.removeHandle {
|
||||
|
Loading…
Reference in New Issue
Block a user