sigit/sigit.io
7
2
Fork 0
Code Issues 51 Pull Requests 3 Actions Packages Projects 1 Releases Wiki Activity

fix: add file and page index, hide select if not active

Browse Source
This commit is contained in:
enes 2024-09-19 15:02:19 +02:00
parent 70cca9dd10
commit 5f92906032
1 changed files with 123 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
src/components/DrawPDFFields/index.tsx
View File

@ -49,7 +49,19 @@ export const DrawPDFFields = (props: Props) => {
clicked: false
})
const [activeDrawField, setActiveDrawField] = useState<number>()
const [activeDrawnField, setActiveDrawnField] = useState<{
fileIndex: number
pageIndex: number
drawnFieldIndex: number
}>()
const isActiveDrawnField = (
fileIndex: number,
pageIndex: number,
drawnFieldIndex: number
) =>
activeDrawnField?.fileIndex === fileIndex &&
activeDrawnField?.pageIndex === pageIndex &&
activeDrawnField?.drawnFieldIndex === drawnFieldIndex
useEffect(() => {
if (selectedFiles) {
@ -103,7 +115,12 @@ export const DrawPDFFields = (props: Props) => {
* @param event Pointer event
* @param page PdfPage where press happened
*/
const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
const handlePointerDown = (
event: React.PointerEvent,
page: PdfPage,
fileIndex: number,
pageIndex: number
) => {
// Proceed only if left click
if (event.button !== 0) return
@ -124,6 +141,11 @@ export const DrawPDFFields = (props: Props) => {
page.drawnFields.push(newField)
setActiveDrawnField({
fileIndex,
pageIndex,
drawnFieldIndex: page.drawnFields.length - 1
})
setMouseState((prev) => {
return {
...prev,
@ -192,6 +214,8 @@ export const DrawPDFFields = (props: Props) => {
*/
const handleDrawnFieldPointerDown = (
event: React.PointerEvent,
fileIndex: number,
pageIndex: number,
drawnFieldIndex: number
) => {
event.stopPropagation()
@ -201,7 +225,7 @@ export const DrawPDFFields = (props: Props) => {
const drawingRectangleCoords = getPointerCoordinates(event)
setActiveDrawField(drawnFieldIndex)
setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
setMouseState({
dragging: true,
clicked: false,
@ -257,13 +281,15 @@ export const DrawPDFFields = (props: Props) => {
*/
const handleResizePointerDown = (
event: React.PointerEvent,
fileIndex: number,
pageIndex: number,
drawnFieldIndex: number
) => {
// Proceed only if left click
if (event.button !== 0) return
event.stopPropagation()
setActiveDrawField(drawnFieldIndex)
setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
setMouseState({
resizing: true
})
@ -372,7 +398,7 @@ export const DrawPDFFields = (props: Props) => {
handlePointerMove(event, page)
}}
onPointerDown={(event) => {
handlePointerDown(event, page)
handlePointerDown(event, page, fileIndex, pageIndex)
}}
draggable="false"
src={page.image}
@ -384,7 +410,12 @@ export const DrawPDFFields = (props: Props) => {
<div
key={drawnFieldIndex}
onPointerDown={(event) =>
handleDrawnFieldPointerDown(event, drawnFieldIndex)
handleDrawnFieldPointerDown(
event,
fileIndex,
pageIndex,
drawnFieldIndex
)
}
onPointerMove={(event) => {
handleDrawnFieldPointerMove(event, drawnField, page.width)
@ -405,7 +436,11 @@ export const DrawPDFFields = (props: Props) => {
touchAction: 'none',
opacity:
mouseState.dragging &&
activeDrawField === drawnFieldIndex
isActiveDrawnField(
fileIndex,
pageIndex,
drawnFieldIndex
)
? 0.8
: undefined
}}
@ -422,7 +457,12 @@ export const DrawPDFFields = (props: Props) => {
</div>
<span
onPointerDown={(event) =>
handleResizePointerDown(event, drawnFieldIndex)
handleResizePointerDown(
event,
fileIndex,
pageIndex,
drawnFieldIndex
)
}
onPointerMove={(event) => {
handleResizePointerMove(event, drawnField, page.width)
@ -431,7 +471,11 @@ export const DrawPDFFields = (props: Props) => {
style={{
background:
mouseState.resizing &&
activeDrawField === drawnFieldIndex
isActiveDrawnField(
fileIndex,
pageIndex,
drawnFieldIndex
)
? 'var(--primary-main)'
: undefined
}}
@ -449,75 +493,78 @@ export const DrawPDFFields = (props: Props) => {
>
<Close fontSize="small" />
</span>
<div
onPointerDown={handleUserSelectPointerDown}
className={styles.userSelect}
>
<FormControl fullWidth size="small">
<InputLabel id="counterparts">Counterpart</InputLabel>
<Select
value={
drawnField.counterpart ||
lastSigner ||
defaultSignerNpub ||
''
}
onChange={(event) => {
drawnField.counterpart = event.target.value
setLastSigner(event.target.value)
refreshPdfFiles()
}}
labelId="counterparts"
label="Counterparts"
sx={{
background: 'white'
}}
renderValue={(value) => renderCounterpartValue(value)}
>
{signers.map((signer, index) => {
const npub = hexToNpub(signer.pubkey)
let displayValue = truncate(npub, {
length: 16
})
const metadata = props.metadata[signer.pubkey]
if (metadata) {
displayValue = truncate(
metadata.name ||
metadata.display_name ||
metadata.username ||
npub,
{
length: 16
}
)
{isActiveDrawnField(
fileIndex,
pageIndex,
drawnFieldIndex
) && (
<div
onPointerDown={handleUserSelectPointerDown}
className={styles.userSelect}
>
<FormControl fullWidth size="small">
<InputLabel id="counterparts">Counterpart</InputLabel>
<Select
value={drawnField.counterpart}
onChange={(event) => {
drawnField.counterpart = event.target.value
setLastSigner(event.target.value)
refreshPdfFiles()
}}
labelId="counterparts"
label="Counterparts"
sx={{
background: 'white'
}}
renderValue={(value) =>
renderCounterpartValue(value)
}
>
{signers.map((signer, index) => {
const npub = hexToNpub(signer.pubkey)
let displayValue = truncate(npub, {
length: 16
})
return (
<MenuItem key={index} value={npub}>
<ListItemIcon>
<AvatarIconButton
src={metadata?.picture}
hexKey={signer.pubkey}
aria-label={`account of user ${displayValue}`}
color="inherit"
sx={{
padding: 0,
'> img': {
width: '30px',
height: '30px'
}
}}
/>
</ListItemIcon>
<ListItemText>{displayValue}</ListItemText>
</MenuItem>
)
})}
</Select>
</FormControl>
</div>
const metadata = props.metadata[signer.pubkey]
if (metadata) {
displayValue = truncate(
metadata.name ||
metadata.display_name ||
metadata.username ||
npub,
{
length: 16
}
)
}
return (
<MenuItem key={index} value={npub}>
<ListItemIcon>
<AvatarIconButton
src={metadata?.picture}
hexKey={signer.pubkey}
aria-label={`account of user ${displayValue}`}
color="inherit"
sx={{
padding: 0,
'> img': {
width: '30px',
height: '30px'
}
}}
/>
</ListItemIcon>
<ListItemText>{displayValue}</ListItemText>
</MenuItem>
)
})}
</Select>
</FormControl>
</div>
)}
</div>
)
})}