diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx index 09c7d8f..b9fd162 100644 --- a/src/components/DrawPDFFields/index.tsx +++ b/src/components/DrawPDFFields/index.tsx @@ -22,6 +22,11 @@ import { AvatarIconButton } from '../UserAvatarIconButton' import { UserAvatar } from '../UserAvatar' import _ from 'lodash' +const MINIMUM_RECT_SIZE = { + width: 21, + height: 21 +} as const + const DEFAULT_START_SIZE = { width: 140, height: 40 @@ -91,6 +96,7 @@ export const DrawPDFFields = (props: Props) => { window.removeEventListener('pointerup', handlePointerUp) window.removeEventListener('pointercancel', handlePointerUp) } + // eslint-disable-next-line react-hooks/exhaustive-deps }, []) const refreshPdfFiles = () => { @@ -149,6 +155,18 @@ export const DrawPDFFields = (props: Props) => { * @param event Pointer event */ const handlePointerUp = () => { + sigitFiles.forEach((s) => { + s.pages?.forEach((p) => { + // Remove drawn fields below the MINIMUM_RECT_SIZE threshhold + p.drawnFields = p.drawnFields.filter( + (f) => + !( + f.width < MINIMUM_RECT_SIZE.width || + f.height < MINIMUM_RECT_SIZE.height + ) + ) + }) + }) setMouseState((prev) => { return { ...prev, @@ -157,6 +175,7 @@ export const DrawPDFFields = (props: Props) => { resizing: false } }) + refreshPdfFiles() } /** diff --git a/src/components/DrawPDFFields/style.module.scss b/src/components/DrawPDFFields/style.module.scss index 0a89fbf..7ae0de3 100644 --- a/src/components/DrawPDFFields/style.module.scss +++ b/src/components/DrawPDFFields/style.module.scss @@ -38,10 +38,6 @@ visibility: hidden; } - &.edited { - outline: 1px dotted #01aaad; - } - .resizeHandle { position: absolute; right: -5px; @@ -99,3 +95,15 @@ height: 21px; } } + +.signingRectangle { + position: absolute; + outline: 1px solid #01aaad; + z-index: 40; + background-color: #01aaad4b; + cursor: pointer; + + &.edited { + outline: 1px dotted #01aaad; + } +} diff --git a/src/components/MarkFormField/style.module.scss b/src/components/MarkFormField/style.module.scss index 0125140..686595f 100644 --- a/src/components/MarkFormField/style.module.scss +++ b/src/components/MarkFormField/style.module.scss @@ -122,7 +122,7 @@ align-items: center; grid-gap: 15px; box-shadow: 0 -2px 4px 0 rgb(0, 0, 0, 0.1); - max-width: 750px; + max-width: 450px; &.expanded { display: flex; diff --git a/src/components/PDFView/PdfMarkItem.tsx b/src/components/PDFView/PdfMarkItem.tsx index 0eaa49d..a1dddb3 100644 --- a/src/components/PDFView/PdfMarkItem.tsx +++ b/src/components/PDFView/PdfMarkItem.tsx @@ -32,7 +32,7 @@ const PdfMarkItem = forwardRef(
{ const handleMarkClick = (id: number) => { const nextMark = currentUserMarks.find((mark) => mark.mark.id === id) - setSelectedMark(nextMark!) - setSelectedMarkValue(nextMark?.mark.value ?? EMPTY) + + if (nextMark) handleCurrentUserMarkChange(nextMark) } const handleCurrentUserMarkChange = (mark: CurrentUserMark) => { diff --git a/src/pages/verify/style.module.scss b/src/pages/verify/style.module.scss index b63ba60..a89ea95 100644 --- a/src/pages/verify/style.module.scss +++ b/src/pages/verify/style.module.scss @@ -53,10 +53,6 @@ .mark { position: absolute; - - display: flex; - justify-content: center; - align-items: center; } [data-dev='true'] { diff --git a/src/utils/const.ts b/src/utils/const.ts index bf38404..522f242 100644 --- a/src/utils/const.ts +++ b/src/utils/const.ts @@ -119,6 +119,6 @@ export const SIGNATURE_PAD_OPTIONS = { } as const export const SIGNATURE_PAD_SIZE = { - width: 600, + width: 300, height: 300 }