fix: add file and page index, hide select if not active
This commit is contained in:
parent
70cca9dd10
commit
5f92906032
@ -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,6 +493,11 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
>
|
>
|
||||||
<Close fontSize="small" />
|
<Close fontSize="small" />
|
||||||
</span>
|
</span>
|
||||||
|
{isActiveDrawnField(
|
||||||
|
fileIndex,
|
||||||
|
pageIndex,
|
||||||
|
drawnFieldIndex
|
||||||
|
) && (
|
||||||
<div
|
<div
|
||||||
onPointerDown={handleUserSelectPointerDown}
|
onPointerDown={handleUserSelectPointerDown}
|
||||||
className={styles.userSelect}
|
className={styles.userSelect}
|
||||||
@ -456,12 +505,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
<FormControl fullWidth size="small">
|
<FormControl fullWidth size="small">
|
||||||
<InputLabel id="counterparts">Counterpart</InputLabel>
|
<InputLabel id="counterparts">Counterpart</InputLabel>
|
||||||
<Select
|
<Select
|
||||||
value={
|
value={drawnField.counterpart}
|
||||||
drawnField.counterpart ||
|
|
||||||
lastSigner ||
|
|
||||||
defaultSignerNpub ||
|
|
||||||
''
|
|
||||||
}
|
|
||||||
onChange={(event) => {
|
onChange={(event) => {
|
||||||
drawnField.counterpart = event.target.value
|
drawnField.counterpart = event.target.value
|
||||||
setLastSigner(event.target.value)
|
setLastSigner(event.target.value)
|
||||||
@ -472,7 +516,9 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
sx={{
|
sx={{
|
||||||
background: 'white'
|
background: 'white'
|
||||||
}}
|
}}
|
||||||
renderValue={(value) => renderCounterpartValue(value)}
|
renderValue={(value) =>
|
||||||
|
renderCounterpartValue(value)
|
||||||
|
}
|
||||||
>
|
>
|
||||||
{signers.map((signer, index) => {
|
{signers.map((signer, index) => {
|
||||||
const npub = hexToNpub(signer.pubkey)
|
const npub = hexToNpub(signer.pubkey)
|
||||||
@ -518,6 +564,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
</Select>
|
</Select>
|
||||||
</FormControl>
|
</FormControl>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
Loading…
Reference in New Issue
Block a user