Compare commits
No commits in common. "e33996c1f998b54a94079f28118b406e0fb75b59" and "6ba3b6ec89455bf481b0568c941721e20d61083a" have entirely different histories.
e33996c1f9
...
6ba3b6ec89
10
package-lock.json
generated
10
package-lock.json
generated
@ -21,7 +21,6 @@
|
||||
"@mui/material": "5.15.11",
|
||||
"@noble/hashes": "^1.4.0",
|
||||
"@nostr-dev-kit/ndk": "2.5.0",
|
||||
"@pdf-lib/fontkit": "^1.1.1",
|
||||
"@reduxjs/toolkit": "2.2.1",
|
||||
"axios": "^1.7.4",
|
||||
"crypto-hash": "3.0.0",
|
||||
@ -1750,15 +1749,6 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@pdf-lib/fontkit": {
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmjs.org/@pdf-lib/fontkit/-/fontkit-1.1.1.tgz",
|
||||
"integrity": "sha512-KjMd7grNapIWS/Dm0gvfHEilSyAmeLvrEGVcqLGi0VYebuqqzTbgF29efCx7tvx+IEbG3zQciRSWl3GkUSvjZg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"pako": "^1.0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/@pdf-lib/standard-fonts": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@pdf-lib/standard-fonts/-/standard-fonts-1.0.0.tgz",
|
||||
|
||||
@ -31,7 +31,6 @@
|
||||
"@mui/material": "5.15.11",
|
||||
"@noble/hashes": "^1.4.0",
|
||||
"@nostr-dev-kit/ndk": "2.5.0",
|
||||
"@pdf-lib/fontkit": "^1.1.1",
|
||||
"@reduxjs/toolkit": "2.2.1",
|
||||
"axios": "^1.7.4",
|
||||
"crypto-hash": "3.0.0",
|
||||
|
||||
20
src/App.scss
20
src/App.scss
@ -100,10 +100,10 @@ li {
|
||||
// - first-child Header height, default body padding, and center content border (10px) and padding (10px)
|
||||
// - others We don't include border and padding and scroll to the top of the image
|
||||
&:first-child {
|
||||
scroll-margin-top: $body-vertical-padding + 20px;
|
||||
scroll-margin-top: $header-height + $body-vertical-padding + 20px;
|
||||
}
|
||||
&:not(:first-child) {
|
||||
scroll-margin-top: $body-vertical-padding;
|
||||
scroll-margin-top: $header-height + $body-vertical-padding;
|
||||
}
|
||||
}
|
||||
|
||||
@ -135,20 +135,14 @@ li {
|
||||
// Consistent styling for every file mark
|
||||
// Reverts some of the design defaults for font
|
||||
.file-mark {
|
||||
font-family: 'Roboto';
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
letter-spacing: normal;
|
||||
line-height: 1;
|
||||
|
||||
font-family: Arial;
|
||||
font-size: 16px;
|
||||
font-weight: normal;
|
||||
color: black;
|
||||
outline: 1px solid transparent;
|
||||
letter-spacing: normal;
|
||||
border: 1px solid transparent;
|
||||
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
|
||||
scroll-margin-top: $body-vertical-padding;
|
||||
scroll-margin-top: $header-height + $body-vertical-padding;
|
||||
}
|
||||
|
||||
[data-dev='true'] {
|
||||
|
||||
Binary file not shown.
@ -28,17 +28,14 @@ import {
|
||||
} from '../../routes'
|
||||
import {
|
||||
clearAuthToken,
|
||||
getProfileUsername,
|
||||
hexToNpub,
|
||||
saveNsecBunkerDelegatedKey
|
||||
saveNsecBunkerDelegatedKey,
|
||||
shorten
|
||||
} from '../../utils'
|
||||
import styles from './style.module.scss'
|
||||
import { setUserRobotImage } from '../../store/userRobotImage/action'
|
||||
import { Container } from '../Container'
|
||||
import { ButtonIcon } from '../ButtonIcon'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import { faClose } from '@fortawesome/free-solid-svg-icons'
|
||||
import useMediaQuery from '@mui/material/useMediaQuery'
|
||||
|
||||
const metadataController = MetadataController.getInstance()
|
||||
|
||||
@ -58,8 +55,9 @@ export const AppBar = () => {
|
||||
useEffect(() => {
|
||||
if (metadataState) {
|
||||
if (metadataState.content) {
|
||||
const profileMetadata = JSON.parse(metadataState.content)
|
||||
const { picture } = profileMetadata
|
||||
const { picture, display_name, name } = JSON.parse(
|
||||
metadataState.content
|
||||
)
|
||||
|
||||
if (picture || userRobotImage) {
|
||||
setUserAvatar(picture || userRobotImage)
|
||||
@ -69,7 +67,7 @@ export const AppBar = () => {
|
||||
? hexToNpub(authState.usersPubkey)
|
||||
: ''
|
||||
|
||||
setUsername(getProfileUsername(npub, profileMetadata))
|
||||
setUsername(shorten(display_name || name || npub, 7))
|
||||
} else {
|
||||
setUserAvatar(userRobotImage || '')
|
||||
setUsername('')
|
||||
@ -120,152 +118,125 @@ export const AppBar = () => {
|
||||
}
|
||||
const isAuthenticated = authState?.loggedIn === true
|
||||
|
||||
const matches = useMediaQuery('(max-width:767px)')
|
||||
const [isBannerVisible, setIsBannerVisible] = useState(true)
|
||||
const handleBannerHide = () => {
|
||||
setIsBannerVisible(false)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{isAuthenticated && isBannerVisible && (
|
||||
<div className={styles.banner}>
|
||||
<Container>
|
||||
<div className={styles.bannerInner}>
|
||||
<p className={styles.bannerText}>
|
||||
SIGit is currently Alpha software (available for internal
|
||||
testing), use at your own risk!
|
||||
</p>
|
||||
<AppBarMui
|
||||
position="fixed"
|
||||
className={styles.AppBar}
|
||||
sx={{
|
||||
boxShadow: 'none'
|
||||
}}
|
||||
>
|
||||
<Container>
|
||||
<Toolbar className={styles.toolbar} disableGutters={true}>
|
||||
<Box className={styles.logoWrapper}>
|
||||
<img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
|
||||
</Box>
|
||||
|
||||
<Box className={styles.rightSideBox}>
|
||||
{!isAuthenticated && (
|
||||
<Button
|
||||
aria-label={`close banner`}
|
||||
variant="text"
|
||||
onClick={handleBannerHide}
|
||||
startIcon={<ButtonIcon />}
|
||||
onClick={() => {
|
||||
navigate(appPublicRoutes.nostr)
|
||||
}}
|
||||
variant="contained"
|
||||
>
|
||||
<FontAwesomeIcon icon={faClose} />
|
||||
LOGIN
|
||||
</Button>
|
||||
</div>
|
||||
</Container>
|
||||
</div>
|
||||
)}
|
||||
<AppBarMui
|
||||
position={matches ? 'sticky' : 'static'}
|
||||
className={styles.AppBar}
|
||||
sx={{
|
||||
boxShadow: 'none'
|
||||
}}
|
||||
>
|
||||
<Container>
|
||||
<Toolbar className={styles.toolbar} disableGutters={true}>
|
||||
<Box className={styles.logoWrapper}>
|
||||
<img src="/logo.svg" alt="Logo" onClick={() => navigate('/')} />
|
||||
</Box>
|
||||
)}
|
||||
|
||||
<Box className={styles.rightSideBox}>
|
||||
{!isAuthenticated && (
|
||||
<Button
|
||||
startIcon={<ButtonIcon />}
|
||||
onClick={() => {
|
||||
navigate(appPublicRoutes.nostr)
|
||||
{isAuthenticated && (
|
||||
<>
|
||||
<Username
|
||||
username={username}
|
||||
avatarContent={userAvatar}
|
||||
handleClick={handleOpenUserMenu}
|
||||
/>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center'
|
||||
}}
|
||||
variant="contained"
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'center'
|
||||
}}
|
||||
open={!!anchorElUser}
|
||||
onClose={handleCloseUserMenu}
|
||||
>
|
||||
LOGIN
|
||||
</Button>
|
||||
)}
|
||||
<MenuItem
|
||||
sx={{
|
||||
justifyContent: 'center',
|
||||
display: { md: 'none' },
|
||||
fontWeight: 500,
|
||||
fontSize: '14px',
|
||||
color: 'var(--text-color)'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6">{username}</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={handleProfile}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Profile
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setAnchorElUser(null)
|
||||
|
||||
{isAuthenticated && (
|
||||
<>
|
||||
<Username
|
||||
username={username}
|
||||
avatarContent={userAvatar}
|
||||
handleClick={handleOpenUserMenu}
|
||||
/>
|
||||
<Menu
|
||||
id="menu-appbar"
|
||||
anchorEl={anchorElUser}
|
||||
anchorOrigin={{
|
||||
vertical: 'bottom',
|
||||
horizontal: 'center'
|
||||
navigate(appPrivateRoutes.settings)
|
||||
}}
|
||||
keepMounted
|
||||
transformOrigin={{
|
||||
vertical: 'top',
|
||||
horizontal: 'center'
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
open={!!anchorElUser}
|
||||
onClose={handleCloseUserMenu}
|
||||
>
|
||||
Settings
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setAnchorElUser(null)
|
||||
|
||||
navigate(appPublicRoutes.verify)
|
||||
}}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Verify
|
||||
</MenuItem>
|
||||
<Link
|
||||
to={appPublicRoutes.source}
|
||||
target="_blank"
|
||||
style={{ color: 'inherit', textDecoration: 'inherit' }}
|
||||
>
|
||||
<MenuItem
|
||||
sx={{
|
||||
justifyContent: 'center',
|
||||
display: { md: 'none' },
|
||||
fontWeight: 500,
|
||||
fontSize: '14px',
|
||||
color: 'var(--text-color)'
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6">{username}</Typography>
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={handleProfile}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Profile
|
||||
Source
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setAnchorElUser(null)
|
||||
|
||||
navigate(appPrivateRoutes.settings)
|
||||
}}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Settings
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
onClick={() => {
|
||||
setAnchorElUser(null)
|
||||
|
||||
navigate(appPublicRoutes.verify)
|
||||
}}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Verify
|
||||
</MenuItem>
|
||||
<Link
|
||||
to={appPublicRoutes.source}
|
||||
target="_blank"
|
||||
style={{ color: 'inherit', textDecoration: 'inherit' }}
|
||||
>
|
||||
<MenuItem
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Source
|
||||
</MenuItem>
|
||||
</Link>
|
||||
<MenuItem
|
||||
onClick={handleLogout}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBarMui>
|
||||
</>
|
||||
</Link>
|
||||
<MenuItem
|
||||
onClick={handleLogout}
|
||||
sx={{
|
||||
justifyContent: 'center'
|
||||
}}
|
||||
>
|
||||
Logout
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
</Toolbar>
|
||||
</Container>
|
||||
</AppBarMui>
|
||||
)
|
||||
}
|
||||
|
||||
@ -34,42 +34,3 @@
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
color: #ffffff;
|
||||
background-color: $primary-main;
|
||||
}
|
||||
|
||||
.bannerInner {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding-block: 10px;
|
||||
z-index: 1;
|
||||
|
||||
width: 100%;
|
||||
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
|
||||
button {
|
||||
min-width: 44px;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.active,
|
||||
&:focus-within {
|
||||
background: $primary-main;
|
||||
color: inherit;
|
||||
|
||||
button {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bannerText {
|
||||
margin-left: 54px;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@ -11,16 +11,15 @@ import styles from './style.module.scss'
|
||||
import React, { useEffect, useState } from 'react'
|
||||
import { ProfileMetadata, User, UserRole } from '../../types'
|
||||
import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
|
||||
import { hexToNpub, npubToHex, getProfileUsername } from '../../utils'
|
||||
import { SigitFile } from '../../utils/file'
|
||||
import { getToolboxLabelByMarkType } from '../../utils/mark'
|
||||
import { truncate } from 'lodash'
|
||||
import { settleAllFullfilfedPromises, hexToNpub, npubToHex } from '../../utils'
|
||||
import { getSigitFile, SigitFile } from '../../utils/file'
|
||||
import { FileDivider } from '../FileDivider'
|
||||
import { ExtensionFileBox } from '../ExtensionFileBox'
|
||||
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf'
|
||||
import { inPx } from '../../utils/pdf'
|
||||
import { useScale } from '../../hooks/useScale'
|
||||
import { AvatarIconButton } from '../UserAvatarIconButton'
|
||||
import { UserAvatar } from '../UserAvatar'
|
||||
import _ from 'lodash'
|
||||
import { LoadingSpinner } from '../LoadingSpinner'
|
||||
|
||||
const DEFAULT_START_SIZE = {
|
||||
width: 140,
|
||||
@ -28,50 +27,52 @@ const DEFAULT_START_SIZE = {
|
||||
} as const
|
||||
|
||||
interface Props {
|
||||
selectedFiles: File[]
|
||||
users: User[]
|
||||
metadata: { [key: string]: ProfileMetadata }
|
||||
sigitFiles: SigitFile[]
|
||||
setSigitFiles: React.Dispatch<React.SetStateAction<SigitFile[]>>
|
||||
onDrawFieldsChange: (sigitFiles: SigitFile[]) => void
|
||||
selectedTool?: DrawTool
|
||||
}
|
||||
|
||||
export const DrawPDFFields = (props: Props) => {
|
||||
const { selectedTool, sigitFiles, setSigitFiles, users } = props
|
||||
|
||||
const signers = users.filter((u) => u.role === UserRole.signer)
|
||||
const defaultSignerNpub = signers.length ? hexToNpub(signers[0].pubkey) : ''
|
||||
const [lastSigner, setLastSigner] = useState(defaultSignerNpub)
|
||||
/**
|
||||
* Return first pubkey that is present in the signers list
|
||||
* @param pubkeys
|
||||
* @returns available pubkey or empty string
|
||||
*/
|
||||
const getAvailableSigner = (...pubkeys: string[]) => {
|
||||
const availableSigner: string | undefined = pubkeys.find((pubkey) =>
|
||||
signers.some((s) => s.pubkey === npubToHex(pubkey))
|
||||
)
|
||||
return availableSigner || ''
|
||||
}
|
||||
|
||||
const { selectedFiles, selectedTool, onDrawFieldsChange, users } = props
|
||||
const { to, from } = useScale()
|
||||
|
||||
const [sigitFiles, setSigitFiles] = useState<SigitFile[]>([])
|
||||
const [parsingPdf, setIsParsing] = useState<boolean>(false)
|
||||
|
||||
const [mouseState, setMouseState] = useState<MouseState>({
|
||||
clicked: false
|
||||
})
|
||||
|
||||
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
|
||||
const [activeDrawField, setActiveDrawField] = useState<number>()
|
||||
|
||||
useEffect(() => {
|
||||
if (selectedFiles) {
|
||||
/**
|
||||
* Reads the binary files and converts to internal file type
|
||||
* and sets to a state (adds images if it's a PDF)
|
||||
*/
|
||||
const parsePages = async () => {
|
||||
const files = await settleAllFullfilfedPromises(
|
||||
selectedFiles,
|
||||
getSigitFile
|
||||
)
|
||||
|
||||
setSigitFiles(files)
|
||||
}
|
||||
|
||||
setIsParsing(true)
|
||||
|
||||
parsePages().finally(() => {
|
||||
setIsParsing(false)
|
||||
})
|
||||
}
|
||||
}, [selectedFiles])
|
||||
|
||||
useEffect(() => {
|
||||
if (sigitFiles) onDrawFieldsChange(sigitFiles)
|
||||
}, [onDrawFieldsChange, sigitFiles])
|
||||
|
||||
/**
|
||||
* Drawing events
|
||||
@ -98,12 +99,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
* @param event Pointer event
|
||||
* @param page PdfPage where press happened
|
||||
*/
|
||||
const handlePointerDown = (
|
||||
event: React.PointerEvent,
|
||||
page: PdfPage,
|
||||
fileIndex: number,
|
||||
pageIndex: number
|
||||
) => {
|
||||
const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
|
||||
// Proceed only if left click
|
||||
if (event.button !== 0) return
|
||||
|
||||
@ -118,17 +114,12 @@ export const DrawPDFFields = (props: Props) => {
|
||||
top: to(page.width, y),
|
||||
width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
|
||||
height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
|
||||
counterpart: getAvailableSigner(lastSigner, defaultSignerNpub),
|
||||
counterpart: '',
|
||||
type: selectedTool.identifier
|
||||
}
|
||||
|
||||
page.drawnFields.push(newField)
|
||||
|
||||
setActiveDrawnField({
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex: page.drawnFields.length - 1
|
||||
})
|
||||
setMouseState((prev) => {
|
||||
return {
|
||||
...prev,
|
||||
@ -197,8 +188,6 @@ export const DrawPDFFields = (props: Props) => {
|
||||
*/
|
||||
const handleDrawnFieldPointerDown = (
|
||||
event: React.PointerEvent,
|
||||
fileIndex: number,
|
||||
pageIndex: number,
|
||||
drawnFieldIndex: number
|
||||
) => {
|
||||
event.stopPropagation()
|
||||
@ -208,7 +197,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
|
||||
const drawingRectangleCoords = getPointerCoordinates(event)
|
||||
|
||||
setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
|
||||
setActiveDrawField(drawnFieldIndex)
|
||||
setMouseState({
|
||||
dragging: true,
|
||||
clicked: false,
|
||||
@ -264,15 +253,13 @@ 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()
|
||||
|
||||
setActiveDrawnField({ fileIndex, pageIndex, drawnFieldIndex })
|
||||
setActiveDrawField(drawnFieldIndex)
|
||||
setMouseState({
|
||||
resizing: true
|
||||
})
|
||||
@ -381,7 +368,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
handlePointerMove(event, page)
|
||||
}}
|
||||
onPointerDown={(event) => {
|
||||
handlePointerDown(event, page, fileIndex, pageIndex)
|
||||
handlePointerDown(event, page)
|
||||
}}
|
||||
draggable="false"
|
||||
src={page.image}
|
||||
@ -393,12 +380,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
<div
|
||||
key={drawnFieldIndex}
|
||||
onPointerDown={(event) =>
|
||||
handleDrawnFieldPointerDown(
|
||||
event,
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
)
|
||||
handleDrawnFieldPointerDown(event, drawnFieldIndex)
|
||||
}
|
||||
onPointerMove={(event) => {
|
||||
handleDrawnFieldPointerMove(event, drawnField, page.width)
|
||||
@ -408,7 +390,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
backgroundColor: drawnField.counterpart
|
||||
? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}4b`
|
||||
: undefined,
|
||||
outlineColor: drawnField.counterpart
|
||||
borderColor: drawnField.counterpart
|
||||
? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}`
|
||||
: undefined,
|
||||
left: inPx(from(page.width, drawnField.left)),
|
||||
@ -419,33 +401,14 @@ export const DrawPDFFields = (props: Props) => {
|
||||
touchAction: 'none',
|
||||
opacity:
|
||||
mouseState.dragging &&
|
||||
isActiveDrawnField(
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
)
|
||||
activeDrawField === drawnFieldIndex
|
||||
? 0.8
|
||||
: undefined
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={`file-mark ${styles.placeholder}`}
|
||||
style={{
|
||||
fontFamily: FONT_TYPE,
|
||||
fontSize: inPx(from(page.width, FONT_SIZE))
|
||||
}}
|
||||
>
|
||||
{getToolboxLabelByMarkType(drawnField.type) ||
|
||||
'placeholder'}
|
||||
</div>
|
||||
<span
|
||||
onPointerDown={(event) =>
|
||||
handleResizePointerDown(
|
||||
event,
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
)
|
||||
handleResizePointerDown(event, drawnFieldIndex)
|
||||
}
|
||||
onPointerMove={(event) => {
|
||||
handleResizePointerMove(event, drawnField, page.width)
|
||||
@ -454,11 +417,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
style={{
|
||||
background:
|
||||
mouseState.resizing &&
|
||||
isActiveDrawnField(
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
)
|
||||
activeDrawField === drawnFieldIndex
|
||||
? 'var(--primary-main)'
|
||||
: undefined
|
||||
}}
|
||||
@ -476,59 +435,56 @@ export const DrawPDFFields = (props: Props) => {
|
||||
>
|
||||
<Close fontSize="small" />
|
||||
</span>
|
||||
{!isActiveDrawnField(
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
) &&
|
||||
!!drawnField.counterpart && (
|
||||
<div className={styles.counterpartAvatar}>
|
||||
<UserAvatar
|
||||
pubkey={npubToHex(drawnField.counterpart)!}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{isActiveDrawnField(
|
||||
fileIndex,
|
||||
pageIndex,
|
||||
drawnFieldIndex
|
||||
) && (
|
||||
<div
|
||||
onPointerDown={handleUserSelectPointerDown}
|
||||
className={styles.userSelect}
|
||||
>
|
||||
<FormControl fullWidth size="small">
|
||||
<InputLabel id="counterparts">Counterpart</InputLabel>
|
||||
<Select
|
||||
value={getAvailableSigner(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)
|
||||
const metadata = props.metadata[signer.pubkey]
|
||||
const displayValue = getProfileUsername(
|
||||
npub,
|
||||
metadata
|
||||
)
|
||||
<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
|
||||
refreshPdfFiles()
|
||||
}}
|
||||
labelId="counterparts"
|
||||
label="Counterparts"
|
||||
sx={{
|
||||
background: 'white'
|
||||
}}
|
||||
renderValue={(value) => renderCounterpartValue(value)}
|
||||
>
|
||||
{users
|
||||
.filter((u) => u.role === UserRole.signer)
|
||||
.map((user, index) => {
|
||||
const npub = hexToNpub(user.pubkey)
|
||||
let displayValue = truncate(npub, {
|
||||
length: 16
|
||||
})
|
||||
|
||||
const metadata = props.metadata[user.pubkey]
|
||||
|
||||
if (metadata) {
|
||||
displayValue = truncate(
|
||||
metadata.name ||
|
||||
metadata.display_name ||
|
||||
metadata.username ||
|
||||
npub,
|
||||
{
|
||||
length: 16
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<MenuItem key={index} value={npub}>
|
||||
<MenuItem
|
||||
key={index}
|
||||
value={hexToNpub(user.pubkey)}
|
||||
>
|
||||
<ListItemIcon>
|
||||
<AvatarIconButton
|
||||
src={metadata?.picture}
|
||||
hexKey={signer.pubkey}
|
||||
hexKey={user.pubkey}
|
||||
aria-label={`account of user ${displayValue}`}
|
||||
color="inherit"
|
||||
sx={{
|
||||
@ -544,10 +500,9 @@ export const DrawPDFFields = (props: Props) => {
|
||||
</MenuItem>
|
||||
)
|
||||
})}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
@ -558,19 +513,28 @@ export const DrawPDFFields = (props: Props) => {
|
||||
)
|
||||
}
|
||||
|
||||
const renderCounterpartValue = (npub: string) => {
|
||||
let displayValue = _.truncate(npub, { length: 16 })
|
||||
const renderCounterpartValue = (value: string) => {
|
||||
const user = users.find((u) => u.pubkey === npubToHex(value))
|
||||
if (user) {
|
||||
let displayValue = truncate(value, {
|
||||
length: 16
|
||||
})
|
||||
|
||||
const signer = signers.find((u) => u.pubkey === npubToHex(npub))
|
||||
if (signer) {
|
||||
const metadata = props.metadata[signer.pubkey]
|
||||
displayValue = getProfileUsername(npub, metadata)
|
||||
const metadata = props.metadata[user.pubkey]
|
||||
|
||||
if (metadata) {
|
||||
displayValue = truncate(
|
||||
metadata.name || metadata.display_name || metadata.username || value,
|
||||
{
|
||||
length: 16
|
||||
}
|
||||
)
|
||||
}
|
||||
return (
|
||||
<div className={styles.counterpartSelectValue}>
|
||||
<>
|
||||
<AvatarIconButton
|
||||
src={props.metadata[signer.pubkey]?.picture}
|
||||
hexKey={signer.pubkey || undefined}
|
||||
src={props.metadata[user.pubkey]?.picture}
|
||||
hexKey={npubToHex(user.pubkey) || undefined}
|
||||
sx={{
|
||||
padding: 0,
|
||||
marginRight: '6px',
|
||||
@ -581,11 +545,19 @@ export const DrawPDFFields = (props: Props) => {
|
||||
}}
|
||||
/>
|
||||
{displayValue}
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return displayValue
|
||||
return value
|
||||
}
|
||||
|
||||
if (parsingPdf) {
|
||||
return <LoadingSpinner variant="small" />
|
||||
}
|
||||
|
||||
if (!sigitFiles.length) {
|
||||
return ''
|
||||
}
|
||||
|
||||
return (
|
||||
@ -606,7 +578,7 @@ export const DrawPDFFields = (props: Props) => {
|
||||
<ExtensionFileBox extension={file.extension} />
|
||||
)}
|
||||
</div>
|
||||
{i < sigitFiles.length - 1 && <FileDivider />}
|
||||
{i < selectedFiles.length - 1 && <FileDivider />}
|
||||
</React.Fragment>
|
||||
)
|
||||
})}
|
||||
|
||||
@ -13,15 +13,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.placeholder {
|
||||
position: absolute;
|
||||
opacity: 0.5;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.drawingRectangle {
|
||||
position: absolute;
|
||||
outline: 1px solid #01aaad;
|
||||
border: 1px solid #01aaad;
|
||||
z-index: 50;
|
||||
background-color: #01aaad4b;
|
||||
cursor: pointer;
|
||||
@ -35,7 +29,7 @@
|
||||
}
|
||||
|
||||
&.edited {
|
||||
outline: 1px dotted #01aaad;
|
||||
border: 1px dotted #01aaad;
|
||||
}
|
||||
|
||||
.resizeHandle {
|
||||
@ -84,14 +78,3 @@
|
||||
padding: 5px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.counterpartSelectValue {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.counterpartAvatar {
|
||||
img {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -36,7 +36,7 @@ const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
|
||||
backgroundColor: selectedMark?.mark.npub
|
||||
? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
|
||||
: undefined,
|
||||
outlineColor: selectedMark?.mark.npub
|
||||
borderColor: selectedMark?.mark.npub
|
||||
? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}`
|
||||
: undefined,
|
||||
left: inPx(from(pageWidth, location.left)),
|
||||
|
||||
@ -33,8 +33,7 @@ const PdfPageItem = ({
|
||||
useEffect(() => {
|
||||
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
|
||||
markRefs.current[selectedMark.id]?.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'center'
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}, [selectedMark])
|
||||
|
||||
@ -5,7 +5,7 @@ import { AvatarIconButton } from '../UserAvatarIconButton'
|
||||
import { Link } from 'react-router-dom'
|
||||
import { useProfileMetadata } from '../../hooks/useProfileMetadata'
|
||||
import { Tooltip } from '@mui/material'
|
||||
import { getProfileUsername } from '../../utils'
|
||||
import { shorten } from '../../utils'
|
||||
import { TooltipChild } from '../TooltipChild'
|
||||
|
||||
interface UserAvatarProps {
|
||||
@ -22,7 +22,7 @@ export const UserAvatar = ({
|
||||
isNameVisible = false
|
||||
}: UserAvatarProps) => {
|
||||
const profile = useProfileMetadata(pubkey)
|
||||
const name = getProfileUsername(pubkey, profile)
|
||||
const name = profile?.display_name || profile?.name || shorten(pubkey)
|
||||
const image = profile?.picture
|
||||
|
||||
return (
|
||||
|
||||
@ -42,22 +42,15 @@
|
||||
.sides {
|
||||
@media only screen and (min-width: 768px) {
|
||||
position: sticky;
|
||||
top: $body-vertical-padding;
|
||||
top: $header-height + $body-vertical-padding;
|
||||
}
|
||||
> :first-child {
|
||||
// We want to keep header on smaller devices at all times
|
||||
max-height: calc(
|
||||
100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
|
||||
);
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
max-height: calc(100dvh - $body-vertical-padding * 2);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Adjust the content scroll on smaller screens
|
||||
// Make sure only the inner tab is scrolling
|
||||
.scrollAdjust {
|
||||
@media only screen and (max-width: 767px) {
|
||||
max-height: calc(
|
||||
|
||||
@ -3,5 +3,5 @@
|
||||
|
||||
.main {
|
||||
flex-grow: 1;
|
||||
padding: $body-vertical-padding 0 $body-vertical-padding 0;
|
||||
padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
|
||||
}
|
||||
|
||||
@ -38,31 +38,46 @@ import {
|
||||
sendNotification,
|
||||
signEventForMetaFile,
|
||||
updateUsersAppData,
|
||||
uploadToFileStorage,
|
||||
DEFAULT_TOOLBOX,
|
||||
settleAllFullfilfedPromises
|
||||
uploadToFileStorage
|
||||
} from '../../utils'
|
||||
import { Container } from '../../components/Container'
|
||||
import fileListStyles from '../../components/FileList/style.module.scss'
|
||||
import { DrawTool } from '../../types/drawing'
|
||||
import { DrawTool, MarkType } from '../../types/drawing'
|
||||
import { DrawPDFFields } from '../../components/DrawPDFFields'
|
||||
import { Mark } from '../../types/mark.ts'
|
||||
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||
import {
|
||||
fa1,
|
||||
faBriefcase,
|
||||
faCalendarDays,
|
||||
faCheckDouble,
|
||||
faCircleDot,
|
||||
faClock,
|
||||
faCreditCard,
|
||||
faEllipsis,
|
||||
faEye,
|
||||
faFile,
|
||||
faFileCirclePlus,
|
||||
faGripLines,
|
||||
faHeading,
|
||||
faIdCard,
|
||||
faImage,
|
||||
faPaperclip,
|
||||
faPen,
|
||||
faPhone,
|
||||
faPlus,
|
||||
faSignature,
|
||||
faSquareCaretDown,
|
||||
faSquareCheck,
|
||||
faStamp,
|
||||
faT,
|
||||
faTableCellsLarge,
|
||||
faToolbox,
|
||||
faTrash,
|
||||
faUpload
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { getSigitFile, SigitFile } from '../../utils/file.ts'
|
||||
import _ from 'lodash'
|
||||
import { SigitFile } from '../../utils/file.ts'
|
||||
|
||||
export const CreatePage = () => {
|
||||
const navigate = useNavigate()
|
||||
@ -108,31 +123,118 @@ export const CreatePage = () => {
|
||||
{}
|
||||
)
|
||||
const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
|
||||
const [parsingPdf, setIsParsing] = useState<boolean>(false)
|
||||
useEffect(() => {
|
||||
if (selectedFiles) {
|
||||
/**
|
||||
* Reads the binary files and converts to internal file type
|
||||
* and sets to a state (adds images if it's a PDF)
|
||||
*/
|
||||
const parsePages = async () => {
|
||||
const files = await settleAllFullfilfedPromises(
|
||||
selectedFiles,
|
||||
getSigitFile
|
||||
)
|
||||
|
||||
setDrawnFiles(files)
|
||||
}
|
||||
|
||||
setIsParsing(true)
|
||||
|
||||
parsePages().finally(() => {
|
||||
setIsParsing(false)
|
||||
})
|
||||
}
|
||||
}, [selectedFiles])
|
||||
|
||||
const [selectedTool, setSelectedTool] = useState<DrawTool>()
|
||||
const [toolbox] = useState<DrawTool[]>([
|
||||
{
|
||||
identifier: MarkType.TEXT,
|
||||
icon: faT,
|
||||
label: 'Text',
|
||||
active: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.SIGNATURE,
|
||||
icon: faSignature,
|
||||
label: 'Signature',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.JOBTITLE,
|
||||
icon: faBriefcase,
|
||||
label: 'Job Title',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.FULLNAME,
|
||||
icon: faIdCard,
|
||||
label: 'Full Name',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.INITIALS,
|
||||
icon: faHeading,
|
||||
label: 'Initials',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.DATETIME,
|
||||
icon: faClock,
|
||||
label: 'Date Time',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.DATE,
|
||||
icon: faCalendarDays,
|
||||
label: 'Date',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.NUMBER,
|
||||
icon: fa1,
|
||||
label: 'Number',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.IMAGES,
|
||||
icon: faImage,
|
||||
label: 'Images',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.CHECKBOX,
|
||||
icon: faSquareCheck,
|
||||
label: 'Checkbox',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.MULTIPLE,
|
||||
icon: faCheckDouble,
|
||||
label: 'Multiple',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.FILE,
|
||||
icon: faPaperclip,
|
||||
label: 'File',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.RADIO,
|
||||
icon: faCircleDot,
|
||||
label: 'Radio',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.SELECT,
|
||||
icon: faSquareCaretDown,
|
||||
label: 'Select',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.CELLS,
|
||||
icon: faTableCellsLarge,
|
||||
label: 'Cells',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.STAMP,
|
||||
icon: faStamp,
|
||||
label: 'Stamp',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.PAYMENT,
|
||||
icon: faCreditCard,
|
||||
label: 'Payment',
|
||||
active: false
|
||||
},
|
||||
{
|
||||
identifier: MarkType.PHONE,
|
||||
icon: faPhone,
|
||||
label: 'Phone',
|
||||
active: false
|
||||
}
|
||||
])
|
||||
|
||||
/**
|
||||
* Changes the drawing tool
|
||||
@ -306,19 +408,6 @@ export const CreatePage = () => {
|
||||
|
||||
const handleRemoveUser = (pubkey: string) => {
|
||||
setUsers((prev) => prev.filter((user) => user.pubkey !== pubkey))
|
||||
|
||||
// Set counterpart to ''
|
||||
const drawnFilesCopy = _.cloneDeep(drawnFiles)
|
||||
drawnFilesCopy.forEach((s) => {
|
||||
s.pages?.forEach((p) => {
|
||||
p.drawnFields.forEach((d) => {
|
||||
if (d.counterpart === hexToNpub(pubkey)) {
|
||||
d.counterpart = ''
|
||||
}
|
||||
})
|
||||
})
|
||||
})
|
||||
setDrawnFiles(drawnFilesCopy)
|
||||
}
|
||||
|
||||
/**
|
||||
@ -338,15 +427,7 @@ export const CreatePage = () => {
|
||||
|
||||
const handleSelectFiles = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files) {
|
||||
// Get the uploaded files
|
||||
const files = Array.from(event.target.files)
|
||||
|
||||
// Remove duplicates based on the file.name
|
||||
setSelectedFiles((p) =>
|
||||
[...p, ...files].filter(
|
||||
(file, i, array) => i === array.findIndex((t) => t.name === file.name)
|
||||
)
|
||||
)
|
||||
setSelectedFiles(Array.from(event.target.files))
|
||||
}
|
||||
}
|
||||
|
||||
@ -761,6 +842,10 @@ export const CreatePage = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const onDrawFieldsChange = (sigitFiles: SigitFile[]) => {
|
||||
setDrawnFiles(sigitFiles)
|
||||
}
|
||||
|
||||
if (authUrl) {
|
||||
return (
|
||||
<iframe
|
||||
@ -874,36 +959,28 @@ export const CreatePage = () => {
|
||||
</div>
|
||||
|
||||
<div className={`${styles.paperGroup} ${styles.toolbox}`}>
|
||||
{DEFAULT_TOOLBOX.filter((drawTool) => !drawTool.isHidden).map(
|
||||
(drawTool: DrawTool, index: number) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
{...(!drawTool.isComingSoon && {
|
||||
onClick: () => handleToolSelect(drawTool)
|
||||
})}
|
||||
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${drawTool.isComingSoon ? styles.comingSoon : ''}
|
||||
{toolbox.map((drawTool: DrawTool, index: number) => {
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
{...(drawTool.active && {
|
||||
onClick: () => handleToolSelect(drawTool)
|
||||
})}
|
||||
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
|
||||
`}
|
||||
>
|
||||
<FontAwesomeIcon
|
||||
fontSize={'15px'}
|
||||
icon={drawTool.icon}
|
||||
/>
|
||||
{drawTool.label}
|
||||
{!drawTool.isComingSoon ? (
|
||||
<FontAwesomeIcon
|
||||
fontSize={'15px'}
|
||||
icon={faEllipsis}
|
||||
/>
|
||||
) : (
|
||||
<span className={styles.comingSoonPlaceholder}>
|
||||
Coming soon
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
)}
|
||||
>
|
||||
<FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
|
||||
{drawTool.label}
|
||||
{drawTool.active ? (
|
||||
<FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
|
||||
) : (
|
||||
<span className={styles.comingSoonPlaceholder}>
|
||||
Coming soon
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
<Button onClick={handleCreate} variant="contained">
|
||||
@ -919,17 +996,13 @@ export const CreatePage = () => {
|
||||
centerIcon={faFile}
|
||||
rightIcon={faToolbox}
|
||||
>
|
||||
{parsingPdf ? (
|
||||
<LoadingSpinner variant="small" />
|
||||
) : (
|
||||
<DrawPDFFields
|
||||
users={users}
|
||||
metadata={metadata}
|
||||
selectedTool={selectedTool}
|
||||
sigitFiles={drawnFiles}
|
||||
setSigitFiles={setDrawnFiles}
|
||||
/>
|
||||
)}
|
||||
<DrawPDFFields
|
||||
metadata={metadata}
|
||||
users={users}
|
||||
selectedFiles={selectedFiles}
|
||||
onDrawFieldsChange={onDrawFieldsChange}
|
||||
selectedTool={selectedTool}
|
||||
/>
|
||||
</StickySideColumns>
|
||||
</Container>
|
||||
</>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
|
||||
import EditIcon from '@mui/icons-material/Edit'
|
||||
import { Box, IconButton, SxProps, Theme, Typography } from '@mui/material'
|
||||
import { truncate } from 'lodash'
|
||||
import { Event, VerifiedEvent, kinds, nip19 } from 'nostr-tools'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { useSelector } from 'react-redux'
|
||||
@ -13,7 +14,6 @@ import { State } from '../../store/rootReducer'
|
||||
import { NostrJoiningBlock, ProfileMetadata } from '../../types'
|
||||
import {
|
||||
getNostrJoiningBlockNumber,
|
||||
getProfileUsername,
|
||||
getRoboHashPicture,
|
||||
hexToNpub,
|
||||
shorten
|
||||
@ -42,7 +42,15 @@ export const ProfilePage = () => {
|
||||
const [isLoading, setIsLoading] = useState(true)
|
||||
const [loadingSpinnerDesc] = useState('Fetching metadata')
|
||||
|
||||
const profileName = pubkey && getProfileUsername(pubkey, profileMetadata)
|
||||
const profileName =
|
||||
pubkey &&
|
||||
profileMetadata &&
|
||||
truncate(
|
||||
profileMetadata.display_name || profileMetadata.name || hexToNpub(pubkey),
|
||||
{
|
||||
length: 16
|
||||
}
|
||||
)
|
||||
|
||||
useEffect(() => {
|
||||
if (npub) {
|
||||
|
||||
@ -233,7 +233,6 @@ export const RelaysPage = () => {
|
||||
))}
|
||||
</Box>
|
||||
)}
|
||||
<Footer />
|
||||
</Container>
|
||||
)
|
||||
}
|
||||
@ -429,6 +428,7 @@ const RelayItem = ({
|
||||
)}
|
||||
</List>
|
||||
</Box>
|
||||
<Footer />
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
@ -22,6 +22,7 @@ import { useLocation } from 'react-router-dom'
|
||||
import axios from 'axios'
|
||||
import {
|
||||
addMarks,
|
||||
convertToPdfBlob,
|
||||
FONT_SIZE,
|
||||
FONT_TYPE,
|
||||
groupMarksByFileNamePage,
|
||||
@ -398,7 +399,8 @@ export const VerifyPage = () => {
|
||||
for (const [fileName, file] of Object.entries(files)) {
|
||||
if (file.isPdf) {
|
||||
// Draw marks into PDF file and generate a brand new blob
|
||||
const blob = await addMarks(file, marksByPage[fileName])
|
||||
const pages = await addMarks(file, marksByPage[fileName])
|
||||
const blob = await convertToPdfBlob(pages)
|
||||
zip.file(`files/${fileName}`, blob)
|
||||
} else {
|
||||
zip.file(`files/${fileName}`, file)
|
||||
|
||||
@ -61,6 +61,6 @@
|
||||
|
||||
[data-dev='true'] {
|
||||
.mark {
|
||||
outline: 1px dotted black;
|
||||
border: 1px dotted black;
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,10 +31,7 @@ export interface DrawTool {
|
||||
icon: IconDefinition
|
||||
defaultValue?: string
|
||||
selected?: boolean
|
||||
/** show or hide the toolbox item */
|
||||
isHidden?: boolean
|
||||
/** show or hide "coming soon" message on the toolbox item */
|
||||
isComingSoon?: boolean
|
||||
active?: boolean
|
||||
}
|
||||
|
||||
export enum MarkType {
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
export interface ProfileMetadata {
|
||||
name?: string
|
||||
display_name?: string
|
||||
/** @deprecated use name instead */
|
||||
username?: string
|
||||
picture?: string
|
||||
banner?: string
|
||||
|
||||
@ -21,8 +21,6 @@ export const ONE_DAY_IN_MS = 24 * 60 * 60 * 1000
|
||||
|
||||
export const SIGIT_RELAY = 'wss://relay.sigit.io'
|
||||
|
||||
export const SIGIT_BLOSSOM = 'https://blossom.sigit.io'
|
||||
|
||||
export const DEFAULT_LOOK_UP_RELAY_LIST = [
|
||||
SIGIT_RELAY,
|
||||
'wss://user.kindpag.es',
|
||||
|
||||
@ -4,6 +4,7 @@ import { MOST_COMMON_MEDIA_TYPES } from './const.ts'
|
||||
import { extractMarksFromSignedMeta } from './mark.ts'
|
||||
import {
|
||||
addMarks,
|
||||
convertToPdfBlob,
|
||||
groupMarksByFileNamePage,
|
||||
isPdf,
|
||||
pdfToImages
|
||||
@ -21,7 +22,8 @@ export const getZipWithFiles = async (
|
||||
for (const [fileName, file] of Object.entries(files)) {
|
||||
if (file.isPdf) {
|
||||
// Handle PDF Files
|
||||
const blob = await addMarks(file, marksByFileNamePage[fileName])
|
||||
const pages = await addMarks(file, marksByFileNamePage[fileName])
|
||||
const blob = await convertToPdfBlob(pages)
|
||||
zip.file(`files/${fileName}`, blob)
|
||||
} else {
|
||||
// Handle other files
|
||||
|
||||
@ -3,27 +3,6 @@ import { hexToNpub } from './nostr.ts'
|
||||
import { Meta, SignedEventContent } from '../types'
|
||||
import { Event } from 'nostr-tools'
|
||||
import { EMPTY } from './const.ts'
|
||||
import { DrawTool, MarkType } from '../types/drawing.ts'
|
||||
import {
|
||||
faT,
|
||||
faSignature,
|
||||
faBriefcase,
|
||||
faIdCard,
|
||||
faClock,
|
||||
fa1,
|
||||
faCalendarDays,
|
||||
faCheckDouble,
|
||||
faCircleDot,
|
||||
faCreditCard,
|
||||
faHeading,
|
||||
faImage,
|
||||
faPaperclip,
|
||||
faPhone,
|
||||
faSquareCaretDown,
|
||||
faSquareCheck,
|
||||
faStamp,
|
||||
faTableCellsLarge
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
/**
|
||||
* Takes in an array of Marks already filtered by User.
|
||||
@ -152,120 +131,6 @@ const findOtherUserMarks = (marks: Mark[], pubkey: string): Mark[] => {
|
||||
return marks.filter((mark) => mark.npub !== hexToNpub(pubkey))
|
||||
}
|
||||
|
||||
export const DEFAULT_TOOLBOX: DrawTool[] = [
|
||||
{
|
||||
identifier: MarkType.FULLNAME,
|
||||
icon: faIdCard,
|
||||
label: 'Full Name',
|
||||
isComingSoon: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.JOBTITLE,
|
||||
icon: faBriefcase,
|
||||
label: 'Job Title',
|
||||
isComingSoon: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.SIGNATURE,
|
||||
icon: faSignature,
|
||||
label: 'Signature',
|
||||
isComingSoon: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.DATETIME,
|
||||
icon: faClock,
|
||||
label: 'Date Time',
|
||||
isComingSoon: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.TEXT,
|
||||
icon: faT,
|
||||
label: 'Text'
|
||||
},
|
||||
{
|
||||
identifier: MarkType.NUMBER,
|
||||
icon: fa1,
|
||||
label: 'Number',
|
||||
isComingSoon: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.INITIALS,
|
||||
icon: faHeading,
|
||||
label: 'Initials',
|
||||
isHidden: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.DATE,
|
||||
icon: faCalendarDays,
|
||||
label: 'Date',
|
||||
isHidden: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.IMAGES,
|
||||
icon: faImage,
|
||||
label: 'Images',
|
||||
isHidden: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.CHECKBOX,
|
||||
icon: faSquareCheck,
|
||||
label: 'Checkbox',
|
||||
isHidden: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.MULTIPLE,
|
||||
icon: faCheckDouble,
|
||||
label: 'Multiple',
|
||||
isHidden: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.FILE,
|
||||
icon: faPaperclip,
|
||||
label: 'File',
|
||||
isHidden: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.RADIO,
|
||||
icon: faCircleDot,
|
||||
label: 'Radio',
|
||||
isHidden: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.SELECT,
|
||||
icon: faSquareCaretDown,
|
||||
label: 'Select',
|
||||
isHidden: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.CELLS,
|
||||
icon: faTableCellsLarge,
|
||||
label: 'Cells',
|
||||
isHidden: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.STAMP,
|
||||
icon: faStamp,
|
||||
label: 'Stamp',
|
||||
isHidden: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.PAYMENT,
|
||||
icon: faCreditCard,
|
||||
label: 'Payment',
|
||||
isHidden: true
|
||||
},
|
||||
{
|
||||
identifier: MarkType.PHONE,
|
||||
icon: faPhone,
|
||||
label: 'Phone',
|
||||
isHidden: true
|
||||
}
|
||||
]
|
||||
|
||||
export const getToolboxLabelByMarkType = (markType: MarkType) => {
|
||||
return DEFAULT_TOOLBOX.find((t) => t.identifier === markType)?.label
|
||||
}
|
||||
|
||||
export {
|
||||
getCurrentUserMarks,
|
||||
filterMarksByPubkey,
|
||||
|
||||
@ -16,8 +16,6 @@ import { CreateSignatureEventContent, Meta } from '../types'
|
||||
import { hexToNpub, unixNow } from './nostr'
|
||||
import { parseJson } from './string'
|
||||
import { hexToBytes } from '@noble/hashes/utils'
|
||||
import { getHash } from './hash.ts'
|
||||
import { SIGIT_BLOSSOM } from './const.ts'
|
||||
|
||||
/**
|
||||
* Uploads a file to a file storage service.
|
||||
@ -27,18 +25,12 @@ import { SIGIT_BLOSSOM } from './const.ts'
|
||||
*/
|
||||
export const uploadToFileStorage = async (file: File) => {
|
||||
// Define event metadata for authorization
|
||||
const hash = await getHash(await file.arrayBuffer())
|
||||
if (!hash) {
|
||||
throw new Error("Can't get file hash.")
|
||||
}
|
||||
|
||||
const event: EventTemplate = {
|
||||
kind: 24242,
|
||||
content: 'Authorize Upload',
|
||||
created_at: unixNow(),
|
||||
tags: [
|
||||
['t', 'upload'],
|
||||
['x', hash],
|
||||
['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now
|
||||
['name', file.name],
|
||||
['size', String(file.size)]
|
||||
@ -55,8 +47,11 @@ export const uploadToFileStorage = async (file: File) => {
|
||||
// Sign the authorization event using the dedicated key stored in user app data
|
||||
const authEvent = finalizeEvent(event, hexToBytes(key))
|
||||
|
||||
// URL of the file storage service
|
||||
const FILE_STORAGE_URL = 'https://blossom.sigit.io' // REFACTOR: should be an env
|
||||
|
||||
// Upload the file to the file storage service using Axios
|
||||
const response = await axios.put(`${SIGIT_BLOSSOM}/upload`, file, {
|
||||
const response = await axios.put(`${FILE_STORAGE_URL}/upload`, file, {
|
||||
headers: {
|
||||
Authorization: 'Nostr ' + btoa(JSON.stringify(authEvent)), // Set authorization header
|
||||
'Content-Type': 'application/sigit' // Set content type header
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { bytesToHex, hexToBytes } from '@noble/hashes/utils'
|
||||
import axios from 'axios'
|
||||
import _, { truncate } from 'lodash'
|
||||
import _ from 'lodash'
|
||||
import {
|
||||
Event,
|
||||
EventTemplate,
|
||||
@ -30,12 +30,11 @@ import {
|
||||
import { AuthState, Keys } from '../store/auth/types'
|
||||
import { RelaysState } from '../store/relays/types'
|
||||
import store from '../store/store'
|
||||
import { Meta, ProfileMetadata, SignedEvent, UserAppData } from '../types'
|
||||
import { Meta, SignedEvent, UserAppData } from '../types'
|
||||
import { getDefaultRelayMap } from './relays'
|
||||
import { parseJson, removeLeadingSlash } from './string'
|
||||
import { timeout } from './utils'
|
||||
import { getHash } from './hash'
|
||||
import { SIGIT_BLOSSOM } from './const.ts'
|
||||
|
||||
/**
|
||||
* Generates a `d` tag for userAppData
|
||||
@ -724,11 +723,6 @@ const uploadUserAppDataToBlossom = async (
|
||||
type: 'application/octet-stream'
|
||||
})
|
||||
|
||||
const hash = await getHash(await file.arrayBuffer())
|
||||
if (!hash) {
|
||||
throw new Error("Can't get file hash.")
|
||||
}
|
||||
|
||||
// Define event metadata for authorization
|
||||
const event: EventTemplate = {
|
||||
kind: 24242,
|
||||
@ -736,7 +730,6 @@ const uploadUserAppDataToBlossom = async (
|
||||
created_at: unixNow(),
|
||||
tags: [
|
||||
['t', 'upload'],
|
||||
['x', hash],
|
||||
['expiration', String(unixNow() + 60 * 5)], // Set expiration time to 5 minutes from now
|
||||
['name', file.name],
|
||||
['size', String(file.size)]
|
||||
@ -746,8 +739,11 @@ const uploadUserAppDataToBlossom = async (
|
||||
// Finalize the event with the private key
|
||||
const authEvent = finalizeEvent(event, hexToBytes(privateKey))
|
||||
|
||||
// URL of the file storage service
|
||||
const FILE_STORAGE_URL = 'https://blossom.sigit.io'
|
||||
|
||||
// Upload the file to the file storage service using Axios
|
||||
const response = await axios.put(`${SIGIT_BLOSSOM}/upload`, file, {
|
||||
const response = await axios.put(`${FILE_STORAGE_URL}/upload`, file, {
|
||||
headers: {
|
||||
Authorization: 'Nostr ' + btoa(JSON.stringify(authEvent)) // Set authorization header
|
||||
}
|
||||
@ -974,16 +970,3 @@ export const sendNotification = async (receiver: string, meta: Meta) => {
|
||||
throw err
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Show user's name, first available in order: display_name, name, or npub as fallback
|
||||
* @param npub User identifier, it can be either pubkey or npub1 (we only show npub)
|
||||
* @param profile User profile
|
||||
*/
|
||||
export const getProfileUsername = (
|
||||
npub: `npub1${string}` | string,
|
||||
profile?: ProfileMetadata
|
||||
) =>
|
||||
truncate(profile?.display_name || profile?.name || hexToNpub(npub), {
|
||||
length: 16
|
||||
})
|
||||
|
||||
120
src/utils/pdf.ts
120
src/utils/pdf.ts
@ -1,6 +1,7 @@
|
||||
import { PdfPage } from '../types/drawing.ts'
|
||||
import { PDFDocument, PDFFont, PDFPage, rgb } from 'pdf-lib'
|
||||
import { PDFDocument } from 'pdf-lib'
|
||||
import { Mark } from '../types/mark.ts'
|
||||
|
||||
import * as PDFJS from 'pdfjs-dist'
|
||||
import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?worker'
|
||||
if (!PDFJS.GlobalWorkerOptions.workerPort) {
|
||||
@ -9,23 +10,18 @@ if (!PDFJS.GlobalWorkerOptions.workerPort) {
|
||||
PDFJS.GlobalWorkerOptions.workerPort = worker
|
||||
}
|
||||
|
||||
import fontkit from '@pdf-lib/fontkit'
|
||||
import defaultFont from '../assets/fonts/roboto-regular.ttf'
|
||||
|
||||
/**
|
||||
* Defined font size used when generating a PDF. Currently it is difficult to fully
|
||||
* correlate font size used at the time of filling in / drawing on the PDF
|
||||
* because it is dynamically rendered, and the final size.
|
||||
* This should be fixed going forward.
|
||||
* Switching to PDF-Lib will most likely make this problem redundant.
|
||||
*/
|
||||
export const FONT_SIZE: number = 16
|
||||
/**
|
||||
* Current font type used when generating a PDF.
|
||||
*/
|
||||
export const FONT_TYPE: string = 'Roboto'
|
||||
/**
|
||||
* Current line height used when generating a PDF.
|
||||
*/
|
||||
export const FONT_LINE_HEIGHT: number = 1
|
||||
export const FONT_TYPE: string = 'Arial'
|
||||
|
||||
/**
|
||||
* A utility that transforms a drawing coordinate number into a CSS-compatible pixel string
|
||||
@ -119,28 +115,56 @@ export const pdfToImages = async (
|
||||
|
||||
/**
|
||||
* Takes in individual pdf file and an object with Marks grouped by Page number
|
||||
* Returns a PDF blob with embedded, completed and signed marks from all users as text
|
||||
* Returns an array of encoded images where each image is a representation
|
||||
* of a PDF page with completed and signed marks from all users
|
||||
*/
|
||||
export const addMarks = async (
|
||||
file: File,
|
||||
marksPerPage: { [key: string]: Mark[] }
|
||||
) => {
|
||||
const p = await readPdf(file)
|
||||
const pdf = await PDFDocument.load(p)
|
||||
const robotoFont = await embedFont(pdf)
|
||||
const pages = pdf.getPages()
|
||||
const pdf = await PDFJS.getDocument(p).promise
|
||||
const canvas = document.createElement('canvas')
|
||||
|
||||
for (let i = 0; i < pages.length; i++) {
|
||||
if (marksPerPage && Object.hasOwn(marksPerPage, i)) {
|
||||
marksPerPage[i]?.forEach((mark) =>
|
||||
drawMarkText(mark, pages[i], robotoFont)
|
||||
)
|
||||
const images: string[] = []
|
||||
|
||||
for (let i = 0; i < pdf.numPages; i++) {
|
||||
const page = await pdf.getPage(i + 1)
|
||||
const viewport = page.getViewport({ scale: 1 })
|
||||
const context = canvas.getContext('2d')
|
||||
canvas.height = viewport.height
|
||||
canvas.width = viewport.width
|
||||
if (context) {
|
||||
await page.render({ canvasContext: context, viewport: viewport }).promise
|
||||
|
||||
if (marksPerPage && Object.hasOwn(marksPerPage, i)) {
|
||||
marksPerPage[i]?.forEach((mark) => draw(mark, context))
|
||||
}
|
||||
|
||||
images.push(canvas.toDataURL())
|
||||
}
|
||||
}
|
||||
|
||||
const blob = await pdf.save()
|
||||
canvas.remove()
|
||||
|
||||
return blob
|
||||
return images
|
||||
}
|
||||
|
||||
/**
|
||||
* Utility to scale mark in line with the PDF-to-PNG scale
|
||||
*/
|
||||
export const scaleMark = (mark: Mark, scale: number): Mark => {
|
||||
const { location } = mark
|
||||
return {
|
||||
...mark,
|
||||
location: {
|
||||
...location,
|
||||
width: location.width * scale,
|
||||
height: location.height * scale,
|
||||
left: location.left * scale,
|
||||
top: location.top * scale
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -153,7 +177,6 @@ export const hasValue = (mark: Mark): boolean => !!mark.value
|
||||
* Draws a Mark on a Canvas representation of a PDF Page
|
||||
* @param mark to be drawn
|
||||
* @param ctx a Canvas representation of a specific PDF Page
|
||||
* @deprecated use drawMarkText
|
||||
*/
|
||||
export const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
|
||||
const { location } = mark
|
||||
@ -168,37 +191,27 @@ export const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
|
||||
}
|
||||
|
||||
/**
|
||||
* Draws a Mark on a PDF Page
|
||||
* @param mark to be drawn
|
||||
* @param page PDF Page
|
||||
* @param font embedded font
|
||||
* Takes an array of encoded PDF pages and returns a blob that is a complete PDF file
|
||||
* @param markedPdfPages
|
||||
*/
|
||||
export const drawMarkText = (mark: Mark, page: PDFPage, font: PDFFont) => {
|
||||
const { location } = mark
|
||||
const { height } = page.getSize()
|
||||
export const convertToPdfBlob = async (
|
||||
markedPdfPages: string[]
|
||||
): Promise<Blob> => {
|
||||
const pdfDoc = await PDFDocument.create()
|
||||
|
||||
// Convert the mark location origin (top, left) to PDF origin (bottom, left)
|
||||
const x = location.left
|
||||
const y = height - location.top
|
||||
for (const page of markedPdfPages) {
|
||||
const pngImage = await pdfDoc.embedPng(page)
|
||||
const p = pdfDoc.addPage([pngImage.width, pngImage.height])
|
||||
p.drawImage(pngImage, {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: pngImage.width,
|
||||
height: pngImage.height
|
||||
})
|
||||
}
|
||||
|
||||
// Adjust y-coordinate for the text, drawText's y is the baseline for the font
|
||||
// We start from the y (top location border) and we need to bump it down
|
||||
// We move font baseline by the difference between rendered height and actual height (gap)
|
||||
// And finally move down by the height without descender to get the new baseline
|
||||
const adjustedY =
|
||||
y -
|
||||
(font.heightAtSize(FONT_SIZE) - FONT_SIZE) -
|
||||
font.heightAtSize(FONT_SIZE, { descender: false })
|
||||
|
||||
page.drawText(`${mark.value}`, {
|
||||
x,
|
||||
y: adjustedY,
|
||||
size: FONT_SIZE,
|
||||
font: font,
|
||||
color: rgb(0, 0, 0),
|
||||
maxWidth: location.width,
|
||||
lineHeight: FONT_SIZE * FONT_LINE_HEIGHT
|
||||
})
|
||||
const pdfBytes = await pdfDoc.save()
|
||||
return new Blob([pdfBytes], { type: 'application/pdf' })
|
||||
}
|
||||
|
||||
/**
|
||||
@ -236,12 +249,3 @@ export const byPage = (
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function embedFont(pdf: PDFDocument) {
|
||||
const fontBytes = await fetch(defaultFont).then((res) => res.arrayBuffer())
|
||||
|
||||
pdf.registerFontkit(fontkit)
|
||||
|
||||
const embeddedFont = await pdf.embedFont(fontBytes)
|
||||
return embeddedFont
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user