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