Remove small drawn fields #264

Merged
enes merged 3 commits from issue-234-empty-box-creation into staging 2024-11-29 14:41:16 +00:00
4 changed files with 32 additions and 9 deletions

View File

@ -22,6 +22,11 @@ import { AvatarIconButton } from '../UserAvatarIconButton'
import { UserAvatar } from '../UserAvatar' import { UserAvatar } from '../UserAvatar'
import _ from 'lodash' import _ from 'lodash'
const MINIMUM_RECT_SIZE = {
width: 21,
height: 21
} as const
const DEFAULT_START_SIZE = { const DEFAULT_START_SIZE = {
width: 140, width: 140,
height: 40 height: 40
@ -91,6 +96,7 @@ export const DrawPDFFields = (props: Props) => {
window.removeEventListener('pointerup', handlePointerUp) window.removeEventListener('pointerup', handlePointerUp)
window.removeEventListener('pointercancel', handlePointerUp) window.removeEventListener('pointercancel', handlePointerUp)
} }
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []) }, [])
const refreshPdfFiles = () => { const refreshPdfFiles = () => {
@ -149,6 +155,18 @@ export const DrawPDFFields = (props: Props) => {
* @param event Pointer event * @param event Pointer event
*/ */
const handlePointerUp = () => { 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) => { setMouseState((prev) => {
return { return {
...prev, ...prev,
@ -157,6 +175,7 @@ export const DrawPDFFields = (props: Props) => {
resizing: false resizing: false
} }
}) })
refreshPdfFiles()
} }
/** /**

View File

@ -38,10 +38,6 @@
visibility: hidden; visibility: hidden;
} }
&.edited {
outline: 1px dotted #01aaad;
}
.resizeHandle { .resizeHandle {
position: absolute; position: absolute;
right: -5px; right: -5px;
@ -99,3 +95,15 @@
height: 21px; height: 21px;
} }
} }
.signingRectangle {
position: absolute;
outline: 1px solid #01aaad;
z-index: 40;
background-color: #01aaad4b;
cursor: pointer;
&.edited {
outline: 1px dotted #01aaad;
}
}

View File

@ -32,7 +32,7 @@ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
<div <div
ref={ref} ref={ref}
onClick={handleClick} onClick={handleClick}
className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`} className={`file-mark ${styles.signingRectangle} ${isEdited() && styles.edited}`}
style={{ style={{
backgroundColor: selectedMark?.mark.npub backgroundColor: selectedMark?.mark.npub
? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b` ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`

View File

@ -53,10 +53,6 @@
.mark { .mark {
position: absolute; position: absolute;
display: flex;
justify-content: center;
align-items: center;
} }
[data-dev='true'] { [data-dev='true'] {