Merge pull request 'new release' (#190) from staging into main
All checks were successful
Release to Production / build_and_release (push) Successful in 1m10s
All checks were successful
Release to Production / build_and_release (push) Successful in 1m10s
Reviewed-on: #190 Reviewed-by: enes <enes@noreply.git.nostrdev.com> Reviewed-by: eugene <eugene@nostrdev.com>
This commit is contained in:
commit
09229f42c7
@ -18,7 +18,7 @@ jobs:
|
|||||||
node-version: 18
|
node-version: 18
|
||||||
|
|
||||||
- name: Audit
|
- name: Audit
|
||||||
run: npm audit
|
run: npm audit --omit=dev
|
||||||
|
|
||||||
- name: Install Dependencies
|
- name: Install Dependencies
|
||||||
run: npm ci
|
run: npm ci
|
||||||
|
@ -19,7 +19,7 @@ jobs:
|
|||||||
node-version: 18
|
node-version: 18
|
||||||
|
|
||||||
- name: Audit
|
- name: Audit
|
||||||
run: npm audit
|
run: npm audit --omit=dev
|
||||||
|
|
||||||
- name: Install Dependencies
|
- name: Install Dependencies
|
||||||
run: npm ci
|
run: npm ci
|
||||||
|
102
package-lock.json
generated
102
package-lock.json
generated
@ -1,13 +1,14 @@
|
|||||||
{
|
{
|
||||||
"name": "web",
|
"name": "sigit",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"lockfileVersion": 3,
|
"lockfileVersion": 3,
|
||||||
"requires": true,
|
"requires": true,
|
||||||
"packages": {
|
"packages": {
|
||||||
"": {
|
"": {
|
||||||
"name": "web",
|
"name": "sigit",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
|
"license": "AGPL-3.0-or-later ",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@emotion/react": "11.11.4",
|
"@emotion/react": "11.11.4",
|
||||||
"@emotion/styled": "11.11.0",
|
"@emotion/styled": "11.11.0",
|
||||||
@ -33,13 +34,15 @@
|
|||||||
"nostr-tools": "2.7.0",
|
"nostr-tools": "2.7.0",
|
||||||
"pdf-lib": "^1.17.1",
|
"pdf-lib": "^1.17.1",
|
||||||
"pdfjs-dist": "^4.4.168",
|
"pdfjs-dist": "^4.4.168",
|
||||||
|
"rdndmb-html5-to-touch": "^8.0.3",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dnd": "16.0.1",
|
"react-dnd": "^16.0.1",
|
||||||
"react-dnd-html5-backend": "16.0.1",
|
"react-dnd-multi-backend": "^8.0.3",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-dropzone": "^14.2.3",
|
"react-dropzone": "^14.2.3",
|
||||||
"react-redux": "9.1.0",
|
"react-redux": "9.1.0",
|
||||||
"react-router-dom": "6.22.1",
|
"react-router-dom": "6.22.1",
|
||||||
|
"react-singleton-hook": "^4.0.1",
|
||||||
"react-toastify": "10.0.4",
|
"react-toastify": "10.0.4",
|
||||||
"redux": "5.0.1",
|
"redux": "5.0.1",
|
||||||
"tseep": "1.2.1"
|
"tseep": "1.2.1"
|
||||||
@ -3265,6 +3268,19 @@
|
|||||||
"@babel/runtime": "^7.9.2"
|
"@babel/runtime": "^7.9.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/dnd-multi-backend": {
|
||||||
|
"version": "8.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/dnd-multi-backend/-/dnd-multi-backend-8.0.3.tgz",
|
||||||
|
"integrity": "sha512-yFFARotr+OEJk787Fsj+V52pi6j7+Pt/CRp3IR2Ai3fnxA/z6J54T7+gxkXzXu4cvxTNE7NiBzzAaJ2f7JjFTw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "individual",
|
||||||
|
"url": "https://github.com/sponsors/LouisBrunner"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"dnd-core": "^16.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/doctrine": {
|
"node_modules/doctrine": {
|
||||||
"version": "3.0.0",
|
"version": "3.0.0",
|
||||||
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
|
||||||
@ -5685,6 +5701,21 @@
|
|||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
"node_modules/rdndmb-html5-to-touch": {
|
||||||
|
"version": "8.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/rdndmb-html5-to-touch/-/rdndmb-html5-to-touch-8.0.3.tgz",
|
||||||
|
"integrity": "sha512-VfIbLjlL9NAnZzc2M5fGPCNkDyK12+ahgILGO5RjS7jkgUlxwB0c/XvxVQNfY/2ocg7isTY/G7tqxJk5fSTZAA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"dnd-multi-backend": "^8.0.3",
|
||||||
|
"react-dnd-html5-backend": "^16.0.1",
|
||||||
|
"react-dnd-touch-backend": "^16.0.1"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "individual",
|
||||||
|
"url": "https://github.com/sponsors/LouisBrunner"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react": {
|
"node_modules/react": {
|
||||||
"version": "18.2.0",
|
"version": "18.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
|
||||||
@ -5700,6 +5731,7 @@
|
|||||||
"version": "16.0.1",
|
"version": "16.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-dnd/-/react-dnd-16.0.1.tgz",
|
||||||
"integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
|
"integrity": "sha512-QeoM/i73HHu2XF9aKksIUuamHPDvRglEwdHL4jsp784BgUuWcg6mzfxT0QDdQz8Wj0qyRKx2eMg8iZtWvU4E2Q==",
|
||||||
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@react-dnd/invariant": "^4.0.1",
|
"@react-dnd/invariant": "^4.0.1",
|
||||||
"@react-dnd/shallowequal": "^4.0.1",
|
"@react-dnd/shallowequal": "^4.0.1",
|
||||||
@ -5729,10 +5761,55 @@
|
|||||||
"version": "16.0.1",
|
"version": "16.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/react-dnd-html5-backend/-/react-dnd-html5-backend-16.0.1.tgz",
|
||||||
"integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
|
"integrity": "sha512-Wu3dw5aDJmOGw8WjH1I1/yTH+vlXEL4vmjk5p+MHxP8HuHJS1lAGeIdG/hze1AvNeXWo/JgULV87LyQOr+r5jw==",
|
||||||
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"dnd-core": "^16.0.1"
|
"dnd-core": "^16.0.1"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-dnd-multi-backend": {
|
||||||
|
"version": "8.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-dnd-multi-backend/-/react-dnd-multi-backend-8.0.3.tgz",
|
||||||
|
"integrity": "sha512-IwH7Mf6R05KIFohX0hHMTluoAvuUD8SO15KCD+9fY0nJ4nc1FGCMCSyMZw8R1XNStKp+JnNg3ZMtiaf5DebSUg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"dnd-multi-backend": "^8.0.3",
|
||||||
|
"react-dnd-preview": "^8.0.3"
|
||||||
|
},
|
||||||
|
"funding": {
|
||||||
|
"type": "individual",
|
||||||
|
"url": "https://github.com/sponsors/LouisBrunner"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"dnd-core": "^16.0.1",
|
||||||
|
"react": "^16.14.0 || ^17.0.2 || ^18.0.0",
|
||||||
|
"react-dnd": "^16.0.1",
|
||||||
|
"react-dom": "^16.14.0 || ^17.0.2 || ^18.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-dnd-preview": {
|
||||||
|
"version": "8.0.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-dnd-preview/-/react-dnd-preview-8.0.3.tgz",
|
||||||
|
"integrity": "sha512-s69Ro47QYDthDhj73iQ0VioMCjtlZ1AytKBDkQaHKm5DTjA8D2bIaFKCBQd330QEW0SIzqLJrZGCSlIY2xraJg==",
|
||||||
|
"license": "MIT",
|
||||||
|
"funding": {
|
||||||
|
"type": "individual",
|
||||||
|
"url": "https://github.com/sponsors/LouisBrunner"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "^16.14.0 || ^17.0.2 || ^18.0.0",
|
||||||
|
"react-dnd": "^16.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/react-dnd-touch-backend": {
|
||||||
|
"version": "16.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-dnd-touch-backend/-/react-dnd-touch-backend-16.0.1.tgz",
|
||||||
|
"integrity": "sha512-NonoCABzzjyWGZuDxSG77dbgMZ2Wad7eQiCd/ECtsR2/NBLTjGksPUx9UPezZ1nQ/L7iD130Tz3RUshL/ClKLA==",
|
||||||
|
"license": "MIT",
|
||||||
|
"dependencies": {
|
||||||
|
"@react-dnd/invariant": "^4.0.1",
|
||||||
|
"dnd-core": "^16.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-dom": {
|
"node_modules/react-dom": {
|
||||||
"version": "18.2.0",
|
"version": "18.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
|
||||||
@ -5832,6 +5909,23 @@
|
|||||||
"react-dom": ">=16.8"
|
"react-dom": ">=16.8"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/react-singleton-hook": {
|
||||||
|
"version": "4.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-singleton-hook/-/react-singleton-hook-4.0.1.tgz",
|
||||||
|
"integrity": "sha512-fWuk8VxcZPChrkQasDLM8pgd/7kyi+Cr/5FfCiD99FicjEru+JmtEZNnN4lJ8Z7KbqAST5CYPlpz6lmNsZFGNw==",
|
||||||
|
"license": "MIT",
|
||||||
|
"peerDependencies": {
|
||||||
|
"react": "18"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"react-dom": {
|
||||||
|
"optional": true
|
||||||
|
},
|
||||||
|
"react-native": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/react-toastify": {
|
"node_modules/react-toastify": {
|
||||||
"version": "10.0.4",
|
"version": "10.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.4.tgz",
|
||||||
|
@ -44,13 +44,15 @@
|
|||||||
"nostr-tools": "2.7.0",
|
"nostr-tools": "2.7.0",
|
||||||
"pdf-lib": "^1.17.1",
|
"pdf-lib": "^1.17.1",
|
||||||
"pdfjs-dist": "^4.4.168",
|
"pdfjs-dist": "^4.4.168",
|
||||||
|
"rdndmb-html5-to-touch": "^8.0.3",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dnd": "16.0.1",
|
"react-dnd": "^16.0.1",
|
||||||
"react-dnd-html5-backend": "16.0.1",
|
"react-dnd-multi-backend": "^8.0.3",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
"react-dropzone": "^14.2.3",
|
"react-dropzone": "^14.2.3",
|
||||||
"react-redux": "9.1.0",
|
"react-redux": "9.1.0",
|
||||||
"react-router-dom": "6.22.1",
|
"react-router-dom": "6.22.1",
|
||||||
|
"react-singleton-hook": "^4.0.1",
|
||||||
"react-toastify": "10.0.4",
|
"react-toastify": "10.0.4",
|
||||||
"redux": "5.0.1",
|
"redux": "5.0.1",
|
||||||
"tseep": "1.2.1"
|
"tseep": "1.2.1"
|
||||||
|
94
src/App.scss
94
src/App.scss
@ -41,6 +41,7 @@ p {
|
|||||||
|
|
||||||
body {
|
body {
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
|
background: $body-background-color;
|
||||||
font-family: $font-familiy;
|
font-family: $font-familiy;
|
||||||
letter-spacing: $letter-spacing;
|
letter-spacing: $letter-spacing;
|
||||||
font-size: $body-font-size;
|
font-size: $body-font-size;
|
||||||
@ -69,3 +70,96 @@ a {
|
|||||||
input {
|
input {
|
||||||
font-family: inherit;
|
font-family: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style-type: none; /* Removes bullet points */
|
||||||
|
margin: 0; /* Removes default margin */
|
||||||
|
padding: 0; /* Removes default padding */
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style-type: none; /* Removes the bullets */
|
||||||
|
margin: 0; /* Removes any default margin */
|
||||||
|
padding: 0; /* Removes any default padding */
|
||||||
|
}
|
||||||
|
|
||||||
|
// Shared styles for center content (Create, Sign, Verify)
|
||||||
|
.files-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.file-wrapper {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 15px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
// CSS, scroll position when scrolling to the files is adjusted by
|
||||||
|
// - 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: $header-height + $body-vertical-padding + 20px;
|
||||||
|
}
|
||||||
|
&:not(:first-child) {
|
||||||
|
scroll-margin-top: $header-height + $body-vertical-padding;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// For pdf marks
|
||||||
|
.image-wrapper {
|
||||||
|
position: relative;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
> img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain; /* Ensure the image fits within the container */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// For image rendering (uploaded image as a file)
|
||||||
|
.file-image {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
object-fit: contain; /* Ensure the image fits within the container */
|
||||||
|
}
|
||||||
|
|
||||||
|
// Consistent styling for every file mark
|
||||||
|
// Reverts some of the design defaults for font
|
||||||
|
.file-mark {
|
||||||
|
font-family: Arial;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: black;
|
||||||
|
letter-spacing: normal;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
|
||||||
|
scroll-margin-top: $header-height + $body-vertical-padding;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-dev='true'] {
|
||||||
|
.image-wrapper {
|
||||||
|
// outline: 1px solid #ccc; /* Optional: for visual debugging */
|
||||||
|
background-color: #e0f7fa; /* Optional: for visual debugging */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.extension-file-box {
|
||||||
|
border-radius: 4px;
|
||||||
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
height: 100px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
color: rgba(0, 0, 0, 0.25);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
@ -10,7 +10,8 @@ import {
|
|||||||
faCalendar,
|
faCalendar,
|
||||||
faCopy,
|
faCopy,
|
||||||
faEye,
|
faEye,
|
||||||
faFile
|
faFile,
|
||||||
|
faFileCircleExclamation
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
import { UserAvatarGroup } from '../UserAvatarGroup'
|
import { UserAvatarGroup } from '../UserAvatarGroup'
|
||||||
@ -20,6 +21,7 @@ import { TooltipChild } from '../TooltipChild'
|
|||||||
import { getExtensionIconLabel } from '../getExtensionIconLabel'
|
import { getExtensionIconLabel } from '../getExtensionIconLabel'
|
||||||
import { useSigitProfiles } from '../../hooks/useSigitProfiles'
|
import { useSigitProfiles } from '../../hooks/useSigitProfiles'
|
||||||
import { useSigitMeta } from '../../hooks/useSigitMeta'
|
import { useSigitMeta } from '../../hooks/useSigitMeta'
|
||||||
|
import { extractFileExtensions } from '../../utils/file'
|
||||||
|
|
||||||
type SigitProps = {
|
type SigitProps = {
|
||||||
meta: Meta
|
meta: Meta
|
||||||
@ -27,23 +29,18 @@ type SigitProps = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
|
export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
|
||||||
const {
|
const { title, createdAt, submittedBy, signers, signedStatus, isValid } =
|
||||||
title,
|
parsedMeta
|
||||||
createdAt,
|
|
||||||
submittedBy,
|
|
||||||
signers,
|
|
||||||
signedStatus,
|
|
||||||
fileExtensions,
|
|
||||||
isValid
|
|
||||||
} = parsedMeta
|
|
||||||
|
|
||||||
const { signersStatus } = useSigitMeta(meta)
|
const { signersStatus, fileHashes } = useSigitMeta(meta)
|
||||||
|
|
||||||
const profiles = useSigitProfiles([
|
const profiles = useSigitProfiles([
|
||||||
...(submittedBy ? [submittedBy] : []),
|
...(submittedBy ? [submittedBy] : []),
|
||||||
...signers
|
...signers
|
||||||
])
|
])
|
||||||
|
|
||||||
|
const { extensions, isSame } = extractFileExtensions(Object.keys(fileHashes))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.itemWrapper}>
|
<div className={styles.itemWrapper}>
|
||||||
<Link
|
<Link
|
||||||
@ -120,17 +117,21 @@ export const DisplaySigit = ({ meta, parsedMeta }: SigitProps) => {
|
|||||||
<span className={styles.iconLabel}>
|
<span className={styles.iconLabel}>
|
||||||
<FontAwesomeIcon icon={faEye} /> {signedStatus}
|
<FontAwesomeIcon icon={faEye} /> {signedStatus}
|
||||||
</span>
|
</span>
|
||||||
{fileExtensions.length > 0 ? (
|
{extensions.length > 0 ? (
|
||||||
<span className={styles.iconLabel}>
|
<span className={styles.iconLabel}>
|
||||||
{fileExtensions.length > 1 ? (
|
{!isSame ? (
|
||||||
<>
|
<>
|
||||||
<FontAwesomeIcon icon={faFile} /> Multiple File Types
|
<FontAwesomeIcon icon={faFile} /> Multiple File Types
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
getExtensionIconLabel(fileExtensions[0])
|
getExtensionIconLabel(extensions[0])
|
||||||
)}
|
)}
|
||||||
</span>
|
</span>
|
||||||
) : null}
|
) : (
|
||||||
|
<>
|
||||||
|
<FontAwesomeIcon icon={faFileCircleExclamation} /> —
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.itemActions}>
|
<div className={styles.itemActions}>
|
||||||
<Tooltip title="Duplicate" arrow placement="top" disableInteractive>
|
<Tooltip title="Duplicate" arrow placement="top" disableInteractive>
|
||||||
|
@ -1,104 +1,105 @@
|
|||||||
import { Close } from '@mui/icons-material'
|
import { Close } from '@mui/icons-material'
|
||||||
import {
|
import {
|
||||||
Box,
|
|
||||||
CircularProgress,
|
|
||||||
Divider,
|
|
||||||
FormControl,
|
FormControl,
|
||||||
InputLabel,
|
InputLabel,
|
||||||
|
ListItemIcon,
|
||||||
|
ListItemText,
|
||||||
MenuItem,
|
MenuItem,
|
||||||
Select
|
Select
|
||||||
} from '@mui/material'
|
} from '@mui/material'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import React, { useEffect, useState } from 'react'
|
import React, { useEffect, useState } from 'react'
|
||||||
|
|
||||||
import * as PDFJS from 'pdfjs-dist'
|
|
||||||
import { ProfileMetadata, User, UserRole } from '../../types'
|
import { ProfileMetadata, User, UserRole } from '../../types'
|
||||||
import {
|
import { MouseState, PdfPage, DrawnField, DrawTool } from '../../types/drawing'
|
||||||
PdfFile,
|
|
||||||
MouseState,
|
|
||||||
PdfPage,
|
|
||||||
DrawnField,
|
|
||||||
DrawTool
|
|
||||||
} from '../../types/drawing'
|
|
||||||
import { truncate } from 'lodash'
|
import { truncate } from 'lodash'
|
||||||
import { extractFileExtension, hexToNpub } from '../../utils'
|
import { settleAllFullfilfedPromises, hexToNpub, npubToHex } from '../../utils'
|
||||||
import { toPdfFiles } from '../../utils/pdf.ts'
|
import { getSigitFile, SigitFile } from '../../utils/file'
|
||||||
PDFJS.GlobalWorkerOptions.workerSrc = new URL(
|
import { FileDivider } from '../FileDivider'
|
||||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
import { ExtensionFileBox } from '../ExtensionFileBox'
|
||||||
import.meta.url
|
import { inPx } from '../../utils/pdf'
|
||||||
).toString()
|
import { useScale } from '../../hooks/useScale'
|
||||||
|
import { AvatarIconButton } from '../UserAvatarIconButton'
|
||||||
|
import { LoadingSpinner } from '../LoadingSpinner'
|
||||||
|
|
||||||
|
const DEFAULT_START_SIZE = {
|
||||||
|
width: 140,
|
||||||
|
height: 40
|
||||||
|
} as const
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
selectedFiles: File[]
|
selectedFiles: File[]
|
||||||
users: User[]
|
users: User[]
|
||||||
metadata: { [key: string]: ProfileMetadata }
|
metadata: { [key: string]: ProfileMetadata }
|
||||||
onDrawFieldsChange: (pdfFiles: PdfFile[]) => void
|
onDrawFieldsChange: (sigitFiles: SigitFile[]) => void
|
||||||
selectedTool?: DrawTool
|
selectedTool?: DrawTool
|
||||||
}
|
}
|
||||||
|
|
||||||
export const DrawPDFFields = (props: Props) => {
|
export const DrawPDFFields = (props: Props) => {
|
||||||
const { selectedFiles, selectedTool, onDrawFieldsChange, users } = props
|
const { selectedFiles, selectedTool, onDrawFieldsChange, users } = props
|
||||||
|
const { to, from } = useScale()
|
||||||
|
|
||||||
const [pdfFiles, setPdfFiles] = useState<PdfFile[]>([])
|
const [sigitFiles, setSigitFiles] = useState<SigitFile[]>([])
|
||||||
const [parsingPdf, setParsingPdf] = useState<boolean>(false)
|
const [parsingPdf, setIsParsing] = useState<boolean>(false)
|
||||||
|
|
||||||
const [mouseState, setMouseState] = useState<MouseState>({
|
const [mouseState, setMouseState] = useState<MouseState>({
|
||||||
clicked: false
|
clicked: false
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const [activeDrawField, setActiveDrawField] = useState<number>()
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (selectedFiles) {
|
if (selectedFiles) {
|
||||||
/**
|
/**
|
||||||
* Reads the pdf binary files and converts it's pages to images
|
* Reads the binary files and converts to internal file type
|
||||||
* creates the pdfFiles object and sets to a state
|
* and sets to a state (adds images if it's a PDF)
|
||||||
*/
|
*/
|
||||||
const parsePdfPages = async () => {
|
const parsePages = async () => {
|
||||||
const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles)
|
const files = await settleAllFullfilfedPromises(
|
||||||
|
selectedFiles,
|
||||||
|
getSigitFile
|
||||||
|
)
|
||||||
|
|
||||||
setPdfFiles(pdfFiles)
|
setSigitFiles(files)
|
||||||
}
|
}
|
||||||
|
|
||||||
setParsingPdf(true)
|
setIsParsing(true)
|
||||||
|
|
||||||
parsePdfPages().finally(() => {
|
parsePages().finally(() => {
|
||||||
setParsingPdf(false)
|
setIsParsing(false)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [selectedFiles])
|
}, [selectedFiles])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (pdfFiles) onDrawFieldsChange(pdfFiles)
|
if (sigitFiles) onDrawFieldsChange(sigitFiles)
|
||||||
}, [onDrawFieldsChange, pdfFiles])
|
}, [onDrawFieldsChange, sigitFiles])
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Drawing events
|
* Drawing events
|
||||||
*/
|
*/
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
// window.addEventListener('mousedown', onMouseDown);
|
window.addEventListener('pointerup', handlePointerUp)
|
||||||
window.addEventListener('mouseup', onMouseUp)
|
window.addEventListener('pointercancel', handlePointerUp)
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
// window.removeEventListener('mousedown', onMouseDown);
|
window.removeEventListener('pointerup', handlePointerUp)
|
||||||
window.removeEventListener('mouseup', onMouseUp)
|
window.removeEventListener('pointercancel', handlePointerUp)
|
||||||
}
|
}
|
||||||
}, [])
|
}, [])
|
||||||
|
|
||||||
const refreshPdfFiles = () => {
|
const refreshPdfFiles = () => {
|
||||||
setPdfFiles([...pdfFiles])
|
setSigitFiles([...sigitFiles])
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Fired only when left click and mouse over pdf page
|
* Fired only on when left (primary pointer interaction) clicking page image
|
||||||
* Creates new drawnElement and pushes in the array
|
* Creates new drawnElement and pushes in the array
|
||||||
* It is re rendered and visible right away
|
* It is re rendered and visible right away
|
||||||
*
|
*
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
* @param page PdfPage where press happened
|
* @param page PdfPage where press happened
|
||||||
*/
|
*/
|
||||||
const onMouseDown = (
|
const handlePointerDown = (event: React.PointerEvent, page: PdfPage) => {
|
||||||
event: React.MouseEvent<HTMLDivElement>,
|
|
||||||
page: PdfPage
|
|
||||||
) => {
|
|
||||||
// Proceed only if left click
|
// Proceed only if left click
|
||||||
if (event.button !== 0) return
|
if (event.button !== 0) return
|
||||||
|
|
||||||
@ -106,13 +107,13 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const { mouseX, mouseY } = getMouseCoordinates(event)
|
const { x, y } = getPointerCoordinates(event)
|
||||||
|
|
||||||
const newField: DrawnField = {
|
const newField: DrawnField = {
|
||||||
left: mouseX,
|
left: to(page.width, x),
|
||||||
top: mouseY,
|
top: to(page.width, y),
|
||||||
width: 0,
|
width: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.width,
|
||||||
height: 0,
|
height: event.pointerType === 'mouse' ? 0 : DEFAULT_START_SIZE.height,
|
||||||
counterpart: '',
|
counterpart: '',
|
||||||
type: selectedTool.identifier
|
type: selectedTool.identifier
|
||||||
}
|
}
|
||||||
@ -129,9 +130,9 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Drawing is finished, resets all the variables used to draw
|
* Drawing is finished, resets all the variables used to draw
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
*/
|
*/
|
||||||
const onMouseUp = () => {
|
const handlePointerUp = () => {
|
||||||
setMouseState((prev) => {
|
setMouseState((prev) => {
|
||||||
return {
|
return {
|
||||||
...prev,
|
...prev,
|
||||||
@ -143,16 +144,13 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* After {@link onMouseDown} create an drawing element, this function gets called on every pixel moved
|
* After {@link handlePointerDown} create an drawing element, this function gets called on every pixel moved
|
||||||
* which alters the newly created drawing element, resizing it while mouse move
|
* which alters the newly created drawing element, resizing it while pointer moves
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
* @param page PdfPage where moving is happening
|
* @param page PdfPage where moving is happening
|
||||||
*/
|
*/
|
||||||
const onMouseMove = (
|
const handlePointerMove = (event: React.PointerEvent, page: PdfPage) => {
|
||||||
event: React.MouseEvent<HTMLDivElement>,
|
if (mouseState.clicked && selectedTool && event.pointerType === 'mouse') {
|
||||||
page: PdfPage
|
|
||||||
) => {
|
|
||||||
if (mouseState.clicked && selectedTool) {
|
|
||||||
const lastElementIndex = page.drawnFields.length - 1
|
const lastElementIndex = page.drawnFields.length - 1
|
||||||
|
|
||||||
const lastDrawnField = page.drawnFields[lastElementIndex]
|
const lastDrawnField = page.drawnFields[lastElementIndex]
|
||||||
@ -162,10 +160,10 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
// to the page below (without releaseing mouse click)
|
// to the page below (without releaseing mouse click)
|
||||||
if (!lastDrawnField) return
|
if (!lastDrawnField) return
|
||||||
|
|
||||||
const { mouseX, mouseY } = getMouseCoordinates(event)
|
const { x, y } = getPointerCoordinates(event)
|
||||||
|
|
||||||
const width = mouseX - lastDrawnField.left
|
const width = to(page.width, x) - lastDrawnField.left
|
||||||
const height = mouseY - lastDrawnField.top
|
const height = to(page.width, y) - lastDrawnField.top
|
||||||
|
|
||||||
lastDrawnField.width = width
|
lastDrawnField.width = width
|
||||||
lastDrawnField.height = height
|
lastDrawnField.height = height
|
||||||
@ -180,54 +178,60 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Fired when event happens on the drawn element which will be moved
|
* Fired when event happens on the drawn element which will be moved
|
||||||
* mouse coordinates relative to drawn element will be stored
|
* pointer coordinates relative to drawn element will be stored
|
||||||
* so when we start moving, offset can be calculated
|
* so when we start moving, offset can be calculated
|
||||||
* mouseX - offsetX
|
* x - offsetX
|
||||||
* mouseY - offsetY
|
* y - offsetY
|
||||||
*
|
*
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
* @param drawnField Which we are moving
|
* @param drawnFieldIndex Which we are moving
|
||||||
*/
|
*/
|
||||||
const onDrawnFieldMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
|
const handleDrawnFieldPointerDown = (
|
||||||
|
event: React.PointerEvent,
|
||||||
|
drawnFieldIndex: number
|
||||||
|
) => {
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
|
|
||||||
// Proceed only if left click
|
// Proceed only if left click
|
||||||
if (event.button !== 0) return
|
if (event.button !== 0) return
|
||||||
|
|
||||||
const drawingRectangleCoords = getMouseCoordinates(event)
|
const drawingRectangleCoords = getPointerCoordinates(event)
|
||||||
|
|
||||||
|
setActiveDrawField(drawnFieldIndex)
|
||||||
setMouseState({
|
setMouseState({
|
||||||
dragging: true,
|
dragging: true,
|
||||||
clicked: false,
|
clicked: false,
|
||||||
coordsInWrapper: {
|
coordsInWrapper: {
|
||||||
mouseX: drawingRectangleCoords.mouseX,
|
x: drawingRectangleCoords.x,
|
||||||
mouseY: drawingRectangleCoords.mouseY
|
y: drawingRectangleCoords.y
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Moves the drawnElement by the mouse position (mouse can grab anywhere on the drawn element)
|
* Moves the drawnElement by the pointer position (pointer can grab anywhere on the drawn element)
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
* @param drawnField which we are moving
|
* @param drawnField which we are moving
|
||||||
|
* @param pageWidth pdf value which is used to calculate scaled offset
|
||||||
*/
|
*/
|
||||||
const onDrawnFieldMouseMove = (
|
const handleDrawnFieldPointerMove = (
|
||||||
event: React.MouseEvent<HTMLDivElement>,
|
event: React.PointerEvent,
|
||||||
drawnField: DrawnField
|
drawnField: DrawnField,
|
||||||
|
pageWidth: number
|
||||||
) => {
|
) => {
|
||||||
if (mouseState.dragging) {
|
if (mouseState.dragging) {
|
||||||
const { mouseX, mouseY, rect } = getMouseCoordinates(
|
const { x, y, rect } = getPointerCoordinates(
|
||||||
event,
|
event,
|
||||||
event.currentTarget.parentElement
|
event.currentTarget.parentElement
|
||||||
)
|
)
|
||||||
const coordsOffset = mouseState.coordsInWrapper
|
const coordsOffset = mouseState.coordsInWrapper
|
||||||
|
|
||||||
if (coordsOffset) {
|
if (coordsOffset) {
|
||||||
let left = mouseX - coordsOffset.mouseX
|
let left = to(pageWidth, x - coordsOffset.x)
|
||||||
let top = mouseY - coordsOffset.mouseY
|
let top = to(pageWidth, y - coordsOffset.y)
|
||||||
|
|
||||||
const rightLimit = rect.width - drawnField.width - 3
|
const rightLimit = to(pageWidth, rect.width) - drawnField.width
|
||||||
const bottomLimit = rect.height - drawnField.height - 3
|
const bottomLimit = to(pageWidth, rect.height) - drawnField.height
|
||||||
|
|
||||||
if (left < 0) left = 0
|
if (left < 0) left = 0
|
||||||
if (top < 0) top = 0
|
if (top < 0) top = 0
|
||||||
@ -244,17 +248,18 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Fired when clicked on the resize handle, sets the state for a resize action
|
* Fired when clicked on the resize handle, sets the state for a resize action
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
* @param drawnField which we are resizing
|
* @param drawnFieldIndex which we are resizing
|
||||||
*/
|
*/
|
||||||
const onResizeHandleMouseDown = (
|
const handleResizePointerDown = (
|
||||||
event: React.MouseEvent<HTMLSpanElement>
|
event: React.PointerEvent,
|
||||||
|
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)
|
||||||
setMouseState({
|
setMouseState({
|
||||||
resizing: true
|
resizing: true
|
||||||
})
|
})
|
||||||
@ -262,15 +267,17 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Resizes the drawn element by the mouse position
|
* Resizes the drawn element by the mouse position
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
* @param drawnField which we are resizing
|
* @param drawnField which we are resizing
|
||||||
|
* @param pageWidth pdf value which is used to calculate scaled offset
|
||||||
*/
|
*/
|
||||||
const onResizeHandleMouseMove = (
|
const handleResizePointerMove = (
|
||||||
event: React.MouseEvent<HTMLSpanElement>,
|
event: React.PointerEvent,
|
||||||
drawnField: DrawnField
|
drawnField: DrawnField,
|
||||||
|
pageWidth: number
|
||||||
) => {
|
) => {
|
||||||
if (mouseState.resizing) {
|
if (mouseState.resizing) {
|
||||||
const { mouseX, mouseY } = getMouseCoordinates(
|
const { x, y } = getPointerCoordinates(
|
||||||
event,
|
event,
|
||||||
// currentTarget = span handle
|
// currentTarget = span handle
|
||||||
// 1st parent = drawnField
|
// 1st parent = drawnField
|
||||||
@ -278,8 +285,8 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
event.currentTarget.parentElement?.parentElement
|
event.currentTarget.parentElement?.parentElement
|
||||||
)
|
)
|
||||||
|
|
||||||
const width = mouseX - drawnField.left
|
const width = to(pageWidth, x) - drawnField.left
|
||||||
const height = mouseY - drawnField.top
|
const height = to(pageWidth, y) - drawnField.top
|
||||||
|
|
||||||
drawnField.width = width
|
drawnField.width = width
|
||||||
drawnField.height = height
|
drawnField.height = height
|
||||||
@ -290,111 +297,137 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Removes the drawn element using the indexes in the params
|
* Removes the drawn element using the indexes in the params
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
* @param pdfFileIndex pdf file index
|
* @param pdfFileIndex pdf file index
|
||||||
* @param pdfPageIndex pdf page index
|
* @param pdfPageIndex pdf page index
|
||||||
* @param drawnFileIndex drawn file index
|
* @param drawnFileIndex drawn file index
|
||||||
*/
|
*/
|
||||||
const onRemoveHandleMouseDown = (
|
const handleRemovePointerDown = (
|
||||||
event: React.MouseEvent<HTMLSpanElement>,
|
event: React.PointerEvent,
|
||||||
pdfFileIndex: number,
|
pdfFileIndex: number,
|
||||||
pdfPageIndex: number,
|
pdfPageIndex: number,
|
||||||
drawnFileIndex: number
|
drawnFileIndex: number
|
||||||
) => {
|
) => {
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
|
|
||||||
pdfFiles[pdfFileIndex].pages[pdfPageIndex].drawnFields.splice(
|
const pages = sigitFiles[pdfFileIndex]?.pages
|
||||||
drawnFileIndex,
|
if (pages) {
|
||||||
1
|
pages[pdfPageIndex]?.drawnFields?.splice(drawnFileIndex, 1)
|
||||||
)
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Used to stop mouse click propagating to the parent elements
|
* Used to stop pointer click propagating to the parent elements
|
||||||
* so select can work properly
|
* so select can work properly
|
||||||
* @param event Mouse event
|
* @param event Pointer event
|
||||||
*/
|
*/
|
||||||
const onUserSelectHandleMouseDown = (
|
const handleUserSelectPointerDown = (event: React.PointerEvent) => {
|
||||||
event: React.MouseEvent<HTMLDivElement>
|
|
||||||
) => {
|
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets the mouse coordinates relative to a element in the `event` param
|
* Gets the pointer coordinates relative to a element in the `event` param
|
||||||
* @param event MouseEvent
|
* @param event PointerEvent
|
||||||
* @param customTarget mouse coordinates relative to this element, if not provided
|
* @param customTarget coordinates relative to this element, if not provided
|
||||||
* event.target will be used
|
* event.target will be used
|
||||||
*/
|
*/
|
||||||
const getMouseCoordinates = (
|
const getPointerCoordinates = (
|
||||||
event: React.MouseEvent<HTMLElement>,
|
event: React.PointerEvent,
|
||||||
customTarget?: HTMLElement | null
|
customTarget?: HTMLElement | null
|
||||||
) => {
|
) => {
|
||||||
const target = customTarget ? customTarget : event.currentTarget
|
const target = customTarget ? customTarget : event.currentTarget
|
||||||
const rect = target.getBoundingClientRect()
|
const rect = target.getBoundingClientRect()
|
||||||
const mouseX = event.clientX - rect.left //x position within the element.
|
|
||||||
const mouseY = event.clientY - rect.top //y position within the element.
|
// Clamp X Y within the target
|
||||||
|
const x = Math.min(event.clientX, rect.right) - rect.left //x position within the element.
|
||||||
|
const y = Math.min(event.clientY, rect.bottom) - rect.top //y position within the element.
|
||||||
|
|
||||||
return {
|
return {
|
||||||
mouseX,
|
x,
|
||||||
mouseY,
|
y,
|
||||||
rect
|
rect
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Renders the pdf pages and drawing elements
|
* Renders the pdf pages and drawing elements
|
||||||
*/
|
*/
|
||||||
const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => {
|
const getPdfPages = (file: SigitFile, fileIndex: number) => {
|
||||||
|
// Early return if this is not a pdf
|
||||||
|
if (!file.isPdf) return null
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{pdfFile.pages.map((page, pdfPageIndex: number) => {
|
{file.pages?.map((page, pageIndex: number) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={pdfPageIndex}
|
key={pageIndex}
|
||||||
className={`${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
|
className={`image-wrapper ${styles.pdfImageWrapper} ${selectedTool ? styles.drawing : ''}`}
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
onMouseMove={(event) => {
|
onPointerMove={(event) => {
|
||||||
onMouseMove(event, page)
|
handlePointerMove(event, page)
|
||||||
}}
|
}}
|
||||||
onMouseDown={(event) => {
|
onPointerDown={(event) => {
|
||||||
onMouseDown(event, page)
|
handlePointerDown(event, page)
|
||||||
}}
|
}}
|
||||||
draggable="false"
|
draggable="false"
|
||||||
src={page.image}
|
src={page.image}
|
||||||
|
alt={`page ${pageIndex + 1} of ${file.name}`}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
|
{page.drawnFields.map((drawnField, drawnFieldIndex: number) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={drawnFieldIndex}
|
key={drawnFieldIndex}
|
||||||
onMouseDown={onDrawnFieldMouseDown}
|
onPointerDown={(event) =>
|
||||||
onMouseMove={(event) => {
|
handleDrawnFieldPointerDown(event, drawnFieldIndex)
|
||||||
onDrawnFieldMouseMove(event, drawnField)
|
}
|
||||||
|
onPointerMove={(event) => {
|
||||||
|
handleDrawnFieldPointerMove(event, drawnField, page.width)
|
||||||
}}
|
}}
|
||||||
className={styles.drawingRectangle}
|
className={styles.drawingRectangle}
|
||||||
style={{
|
style={{
|
||||||
left: `${drawnField.left}px`,
|
backgroundColor: drawnField.counterpart
|
||||||
top: `${drawnField.top}px`,
|
? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}4b`
|
||||||
width: `${drawnField.width}px`,
|
: undefined,
|
||||||
height: `${drawnField.height}px`,
|
borderColor: drawnField.counterpart
|
||||||
pointerEvents: mouseState.clicked ? 'none' : 'all'
|
? `#${npubToHex(drawnField.counterpart)?.substring(0, 6)}`
|
||||||
|
: undefined,
|
||||||
|
left: inPx(from(page.width, drawnField.left)),
|
||||||
|
top: inPx(from(page.width, drawnField.top)),
|
||||||
|
width: inPx(from(page.width, drawnField.width)),
|
||||||
|
height: inPx(from(page.width, drawnField.height)),
|
||||||
|
pointerEvents: mouseState.clicked ? 'none' : 'all',
|
||||||
|
touchAction: 'none',
|
||||||
|
opacity:
|
||||||
|
mouseState.dragging &&
|
||||||
|
activeDrawField === drawnFieldIndex
|
||||||
|
? 0.8
|
||||||
|
: undefined
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<span
|
<span
|
||||||
onMouseDown={onResizeHandleMouseDown}
|
onPointerDown={(event) =>
|
||||||
onMouseMove={(event) => {
|
handleResizePointerDown(event, drawnFieldIndex)
|
||||||
onResizeHandleMouseMove(event, drawnField)
|
}
|
||||||
|
onPointerMove={(event) => {
|
||||||
|
handleResizePointerMove(event, drawnField, page.width)
|
||||||
}}
|
}}
|
||||||
className={styles.resizeHandle}
|
className={styles.resizeHandle}
|
||||||
|
style={{
|
||||||
|
background:
|
||||||
|
mouseState.resizing &&
|
||||||
|
activeDrawField === drawnFieldIndex
|
||||||
|
? 'var(--primary-main)'
|
||||||
|
: undefined
|
||||||
|
}}
|
||||||
></span>
|
></span>
|
||||||
<span
|
<span
|
||||||
onMouseDown={(event) => {
|
onPointerDown={(event) => {
|
||||||
onRemoveHandleMouseDown(
|
handleRemovePointerDown(
|
||||||
event,
|
event,
|
||||||
pdfFileIndex,
|
fileIndex,
|
||||||
pdfPageIndex,
|
pageIndex,
|
||||||
drawnFieldIndex
|
drawnFieldIndex
|
||||||
)
|
)
|
||||||
}}
|
}}
|
||||||
@ -403,7 +436,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
<Close fontSize="small" />
|
<Close fontSize="small" />
|
||||||
</span>
|
</span>
|
||||||
<div
|
<div
|
||||||
onMouseDown={onUserSelectHandleMouseDown}
|
onPointerDown={handleUserSelectPointerDown}
|
||||||
className={styles.userSelect}
|
className={styles.userSelect}
|
||||||
>
|
>
|
||||||
<FormControl fullWidth size="small">
|
<FormControl fullWidth size="small">
|
||||||
@ -416,6 +449,10 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
}}
|
}}
|
||||||
labelId="counterparts"
|
labelId="counterparts"
|
||||||
label="Counterparts"
|
label="Counterparts"
|
||||||
|
sx={{
|
||||||
|
background: 'white'
|
||||||
|
}}
|
||||||
|
renderValue={(value) => renderCounterpartValue(value)}
|
||||||
>
|
>
|
||||||
{users
|
{users
|
||||||
.filter((u) => u.role === UserRole.signer)
|
.filter((u) => u.role === UserRole.signer)
|
||||||
@ -444,7 +481,22 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
key={index}
|
key={index}
|
||||||
value={hexToNpub(user.pubkey)}
|
value={hexToNpub(user.pubkey)}
|
||||||
>
|
>
|
||||||
{displayValue}
|
<ListItemIcon>
|
||||||
|
<AvatarIconButton
|
||||||
|
src={metadata?.picture}
|
||||||
|
hexKey={user.pubkey}
|
||||||
|
aria-label={`account of user ${displayValue}`}
|
||||||
|
color="inherit"
|
||||||
|
sx={{
|
||||||
|
padding: 0,
|
||||||
|
'> img': {
|
||||||
|
width: '30px',
|
||||||
|
height: '30px'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</ListItemIcon>
|
||||||
|
<ListItemText>{displayValue}</ListItemText>
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
@ -461,48 +513,72 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (parsingPdf) {
|
const renderCounterpartValue = (value: string) => {
|
||||||
|
const user = users.find((u) => u.pubkey === npubToHex(value))
|
||||||
|
if (user) {
|
||||||
|
let displayValue = truncate(value, {
|
||||||
|
length: 16
|
||||||
|
})
|
||||||
|
|
||||||
|
const metadata = props.metadata[user.pubkey]
|
||||||
|
|
||||||
|
if (metadata) {
|
||||||
|
displayValue = truncate(
|
||||||
|
metadata.name || metadata.display_name || metadata.username || value,
|
||||||
|
{
|
||||||
|
length: 16
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<Box sx={{ width: '100%', textAlign: 'center' }}>
|
<>
|
||||||
<CircularProgress />
|
<AvatarIconButton
|
||||||
</Box>
|
src={props.metadata[user.pubkey]?.picture}
|
||||||
|
hexKey={npubToHex(user.pubkey) || undefined}
|
||||||
|
sx={{
|
||||||
|
padding: 0,
|
||||||
|
marginRight: '6px',
|
||||||
|
'> img': {
|
||||||
|
width: '21px',
|
||||||
|
height: '21px'
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{displayValue}
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!pdfFiles.length) {
|
return value
|
||||||
|
}
|
||||||
|
|
||||||
|
if (parsingPdf) {
|
||||||
|
return <LoadingSpinner variant="small" />
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!sigitFiles.length) {
|
||||||
return ''
|
return ''
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.view}>
|
<div className="files-wrapper">
|
||||||
{selectedFiles.map((file, i) => {
|
{sigitFiles.map((file, i) => {
|
||||||
const name = file.name
|
|
||||||
const extension = extractFileExtension(name)
|
|
||||||
const pdfFile = pdfFiles.find((pdf) => pdf.file.name === name)
|
|
||||||
return (
|
return (
|
||||||
<React.Fragment key={name}>
|
<React.Fragment key={file.name}>
|
||||||
<div
|
<div className="file-wrapper" id={`file-${file.name}`}>
|
||||||
className={`${styles.fileWrapper} ${styles.scrollTarget}`}
|
{file.isPdf && getPdfPages(file, i)}
|
||||||
id={`file-${name}`}
|
{file.isImage && (
|
||||||
>
|
<img
|
||||||
{pdfFile ? (
|
className="file-image"
|
||||||
getPdfPages(pdfFile, i)
|
src={file.objectUrl}
|
||||||
) : (
|
alt={file.name}
|
||||||
<div className={styles.otherFile}>
|
/>
|
||||||
This is a {extension} file
|
)}
|
||||||
</div>
|
{!(file.isPdf || file.isImage) && (
|
||||||
|
<ExtensionFileBox extension={file.extension} />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{i < selectedFiles.length - 1 && (
|
{i < selectedFiles.length - 1 && <FileDivider />}
|
||||||
<Divider
|
|
||||||
sx={{
|
|
||||||
fontSize: '12px',
|
|
||||||
color: 'rgba(0,0,0,0.15)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
File Separator
|
|
||||||
</Divider>
|
|
||||||
)}
|
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
@ -8,17 +8,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pdfImageWrapper {
|
.pdfImageWrapper {
|
||||||
position: relative;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
user-select: none;
|
|
||||||
|
|
||||||
> img {
|
|
||||||
display: block;
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
object-fit: contain; /* Ensure the image fits within the container */
|
|
||||||
}
|
|
||||||
|
|
||||||
&.drawing {
|
&.drawing {
|
||||||
cursor: crosshair;
|
cursor: crosshair;
|
||||||
}
|
}
|
||||||
@ -84,35 +73,8 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
bottom: -60px;
|
bottom: -60px;
|
||||||
min-width: 170px;
|
min-width: 193px;
|
||||||
min-height: 30px;
|
min-height: 30px;
|
||||||
background: #fff;
|
|
||||||
padding: 5px 0;
|
padding: 5px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fileWrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 15px;
|
|
||||||
position: relative;
|
|
||||||
scroll-margin-top: $header-height + $body-vertical-padding;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.otherFile {
|
|
||||||
border-radius: 4px;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
height: 100px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
color: rgba(0, 0, 0, 0.25);
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
6
src/components/ExtensionFileBox.tsx
Normal file
6
src/components/ExtensionFileBox.tsx
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
interface ExtensionFileBoxProps {
|
||||||
|
extension: string
|
||||||
|
}
|
||||||
|
export const ExtensionFileBox = ({ extension }: ExtensionFileBoxProps) => (
|
||||||
|
<div className="extension-file-box">This is a {extension} file</div>
|
||||||
|
)
|
12
src/components/FileDivider.tsx
Normal file
12
src/components/FileDivider.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import Divider from '@mui/material/Divider/Divider'
|
||||||
|
|
||||||
|
export const FileDivider = () => (
|
||||||
|
<Divider
|
||||||
|
sx={{
|
||||||
|
fontSize: '12px',
|
||||||
|
color: 'rgba(0,0,0,0.15)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
File Separator
|
||||||
|
</Divider>
|
||||||
|
)
|
@ -22,26 +22,26 @@ const FileList = ({
|
|||||||
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
|
const isActive = (file: CurrentUserFile) => file.id === currentFile.id
|
||||||
return (
|
return (
|
||||||
<div className={styles.wrap}>
|
<div className={styles.wrap}>
|
||||||
<div className={styles.container}>
|
|
||||||
<ul className={styles.files}>
|
<ul className={styles.files}>
|
||||||
{files.map((file: CurrentUserFile) => (
|
{files.map((currentUserFile: CurrentUserFile) => (
|
||||||
<li
|
<li
|
||||||
key={file.id}
|
key={currentUserFile.id}
|
||||||
className={`${styles.fileItem} ${isActive(file) && styles.active}`}
|
className={`${styles.fileItem} ${isActive(currentUserFile) && styles.active}`}
|
||||||
onClick={() => setCurrentFile(file)}
|
onClick={() => setCurrentFile(currentUserFile)}
|
||||||
>
|
>
|
||||||
<div className={styles.fileNumber}>{file.id}</div>
|
<div className={styles.fileNumber}>{currentUserFile.id}</div>
|
||||||
<div className={styles.fileInfo}>
|
<div className={styles.fileInfo}>
|
||||||
<div className={styles.fileName}>{file.filename}</div>
|
<div className={styles.fileName}>{currentUserFile.file.name}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className={styles.fileVisual}>
|
<div className={styles.fileVisual}>
|
||||||
{file.isHashValid && <FontAwesomeIcon icon={faCheck} />}
|
{currentUserFile.isHashValid && (
|
||||||
|
<FontAwesomeIcon icon={faCheck} />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</li>
|
</li>
|
||||||
))}
|
))}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
|
||||||
<Button variant="contained" fullWidth onClick={handleDownload}>
|
<Button variant="contained" fullWidth onClick={handleDownload}>
|
||||||
{downloadLabel || 'Download Files'}
|
{downloadLabel || 'Download Files'}
|
||||||
</Button>
|
</Button>
|
||||||
|
@ -1,12 +1,3 @@
|
|||||||
.container {
|
|
||||||
border-radius: 4px;
|
|
||||||
background: white;
|
|
||||||
padding: 15px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
grid-gap: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filesPageContainer {
|
.filesPageContainer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
display: grid;
|
display: grid;
|
||||||
@ -15,18 +6,6 @@
|
|||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style-type: none; /* Removes bullet points */
|
|
||||||
margin: 0; /* Removes default margin */
|
|
||||||
padding: 0; /* Removes default padding */
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
list-style-type: none; /* Removes the bullets */
|
|
||||||
margin: 0; /* Removes any default margin */
|
|
||||||
padding: 0; /* Removes any default padding */
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap {
|
.wrap {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -34,14 +13,16 @@ li {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.files {
|
.files {
|
||||||
|
border-radius: 4px;
|
||||||
|
background: white;
|
||||||
|
padding: 15px;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
grid-gap: 15px;
|
grid-gap: 15px;
|
||||||
max-height: 350px;
|
overflow-y: auto;
|
||||||
overflow: auto;
|
overflow-x: none;
|
||||||
padding: 0 5px 0 0;
|
|
||||||
margin: 0 -5px 0 0;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.files::-webkit-scrollbar {
|
.files::-webkit-scrollbar {
|
||||||
|
@ -4,8 +4,10 @@ import styles from './style.module.scss'
|
|||||||
import { Container } from '../Container'
|
import { Container } from '../Container'
|
||||||
import nostrImage from '../../assets/images/nostr.gif'
|
import nostrImage from '../../assets/images/nostr.gif'
|
||||||
import { appPublicRoutes } from '../../routes'
|
import { appPublicRoutes } from '../../routes'
|
||||||
|
import { createPortal } from 'react-dom'
|
||||||
|
|
||||||
export const Footer = () => (
|
export const Footer = () =>
|
||||||
|
createPortal(
|
||||||
<footer className={`${styles.borderTop} ${styles.footer}`}>
|
<footer className={`${styles.borderTop} ${styles.footer}`}>
|
||||||
<Container
|
<Container
|
||||||
style={{
|
style={{
|
||||||
@ -124,5 +126,6 @@ export const Footer = () => (
|
|||||||
</a>{' '}
|
</a>{' '}
|
||||||
2024.
|
2024.
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>,
|
||||||
|
document.getElementById('root')!
|
||||||
)
|
)
|
||||||
|
@ -1,18 +1,35 @@
|
|||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
desc: string
|
desc?: string
|
||||||
|
variant?: 'small' | 'default'
|
||||||
}
|
}
|
||||||
|
|
||||||
export const LoadingSpinner = (props: Props) => {
|
export const LoadingSpinner = (props: Props) => {
|
||||||
const { desc } = props
|
const { desc, variant = 'default' } = props
|
||||||
|
|
||||||
|
switch (variant) {
|
||||||
|
case 'small':
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`${styles.loadingSpinnerContainer}`}
|
||||||
|
data-variant={variant}
|
||||||
|
>
|
||||||
|
<div className={styles.loadingSpinner}></div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
default:
|
||||||
return (
|
return (
|
||||||
<div className={styles.loadingSpinnerOverlay}>
|
<div className={styles.loadingSpinnerOverlay}>
|
||||||
<div className={styles.loadingSpinnerContainer}>
|
<div
|
||||||
|
className={styles.loadingSpinnerContainer}
|
||||||
|
data-variant={variant}
|
||||||
|
>
|
||||||
<div className={styles.loadingSpinner}></div>
|
<div className={styles.loadingSpinner}></div>
|
||||||
{desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>}
|
{desc && <p className={styles.loadingSpinnerDesc}>{desc}</p>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
@ -2,34 +2,48 @@
|
|||||||
|
|
||||||
.loadingSpinnerOverlay {
|
.loadingSpinnerOverlay {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
top: 0;
|
inset: 0;
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
}
|
||||||
|
|
||||||
.loadingSpinnerContainer {
|
.loadingSpinnerContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
|
&[data-variant='default'] {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 500px;
|
||||||
|
margin: 25px 20px;
|
||||||
|
background: $overlay-background-color;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
&[data-variant='small'] {
|
||||||
|
min-height: 250px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadingSpinner {
|
.loadingSpinner {
|
||||||
background: url('/favicon.png') no-repeat center / cover;
|
background: url('/favicon.png') no-repeat center / cover;
|
||||||
width: 40px;
|
margin: 40px 25px;
|
||||||
height: 40px;
|
width: 65px;
|
||||||
|
height: 65px;
|
||||||
animation: spin 1s linear infinite;
|
animation: spin 1s linear infinite;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.loadingSpinnerDesc {
|
.loadingSpinnerDesc {
|
||||||
color: white;
|
width: 100%;
|
||||||
margin-top: 13px;
|
padding: 15px;
|
||||||
|
border-top: solid 1px rgba(0, 0, 0, 0.1);
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
@ -1,11 +1,19 @@
|
|||||||
|
@import '../../styles/sizes.scss';
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
|
}
|
||||||
|
bottom: $tabs-height + 5px;
|
||||||
|
right: 5px;
|
||||||
|
left: 5px;
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
z-index: 1000;
|
z-index: 1000;
|
||||||
|
|
||||||
@ -107,7 +115,7 @@
|
|||||||
.actions {
|
.actions {
|
||||||
background: white;
|
background: white;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
border-radius: 4px;
|
border-radius: 5px;
|
||||||
padding: 10px 20px;
|
padding: 10px 20px;
|
||||||
display: none;
|
display: none;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
@ -1,12 +1,13 @@
|
|||||||
import { PdfFile } from '../../types/drawing.ts'
|
|
||||||
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
||||||
|
import { SigitFile } from '../../utils/file.ts'
|
||||||
|
import { ExtensionFileBox } from '../ExtensionFileBox.tsx'
|
||||||
import PdfPageItem from './PdfPageItem.tsx'
|
import PdfPageItem from './PdfPageItem.tsx'
|
||||||
|
|
||||||
interface PdfItemProps {
|
interface PdfItemProps {
|
||||||
currentUserMarks: CurrentUserMark[]
|
currentUserMarks: CurrentUserMark[]
|
||||||
handleMarkClick: (id: number) => void
|
handleMarkClick: (id: number) => void
|
||||||
otherUserMarks: Mark[]
|
otherUserMarks: Mark[]
|
||||||
pdfFile: PdfFile
|
file: SigitFile
|
||||||
selectedMark: CurrentUserMark | null
|
selectedMark: CurrentUserMark | null
|
||||||
selectedMarkValue: string
|
selectedMarkValue: string
|
||||||
}
|
}
|
||||||
@ -15,7 +16,7 @@ interface PdfItemProps {
|
|||||||
* Responsible for displaying pages of a single Pdf File.
|
* Responsible for displaying pages of a single Pdf File.
|
||||||
*/
|
*/
|
||||||
const PdfItem = ({
|
const PdfItem = ({
|
||||||
pdfFile,
|
file,
|
||||||
currentUserMarks,
|
currentUserMarks,
|
||||||
handleMarkClick,
|
handleMarkClick,
|
||||||
selectedMarkValue,
|
selectedMarkValue,
|
||||||
@ -31,9 +32,12 @@ const PdfItem = ({
|
|||||||
const filterMarksByPage = (marks: Mark[], page: number): Mark[] => {
|
const filterMarksByPage = (marks: Mark[], page: number): Mark[] => {
|
||||||
return marks.filter((mark) => mark.location.page === page)
|
return marks.filter((mark) => mark.location.page === page)
|
||||||
}
|
}
|
||||||
return pdfFile.pages.map((page, i) => {
|
if (file.isPdf) {
|
||||||
|
return file.pages?.map((page, i) => {
|
||||||
return (
|
return (
|
||||||
<PdfPageItem
|
<PdfPageItem
|
||||||
|
fileName={file.name}
|
||||||
|
pageIndex={i}
|
||||||
page={page}
|
page={page}
|
||||||
key={i}
|
key={i}
|
||||||
currentUserMarks={filterByPage(currentUserMarks, i)}
|
currentUserMarks={filterByPage(currentUserMarks, i)}
|
||||||
@ -44,6 +48,11 @@ const PdfItem = ({
|
|||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
})
|
})
|
||||||
|
} else if (file.isImage) {
|
||||||
|
return <img className="file-image" src={file.objectUrl} alt={file.name} />
|
||||||
|
} else {
|
||||||
|
return <ExtensionFileBox extension={file.extension} />
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default PdfItem
|
export default PdfItem
|
||||||
|
@ -1,42 +1,56 @@
|
|||||||
import { CurrentUserMark } from '../../types/mark.ts'
|
import { CurrentUserMark } from '../../types/mark.ts'
|
||||||
import styles from '../DrawPDFFields/style.module.scss'
|
import styles from '../DrawPDFFields/style.module.scss'
|
||||||
import { inPx } from '../../utils/pdf.ts'
|
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
|
||||||
|
import { useScale } from '../../hooks/useScale.tsx'
|
||||||
|
import { forwardRef } from 'react'
|
||||||
|
import { npubToHex } from '../../utils/nostr.ts'
|
||||||
|
|
||||||
interface PdfMarkItemProps {
|
interface PdfMarkItemProps {
|
||||||
userMark: CurrentUserMark
|
userMark: CurrentUserMark
|
||||||
handleMarkClick: (id: number) => void
|
handleMarkClick: (id: number) => void
|
||||||
selectedMarkValue: string
|
selectedMarkValue: string
|
||||||
selectedMark: CurrentUserMark | null
|
selectedMark: CurrentUserMark | null
|
||||||
|
pageWidth: number
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Responsible for display an individual Pdf Mark.
|
* Responsible for display an individual Pdf Mark.
|
||||||
*/
|
*/
|
||||||
const PdfMarkItem = ({
|
const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
|
||||||
selectedMark,
|
(
|
||||||
handleMarkClick,
|
{ selectedMark, handleMarkClick, selectedMarkValue, userMark, pageWidth },
|
||||||
selectedMarkValue,
|
ref
|
||||||
userMark
|
) => {
|
||||||
}: PdfMarkItemProps) => {
|
|
||||||
const { location } = userMark.mark
|
const { location } = userMark.mark
|
||||||
const handleClick = () => handleMarkClick(userMark.mark.id)
|
const handleClick = () => handleMarkClick(userMark.mark.id)
|
||||||
const isEdited = () => selectedMark?.mark.id === userMark.mark.id
|
const isEdited = () => selectedMark?.mark.id === userMark.mark.id
|
||||||
const getMarkValue = () =>
|
const getMarkValue = () =>
|
||||||
isEdited() ? selectedMarkValue : userMark.currentValue
|
isEdited() ? selectedMarkValue : userMark.currentValue
|
||||||
|
const { from } = useScale()
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
|
ref={ref}
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
className={`${styles.drawingRectangle} ${isEdited() && styles.edited}`}
|
className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
|
||||||
style={{
|
style={{
|
||||||
left: inPx(location.left),
|
backgroundColor: selectedMark?.mark.npub
|
||||||
top: inPx(location.top),
|
? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
|
||||||
width: inPx(location.width),
|
: undefined,
|
||||||
height: inPx(location.height)
|
borderColor: selectedMark?.mark.npub
|
||||||
|
? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}`
|
||||||
|
: undefined,
|
||||||
|
left: inPx(from(pageWidth, location.left)),
|
||||||
|
top: inPx(from(pageWidth, location.top)),
|
||||||
|
width: inPx(from(pageWidth, location.width)),
|
||||||
|
height: inPx(from(pageWidth, location.height)),
|
||||||
|
fontFamily: FONT_TYPE,
|
||||||
|
fontSize: inPx(from(pageWidth, FONT_SIZE))
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{getMarkValue()}
|
{getMarkValue()}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
)
|
||||||
|
|
||||||
export default PdfMarkItem
|
export default PdfMarkItem
|
||||||
|
@ -10,12 +10,16 @@ import {
|
|||||||
import { EMPTY } from '../../utils/const.ts'
|
import { EMPTY } from '../../utils/const.ts'
|
||||||
import { Container } from '../Container'
|
import { Container } from '../Container'
|
||||||
import signPageStyles from '../../pages/sign/style.module.scss'
|
import signPageStyles from '../../pages/sign/style.module.scss'
|
||||||
import styles from './style.module.scss'
|
|
||||||
import { CurrentUserFile } from '../../types/file.ts'
|
import { CurrentUserFile } from '../../types/file.ts'
|
||||||
import FileList from '../FileList'
|
import FileList from '../FileList'
|
||||||
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
||||||
import { UsersDetails } from '../UsersDetails.tsx'
|
import { UsersDetails } from '../UsersDetails.tsx'
|
||||||
import { Meta } from '../../types'
|
import { Meta } from '../../types'
|
||||||
|
import {
|
||||||
|
faCircleInfo,
|
||||||
|
faFileDownload,
|
||||||
|
faPen
|
||||||
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
interface PdfMarkingProps {
|
interface PdfMarkingProps {
|
||||||
currentUserMarks: CurrentUserMark[]
|
currentUserMarks: CurrentUserMark[]
|
||||||
@ -24,7 +28,7 @@ interface PdfMarkingProps {
|
|||||||
meta: Meta | null
|
meta: Meta | null
|
||||||
otherUserMarks: Mark[]
|
otherUserMarks: Mark[]
|
||||||
setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
|
setCurrentUserMarks: (currentUserMarks: CurrentUserMark[]) => void
|
||||||
setIsReadyToSign: (isReadyToSign: boolean) => void
|
setIsMarksCompleted: (isMarksCompleted: boolean) => void
|
||||||
setUpdatedMarks: (markToUpdate: Mark) => void
|
setUpdatedMarks: (markToUpdate: Mark) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -38,7 +42,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
|
|||||||
const {
|
const {
|
||||||
files,
|
files,
|
||||||
currentUserMarks,
|
currentUserMarks,
|
||||||
setIsReadyToSign,
|
setIsMarksCompleted,
|
||||||
setCurrentUserMarks,
|
setCurrentUserMarks,
|
||||||
setUpdatedMarks,
|
setUpdatedMarks,
|
||||||
handleDownload,
|
handleDownload,
|
||||||
@ -102,7 +106,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
|
|||||||
)
|
)
|
||||||
setCurrentUserMarks(updatedCurrentUserMarks)
|
setCurrentUserMarks(updatedCurrentUserMarks)
|
||||||
setSelectedMark(null)
|
setSelectedMark(null)
|
||||||
setIsReadyToSign(true)
|
setIsMarksCompleted(true)
|
||||||
setUpdatedMarks(updatedMark.mark)
|
setUpdatedMarks(updatedMark.mark)
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -133,10 +137,11 @@ const PdfMarking = (props: PdfMarkingProps) => {
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
right={meta !== null && <UsersDetails meta={meta} />}
|
right={meta !== null && <UsersDetails meta={meta} />}
|
||||||
|
leftIcon={faFileDownload}
|
||||||
|
centerIcon={faPen}
|
||||||
|
rightIcon={faCircleInfo}
|
||||||
>
|
>
|
||||||
<div className={styles.container}>
|
|
||||||
{currentUserMarks?.length > 0 && (
|
{currentUserMarks?.length > 0 && (
|
||||||
<div className={styles.pdfView}>
|
|
||||||
<PdfView
|
<PdfView
|
||||||
currentFile={currentFile}
|
currentFile={currentFile}
|
||||||
files={files}
|
files={files}
|
||||||
@ -146,9 +151,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
|
|||||||
currentUserMarks={currentUserMarks}
|
currentUserMarks={currentUserMarks}
|
||||||
otherUserMarks={otherUserMarks}
|
otherUserMarks={otherUserMarks}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</StickySideColumns>
|
</StickySideColumns>
|
||||||
{selectedMark !== null && (
|
{selectedMark !== null && (
|
||||||
<MarkFormField
|
<MarkFormField
|
||||||
|
@ -4,8 +4,11 @@ import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
|||||||
import PdfMarkItem from './PdfMarkItem.tsx'
|
import PdfMarkItem from './PdfMarkItem.tsx'
|
||||||
import { useEffect, useRef } from 'react'
|
import { useEffect, useRef } from 'react'
|
||||||
import pdfViewStyles from './style.module.scss'
|
import pdfViewStyles from './style.module.scss'
|
||||||
import { inPx } from '../../utils/pdf.ts'
|
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
|
||||||
|
import { useScale } from '../../hooks/useScale.tsx'
|
||||||
interface PdfPageProps {
|
interface PdfPageProps {
|
||||||
|
fileName: string
|
||||||
|
pageIndex: number
|
||||||
currentUserMarks: CurrentUserMark[]
|
currentUserMarks: CurrentUserMark[]
|
||||||
handleMarkClick: (id: number) => void
|
handleMarkClick: (id: number) => void
|
||||||
otherUserMarks: Mark[]
|
otherUserMarks: Mark[]
|
||||||
@ -18,6 +21,8 @@ interface PdfPageProps {
|
|||||||
* Responsible for rendering a single Pdf Page and its Marks
|
* Responsible for rendering a single Pdf Page and its Marks
|
||||||
*/
|
*/
|
||||||
const PdfPageItem = ({
|
const PdfPageItem = ({
|
||||||
|
fileName,
|
||||||
|
pageIndex,
|
||||||
page,
|
page,
|
||||||
currentUserMarks,
|
currentUserMarks,
|
||||||
handleMarkClick,
|
handleMarkClick,
|
||||||
@ -28,45 +33,49 @@ const PdfPageItem = ({
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
|
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
|
||||||
markRefs.current[selectedMark.id]?.scrollIntoView({
|
markRefs.current[selectedMark.id]?.scrollIntoView({
|
||||||
behavior: 'smooth',
|
behavior: 'smooth'
|
||||||
block: 'end'
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [selectedMark])
|
}, [selectedMark])
|
||||||
const markRefs = useRef<(HTMLDivElement | null)[]>([])
|
const markRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||||
|
const { from } = useScale()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div className={`image-wrapper ${styles.pdfImageWrapper}`}>
|
||||||
className={styles.pdfImageWrapper}
|
<img
|
||||||
style={{
|
draggable="false"
|
||||||
border: '1px solid #c4c4c4'
|
src={page.image}
|
||||||
}}
|
alt={`page ${pageIndex + 1} of ${fileName}`}
|
||||||
>
|
/>
|
||||||
<img draggable="false" src={page.image} style={{ width: '100%' }} />
|
|
||||||
{currentUserMarks.map((m, i) => (
|
{currentUserMarks.map((m, i) => (
|
||||||
<div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
|
|
||||||
<PdfMarkItem
|
<PdfMarkItem
|
||||||
key={i}
|
key={i}
|
||||||
|
ref={(el) => (markRefs.current[m.id] = el)}
|
||||||
handleMarkClick={handleMarkClick}
|
handleMarkClick={handleMarkClick}
|
||||||
selectedMarkValue={selectedMarkValue}
|
selectedMarkValue={selectedMarkValue}
|
||||||
userMark={m}
|
userMark={m}
|
||||||
selectedMark={selectedMark}
|
selectedMark={selectedMark}
|
||||||
|
pageWidth={page.width}
|
||||||
/>
|
/>
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
{otherUserMarks.map((m, i) => (
|
{otherUserMarks.map((m, i) => {
|
||||||
|
return (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={i}
|
||||||
className={pdfViewStyles.otherUserMarksDisplay}
|
className={pdfViewStyles.otherUserMarksDisplay}
|
||||||
style={{
|
style={{
|
||||||
left: inPx(m.location.left),
|
left: inPx(from(page.width, m.location.left)),
|
||||||
top: inPx(m.location.top),
|
top: inPx(from(page.width, m.location.top)),
|
||||||
width: inPx(m.location.width),
|
width: inPx(from(page.width, m.location.width)),
|
||||||
height: inPx(m.location.height)
|
height: inPx(from(page.width, m.location.height)),
|
||||||
|
fontFamily: FONT_TYPE,
|
||||||
|
fontSize: inPx(from(page.width, FONT_SIZE))
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{m.value}
|
{m.value}
|
||||||
</div>
|
</div>
|
||||||
))}
|
)
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -1,8 +1,10 @@
|
|||||||
import { Divider } from '@mui/material'
|
|
||||||
import PdfItem from './PdfItem.tsx'
|
import PdfItem from './PdfItem.tsx'
|
||||||
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
||||||
import { CurrentUserFile } from '../../types/file.ts'
|
import { CurrentUserFile } from '../../types/file.ts'
|
||||||
import { useEffect, useRef } from 'react'
|
import { useEffect, useRef } from 'react'
|
||||||
|
import { FileDivider } from '../FileDivider.tsx'
|
||||||
|
import React from 'react'
|
||||||
|
import { LoadingSpinner } from '../LoadingSpinner/index.tsx'
|
||||||
|
|
||||||
interface PdfViewProps {
|
interface PdfViewProps {
|
||||||
currentFile: CurrentUserFile | null
|
currentFile: CurrentUserFile | null
|
||||||
@ -29,10 +31,7 @@ const PdfView = ({
|
|||||||
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
|
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
|
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
|
||||||
pdfRefs.current[currentFile.id]?.scrollIntoView({
|
pdfRefs.current[currentFile.id]?.scrollIntoView({ behavior: 'smooth' })
|
||||||
behavior: 'smooth',
|
|
||||||
block: 'end'
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
}, [currentFile])
|
}, [currentFile])
|
||||||
const filterByFile = (
|
const filterByFile = (
|
||||||
@ -49,29 +48,36 @@ const PdfView = ({
|
|||||||
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
|
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
|
||||||
index !== files.length - 1
|
index !== files.length - 1
|
||||||
return (
|
return (
|
||||||
<>
|
<div className="files-wrapper">
|
||||||
{files.map((currentUserFile, index, arr) => {
|
{files.length > 0 ? (
|
||||||
const { hash, pdfFile, id } = currentUserFile
|
files.map((currentUserFile, index, arr) => {
|
||||||
|
const { hash, file, id } = currentUserFile
|
||||||
|
|
||||||
if (!hash) return
|
if (!hash) return
|
||||||
return (
|
return (
|
||||||
|
<React.Fragment key={index}>
|
||||||
<div
|
<div
|
||||||
id={pdfFile.file.name}
|
id={file.name}
|
||||||
|
className="file-wrapper"
|
||||||
ref={(el) => (pdfRefs.current[id] = el)}
|
ref={(el) => (pdfRefs.current[id] = el)}
|
||||||
key={index}
|
|
||||||
>
|
>
|
||||||
<PdfItem
|
<PdfItem
|
||||||
pdfFile={pdfFile}
|
file={file}
|
||||||
currentUserMarks={filterByFile(currentUserMarks, hash)}
|
currentUserMarks={filterByFile(currentUserMarks, hash)}
|
||||||
selectedMark={selectedMark}
|
selectedMark={selectedMark}
|
||||||
handleMarkClick={handleMarkClick}
|
handleMarkClick={handleMarkClick}
|
||||||
selectedMarkValue={selectedMarkValue}
|
selectedMarkValue={selectedMarkValue}
|
||||||
otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
|
otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
|
||||||
/>
|
/>
|
||||||
{isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
|
|
||||||
</div>
|
</div>
|
||||||
|
{isNotLastPdfFile(index, arr) && <FileDivider />}
|
||||||
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
})}
|
})
|
||||||
</>
|
) : (
|
||||||
|
<LoadingSpinner variant="small" />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,33 +1,7 @@
|
|||||||
.imageWrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
width: 100%; /* Adjust as needed */
|
|
||||||
height: 100%; /* Adjust as needed */
|
|
||||||
overflow: hidden; /* Ensure no overflow */
|
|
||||||
border: 1px solid #ccc; /* Optional: for visual debugging */
|
|
||||||
background-color: #e0f7fa; /* Optional: for visual debugging */
|
|
||||||
}
|
|
||||||
|
|
||||||
.image {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
object-fit: contain; /* Ensure the image fits within the container */
|
|
||||||
}
|
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
.pdfView {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.otherUserMarksDisplay {
|
.otherUserMarksDisplay {
|
||||||
|
@ -1,7 +1,6 @@
|
|||||||
import { Divider, Tooltip } from '@mui/material'
|
import { Divider, Tooltip } from '@mui/material'
|
||||||
import { useSigitProfiles } from '../../hooks/useSigitProfiles'
|
import { useSigitProfiles } from '../../hooks/useSigitProfiles'
|
||||||
import {
|
import {
|
||||||
extractFileExtensions,
|
|
||||||
formatTimestamp,
|
formatTimestamp,
|
||||||
fromUnixTimestamp,
|
fromUnixTimestamp,
|
||||||
hexToNpub,
|
hexToNpub,
|
||||||
@ -28,6 +27,7 @@ import { State } from '../../store/rootReducer'
|
|||||||
import { TooltipChild } from '../TooltipChild'
|
import { TooltipChild } from '../TooltipChild'
|
||||||
import { DisplaySigner } from '../DisplaySigner'
|
import { DisplaySigner } from '../DisplaySigner'
|
||||||
import { Meta } from '../../types'
|
import { Meta } from '../../types'
|
||||||
|
import { extractFileExtensions } from '../../utils/file'
|
||||||
|
|
||||||
interface UsersDetailsProps {
|
interface UsersDetailsProps {
|
||||||
meta: Meta
|
meta: Meta
|
||||||
@ -118,6 +118,14 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
|||||||
</Tooltip>
|
</Tooltip>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
|
</UserAvatarGroup>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{viewers.length > 0 && (
|
||||||
|
<>
|
||||||
|
<p>Viewers</p>
|
||||||
|
<div className={styles.users}>
|
||||||
|
<UserAvatarGroup max={20}>
|
||||||
{viewers.map((signer) => {
|
{viewers.map((signer) => {
|
||||||
const pubkey = npubToHex(signer)!
|
const pubkey = npubToHex(signer)!
|
||||||
const profile = profiles[pubkey]
|
const profile = profiles[pubkey]
|
||||||
@ -126,7 +134,9 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
|||||||
<Tooltip
|
<Tooltip
|
||||||
key={signer}
|
key={signer}
|
||||||
title={
|
title={
|
||||||
profile?.display_name || profile?.name || shorten(pubkey)
|
profile?.display_name ||
|
||||||
|
profile?.name ||
|
||||||
|
shorten(pubkey)
|
||||||
}
|
}
|
||||||
placement="top"
|
placement="top"
|
||||||
arrow
|
arrow
|
||||||
@ -144,6 +154,8 @@ export const UsersDetails = ({ meta }: UsersDetailsProps) => {
|
|||||||
})}
|
})}
|
||||||
</UserAvatarGroup>
|
</UserAvatarGroup>
|
||||||
</div>
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.section}>
|
<div className={styles.section}>
|
||||||
<p>Details</p>
|
<p>Details</p>
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
import { Event, Filter, Relay } from 'nostr-tools'
|
import { Event, Filter, Relay } from 'nostr-tools'
|
||||||
import { normalizeWebSocketURL, timeout } from '../utils'
|
import {
|
||||||
|
settleAllFullfilfedPromises,
|
||||||
|
normalizeWebSocketURL,
|
||||||
|
timeout
|
||||||
|
} from '../utils'
|
||||||
import { SIGIT_RELAY } from '../utils/const'
|
import { SIGIT_RELAY } from '../utils/const'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -105,24 +109,11 @@ export class RelayController {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// connect to all specified relays
|
// connect to all specified relays
|
||||||
const relayPromises = relayUrls.map((relayUrl) =>
|
const relays = await settleAllFullfilfedPromises(
|
||||||
this.connectRelay(relayUrl)
|
relayUrls,
|
||||||
|
this.connectRelay
|
||||||
)
|
)
|
||||||
|
|
||||||
// Use Promise.allSettled to wait for all promises to settle
|
|
||||||
const results = await Promise.allSettled(relayPromises)
|
|
||||||
|
|
||||||
// Extract non-null values from fulfilled promises in a single pass
|
|
||||||
const relays = results.reduce<Relay[]>((acc, result) => {
|
|
||||||
if (result.status === 'fulfilled') {
|
|
||||||
const value = result.value
|
|
||||||
if (value) {
|
|
||||||
acc.push(value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return acc
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// Check if any relays are connected
|
// Check if any relays are connected
|
||||||
if (relays.length === 0) {
|
if (relays.length === 0) {
|
||||||
throw new Error('No relay is connected to fetch events!')
|
throw new Error('No relay is connected to fetch events!')
|
||||||
@ -228,23 +219,10 @@ export class RelayController {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// connect to all specified relays
|
// connect to all specified relays
|
||||||
const relayPromises = relayUrls.map((relayUrl) => {
|
const relays = await settleAllFullfilfedPromises(
|
||||||
return this.connectRelay(relayUrl)
|
relayUrls,
|
||||||
})
|
this.connectRelay
|
||||||
|
)
|
||||||
// Use Promise.allSettled to wait for all promises to settle
|
|
||||||
const results = await Promise.allSettled(relayPromises)
|
|
||||||
|
|
||||||
// Extract non-null values from fulfilled promises in a single pass
|
|
||||||
const relays = results.reduce<Relay[]>((acc, result) => {
|
|
||||||
if (result.status === 'fulfilled') {
|
|
||||||
const value = result.value
|
|
||||||
if (value) {
|
|
||||||
acc.push(value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return acc
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// Check if any relays are connected
|
// Check if any relays are connected
|
||||||
if (relays.length === 0) {
|
if (relays.length === 0) {
|
||||||
@ -292,24 +270,11 @@ export class RelayController {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// connect to all specified relays
|
// connect to all specified relays
|
||||||
const relayPromises = relayUrls.map((relayUrl) =>
|
const relays = await settleAllFullfilfedPromises(
|
||||||
this.connectRelay(relayUrl)
|
relayUrls,
|
||||||
|
this.connectRelay
|
||||||
)
|
)
|
||||||
|
|
||||||
// Use Promise.allSettled to wait for all promises to settle
|
|
||||||
const results = await Promise.allSettled(relayPromises)
|
|
||||||
|
|
||||||
// Extract non-null values from fulfilled promises in a single pass
|
|
||||||
const relays = results.reduce<Relay[]>((acc, result) => {
|
|
||||||
if (result.status === 'fulfilled') {
|
|
||||||
const value = result.value
|
|
||||||
if (value) {
|
|
||||||
acc.push(value)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return acc
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
// Check if any relays are connected
|
// Check if any relays are connected
|
||||||
if (relays.length === 0) {
|
if (relays.length === 0) {
|
||||||
throw new Error('No relay is connected to publish event!')
|
throw new Error('No relay is connected to publish event!')
|
||||||
|
46
src/hooks/useScale.tsx
Normal file
46
src/hooks/useScale.tsx
Normal file
@ -0,0 +1,46 @@
|
|||||||
|
import { useEffect, useState } from 'react'
|
||||||
|
import { singletonHook } from 'react-singleton-hook'
|
||||||
|
import { getInnerContentWidth } from '../utils/pdf'
|
||||||
|
|
||||||
|
const noScaleInit = {
|
||||||
|
to: (_: number, v: number) => v,
|
||||||
|
from: (_: number, v: number) => v
|
||||||
|
}
|
||||||
|
|
||||||
|
const useScaleImpl = () => {
|
||||||
|
const [width, setWidth] = useState(getInnerContentWidth())
|
||||||
|
|
||||||
|
// Get the scale based on the original width
|
||||||
|
const scale = (originalWidth: number) => {
|
||||||
|
return width / originalWidth
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the original pixel value
|
||||||
|
const to = (originalWidth: number, value: number) => {
|
||||||
|
return value / scale(originalWidth)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Get the scaled pixel value
|
||||||
|
const from = (originalWidth: number, value: number) => {
|
||||||
|
return value * scale(originalWidth)
|
||||||
|
}
|
||||||
|
|
||||||
|
const resize = () => {
|
||||||
|
setWidth(getInnerContentWidth())
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
resize()
|
||||||
|
|
||||||
|
window.addEventListener('resize', resize)
|
||||||
|
return () => {
|
||||||
|
window.removeEventListener('resize', resize)
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
return { to, from }
|
||||||
|
}
|
||||||
|
|
||||||
|
export const useScale = singletonHook(noScaleInit, useScaleImpl, {
|
||||||
|
unmountIfNoConsumers: true
|
||||||
|
})
|
@ -11,7 +11,6 @@ import {
|
|||||||
hexToNpub,
|
hexToNpub,
|
||||||
parseNostrEvent,
|
parseNostrEvent,
|
||||||
parseCreateSignatureEventContent,
|
parseCreateSignatureEventContent,
|
||||||
SigitMetaParseError,
|
|
||||||
SigitStatus,
|
SigitStatus,
|
||||||
SignStatus
|
SignStatus
|
||||||
} from '../utils'
|
} from '../utils'
|
||||||
@ -21,6 +20,7 @@ import { Event } from 'nostr-tools'
|
|||||||
import store from '../store/store'
|
import store from '../store/store'
|
||||||
import { AuthState } from '../store/auth/types'
|
import { AuthState } from '../store/auth/types'
|
||||||
import { NostrController } from '../controllers'
|
import { NostrController } from '../controllers'
|
||||||
|
import { MetaParseError } from '../types/errors/MetaParseError'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Flattened interface that combines properties `Meta`, `CreateSignatureEventContent`,
|
* Flattened interface that combines properties `Meta`, `CreateSignatureEventContent`,
|
||||||
@ -247,7 +247,7 @@ export const useSigitMeta = (meta: Meta): FlatMeta => {
|
|||||||
)
|
)
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error instanceof SigitMetaParseError) {
|
if (error instanceof MetaParseError) {
|
||||||
toast.error(error.message)
|
toast.error(error.message)
|
||||||
}
|
}
|
||||||
console.error(error)
|
console.error(error)
|
||||||
|
@ -26,7 +26,6 @@ import {
|
|||||||
} from '../utils'
|
} from '../utils'
|
||||||
import { useAppSelector } from '../hooks'
|
import { useAppSelector } from '../hooks'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { Footer } from '../components/Footer/Footer'
|
|
||||||
|
|
||||||
export const MainLayout = () => {
|
export const MainLayout = () => {
|
||||||
const dispatch: Dispatch = useDispatch()
|
const dispatch: Dispatch = useDispatch()
|
||||||
@ -160,7 +159,6 @@ export const MainLayout = () => {
|
|||||||
>
|
>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -3,9 +3,33 @@
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
gap: 20px;
|
||||||
|
grid-auto-flow: column;
|
||||||
|
grid-auto-columns: 100%;
|
||||||
|
|
||||||
|
// Hide Scrollbar and let's use tabs to navigate
|
||||||
|
-ms-overflow-style: none; /* Internet Explorer 10+ */
|
||||||
|
scrollbar-width: none; /* Firefox */
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
display: none; /* Safari and Chrome */
|
||||||
|
}
|
||||||
|
overflow-x: auto;
|
||||||
|
overscroll-behavior-inline: contain;
|
||||||
|
scroll-snap-type: inline mandatory;
|
||||||
|
|
||||||
|
> * {
|
||||||
|
scroll-margin-top: $header-height + $body-vertical-padding;
|
||||||
|
scroll-snap-align: start;
|
||||||
|
scroll-snap-stop: always; // Touch devices will always stop on each element
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
grid-template-columns: 0.75fr 1.5fr 0.75fr;
|
grid-template-columns: 0.75fr 1.5fr 0.75fr;
|
||||||
grid-gap: 30px;
|
gap: 30px;
|
||||||
flex-grow: 1;
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidesWrap {
|
.sidesWrap {
|
||||||
@ -16,21 +40,58 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sides {
|
.sides {
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: $header-height + $body-vertical-padding;
|
top: $header-height + $body-vertical-padding;
|
||||||
}
|
}
|
||||||
|
> :first-child {
|
||||||
.files {
|
max-height: calc(
|
||||||
display: flex;
|
100dvh - $header-height - $body-vertical-padding * 2 - $tabs-height
|
||||||
flex-direction: column;
|
);
|
||||||
grid-gap: 15px;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.scrollAdjust {
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
max-height: calc(
|
||||||
|
100svh - $header-height - $body-vertical-padding * 2 - $tabs-height
|
||||||
|
);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
|
@media only screen and (min-width: 768px) {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
border: 10px solid $overlay-background-color;
|
border: 10px solid $overlay-background-color;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
|
}
|
||||||
max-width: 590px;
|
}
|
||||||
width: 590px;
|
|
||||||
margin: 0 auto;
|
.navTabs {
|
||||||
|
display: none;
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
height: $tabs-height;
|
||||||
|
z-index: 2;
|
||||||
|
background: $overlay-background-color;
|
||||||
|
box-shadow: 0 0 4px 0 rgb(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
padding: 5px;
|
||||||
|
gap: 5px;
|
||||||
|
|
||||||
|
@media only screen and (max-width: 767px) {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
> li {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
background-color: $primary-main !important;
|
||||||
|
color: white !important;
|
||||||
}
|
}
|
||||||
|
@ -1,26 +1,147 @@
|
|||||||
import { PropsWithChildren, ReactNode } from 'react'
|
import {
|
||||||
|
PropsWithChildren,
|
||||||
|
ReactNode,
|
||||||
|
useEffect,
|
||||||
|
useRef,
|
||||||
|
useState
|
||||||
|
} from 'react'
|
||||||
|
|
||||||
import styles from './StickySideColumns.module.scss'
|
import styles from './StickySideColumns.module.scss'
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
|
||||||
|
import { IconDefinition } from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { Button } from '@mui/material'
|
||||||
|
|
||||||
interface StickySideColumnsProps {
|
interface StickySideColumnsProps {
|
||||||
left?: ReactNode
|
left: ReactNode
|
||||||
right?: ReactNode
|
right: ReactNode
|
||||||
|
leftIcon: IconDefinition
|
||||||
|
centerIcon: IconDefinition
|
||||||
|
rightIcon: IconDefinition
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const DEFAULT_TAB = 'nav-content'
|
||||||
export const StickySideColumns = ({
|
export const StickySideColumns = ({
|
||||||
left,
|
left,
|
||||||
right,
|
right,
|
||||||
|
leftIcon,
|
||||||
|
centerIcon,
|
||||||
|
rightIcon,
|
||||||
children
|
children
|
||||||
}: PropsWithChildren<StickySideColumnsProps>) => {
|
}: PropsWithChildren<StickySideColumnsProps>) => {
|
||||||
|
const [tab, setTab] = useState(DEFAULT_TAB)
|
||||||
|
const ref = useRef<HTMLDivElement>(null)
|
||||||
|
const tabsRefs = useRef<{ [id: string]: HTMLDivElement | null }>({})
|
||||||
|
const handleNavClick = (id: string) => {
|
||||||
|
if (ref.current && tabsRefs.current) {
|
||||||
|
const x = tabsRefs.current[id]?.offsetLeft
|
||||||
|
ref.current.scrollTo({
|
||||||
|
left: x,
|
||||||
|
behavior: 'smooth'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const isActive = (id: string) => id === tab
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setTab(DEFAULT_TAB)
|
||||||
|
handleNavClick(DEFAULT_TAB)
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const tabs = tabsRefs.current
|
||||||
|
// Set up the observer
|
||||||
|
const observer = new IntersectionObserver(
|
||||||
|
(entries) => {
|
||||||
|
entries.forEach((entry) => {
|
||||||
|
if (entry.isIntersecting) {
|
||||||
|
setTab(entry.target.id)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
{
|
||||||
|
root: ref.current,
|
||||||
|
threshold: 0.5,
|
||||||
|
rootMargin: '-20px'
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
if (tabs) {
|
||||||
|
Object.values(tabs).forEach((tab) => {
|
||||||
|
if (tab) observer.observe(tab)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (tabs) {
|
||||||
|
Object.values(tabs).forEach((tab) => {
|
||||||
|
if (tab) observer.unobserve(tab)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, [])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.container}>
|
<>
|
||||||
<div className={`${styles.sidesWrap} ${styles.files}`}>
|
<div className={styles.container} ref={ref}>
|
||||||
|
<div
|
||||||
|
id="nav-left"
|
||||||
|
className={styles.sidesWrap}
|
||||||
|
ref={(tab) => (tabsRefs.current['nav-left'] = tab)}
|
||||||
|
>
|
||||||
<div className={styles.sides}>{left}</div>
|
<div className={styles.sides}>{left}</div>
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.content}>{children}</div>
|
<div
|
||||||
<div className={styles.sidesWrap}>
|
id="nav-content"
|
||||||
|
className={styles.scrollAdjust}
|
||||||
|
ref={(tab) => (tabsRefs.current['nav-content'] = tab)}
|
||||||
|
>
|
||||||
|
<div id="content-preview" className={styles.content}>
|
||||||
|
{children}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
id="nav-right"
|
||||||
|
className={styles.sidesWrap}
|
||||||
|
ref={(tab) => (tabsRefs.current['nav-right'] = tab)}
|
||||||
|
>
|
||||||
<div className={styles.sides}>{right}</div>
|
<div className={styles.sides}>{right}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<ul className={styles.navTabs}>
|
||||||
|
<li>
|
||||||
|
<Button
|
||||||
|
fullWidth
|
||||||
|
variant="text"
|
||||||
|
onClick={() => handleNavClick('nav-left')}
|
||||||
|
className={`${isActive('nav-left') && styles.active}`}
|
||||||
|
aria-label="nav left"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={leftIcon} />
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Button
|
||||||
|
fullWidth
|
||||||
|
variant="text"
|
||||||
|
onClick={() => handleNavClick('nav-content')}
|
||||||
|
className={`${isActive('nav-content') && styles.active}`}
|
||||||
|
aria-label="nav middle"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={centerIcon} />
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Button
|
||||||
|
fullWidth
|
||||||
|
variant="text"
|
||||||
|
onClick={() => handleNavClick('nav-right')}
|
||||||
|
className={`${isActive('nav-right') && styles.active}`}
|
||||||
|
aria-label="nav right"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={rightIcon} />
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -4,5 +4,4 @@
|
|||||||
.main {
|
.main {
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
|
padding: $header-height + $body-vertical-padding 0 $body-vertical-padding 0;
|
||||||
background-color: $body-background-color;
|
|
||||||
}
|
}
|
||||||
|
@ -1,20 +1,13 @@
|
|||||||
import {
|
import styles from './style.module.scss'
|
||||||
Button,
|
import { Button, FormHelperText, TextField, Tooltip } from '@mui/material'
|
||||||
FormHelperText,
|
|
||||||
ListItemIcon,
|
|
||||||
ListItemText,
|
|
||||||
MenuItem,
|
|
||||||
Select,
|
|
||||||
TextField,
|
|
||||||
Tooltip
|
|
||||||
} from '@mui/material'
|
|
||||||
import type { Identifier, XYCoord } from 'dnd-core'
|
import type { Identifier, XYCoord } from 'dnd-core'
|
||||||
import saveAs from 'file-saver'
|
import saveAs from 'file-saver'
|
||||||
import JSZip from 'jszip'
|
import JSZip from 'jszip'
|
||||||
import { Event, kinds } from 'nostr-tools'
|
import { Event, kinds } from 'nostr-tools'
|
||||||
import { useEffect, useRef, useState } from 'react'
|
import { useEffect, useRef, useState } from 'react'
|
||||||
import { DndProvider, useDrag, useDrop } from 'react-dnd'
|
import { DndProvider, useDrag, useDrop } from 'react-dnd'
|
||||||
import { HTML5Backend } from 'react-dnd-html5-backend'
|
import { MultiBackend } from 'react-dnd-multi-backend'
|
||||||
|
import { HTML5toTouch } from 'rdndmb-html5-to-touch'
|
||||||
import { useSelector } from 'react-redux'
|
import { useSelector } from 'react-redux'
|
||||||
import { useLocation, useNavigate } from 'react-router-dom'
|
import { useLocation, useNavigate } from 'react-router-dom'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
@ -49,9 +42,8 @@ import {
|
|||||||
uploadToFileStorage
|
uploadToFileStorage
|
||||||
} from '../../utils'
|
} from '../../utils'
|
||||||
import { Container } from '../../components/Container'
|
import { Container } from '../../components/Container'
|
||||||
import styles from './style.module.scss'
|
|
||||||
import fileListStyles from '../../components/FileList/style.module.scss'
|
import fileListStyles from '../../components/FileList/style.module.scss'
|
||||||
import { DrawTool, MarkType, PdfFile } from '../../types/drawing'
|
import { DrawTool, MarkType } from '../../types/drawing'
|
||||||
import { DrawPDFFields } from '../../components/DrawPDFFields'
|
import { DrawPDFFields } from '../../components/DrawPDFFields'
|
||||||
import { Mark } from '../../types/mark.ts'
|
import { Mark } from '../../types/mark.ts'
|
||||||
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
import { StickySideColumns } from '../../layouts/StickySideColumns.tsx'
|
||||||
@ -66,6 +58,8 @@ import {
|
|||||||
faCreditCard,
|
faCreditCard,
|
||||||
faEllipsis,
|
faEllipsis,
|
||||||
faEye,
|
faEye,
|
||||||
|
faFile,
|
||||||
|
faFileCirclePlus,
|
||||||
faGripLines,
|
faGripLines,
|
||||||
faHeading,
|
faHeading,
|
||||||
faIdCard,
|
faIdCard,
|
||||||
@ -80,9 +74,11 @@ import {
|
|||||||
faStamp,
|
faStamp,
|
||||||
faT,
|
faT,
|
||||||
faTableCellsLarge,
|
faTableCellsLarge,
|
||||||
|
faToolbox,
|
||||||
faTrash,
|
faTrash,
|
||||||
faUpload
|
faUpload
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
import { SigitFile } from '../../utils/file.ts'
|
||||||
|
|
||||||
export const CreatePage = () => {
|
export const CreatePage = () => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
@ -125,115 +121,115 @@ export const CreatePage = () => {
|
|||||||
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
|
const [metadata, setMetadata] = useState<{ [key: string]: ProfileMetadata }>(
|
||||||
{}
|
{}
|
||||||
)
|
)
|
||||||
const [drawnPdfs, setDrawnPdfs] = useState<PdfFile[]>([])
|
const [drawnFiles, setDrawnFiles] = useState<SigitFile[]>([])
|
||||||
|
|
||||||
const [selectedTool, setSelectedTool] = useState<DrawTool>()
|
const [selectedTool, setSelectedTool] = useState<DrawTool>()
|
||||||
const [toolbox] = useState<DrawTool[]>([
|
const [toolbox] = useState<DrawTool[]>([
|
||||||
{
|
{
|
||||||
identifier: MarkType.TEXT,
|
identifier: MarkType.TEXT,
|
||||||
icon: <FontAwesomeIcon icon={faT} />,
|
icon: faT,
|
||||||
label: 'Text',
|
label: 'Text',
|
||||||
active: true
|
active: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.SIGNATURE,
|
identifier: MarkType.SIGNATURE,
|
||||||
icon: <FontAwesomeIcon icon={faSignature} />,
|
icon: faSignature,
|
||||||
label: 'Signature',
|
label: 'Signature',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.JOBTITLE,
|
identifier: MarkType.JOBTITLE,
|
||||||
icon: <FontAwesomeIcon icon={faBriefcase} />,
|
icon: faBriefcase,
|
||||||
label: 'Job Title',
|
label: 'Job Title',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.FULLNAME,
|
identifier: MarkType.FULLNAME,
|
||||||
icon: <FontAwesomeIcon icon={faIdCard} />,
|
icon: faIdCard,
|
||||||
label: 'Full Name',
|
label: 'Full Name',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.INITIALS,
|
identifier: MarkType.INITIALS,
|
||||||
icon: <FontAwesomeIcon icon={faHeading} />,
|
icon: faHeading,
|
||||||
label: 'Initials',
|
label: 'Initials',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.DATETIME,
|
identifier: MarkType.DATETIME,
|
||||||
icon: <FontAwesomeIcon icon={faClock} />,
|
icon: faClock,
|
||||||
label: 'Date Time',
|
label: 'Date Time',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.DATE,
|
identifier: MarkType.DATE,
|
||||||
icon: <FontAwesomeIcon icon={faCalendarDays} />,
|
icon: faCalendarDays,
|
||||||
label: 'Date',
|
label: 'Date',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.NUMBER,
|
identifier: MarkType.NUMBER,
|
||||||
icon: <FontAwesomeIcon icon={fa1} />,
|
icon: fa1,
|
||||||
label: 'Number',
|
label: 'Number',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.IMAGES,
|
identifier: MarkType.IMAGES,
|
||||||
icon: <FontAwesomeIcon icon={faImage} />,
|
icon: faImage,
|
||||||
label: 'Images',
|
label: 'Images',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.CHECKBOX,
|
identifier: MarkType.CHECKBOX,
|
||||||
icon: <FontAwesomeIcon icon={faSquareCheck} />,
|
icon: faSquareCheck,
|
||||||
label: 'Checkbox',
|
label: 'Checkbox',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.MULTIPLE,
|
identifier: MarkType.MULTIPLE,
|
||||||
icon: <FontAwesomeIcon icon={faCheckDouble} />,
|
icon: faCheckDouble,
|
||||||
label: 'Multiple',
|
label: 'Multiple',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.FILE,
|
identifier: MarkType.FILE,
|
||||||
icon: <FontAwesomeIcon icon={faPaperclip} />,
|
icon: faPaperclip,
|
||||||
label: 'File',
|
label: 'File',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.RADIO,
|
identifier: MarkType.RADIO,
|
||||||
icon: <FontAwesomeIcon icon={faCircleDot} />,
|
icon: faCircleDot,
|
||||||
label: 'Radio',
|
label: 'Radio',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.SELECT,
|
identifier: MarkType.SELECT,
|
||||||
icon: <FontAwesomeIcon icon={faSquareCaretDown} />,
|
icon: faSquareCaretDown,
|
||||||
label: 'Select',
|
label: 'Select',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.CELLS,
|
identifier: MarkType.CELLS,
|
||||||
icon: <FontAwesomeIcon icon={faTableCellsLarge} />,
|
icon: faTableCellsLarge,
|
||||||
label: 'Cells',
|
label: 'Cells',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.STAMP,
|
identifier: MarkType.STAMP,
|
||||||
icon: <FontAwesomeIcon icon={faStamp} />,
|
icon: faStamp,
|
||||||
label: 'Stamp',
|
label: 'Stamp',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.PAYMENT,
|
identifier: MarkType.PAYMENT,
|
||||||
icon: <FontAwesomeIcon icon={faCreditCard} />,
|
icon: faCreditCard,
|
||||||
label: 'Payment',
|
label: 'Payment',
|
||||||
active: false
|
active: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
identifier: MarkType.PHONE,
|
identifier: MarkType.PHONE,
|
||||||
icon: <FontAwesomeIcon icon={faPhone} />,
|
icon: faPhone,
|
||||||
label: 'Phone',
|
label: 'Phone',
|
||||||
active: false
|
active: false
|
||||||
}
|
}
|
||||||
@ -456,10 +452,8 @@ export const CreatePage = () => {
|
|||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
if (users.length === 0) {
|
if (!users.some((u) => u.role === UserRole.signer)) {
|
||||||
toast.error(
|
toast.error('No signer is provided. At least add one signer.')
|
||||||
'No signer/viewer is provided. At least add one signer or viewer.'
|
|
||||||
)
|
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -507,11 +501,15 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const createMarks = (fileHashes: { [key: string]: string }): Mark[] => {
|
const createMarks = (fileHashes: { [key: string]: string }): Mark[] => {
|
||||||
return drawnPdfs
|
return drawnFiles
|
||||||
.flatMap((drawnPdf) => {
|
.flatMap((file) => {
|
||||||
const fileHash = fileHashes[drawnPdf.file.name]
|
const fileHash = fileHashes[file.name]
|
||||||
return drawnPdf.pages.flatMap((page, index) => {
|
return (
|
||||||
|
file.pages?.flatMap((page, index) => {
|
||||||
return page.drawnFields.map((drawnField) => {
|
return page.drawnFields.map((drawnField) => {
|
||||||
|
if (!drawnField.counterpart) {
|
||||||
|
throw new Error('Missing counterpart')
|
||||||
|
}
|
||||||
return {
|
return {
|
||||||
type: drawnField.type,
|
type: drawnField.type,
|
||||||
location: {
|
location: {
|
||||||
@ -523,10 +521,11 @@ export const CreatePage = () => {
|
|||||||
},
|
},
|
||||||
npub: drawnField.counterpart,
|
npub: drawnField.counterpart,
|
||||||
pdfFileHash: fileHash,
|
pdfFileHash: fileHash,
|
||||||
fileName: drawnPdf.file.name
|
fileName: file.name
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
}) || []
|
||||||
|
)
|
||||||
})
|
})
|
||||||
.map((mark, index) => {
|
.map((mark, index) => {
|
||||||
return { ...mark, id: index }
|
return { ...mark, id: index }
|
||||||
@ -667,6 +666,7 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const generateCreateSignature = async (
|
const generateCreateSignature = async (
|
||||||
|
markConfig: Mark[],
|
||||||
fileHashes: {
|
fileHashes: {
|
||||||
[key: string]: string
|
[key: string]: string
|
||||||
},
|
},
|
||||||
@ -674,7 +674,6 @@ export const CreatePage = () => {
|
|||||||
) => {
|
) => {
|
||||||
const signers = users.filter((user) => user.role === UserRole.signer)
|
const signers = users.filter((user) => user.role === UserRole.signer)
|
||||||
const viewers = users.filter((user) => user.role === UserRole.viewer)
|
const viewers = users.filter((user) => user.role === UserRole.viewer)
|
||||||
const markConfig = createMarks(fileHashes)
|
|
||||||
|
|
||||||
const content: CreateSignatureEventContent = {
|
const content: CreateSignatureEventContent = {
|
||||||
signers: signers.map((signer) => hexToNpub(signer.pubkey)),
|
signers: signers.map((signer) => hexToNpub(signer.pubkey)),
|
||||||
@ -718,15 +717,13 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const handleCreate = async () => {
|
const handleCreate = async () => {
|
||||||
|
try {
|
||||||
if (!validateInputs()) return
|
if (!validateInputs()) return
|
||||||
|
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
setLoadingSpinnerDesc('Generating file hashes')
|
setLoadingSpinnerDesc('Generating file hashes')
|
||||||
const fileHashes = await generateFileHashes()
|
const fileHashes = await generateFileHashes()
|
||||||
if (!fileHashes) {
|
if (!fileHashes) return
|
||||||
setIsLoading(false)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Generating encryption key')
|
setLoadingSpinnerDesc('Generating encryption key')
|
||||||
const encryptionKey = await generateEncryptionKey()
|
const encryptionKey = await generateEncryptionKey()
|
||||||
@ -734,10 +731,7 @@ export const CreatePage = () => {
|
|||||||
if (await isOnline()) {
|
if (await isOnline()) {
|
||||||
setLoadingSpinnerDesc('generating files.zip')
|
setLoadingSpinnerDesc('generating files.zip')
|
||||||
const arrayBuffer = await generateFilesZip()
|
const arrayBuffer = await generateFilesZip()
|
||||||
if (!arrayBuffer) {
|
if (!arrayBuffer) return
|
||||||
setIsLoading(false)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Encrypting files.zip')
|
setLoadingSpinnerDesc('Encrypting files.zip')
|
||||||
const encryptedArrayBuffer = await encryptZipFile(
|
const encryptedArrayBuffer = await encryptZipFile(
|
||||||
@ -745,19 +739,19 @@ export const CreatePage = () => {
|
|||||||
encryptionKey
|
encryptionKey
|
||||||
)
|
)
|
||||||
|
|
||||||
|
const markConfig = createMarks(fileHashes)
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Uploading files.zip to file storage')
|
setLoadingSpinnerDesc('Uploading files.zip to file storage')
|
||||||
const fileUrl = await uploadFile(encryptedArrayBuffer)
|
const fileUrl = await uploadFile(encryptedArrayBuffer)
|
||||||
if (!fileUrl) {
|
if (!fileUrl) return
|
||||||
setIsLoading(false)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Generating create signature')
|
setLoadingSpinnerDesc('Generating create signature')
|
||||||
const createSignature = await generateCreateSignature(fileHashes, fileUrl)
|
const createSignature = await generateCreateSignature(
|
||||||
if (!createSignature) {
|
markConfig,
|
||||||
setIsLoading(false)
|
fileHashes,
|
||||||
return
|
fileUrl
|
||||||
}
|
)
|
||||||
|
if (!createSignature) return
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Generating keys for decryption')
|
setLoadingSpinnerDesc('Generating keys for decryption')
|
||||||
|
|
||||||
@ -769,11 +763,8 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const keys = await generateKeys(pubkeys, encryptionKey)
|
const keys = await generateKeys(pubkeys, encryptionKey)
|
||||||
|
if (!keys) return
|
||||||
|
|
||||||
if (!keys) {
|
|
||||||
setIsLoading(false)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const meta: Meta = {
|
const meta: Meta = {
|
||||||
createSignature,
|
createSignature,
|
||||||
keys,
|
keys,
|
||||||
@ -783,10 +774,7 @@ export const CreatePage = () => {
|
|||||||
|
|
||||||
setLoadingSpinnerDesc('Updating user app data')
|
setLoadingSpinnerDesc('Updating user app data')
|
||||||
const event = await updateUsersAppData(meta)
|
const event = await updateUsersAppData(meta)
|
||||||
if (!event) {
|
if (!event) return
|
||||||
setIsLoading(false)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Sending notifications to counterparties')
|
setLoadingSpinnerDesc('Sending notifications to counterparties')
|
||||||
const promises = sendNotifications(meta)
|
const promises = sendNotifications(meta)
|
||||||
@ -807,12 +795,15 @@ export const CreatePage = () => {
|
|||||||
zip.file(`files/${file.name}`, file)
|
zip.file(`files/${file.name}`, file)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const markConfig = createMarks(fileHashes)
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Generating create signature')
|
setLoadingSpinnerDesc('Generating create signature')
|
||||||
const createSignature = await generateCreateSignature(fileHashes, '')
|
const createSignature = await generateCreateSignature(
|
||||||
if (!createSignature) {
|
markConfig,
|
||||||
setIsLoading(false)
|
fileHashes,
|
||||||
return
|
''
|
||||||
}
|
)
|
||||||
|
if (!createSignature) return
|
||||||
|
|
||||||
const meta: Meta = {
|
const meta: Meta = {
|
||||||
createSignature,
|
createSignature,
|
||||||
@ -831,10 +822,7 @@ export const CreatePage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const arrayBuffer = await generateZipFile(zip)
|
const arrayBuffer = await generateZipFile(zip)
|
||||||
if (!arrayBuffer) {
|
if (!arrayBuffer) return
|
||||||
setIsLoading(false)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
setLoadingSpinnerDesc('Encrypting zip file')
|
setLoadingSpinnerDesc('Encrypting zip file')
|
||||||
const encryptedArrayBuffer = await encryptZipFile(
|
const encryptedArrayBuffer = await encryptZipFile(
|
||||||
@ -844,10 +832,18 @@ export const CreatePage = () => {
|
|||||||
|
|
||||||
await handleOfflineFlow(encryptedArrayBuffer, encryptionKey)
|
await handleOfflineFlow(encryptedArrayBuffer, encryptionKey)
|
||||||
}
|
}
|
||||||
|
} catch (error) {
|
||||||
|
if (error instanceof Error) {
|
||||||
|
toast.error(error.message)
|
||||||
|
}
|
||||||
|
console.error(error)
|
||||||
|
} finally {
|
||||||
|
setIsLoading(false)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onDrawFieldsChange = (pdfFiles: PdfFile[]) => {
|
const onDrawFieldsChange = (sigitFiles: SigitFile[]) => {
|
||||||
setDrawnPdfs(pdfFiles)
|
setDrawnFiles(sigitFiles)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (authUrl) {
|
if (authUrl) {
|
||||||
@ -870,27 +866,18 @@ export const CreatePage = () => {
|
|||||||
<div className={styles.flexWrap}>
|
<div className={styles.flexWrap}>
|
||||||
<div className={styles.inputWrapper}>
|
<div className={styles.inputWrapper}>
|
||||||
<TextField
|
<TextField
|
||||||
|
fullWidth
|
||||||
placeholder="Title"
|
placeholder="Title"
|
||||||
size="small"
|
size="small"
|
||||||
type="text"
|
type="text"
|
||||||
value={title}
|
value={title}
|
||||||
onChange={(e) => setTitle(e.target.value)}
|
onChange={(e) => setTitle(e.target.value)}
|
||||||
sx={{
|
|
||||||
width: '100%',
|
|
||||||
fontSize: '16px',
|
|
||||||
'& .MuiInputBase-input': {
|
|
||||||
padding: '7px 14px'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-notchedOutline': {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
|
<ol className={`${styles.paperGroup} ${styles.orderedFilesList}`}>
|
||||||
{selectedFiles.length > 0 &&
|
{selectedFiles.length > 0 &&
|
||||||
selectedFiles.map((file, index) => (
|
selectedFiles.map((file, index) => (
|
||||||
<div
|
<li
|
||||||
key={index}
|
key={index}
|
||||||
className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
|
className={`${fileListStyles.fileItem} ${isActive(file) && fileListStyles.active}`}
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
@ -898,107 +885,34 @@ export const CreatePage = () => {
|
|||||||
setCurrentFile(file)
|
setCurrentFile(file)
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<>
|
|
||||||
<span className={styles.fileName}>{file.name}</span>
|
<span className={styles.fileName}>{file.name}</span>
|
||||||
<Button
|
<Button
|
||||||
|
aria-label={`delete ${file.name}`}
|
||||||
variant="text"
|
variant="text"
|
||||||
onClick={(event) => handleRemoveFile(event, file)}
|
onClick={(event) => handleRemoveFile(event, file)}
|
||||||
sx={{
|
|
||||||
minWidth: '44px'
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon icon={faTrash} />
|
<FontAwesomeIcon icon={faTrash} />
|
||||||
</Button>
|
</Button>
|
||||||
</>
|
</li>
|
||||||
</div>
|
|
||||||
))}
|
))}
|
||||||
</ol>
|
</ol>
|
||||||
<Button variant="contained" onClick={handleUploadButtonClick}>
|
<Button variant="contained" onClick={handleUploadButtonClick}>
|
||||||
<FontAwesomeIcon icon={faUpload} />
|
<FontAwesomeIcon icon={faUpload} />
|
||||||
<span className={styles.uploadFileText}>Upload new files</span>
|
<span className={styles.uploadFileText}>Upload new files</span>
|
||||||
|
</Button>
|
||||||
<input
|
<input
|
||||||
ref={fileInputRef}
|
ref={fileInputRef}
|
||||||
hidden={true}
|
hidden={true}
|
||||||
multiple={true}
|
multiple={true}
|
||||||
type="file"
|
type="file"
|
||||||
|
aria-label="file-upload"
|
||||||
onChange={handleSelectFiles}
|
onChange={handleSelectFiles}
|
||||||
/>
|
/>
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
right={
|
right={
|
||||||
<div className={styles.flexWrap}>
|
<div className={styles.flexWrap}>
|
||||||
<div className={styles.inputWrapper}>
|
<div className={`${styles.paperGroup} ${styles.users}`}>
|
||||||
<TextField
|
|
||||||
placeholder="Add user"
|
|
||||||
value={userInput}
|
|
||||||
onChange={(e) => setUserInput(e.target.value)}
|
|
||||||
onKeyDown={handleInputKeyDown}
|
|
||||||
error={!!error}
|
|
||||||
fullWidth
|
|
||||||
sx={{
|
|
||||||
fontSize: '16px',
|
|
||||||
'& .MuiInputBase-input': {
|
|
||||||
padding: '7px 14px'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-notchedOutline': {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Select
|
|
||||||
name="add-user-role"
|
|
||||||
aria-label="role"
|
|
||||||
value={userRole}
|
|
||||||
variant="filled"
|
|
||||||
// Hide arrow for dropdown
|
|
||||||
IconComponent={() => null}
|
|
||||||
renderValue={(value) => (
|
|
||||||
<FontAwesomeIcon
|
|
||||||
color="var(--primary-main)"
|
|
||||||
icon={value === UserRole.signer ? faPen : faEye}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
onChange={(e) => setUserRole(e.target.value as UserRole)}
|
|
||||||
sx={{
|
|
||||||
fontSize: '16px',
|
|
||||||
minWidth: '44px',
|
|
||||||
'& .MuiInputBase-input': {
|
|
||||||
padding: '7px 14px!important',
|
|
||||||
textOverflow: 'unset!important'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem value={UserRole.signer}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<FontAwesomeIcon icon={faPen} />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>{UserRole.signer}</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
<MenuItem value={UserRole.viewer} sx={{}}>
|
|
||||||
<ListItemIcon>
|
|
||||||
<FontAwesomeIcon icon={faEye} />
|
|
||||||
</ListItemIcon>
|
|
||||||
<ListItemText>{UserRole.viewer}</ListItemText>
|
|
||||||
</MenuItem>
|
|
||||||
</Select>
|
|
||||||
<Button
|
|
||||||
disabled={!userInput}
|
|
||||||
onClick={handleAddUser}
|
|
||||||
variant="contained"
|
|
||||||
aria-label="Add"
|
|
||||||
sx={{
|
|
||||||
minWidth: '44px',
|
|
||||||
padding: '11.5px 12px',
|
|
||||||
borderTopLeftRadius: 0,
|
|
||||||
borderBottomLeftRadius: 0
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon icon={faPlus} />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className={styles.paperGroup}>
|
|
||||||
<DisplayUser
|
<DisplayUser
|
||||||
metadata={metadata}
|
metadata={metadata}
|
||||||
users={users}
|
users={users}
|
||||||
@ -1007,7 +921,43 @@ export const CreatePage = () => {
|
|||||||
moveSigner={moveSigner}
|
moveSigner={moveSigner}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className={styles.addCounterpart}>
|
||||||
|
<div className={styles.inputWrapper}>
|
||||||
|
<TextField
|
||||||
|
fullWidth
|
||||||
|
placeholder="Add counterpart"
|
||||||
|
value={userInput}
|
||||||
|
onChange={(e) => setUserInput(e.target.value)}
|
||||||
|
onKeyDown={handleInputKeyDown}
|
||||||
|
error={!!error}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
setUserRole(
|
||||||
|
userRole === UserRole.signer
|
||||||
|
? UserRole.viewer
|
||||||
|
: UserRole.signer
|
||||||
|
)
|
||||||
|
}
|
||||||
|
variant="contained"
|
||||||
|
aria-label="Toggle User Role"
|
||||||
|
className={styles.counterpartToggleButton}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={userRole === UserRole.signer ? faPen : faEye}
|
||||||
|
/>
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
disabled={!userInput}
|
||||||
|
onClick={handleAddUser}
|
||||||
|
variant="contained"
|
||||||
|
aria-label="Add"
|
||||||
|
className={styles.counterpartToggleButton}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faPlus} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
<Button onClick={handleCreate} variant="contained">
|
<Button onClick={handleCreate} variant="contained">
|
||||||
Publish
|
Publish
|
||||||
</Button>
|
</Button>
|
||||||
@ -1017,26 +967,18 @@ export const CreatePage = () => {
|
|||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={index}
|
key={index}
|
||||||
onClick={
|
{...(drawTool.active && {
|
||||||
drawTool.active
|
onClick: () => handleToolSelect(drawTool)
|
||||||
? () => {
|
})}
|
||||||
handleToolSelect(drawTool)
|
|
||||||
}
|
|
||||||
: () => null
|
|
||||||
}
|
|
||||||
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
|
className={`${styles.toolItem} ${selectedTool?.identifier === drawTool.identifier ? styles.selected : ''} ${!drawTool.active ? styles.comingSoon : ''}
|
||||||
`}
|
`}
|
||||||
>
|
>
|
||||||
{drawTool.icon}
|
<FontAwesomeIcon fontSize={'15px'} icon={drawTool.icon} />
|
||||||
{drawTool.label}
|
{drawTool.label}
|
||||||
{drawTool.active ? (
|
{drawTool.active ? (
|
||||||
<FontAwesomeIcon icon={faEllipsis} />
|
<FontAwesomeIcon fontSize={'15px'} icon={faEllipsis} />
|
||||||
) : (
|
) : (
|
||||||
<span
|
<span className={styles.comingSoonPlaceholder}>
|
||||||
style={{
|
|
||||||
fontSize: '10px'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Coming soon
|
Coming soon
|
||||||
</span>
|
</span>
|
||||||
)}
|
)}
|
||||||
@ -1050,6 +992,9 @@ export const CreatePage = () => {
|
|||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
leftIcon={faFileCirclePlus}
|
||||||
|
centerIcon={faFile}
|
||||||
|
rightIcon={faToolbox}
|
||||||
>
|
>
|
||||||
<DrawPDFFields
|
<DrawPDFFields
|
||||||
metadata={metadata}
|
metadata={metadata}
|
||||||
@ -1081,12 +1026,12 @@ const DisplayUser = ({
|
|||||||
}: DisplayUsersProps) => {
|
}: DisplayUsersProps) => {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<DndProvider backend={HTML5Backend}>
|
<DndProvider backend={MultiBackend} options={HTML5toTouch}>
|
||||||
{users
|
{users
|
||||||
.filter((user) => user.role === UserRole.signer)
|
.filter((user) => user.role === UserRole.signer)
|
||||||
.map((user, index) => (
|
.map((user, index) => (
|
||||||
<SignerRow
|
<SignerCounterpart
|
||||||
key={`signer-${index}`}
|
key={`signer-${user.pubkey}`}
|
||||||
userMeta={metadata[user.pubkey]}
|
userMeta={metadata[user.pubkey]}
|
||||||
user={user}
|
user={user}
|
||||||
index={index}
|
index={index}
|
||||||
@ -1098,72 +1043,16 @@ const DisplayUser = ({
|
|||||||
</DndProvider>
|
</DndProvider>
|
||||||
{users
|
{users
|
||||||
.filter((user) => user.role === UserRole.viewer)
|
.filter((user) => user.role === UserRole.viewer)
|
||||||
.map((user, index) => {
|
.map((user) => {
|
||||||
const userMeta = metadata[user.pubkey]
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.user} key={index}>
|
<div className={styles.user} key={`viewer-${user.pubkey}`}>
|
||||||
<div className={styles.avatar}>
|
<Counterpart
|
||||||
<UserAvatar
|
userMeta={metadata[user.pubkey]}
|
||||||
pubkey={user.pubkey}
|
user={user}
|
||||||
name={
|
handleUserRoleChange={handleUserRoleChange}
|
||||||
userMeta?.display_name ||
|
handleRemoveUser={handleRemoveUser}
|
||||||
userMeta?.name ||
|
|
||||||
shorten(hexToNpub(user.pubkey))
|
|
||||||
}
|
|
||||||
image={userMeta?.picture}
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Select
|
|
||||||
name={`change-user-role-${user.pubkey}`}
|
|
||||||
aria-label="role"
|
|
||||||
value={user.role}
|
|
||||||
variant="outlined"
|
|
||||||
IconComponent={() => null}
|
|
||||||
renderValue={(value) => (
|
|
||||||
<FontAwesomeIcon
|
|
||||||
fontSize={'14px'}
|
|
||||||
color="var(--primary-main)"
|
|
||||||
icon={value === UserRole.signer ? faPen : faEye}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleUserRoleChange(e.target.value as UserRole, user.pubkey)
|
|
||||||
}
|
|
||||||
sx={{
|
|
||||||
fontSize: '16px',
|
|
||||||
minWidth: '34px',
|
|
||||||
maxWidth: '34px',
|
|
||||||
minHeight: '34px',
|
|
||||||
maxHeight: '34px',
|
|
||||||
'& .MuiInputBase-input': {
|
|
||||||
padding: '10px !important',
|
|
||||||
textOverflow: 'unset!important'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-notchedOutline': {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
|
|
||||||
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
|
|
||||||
</Select>
|
|
||||||
<Tooltip title="Remove User" arrow>
|
|
||||||
<Button
|
|
||||||
onClick={() => handleRemoveUser(user.pubkey)}
|
|
||||||
sx={{
|
|
||||||
minWidth: '34px',
|
|
||||||
height: '34px',
|
|
||||||
padding: 0,
|
|
||||||
color: 'rgba(0, 0, 0, 0.35)',
|
|
||||||
'&:hover': {
|
|
||||||
color: 'white'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
|
|
||||||
</Button>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</>
|
</>
|
||||||
@ -1176,23 +1065,26 @@ interface DragItem {
|
|||||||
type: string
|
type: string
|
||||||
}
|
}
|
||||||
|
|
||||||
type SignerRowProps = {
|
type CounterpartProps = {
|
||||||
userMeta: ProfileMetadata
|
userMeta: ProfileMetadata
|
||||||
user: User
|
user: User
|
||||||
index: number
|
|
||||||
moveSigner: (dragIndex: number, hoverIndex: number) => void
|
|
||||||
handleUserRoleChange: (role: UserRole, pubkey: string) => void
|
handleUserRoleChange: (role: UserRole, pubkey: string) => void
|
||||||
handleRemoveUser: (pubkey: string) => void
|
handleRemoveUser: (pubkey: string) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
const SignerRow = ({
|
type SignerCounterpartProps = CounterpartProps & {
|
||||||
|
index: number
|
||||||
|
moveSigner: (dragIndex: number, hoverIndex: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const SignerCounterpart = ({
|
||||||
userMeta,
|
userMeta,
|
||||||
user,
|
user,
|
||||||
index,
|
index,
|
||||||
moveSigner,
|
moveSigner,
|
||||||
handleUserRoleChange,
|
handleUserRoleChange,
|
||||||
handleRemoveUser
|
handleRemoveUser
|
||||||
}: SignerRowProps) => {
|
}: SignerCounterpartProps) => {
|
||||||
const ref = useRef<HTMLTableRowElement>(null)
|
const ref = useRef<HTMLTableRowElement>(null)
|
||||||
|
|
||||||
const [{ handlerId }, drop] = useDrop<
|
const [{ handlerId }, drop] = useDrop<
|
||||||
@ -1266,7 +1158,7 @@ const SignerRow = ({
|
|||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
const opacity = isDragging ? 0 : 1
|
const opacity = isDragging ? 0.2 : 1
|
||||||
drag(drop(ref))
|
drag(drop(ref))
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@ -1277,6 +1169,24 @@ const SignerRow = ({
|
|||||||
ref={ref}
|
ref={ref}
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
|
<FontAwesomeIcon width={'14px'} fontSize={'14px'} icon={faGripLines} />
|
||||||
|
<Counterpart
|
||||||
|
user={user}
|
||||||
|
userMeta={userMeta}
|
||||||
|
handleRemoveUser={handleRemoveUser}
|
||||||
|
handleUserRoleChange={handleUserRoleChange}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const Counterpart = ({
|
||||||
|
userMeta,
|
||||||
|
user,
|
||||||
|
handleUserRoleChange,
|
||||||
|
handleRemoveUser
|
||||||
|
}: CounterpartProps) => {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
<div className={styles.avatar}>
|
<div className={styles.avatar}>
|
||||||
<UserAvatar
|
<UserAvatar
|
||||||
pubkey={user.pubkey}
|
pubkey={user.pubkey}
|
||||||
@ -1288,56 +1198,31 @@ const SignerRow = ({
|
|||||||
image={userMeta?.picture}
|
image={userMeta?.picture}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<Select
|
<Tooltip title="Toggle User Role" arrow disableInteractive>
|
||||||
name={`change-user-role-${user.pubkey}`}
|
|
||||||
aria-label="role"
|
|
||||||
value={user.role}
|
|
||||||
variant="outlined"
|
|
||||||
IconComponent={() => null}
|
|
||||||
renderValue={(value) => (
|
|
||||||
<FontAwesomeIcon
|
|
||||||
fontSize={'14px'}
|
|
||||||
color="var(--primary-main)"
|
|
||||||
icon={value === UserRole.signer ? faPen : faEye}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
onChange={(e) =>
|
|
||||||
handleUserRoleChange(e.target.value as UserRole, user.pubkey)
|
|
||||||
}
|
|
||||||
sx={{
|
|
||||||
fontSize: '16px',
|
|
||||||
minWidth: '34px',
|
|
||||||
maxWidth: '34px',
|
|
||||||
minHeight: '34px',
|
|
||||||
maxHeight: '34px',
|
|
||||||
'& .MuiInputBase-input': {
|
|
||||||
padding: '10px !important',
|
|
||||||
textOverflow: 'unset!important'
|
|
||||||
},
|
|
||||||
'& .MuiOutlinedInput-notchedOutline': {
|
|
||||||
display: 'none'
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MenuItem value={UserRole.signer}>{UserRole.signer}</MenuItem>
|
|
||||||
<MenuItem value={UserRole.viewer}>{UserRole.viewer}</MenuItem>
|
|
||||||
</Select>
|
|
||||||
<Tooltip title="Remove User" arrow>
|
|
||||||
<Button
|
<Button
|
||||||
onClick={() => handleRemoveUser(user.pubkey)}
|
onClick={() =>
|
||||||
sx={{
|
handleUserRoleChange(
|
||||||
minWidth: '34px',
|
user.role === UserRole.signer ? UserRole.viewer : UserRole.signer,
|
||||||
height: '34px',
|
user.pubkey
|
||||||
padding: 0,
|
)
|
||||||
color: 'rgba(0, 0, 0, 0.35)',
|
}
|
||||||
'&:hover': {
|
className={styles.counterpartRowToggleButton}
|
||||||
color: 'white'
|
data-variant="primary"
|
||||||
}
|
>
|
||||||
}}
|
<FontAwesomeIcon
|
||||||
>
|
icon={user.role === UserRole.signer ? faPen : faEye}
|
||||||
<FontAwesomeIcon fontSize={'14px'} icon={faTrash} />
|
/>
|
||||||
</Button>
|
</Button>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</div>
|
<Tooltip title="Remove User" arrow disableInteractive>
|
||||||
|
<Button
|
||||||
|
onClick={() => handleRemoveUser(user.pubkey)}
|
||||||
|
className={styles.counterpartRowToggleButton}
|
||||||
|
data-variant="secondary"
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faTrash} />
|
||||||
|
</Button>
|
||||||
|
</Tooltip>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -4,6 +4,8 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
|
||||||
|
container-type: inline-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
.orderedFilesList {
|
.orderedFilesList {
|
||||||
@ -40,6 +42,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
min-width: 44px;
|
||||||
color: $primary-main;
|
color: $primary-main;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -67,10 +70,6 @@
|
|||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
|
||||||
// Automatic scrolling if paper-group gets large enough
|
|
||||||
// used for files on the left and users on the right
|
|
||||||
max-height: 350px;
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
@ -78,8 +77,9 @@
|
|||||||
.inputWrapper {
|
.inputWrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
flex-shrink: 0;
|
||||||
|
|
||||||
height: 34px;
|
height: 36px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
outline: solid 1px #dddddd;
|
outline: solid 1px #dddddd;
|
||||||
@ -90,6 +90,43 @@
|
|||||||
&:focus-within {
|
&:focus-within {
|
||||||
outline-color: $primary-main;
|
outline-color: $primary-main;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Override default MUI input styles only inside inputWrapepr
|
||||||
|
:global {
|
||||||
|
.MuiInputBase-input {
|
||||||
|
padding: 7px 14px;
|
||||||
|
}
|
||||||
|
.MuiOutlinedInput-notchedOutline {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.addCounterpart {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: start;
|
||||||
|
gap: 10px;
|
||||||
|
|
||||||
|
> .inputWrapper {
|
||||||
|
flex-shrink: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
button {
|
||||||
|
min-width: 44px;
|
||||||
|
padding: 11px 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.users {
|
||||||
|
flex-shrink: 0;
|
||||||
|
max-height: 33vh;
|
||||||
|
|
||||||
|
.counterpartToggleButton {
|
||||||
|
min-width: 44px;
|
||||||
|
padding: 11px 12px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.user {
|
.user {
|
||||||
@ -104,6 +141,22 @@
|
|||||||
a:hover {
|
a:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Higher specificify to override default button styles
|
||||||
|
.counterpartRowToggleButton {
|
||||||
|
min-width: 34px;
|
||||||
|
height: 34px;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.counterpartRowToggleButton {
|
||||||
|
&[data-variant='primary'] {
|
||||||
|
color: $primary-main;
|
||||||
|
}
|
||||||
|
&[data-variant='secondary'] {
|
||||||
|
color: rgba(0, 0, 0, 0.35);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
@ -130,26 +183,35 @@
|
|||||||
|
|
||||||
.toolbox {
|
.toolbox {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1fr 1fr;
|
grid-template-columns: 1fr;
|
||||||
|
|
||||||
|
@container (min-width: 204px) {
|
||||||
|
grid-template-columns: repeat(2, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
|
@container (min-width: 309px) {
|
||||||
|
grid-template-columns: repeat(3, 1fr);
|
||||||
|
}
|
||||||
|
|
||||||
gap: 15px;
|
gap: 15px;
|
||||||
|
|
||||||
max-height: 450px;
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
|
||||||
|
container-type: inline-size;
|
||||||
}
|
}
|
||||||
|
|
||||||
.toolItem {
|
.toolItem {
|
||||||
width: 90px;
|
|
||||||
height: 90px;
|
|
||||||
|
|
||||||
transition: ease 0.2s;
|
transition: ease 0.2s;
|
||||||
display: inline-flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 5px;
|
gap: 5px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
padding: 10px 5px 5px 5px;
|
padding: 10px 5px 5px 5px;
|
||||||
background: rgba(0, 0, 0, 0.05);
|
background: rgba(0, 0, 0, 0.05);
|
||||||
color: rgba(0, 0, 0, 0.5);
|
color: rgba(0, 0, 0, 0.5);
|
||||||
|
|
||||||
|
text-align: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -162,7 +224,7 @@
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
|
|
||||||
&:not(.selected) {
|
&:not(.selected, .comingSoon) {
|
||||||
&:hover {
|
&:hover {
|
||||||
background: $primary-light;
|
background: $primary-light;
|
||||||
color: white;
|
color: white;
|
||||||
@ -174,3 +236,7 @@
|
|||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.comingSoonPlaceholder {
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
@ -18,6 +18,7 @@ import {
|
|||||||
SigitCardDisplayInfo,
|
SigitCardDisplayInfo,
|
||||||
SigitStatus
|
SigitStatus
|
||||||
} from '../../utils'
|
} from '../../utils'
|
||||||
|
import { Footer } from '../../components/Footer/Footer'
|
||||||
|
|
||||||
// Unsupported Filter options are commented
|
// Unsupported Filter options are commented
|
||||||
const FILTERS = [
|
const FILTERS = [
|
||||||
@ -262,6 +263,7 @@ export const HomePage = () => {
|
|||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</Container>
|
</Container>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -19,6 +19,7 @@ import {
|
|||||||
faWifi
|
faWifi
|
||||||
} from '@fortawesome/free-solid-svg-icons'
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
import { FontAwesomeIconStack } from '../../components/FontAwesomeIconStack'
|
import { FontAwesomeIconStack } from '../../components/FontAwesomeIconStack'
|
||||||
|
import { Footer } from '../../components/Footer/Footer'
|
||||||
|
|
||||||
export const LandingPage = () => {
|
export const LandingPage = () => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
@ -162,6 +163,7 @@ export const LandingPage = () => {
|
|||||||
|
|
||||||
<Outlet />
|
<Outlet />
|
||||||
</Container>
|
</Container>
|
||||||
|
<Footer />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -20,6 +20,7 @@ import {
|
|||||||
} from '../../utils'
|
} from '../../utils'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { Container } from '../../components/Container'
|
import { Container } from '../../components/Container'
|
||||||
|
import { Footer } from '../../components/Footer/Footer'
|
||||||
|
|
||||||
export const ProfilePage = () => {
|
export const ProfilePage = () => {
|
||||||
const navigate = useNavigate()
|
const navigate = useNavigate()
|
||||||
@ -41,6 +42,16 @@ export const ProfilePage = () => {
|
|||||||
const [isLoading, setIsLoading] = useState(true)
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
const [loadingSpinnerDesc] = useState('Fetching metadata')
|
const [loadingSpinnerDesc] = useState('Fetching metadata')
|
||||||
|
|
||||||
|
const profileName =
|
||||||
|
pubkey &&
|
||||||
|
profileMetadata &&
|
||||||
|
truncate(
|
||||||
|
profileMetadata.display_name || profileMetadata.name || hexToNpub(pubkey),
|
||||||
|
{
|
||||||
|
length: 16
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (npub) {
|
if (npub) {
|
||||||
try {
|
try {
|
||||||
@ -165,7 +176,10 @@ export const ProfilePage = () => {
|
|||||||
className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
|
className={`${styles.banner} ${!profileMetadata || !profileMetadata.banner ? styles.noImage : ''}`}
|
||||||
>
|
>
|
||||||
{profileMetadata && profileMetadata.banner ? (
|
{profileMetadata && profileMetadata.banner ? (
|
||||||
<img src={profileMetadata.banner} />
|
<img
|
||||||
|
src={profileMetadata.banner}
|
||||||
|
alt={`banner image for ${profileName}`}
|
||||||
|
/>
|
||||||
) : (
|
) : (
|
||||||
''
|
''
|
||||||
)}
|
)}
|
||||||
@ -185,6 +199,7 @@ export const ProfilePage = () => {
|
|||||||
<img
|
<img
|
||||||
className={styles['image-placeholder']}
|
className={styles['image-placeholder']}
|
||||||
src={getProfileImage(profileMetadata!)}
|
src={getProfileImage(profileMetadata!)}
|
||||||
|
alt={profileName}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</Box>
|
</Box>
|
||||||
@ -224,14 +239,7 @@ export const ProfilePage = () => {
|
|||||||
variant="h6"
|
variant="h6"
|
||||||
className={styles.bold}
|
className={styles.bold}
|
||||||
>
|
>
|
||||||
{truncate(
|
{profileName}
|
||||||
profileMetadata.display_name ||
|
|
||||||
profileMetadata.name ||
|
|
||||||
hexToNpub(pubkey),
|
|
||||||
{
|
|
||||||
length: 16
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
</Typography>
|
</Typography>
|
||||||
)}
|
)}
|
||||||
</Box>
|
</Box>
|
||||||
@ -285,6 +293,7 @@ export const ProfilePage = () => {
|
|||||||
</Box>
|
</Box>
|
||||||
</Container>
|
</Container>
|
||||||
)}
|
)}
|
||||||
|
<Footer />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -13,6 +13,7 @@ import { useNavigate } from 'react-router-dom'
|
|||||||
import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
|
import { appPrivateRoutes, getProfileSettingsRoute } from '../../routes'
|
||||||
import { State } from '../../store/rootReducer'
|
import { State } from '../../store/rootReducer'
|
||||||
import { Container } from '../../components/Container'
|
import { Container } from '../../components/Container'
|
||||||
|
import { Footer } from '../../components/Footer/Footer'
|
||||||
|
|
||||||
export const SettingsPage = () => {
|
export const SettingsPage = () => {
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
@ -43,6 +44,7 @@ export const SettingsPage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
<Container>
|
<Container>
|
||||||
<List
|
<List
|
||||||
sx={{
|
sx={{
|
||||||
@ -94,5 +96,7 @@ export const SettingsPage = () => {
|
|||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
</List>
|
</List>
|
||||||
</Container>
|
</Container>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
4
src/pages/settings/cache/index.tsx
vendored
4
src/pages/settings/cache/index.tsx
vendored
@ -14,6 +14,7 @@ import { toast } from 'react-toastify'
|
|||||||
import { localCache } from '../../../services'
|
import { localCache } from '../../../services'
|
||||||
import { LoadingSpinner } from '../../../components/LoadingSpinner'
|
import { LoadingSpinner } from '../../../components/LoadingSpinner'
|
||||||
import { Container } from '../../../components/Container'
|
import { Container } from '../../../components/Container'
|
||||||
|
import { Footer } from '../../../components/Footer/Footer'
|
||||||
|
|
||||||
export const CacheSettingsPage = () => {
|
export const CacheSettingsPage = () => {
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
@ -50,6 +51,7 @@ export const CacheSettingsPage = () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
<Container>
|
<Container>
|
||||||
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
{isLoading && <LoadingSpinner desc={loadingSpinnerDesc} />}
|
||||||
<List
|
<List
|
||||||
@ -93,5 +95,7 @@ export const CacheSettingsPage = () => {
|
|||||||
</ListItemButton>
|
</ListItemButton>
|
||||||
</List>
|
</List>
|
||||||
</Container>
|
</Container>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -32,6 +32,7 @@ import {
|
|||||||
unixNow
|
unixNow
|
||||||
} from '../../../utils'
|
} from '../../../utils'
|
||||||
import { Container } from '../../../components/Container'
|
import { Container } from '../../../components/Container'
|
||||||
|
import { Footer } from '../../../components/Footer/Footer'
|
||||||
|
|
||||||
export const ProfileSettingsPage = () => {
|
export const ProfileSettingsPage = () => {
|
||||||
const theme = useTheme()
|
const theme = useTheme()
|
||||||
@ -385,6 +386,7 @@ export const ProfileSettingsPage = () => {
|
|||||||
</LoadingButton>
|
</LoadingButton>
|
||||||
)}
|
)}
|
||||||
</Container>
|
</Container>
|
||||||
|
<Footer />
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -27,6 +27,7 @@ import {
|
|||||||
shorten
|
shorten
|
||||||
} from '../../../utils'
|
} from '../../../utils'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
|
import { Footer } from '../../../components/Footer/Footer'
|
||||||
|
|
||||||
export const RelaysPage = () => {
|
export const RelaysPage = () => {
|
||||||
const usersPubkey = useAppSelector((state) => state.auth?.usersPubkey)
|
const usersPubkey = useAppSelector((state) => state.auth?.usersPubkey)
|
||||||
@ -270,6 +271,7 @@ const RelayItem = ({
|
|||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<>
|
||||||
<Box className={styles.relay}>
|
<Box className={styles.relay}>
|
||||||
<List>
|
<List>
|
||||||
<ListItem>
|
<ListItem>
|
||||||
@ -426,5 +428,7 @@ const RelayItem = ({
|
|||||||
)}
|
)}
|
||||||
</List>
|
</List>
|
||||||
</Box>
|
</Box>
|
||||||
|
<Footer />
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -38,10 +38,8 @@ import {
|
|||||||
import { Container } from '../../components/Container'
|
import { Container } from '../../components/Container'
|
||||||
import { DisplayMeta } from './internal/displayMeta'
|
import { DisplayMeta } from './internal/displayMeta'
|
||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { PdfFile } from '../../types/drawing.ts'
|
|
||||||
import { convertToPdfFile } from '../../utils/pdf.ts'
|
|
||||||
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
import { CurrentUserMark, Mark } from '../../types/mark.ts'
|
||||||
import { getLastSignersSig } from '../../utils/sign.ts'
|
import { getLastSignersSig, isFullySigned } from '../../utils/sign.ts'
|
||||||
import {
|
import {
|
||||||
filterMarksByPubkey,
|
filterMarksByPubkey,
|
||||||
getCurrentUserMarks,
|
getCurrentUserMarks,
|
||||||
@ -49,7 +47,11 @@ import {
|
|||||||
updateMarks
|
updateMarks
|
||||||
} from '../../utils'
|
} from '../../utils'
|
||||||
import PdfMarking from '../../components/PDFView/PdfMarking.tsx'
|
import PdfMarking from '../../components/PDFView/PdfMarking.tsx'
|
||||||
import { getZipWithFiles } from '../../utils/file.ts'
|
import {
|
||||||
|
convertToSigitFile,
|
||||||
|
getZipWithFiles,
|
||||||
|
SigitFile
|
||||||
|
} from '../../utils/file.ts'
|
||||||
import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
|
import { ARRAY_BUFFER, DEFLATE } from '../../utils/const.ts'
|
||||||
enum SignedStatus {
|
enum SignedStatus {
|
||||||
Fully_Signed,
|
Fully_Signed,
|
||||||
@ -76,7 +78,7 @@ export const SignPage = () => {
|
|||||||
|
|
||||||
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
const [selectedFile, setSelectedFile] = useState<File | null>(null)
|
||||||
|
|
||||||
const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
|
const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
|
||||||
|
|
||||||
const [isLoading, setIsLoading] = useState(true)
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
const [loadingSpinnerDesc, setLoadingSpinnerDesc] = useState('')
|
||||||
@ -110,13 +112,13 @@ export const SignPage = () => {
|
|||||||
const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>(
|
const [currentUserMarks, setCurrentUserMarks] = useState<CurrentUserMark[]>(
|
||||||
[]
|
[]
|
||||||
)
|
)
|
||||||
const [isReadyToSign, setIsReadyToSign] = useState(false)
|
const [isMarksCompleted, setIsMarksCompleted] = useState(false)
|
||||||
const [otherUserMarks, setOtherUserMarks] = useState<Mark[]>([])
|
const [otherUserMarks, setOtherUserMarks] = useState<Mark[]>([])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (signers.length > 0) {
|
if (signers.length > 0) {
|
||||||
// check if all signers have signed then its fully signed
|
// check if all signers have signed then its fully signed
|
||||||
if (signers.every((signer) => signedBy.includes(signer))) {
|
if (isFullySigned(signers, signedBy)) {
|
||||||
setSignedStatus(SignedStatus.Fully_Signed)
|
setSignedStatus(SignedStatus.Fully_Signed)
|
||||||
} else {
|
} else {
|
||||||
for (const signer of signers) {
|
for (const signer of signers) {
|
||||||
@ -214,7 +216,7 @@ export const SignPage = () => {
|
|||||||
const otherUserMarks = findOtherUserMarks(signedMarks, usersPubkey!)
|
const otherUserMarks = findOtherUserMarks(signedMarks, usersPubkey!)
|
||||||
setOtherUserMarks(otherUserMarks)
|
setOtherUserMarks(otherUserMarks)
|
||||||
setCurrentUserMarks(currentUserMarks)
|
setCurrentUserMarks(currentUserMarks)
|
||||||
setIsReadyToSign(isCurrentUserMarksComplete(currentUserMarks))
|
setIsMarksCompleted(isCurrentUserMarksComplete(currentUserMarks))
|
||||||
}
|
}
|
||||||
|
|
||||||
setSignedBy(Object.keys(meta.docSignatures) as `npub1${string}`[])
|
setSignedBy(Object.keys(meta.docSignatures) as `npub1${string}`[])
|
||||||
@ -402,7 +404,7 @@ export const SignPage = () => {
|
|||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const files: { [filename: string]: PdfFile } = {}
|
const files: { [filename: string]: SigitFile } = {}
|
||||||
const fileHashes: { [key: string]: string | null } = {}
|
const fileHashes: { [key: string]: string | null } = {}
|
||||||
const fileNames = Object.values(zip.files).map((entry) => entry.name)
|
const fileNames = Object.values(zip.files).map((entry) => entry.name)
|
||||||
|
|
||||||
@ -416,8 +418,7 @@ export const SignPage = () => {
|
|||||||
)
|
)
|
||||||
|
|
||||||
if (arrayBuffer) {
|
if (arrayBuffer) {
|
||||||
files[fileName] = await convertToPdfFile(arrayBuffer, fileName)
|
files[fileName] = await convertToSigitFile(arrayBuffer, fileName)
|
||||||
|
|
||||||
const hash = await getHash(arrayBuffer)
|
const hash = await getHash(arrayBuffer)
|
||||||
if (hash) {
|
if (hash) {
|
||||||
fileHashes[fileName] = hash
|
fileHashes[fileName] = hash
|
||||||
@ -462,7 +463,7 @@ export const SignPage = () => {
|
|||||||
const zip = await loadZip(decryptedZipFile)
|
const zip = await loadZip(decryptedZipFile)
|
||||||
if (!zip) return
|
if (!zip) return
|
||||||
|
|
||||||
const files: { [filename: string]: PdfFile } = {}
|
const files: { [filename: string]: SigitFile } = {}
|
||||||
const fileHashes: { [key: string]: string | null } = {}
|
const fileHashes: { [key: string]: string | null } = {}
|
||||||
const fileNames = Object.values(zip.files)
|
const fileNames = Object.values(zip.files)
|
||||||
.filter((entry) => entry.name.startsWith('files/') && !entry.dir)
|
.filter((entry) => entry.name.startsWith('files/') && !entry.dir)
|
||||||
@ -479,7 +480,7 @@ export const SignPage = () => {
|
|||||||
)
|
)
|
||||||
|
|
||||||
if (arrayBuffer) {
|
if (arrayBuffer) {
|
||||||
files[fileName] = await convertToPdfFile(arrayBuffer, fileName)
|
files[fileName] = await convertToSigitFile(arrayBuffer, fileName)
|
||||||
|
|
||||||
const hash = await getHash(arrayBuffer)
|
const hash = await getHash(arrayBuffer)
|
||||||
if (hash) {
|
if (hash) {
|
||||||
@ -541,10 +542,13 @@ export const SignPage = () => {
|
|||||||
setLoadingSpinnerDesc('Signing nostr event')
|
setLoadingSpinnerDesc('Signing nostr event')
|
||||||
|
|
||||||
const prevSig = getPrevSignersSig(hexToNpub(usersPubkey!))
|
const prevSig = getPrevSignersSig(hexToNpub(usersPubkey!))
|
||||||
if (!prevSig) return
|
if (!prevSig) {
|
||||||
|
setIsLoading(false)
|
||||||
|
toast.error('Previous signature is invalid')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
const marks = getSignerMarksForMeta()
|
const marks = getSignerMarksForMeta() || []
|
||||||
if (!marks) return
|
|
||||||
|
|
||||||
const signedEvent = await signEventForMeta({ prevSig, marks })
|
const signedEvent = await signEventForMeta({ prevSig, marks })
|
||||||
if (!signedEvent) return
|
if (!signedEvent) return
|
||||||
@ -764,8 +768,8 @@ export const SignPage = () => {
|
|||||||
|
|
||||||
zip.file('meta.json', stringifiedMeta)
|
zip.file('meta.json', stringifiedMeta)
|
||||||
|
|
||||||
for (const [fileName, pdf] of Object.entries(files)) {
|
for (const [fileName, file] of Object.entries(files)) {
|
||||||
zip.file(`files/${fileName}`, await pdf.file.arrayBuffer())
|
zip.file(`files/${fileName}`, await file.arrayBuffer())
|
||||||
}
|
}
|
||||||
|
|
||||||
const arrayBuffer = await zip
|
const arrayBuffer = await zip
|
||||||
@ -802,8 +806,8 @@ export const SignPage = () => {
|
|||||||
|
|
||||||
zip.file('meta.json', stringifiedMeta)
|
zip.file('meta.json', stringifiedMeta)
|
||||||
|
|
||||||
for (const [fileName, pdf] of Object.entries(files)) {
|
for (const [fileName, file] of Object.entries(files)) {
|
||||||
zip.file(`files/${fileName}`, await pdf.file.arrayBuffer())
|
zip.file(`files/${fileName}`, await file.arrayBuffer())
|
||||||
}
|
}
|
||||||
|
|
||||||
const arrayBuffer = await zip
|
const arrayBuffer = await zip
|
||||||
@ -882,7 +886,21 @@ export const SignPage = () => {
|
|||||||
return <LoadingSpinner desc={loadingSpinnerDesc} />
|
return <LoadingSpinner desc={loadingSpinnerDesc} />
|
||||||
}
|
}
|
||||||
|
|
||||||
if (isReadyToSign) {
|
if (!isMarksCompleted && signedStatus === SignedStatus.User_Is_Next_Signer) {
|
||||||
|
return (
|
||||||
|
<PdfMarking
|
||||||
|
files={getCurrentUserFiles(files, currentFileHashes, creatorFileHashes)}
|
||||||
|
currentUserMarks={currentUserMarks}
|
||||||
|
setIsMarksCompleted={setIsMarksCompleted}
|
||||||
|
setCurrentUserMarks={setCurrentUserMarks}
|
||||||
|
setUpdatedMarks={setUpdatedMarks}
|
||||||
|
handleDownload={handleDownload}
|
||||||
|
otherUserMarks={otherUserMarks}
|
||||||
|
meta={meta}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Container className={styles.container}>
|
<Container className={styles.container}>
|
||||||
@ -955,17 +973,3 @@ export const SignPage = () => {
|
|||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
|
||||||
<PdfMarking
|
|
||||||
files={getCurrentUserFiles(files, currentFileHashes, creatorFileHashes)}
|
|
||||||
currentUserMarks={currentUserMarks}
|
|
||||||
setIsReadyToSign={setIsReadyToSign}
|
|
||||||
setCurrentUserMarks={setCurrentUserMarks}
|
|
||||||
setUpdatedMarks={setUpdatedMarks}
|
|
||||||
handleDownload={handleDownload}
|
|
||||||
otherUserMarks={otherUserMarks}
|
|
||||||
meta={meta}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
@ -34,11 +34,11 @@ import { UserAvatar } from '../../../components/UserAvatar'
|
|||||||
import { MetadataController } from '../../../controllers'
|
import { MetadataController } from '../../../controllers'
|
||||||
import { npubToHex, shorten, hexToNpub, parseJson } from '../../../utils'
|
import { npubToHex, shorten, hexToNpub, parseJson } from '../../../utils'
|
||||||
import styles from '../style.module.scss'
|
import styles from '../style.module.scss'
|
||||||
import { PdfFile } from '../../../types/drawing.ts'
|
import { SigitFile } from '../../../utils/file'
|
||||||
|
|
||||||
type DisplayMetaProps = {
|
type DisplayMetaProps = {
|
||||||
meta: Meta
|
meta: Meta
|
||||||
files: { [filename: string]: PdfFile }
|
files: { [fileName: string]: SigitFile }
|
||||||
submittedBy: string
|
submittedBy: string
|
||||||
signers: `npub1${string}`[]
|
signers: `npub1${string}`[]
|
||||||
viewers: `npub1${string}`[]
|
viewers: `npub1${string}`[]
|
||||||
@ -143,12 +143,9 @@ export const DisplayMeta = ({
|
|||||||
})
|
})
|
||||||
}, [users, submittedBy, metadata])
|
}, [users, submittedBy, metadata])
|
||||||
|
|
||||||
const downloadFile = async (filename: string) => {
|
const downloadFile = async (fileName: string) => {
|
||||||
const arrayBuffer = await files[filename].file.arrayBuffer()
|
const file = files[fileName]
|
||||||
if (!arrayBuffer) return
|
saveAs(file)
|
||||||
|
|
||||||
const blob = new Blob([arrayBuffer])
|
|
||||||
saveAs(blob, filename)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -2,8 +2,6 @@
|
|||||||
|
|
||||||
.container {
|
.container {
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
//width: 550px;
|
|
||||||
//max-width: 550px;
|
|
||||||
|
|
||||||
.inputBlock {
|
.inputBlock {
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -67,7 +65,7 @@
|
|||||||
//z-index: 200;
|
//z-index: 200;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixedBottomForm input[type="text"] {
|
.fixedBottomForm input[type='text'] {
|
||||||
width: 80%;
|
width: 80%;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Box, Button, Divider, Tooltip, Typography } from '@mui/material'
|
import { Box, Button, Tooltip, Typography } from '@mui/material'
|
||||||
import JSZip from 'jszip'
|
import JSZip from 'jszip'
|
||||||
import { MuiFileInput } from 'mui-file-input'
|
import { MuiFileInput } from 'mui-file-input'
|
||||||
import { Event, verifyEvent } from 'nostr-tools'
|
import { Event, verifyEvent } from 'nostr-tools'
|
||||||
@ -26,11 +26,11 @@ import {
|
|||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
import { useLocation } from 'react-router-dom'
|
import { useLocation } from 'react-router-dom'
|
||||||
import axios from 'axios'
|
import axios from 'axios'
|
||||||
import { PdfFile } from '../../types/drawing.ts'
|
|
||||||
import {
|
import {
|
||||||
addMarks,
|
addMarks,
|
||||||
convertToPdfBlob,
|
convertToPdfBlob,
|
||||||
convertToPdfFile,
|
FONT_SIZE,
|
||||||
|
FONT_TYPE,
|
||||||
groupMarksByFileNamePage,
|
groupMarksByFileNamePage,
|
||||||
inPx
|
inPx
|
||||||
} from '../../utils/pdf.ts'
|
} from '../../utils/pdf.ts'
|
||||||
@ -49,6 +49,15 @@ import FileList from '../../components/FileList'
|
|||||||
import { CurrentUserFile } from '../../types/file.ts'
|
import { CurrentUserFile } from '../../types/file.ts'
|
||||||
import { Mark } from '../../types/mark.ts'
|
import { Mark } from '../../types/mark.ts'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import { convertToSigitFile, SigitFile } from '../../utils/file.ts'
|
||||||
|
import { FileDivider } from '../../components/FileDivider.tsx'
|
||||||
|
import { ExtensionFileBox } from '../../components/ExtensionFileBox.tsx'
|
||||||
|
import { useScale } from '../../hooks/useScale.tsx'
|
||||||
|
import {
|
||||||
|
faCircleInfo,
|
||||||
|
faFile,
|
||||||
|
faFileDownload
|
||||||
|
} from '@fortawesome/free-solid-svg-icons'
|
||||||
|
|
||||||
interface PdfViewProps {
|
interface PdfViewProps {
|
||||||
files: CurrentUserFile[]
|
files: CurrentUserFile[]
|
||||||
@ -64,28 +73,30 @@ const SlimPdfView = ({
|
|||||||
parsedSignatureEvents
|
parsedSignatureEvents
|
||||||
}: PdfViewProps) => {
|
}: PdfViewProps) => {
|
||||||
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
|
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||||
|
const { from } = useScale()
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
|
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
|
||||||
pdfRefs.current[currentFile.id]?.scrollIntoView({
|
pdfRefs.current[currentFile.id]?.scrollIntoView({
|
||||||
behavior: 'smooth',
|
behavior: 'smooth'
|
||||||
block: 'end'
|
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}, [currentFile])
|
}, [currentFile])
|
||||||
return (
|
return (
|
||||||
<div className={styles.view}>
|
<div className="files-wrapper">
|
||||||
{files.map((currentUserFile, i) => {
|
{files.length > 0 ? (
|
||||||
const { hash, filename, pdfFile, id } = currentUserFile
|
files.map((currentUserFile, i) => {
|
||||||
|
const { hash, file, id } = currentUserFile
|
||||||
const signatureEvents = Object.keys(parsedSignatureEvents)
|
const signatureEvents = Object.keys(parsedSignatureEvents)
|
||||||
if (!hash) return
|
if (!hash) return
|
||||||
return (
|
return (
|
||||||
<React.Fragment key={filename}>
|
<React.Fragment key={file.name}>
|
||||||
<div
|
<div
|
||||||
id={filename}
|
id={file.name}
|
||||||
ref={(el) => (pdfRefs.current[id] = el)}
|
ref={(el) => (pdfRefs.current[id] = el)}
|
||||||
className={styles.fileWrapper}
|
className="file-wrapper"
|
||||||
>
|
>
|
||||||
{pdfFile.pages.map((page, i) => {
|
{file.isPdf &&
|
||||||
|
file.pages?.map((page, i) => {
|
||||||
const marks: Mark[] = []
|
const marks: Mark[] = []
|
||||||
|
|
||||||
signatureEvents.forEach((e) => {
|
signatureEvents.forEach((e) => {
|
||||||
@ -99,18 +110,26 @@ const SlimPdfView = ({
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
return (
|
return (
|
||||||
<div className={styles.imageWrapper} key={i}>
|
<div className="image-wrapper" key={i}>
|
||||||
<img draggable="false" src={page.image} />
|
<img
|
||||||
|
draggable="false"
|
||||||
|
src={page.image}
|
||||||
|
alt={`page ${i} of ${file.name}`}
|
||||||
|
/>
|
||||||
{marks.map((m) => {
|
{marks.map((m) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={styles.mark}
|
className={`file-mark ${styles.mark}`}
|
||||||
key={m.id}
|
key={m.id}
|
||||||
style={{
|
style={{
|
||||||
left: inPx(m.location.left),
|
left: inPx(from(page.width, m.location.left)),
|
||||||
top: inPx(m.location.top),
|
top: inPx(from(page.width, m.location.top)),
|
||||||
width: inPx(m.location.width),
|
width: inPx(from(page.width, m.location.width)),
|
||||||
height: inPx(m.location.height)
|
height: inPx(
|
||||||
|
from(page.width, m.location.height)
|
||||||
|
),
|
||||||
|
fontFamily: FONT_TYPE,
|
||||||
|
fontSize: inPx(from(page.width, FONT_SIZE))
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{m.value}
|
{m.value}
|
||||||
@ -120,21 +139,24 @@ const SlimPdfView = ({
|
|||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</div>
|
{file.isImage && (
|
||||||
|
<img
|
||||||
{i < files.length - 1 && (
|
className="file-image"
|
||||||
<Divider
|
src={file.objectUrl}
|
||||||
sx={{
|
alt={file.name}
|
||||||
fontSize: '12px',
|
/>
|
||||||
color: 'rgba(0,0,0,0.15)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
File Separator
|
|
||||||
</Divider>
|
|
||||||
)}
|
)}
|
||||||
|
{!(file.isPdf || file.isImage) && (
|
||||||
|
<ExtensionFileBox extension={file.extension} />
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{i < files.length - 1 && <FileDivider />}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
})}
|
})
|
||||||
|
) : (
|
||||||
|
<LoadingSpinner variant="small" />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
@ -171,7 +193,7 @@ export const VerifyPage = () => {
|
|||||||
const [currentFileHashes, setCurrentFileHashes] = useState<{
|
const [currentFileHashes, setCurrentFileHashes] = useState<{
|
||||||
[key: string]: string | null
|
[key: string]: string | null
|
||||||
}>({})
|
}>({})
|
||||||
const [files, setFiles] = useState<{ [filename: string]: PdfFile }>({})
|
const [files, setFiles] = useState<{ [filename: string]: SigitFile }>({})
|
||||||
const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
|
const [currentFile, setCurrentFile] = useState<CurrentUserFile | null>(null)
|
||||||
const [signatureFileHashes, setSignatureFileHashes] = useState<{
|
const [signatureFileHashes, setSignatureFileHashes] = useState<{
|
||||||
[key: string]: string
|
[key: string]: string
|
||||||
@ -230,7 +252,7 @@ export const VerifyPage = () => {
|
|||||||
|
|
||||||
if (!zip) return
|
if (!zip) return
|
||||||
|
|
||||||
const files: { [filename: string]: PdfFile } = {}
|
const files: { [fileName: string]: SigitFile } = {}
|
||||||
const fileHashes: { [key: string]: string | null } = {}
|
const fileHashes: { [key: string]: string | null } = {}
|
||||||
const fileNames = Object.values(zip.files).map(
|
const fileNames = Object.values(zip.files).map(
|
||||||
(entry) => entry.name
|
(entry) => entry.name
|
||||||
@ -246,7 +268,7 @@ export const VerifyPage = () => {
|
|||||||
)
|
)
|
||||||
|
|
||||||
if (arrayBuffer) {
|
if (arrayBuffer) {
|
||||||
files[fileName] = await convertToPdfFile(
|
files[fileName] = await convertToSigitFile(
|
||||||
arrayBuffer,
|
arrayBuffer,
|
||||||
fileName!
|
fileName!
|
||||||
)
|
)
|
||||||
@ -423,10 +445,15 @@ export const VerifyPage = () => {
|
|||||||
const marks = extractMarksFromSignedMeta(updatedMeta)
|
const marks = extractMarksFromSignedMeta(updatedMeta)
|
||||||
const marksByPage = groupMarksByFileNamePage(marks)
|
const marksByPage = groupMarksByFileNamePage(marks)
|
||||||
|
|
||||||
for (const [fileName, pdf] of Object.entries(files)) {
|
for (const [fileName, file] of Object.entries(files)) {
|
||||||
const pages = await addMarks(pdf.file, marksByPage[fileName])
|
if (file.isPdf) {
|
||||||
|
// Draw marks into PDF file and generate a brand new blob
|
||||||
|
const pages = await addMarks(file, marksByPage[fileName])
|
||||||
const blob = await convertToPdfBlob(pages)
|
const blob = await convertToPdfBlob(pages)
|
||||||
zip.file(`files/${fileName}`, blob)
|
zip.file(`files/${fileName}`, blob)
|
||||||
|
} else {
|
||||||
|
zip.file(`files/${fileName}`, file)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const arrayBuffer = await zip
|
const arrayBuffer = await zip
|
||||||
@ -545,6 +572,9 @@ export const VerifyPage = () => {
|
|||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
right={<UsersDetails meta={meta} />}
|
right={<UsersDetails meta={meta} />}
|
||||||
|
leftIcon={faFileDownload}
|
||||||
|
centerIcon={faFile}
|
||||||
|
rightIcon={faCircleInfo}
|
||||||
>
|
>
|
||||||
<SlimPdfView
|
<SlimPdfView
|
||||||
currentFile={currentFile}
|
currentFile={currentFile}
|
||||||
|
@ -51,30 +51,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.view {
|
|
||||||
width: 550px;
|
|
||||||
max-width: 550px;
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.imageWrapper {
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.fileWrapper {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mark {
|
.mark {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
||||||
|
@ -2,3 +2,5 @@ $header-height: 65px;
|
|||||||
$body-vertical-padding: 25px;
|
$body-vertical-padding: 25px;
|
||||||
|
|
||||||
$default-container-padding-inline: 10px;
|
$default-container-padding-inline: 10px;
|
||||||
|
|
||||||
|
$tabs-height: 40px;
|
||||||
|
@ -1,29 +1,23 @@
|
|||||||
|
import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
import { MarkRect } from './mark'
|
||||||
|
|
||||||
export interface MouseState {
|
export interface MouseState {
|
||||||
clicked?: boolean
|
clicked?: boolean
|
||||||
dragging?: boolean
|
dragging?: boolean
|
||||||
resizing?: boolean
|
resizing?: boolean
|
||||||
coordsInWrapper?: {
|
coordsInWrapper?: {
|
||||||
mouseX: number
|
x: number
|
||||||
mouseY: number
|
y: number
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface PdfFile {
|
|
||||||
file: File
|
|
||||||
pages: PdfPage[]
|
|
||||||
expanded?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PdfPage {
|
export interface PdfPage {
|
||||||
image: string
|
image: string
|
||||||
|
width: number
|
||||||
drawnFields: DrawnField[]
|
drawnFields: DrawnField[]
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface DrawnField {
|
export interface DrawnField extends MarkRect {
|
||||||
left: number
|
|
||||||
top: number
|
|
||||||
width: number
|
|
||||||
height: number
|
|
||||||
type: MarkType
|
type: MarkType
|
||||||
/**
|
/**
|
||||||
* npub of a counter part
|
* npub of a counter part
|
||||||
@ -34,7 +28,7 @@ export interface DrawnField {
|
|||||||
export interface DrawTool {
|
export interface DrawTool {
|
||||||
identifier: MarkType
|
identifier: MarkType
|
||||||
label: string
|
label: string
|
||||||
icon: JSX.Element
|
icon: IconDefinition
|
||||||
defaultValue?: string
|
defaultValue?: string
|
||||||
selected?: boolean
|
selected?: boolean
|
||||||
active?: boolean
|
active?: boolean
|
||||||
|
23
src/types/errors/MetaParseError.ts
Normal file
23
src/types/errors/MetaParseError.ts
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import { Jsonable } from '.'
|
||||||
|
|
||||||
|
// Reuse common error messages for meta parsing
|
||||||
|
export enum MetaParseErrorType {
|
||||||
|
'PARSE_ERROR_EVENT' = 'error occurred in parsing the create signature event',
|
||||||
|
'PARSE_ERROR_SIGNATURE_EVENT_CONTENT' = "err in parsing the createSignature event's content"
|
||||||
|
}
|
||||||
|
|
||||||
|
export class MetaParseError extends Error {
|
||||||
|
public readonly context?: Jsonable
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
message: string,
|
||||||
|
options: { cause?: Error; context?: Jsonable } = {}
|
||||||
|
) {
|
||||||
|
const { cause, context } = options
|
||||||
|
|
||||||
|
super(message, { cause })
|
||||||
|
this.name = this.constructor.name
|
||||||
|
|
||||||
|
this.context = context
|
||||||
|
}
|
||||||
|
}
|
29
src/types/errors/index.ts
Normal file
29
src/types/errors/index.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
export type Jsonable =
|
||||||
|
| string
|
||||||
|
| number
|
||||||
|
| boolean
|
||||||
|
| null
|
||||||
|
| undefined
|
||||||
|
| readonly Jsonable[]
|
||||||
|
| { readonly [key: string]: Jsonable }
|
||||||
|
| { toJSON(): Jsonable }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle errors
|
||||||
|
* Wraps the errors without message property and stringify to a message so we can use it later
|
||||||
|
* @param error
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
export function handleError(error: unknown): Error {
|
||||||
|
if (error instanceof Error) return error
|
||||||
|
|
||||||
|
// No message error, wrap it and stringify
|
||||||
|
let stringified = 'Unable to stringify the thrown value'
|
||||||
|
try {
|
||||||
|
stringified = JSON.stringify(error)
|
||||||
|
} catch (error) {
|
||||||
|
console.error(stringified, error)
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Error(`Wrapped Error: ${stringified}`)
|
||||||
|
}
|
@ -1,9 +1,8 @@
|
|||||||
import { PdfFile } from './drawing.ts'
|
import { SigitFile } from '../utils/file'
|
||||||
|
|
||||||
export interface CurrentUserFile {
|
export interface CurrentUserFile {
|
||||||
id: number
|
id: number
|
||||||
pdfFile: PdfFile
|
file: SigitFile
|
||||||
filename: string
|
|
||||||
hash?: string
|
hash?: string
|
||||||
isHashValid: boolean
|
isHashValid: boolean
|
||||||
}
|
}
|
||||||
|
@ -18,10 +18,13 @@ export interface Mark {
|
|||||||
value?: string
|
value?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface MarkLocation {
|
export interface MarkLocation extends MarkRect {
|
||||||
top: number
|
|
||||||
left: number
|
|
||||||
height: number
|
|
||||||
width: number
|
|
||||||
page: number
|
page: number
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export interface MarkRect {
|
||||||
|
left: number
|
||||||
|
top: number
|
||||||
|
width: number
|
||||||
|
height: number
|
||||||
|
}
|
||||||
|
@ -26,3 +26,94 @@ export const DEFAULT_LOOK_UP_RELAY_LIST = [
|
|||||||
'wss://user.kindpag.es',
|
'wss://user.kindpag.es',
|
||||||
'wss://purplepag.es'
|
'wss://purplepag.es'
|
||||||
]
|
]
|
||||||
|
|
||||||
|
// Uses the https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Common_types list
|
||||||
|
// Updated on 2024/08/22
|
||||||
|
export const MOST_COMMON_MEDIA_TYPES = new Map([
|
||||||
|
['aac', 'audio/aac'], // AAC audio
|
||||||
|
['abw', 'application/x-abiword'], // AbiWord document
|
||||||
|
['apng', 'image/apng'], // Animated Portable Network Graphics (APNG) image
|
||||||
|
['arc', 'application/x-freearc'], // Archive document (multiple files embedded)
|
||||||
|
['avif', 'image/avif'], // AVIF image
|
||||||
|
['avi', 'video/x-msvideo'], // AVI: Audio Video Interleave
|
||||||
|
['azw', 'application/vnd.amazon.ebook'], // Amazon Kindle eBook format
|
||||||
|
['bin', 'application/octet-stream'], // Any kind of binary data
|
||||||
|
['bmp', 'image/bmp'], // Windows OS/2 Bitmap Graphics
|
||||||
|
['bz', 'application/x-bzip'], // BZip archive
|
||||||
|
['bz2', 'application/x-bzip2'], // BZip2 archive
|
||||||
|
['cda', 'application/x-cdf'], // CD audio
|
||||||
|
['csh', 'application/x-csh'], // C-Shell script
|
||||||
|
['css', 'text/css'], // Cascading Style Sheets (CSS)
|
||||||
|
['csv', 'text/csv'], // Comma-separated values (CSV)
|
||||||
|
['doc', 'application/msword'], // Microsoft Word
|
||||||
|
[
|
||||||
|
'docx',
|
||||||
|
'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
|
||||||
|
], // Microsoft Word (OpenXML)
|
||||||
|
['eot', 'application/vnd.ms-fontobject'], // MS Embedded OpenType fonts
|
||||||
|
['epub', 'application/epub+zip'], // Electronic publication (EPUB)
|
||||||
|
['gz', 'application/gzip'], // GZip Compressed Archive
|
||||||
|
['gif', 'image/gif'], // Graphics Interchange Format (GIF)
|
||||||
|
['htm', 'text/html'], // HyperText Markup Language (HTML)
|
||||||
|
['html', 'text/html'], // HyperText Markup Language (HTML)
|
||||||
|
['ico', 'image/vnd.microsoft.icon'], // Icon format
|
||||||
|
['ics', 'text/calendar'], // iCalendar format
|
||||||
|
['jar', 'application/java-archive'], // Java Archive (JAR)
|
||||||
|
['jpeg', 'image/jpeg'], // JPEG images
|
||||||
|
['jpg', 'image/jpeg'], // JPEG images
|
||||||
|
['js', 'text/javascript'], // JavaScript
|
||||||
|
['json', 'application/json'], // JSON format
|
||||||
|
['jsonld', 'application/ld+json'], // JSON-LD format
|
||||||
|
['mid', 'audio/midi'], // Musical Instrument Digital Interface (MIDI)
|
||||||
|
['midi', 'audio/midi'], // Musical Instrument Digital Interface (MIDI)
|
||||||
|
['mjs', 'text/javascript'], // JavaScript module
|
||||||
|
['mp3', 'audio/mpeg'], // MP3 audio
|
||||||
|
['mp4', 'video/mp4'], // MP4 video
|
||||||
|
['mpeg', 'video/mpeg'], // MPEG Video
|
||||||
|
['mpkg', 'application/vnd.apple.installer+xml'], // Apple Installer Package
|
||||||
|
['odp', 'application/vnd.oasis.opendocument.presentation'], // OpenDocument presentation document
|
||||||
|
['ods', 'application/vnd.oasis.opendocument.spreadsheet'], // OpenDocument spreadsheet document
|
||||||
|
['odt', 'application/vnd.oasis.opendocument.text'], // OpenDocument text document
|
||||||
|
['oga', 'audio/ogg'], // Ogg audio
|
||||||
|
['ogv', 'video/ogg'], // Ogg video
|
||||||
|
['ogx', 'application/ogg'], // Ogg
|
||||||
|
['opus', 'audio/ogg'], // Opus audio in Ogg container
|
||||||
|
['otf', 'font/otf'], // OpenType font
|
||||||
|
['png', 'image/png'], // Portable Network Graphics
|
||||||
|
['pdf', 'application/pdf'], // Adobe Portable Document Format (PDF)
|
||||||
|
['php', 'application/x-httpd-php'], // Hypertext Preprocessor (Personal Home Page)
|
||||||
|
['ppt', 'application/vnd.ms-powerpoint'], // Microsoft PowerPoint
|
||||||
|
[
|
||||||
|
'pptx',
|
||||||
|
'application/vnd.openxmlformats-officedocument.presentationml.presentation'
|
||||||
|
], // Microsoft PowerPoint (OpenXML)
|
||||||
|
['rar', 'application/vnd.rar'], // RAR archive
|
||||||
|
['rtf', 'application/rtf'], // Rich Text Format (RTF)
|
||||||
|
['sh', 'application/x-sh'], // Bourne shell script
|
||||||
|
['svg', 'image/svg+xml'], // Scalable Vector Graphics (SVG)
|
||||||
|
['tar', 'application/x-tar'], // Tape Archive (TAR)
|
||||||
|
['tif', 'image/tiff'], // Tagged Image File Format (TIFF)
|
||||||
|
['tiff', 'image/tiff'], // Tagged Image File Format (TIFF)
|
||||||
|
['ts', 'video/mp2t'], // MPEG transport stream
|
||||||
|
['ttf', 'font/ttf'], // TrueType Font
|
||||||
|
['txt', 'text/plain'], // Text, (generally ASCII or ISO 8859-n)
|
||||||
|
['vsd', 'application/vnd.visio'], // Microsoft Visio
|
||||||
|
['wav', 'audio/wav'], // Waveform Audio Format
|
||||||
|
['weba', 'audio/webm'], // WEBM audio
|
||||||
|
['webm', 'video/webm'], // WEBM video
|
||||||
|
['webp', 'image/webp'], // WEBP image
|
||||||
|
['woff', 'font/woff'], // Web Open Font Format (WOFF)
|
||||||
|
['woff2', 'font/woff2'], // Web Open Font Format (WOFF)
|
||||||
|
['xhtml', 'application/xhtml+xml'], // XHTML
|
||||||
|
['xls', 'application/vnd.ms-excel'], // Microsoft Excel
|
||||||
|
[
|
||||||
|
'.xlsx',
|
||||||
|
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
|
||||||
|
], // Microsoft Excel (OpenXML)
|
||||||
|
['xml', 'application/xml'], // XML
|
||||||
|
['xul', 'application/vnd.mozilla.xul+xml'], // XUL
|
||||||
|
['zip', 'application/zip'], // ZIP archive
|
||||||
|
['3gp', 'video/3gpp'], // 3GPP audio/video container
|
||||||
|
['3g2', 'video/3gpp2'], // 3GPP2 audio/video container
|
||||||
|
['7z', 'application/x-7z-compressed'] // 7-zip archive
|
||||||
|
])
|
||||||
|
@ -1,24 +1,140 @@
|
|||||||
import { Meta } from '../types'
|
import { Meta } from '../types'
|
||||||
|
import { PdfPage } from '../types/drawing.ts'
|
||||||
|
import { MOST_COMMON_MEDIA_TYPES } from './const.ts'
|
||||||
import { extractMarksFromSignedMeta } from './mark.ts'
|
import { extractMarksFromSignedMeta } from './mark.ts'
|
||||||
import { addMarks, convertToPdfBlob, groupMarksByFileNamePage } from './pdf.ts'
|
import {
|
||||||
|
addMarks,
|
||||||
|
convertToPdfBlob,
|
||||||
|
groupMarksByFileNamePage,
|
||||||
|
isPdf,
|
||||||
|
pdfToImages
|
||||||
|
} from './pdf.ts'
|
||||||
import JSZip from 'jszip'
|
import JSZip from 'jszip'
|
||||||
import { PdfFile } from '../types/drawing.ts'
|
|
||||||
|
|
||||||
const getZipWithFiles = async (
|
export const getZipWithFiles = async (
|
||||||
meta: Meta,
|
meta: Meta,
|
||||||
files: { [filename: string]: PdfFile }
|
files: { [filename: string]: SigitFile }
|
||||||
): Promise<JSZip> => {
|
): Promise<JSZip> => {
|
||||||
const zip = new JSZip()
|
const zip = new JSZip()
|
||||||
const marks = extractMarksFromSignedMeta(meta)
|
const marks = extractMarksFromSignedMeta(meta)
|
||||||
const marksByFileNamePage = groupMarksByFileNamePage(marks)
|
const marksByFileNamePage = groupMarksByFileNamePage(marks)
|
||||||
|
|
||||||
for (const [fileName, pdf] of Object.entries(files)) {
|
for (const [fileName, file] of Object.entries(files)) {
|
||||||
const pages = await addMarks(pdf.file, marksByFileNamePage[fileName])
|
if (file.isPdf) {
|
||||||
|
// Handle PDF Files
|
||||||
|
const pages = await addMarks(file, marksByFileNamePage[fileName])
|
||||||
const blob = await convertToPdfBlob(pages)
|
const blob = await convertToPdfBlob(pages)
|
||||||
zip.file(`files/${fileName}`, blob)
|
zip.file(`files/${fileName}`, blob)
|
||||||
|
} else {
|
||||||
|
// Handle other files
|
||||||
|
zip.file(`files/${fileName}`, file)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
return zip
|
return zip
|
||||||
}
|
}
|
||||||
|
|
||||||
export { getZipWithFiles }
|
/**
|
||||||
|
* Converts a PDF ArrayBuffer to a generic PDF File
|
||||||
|
* @param arrayBuffer of a PDF
|
||||||
|
* @param fileName identifier of the pdf file
|
||||||
|
* @param type optional file type (defaults to pdf)
|
||||||
|
*/
|
||||||
|
export const toFile = (
|
||||||
|
arrayBuffer: ArrayBuffer,
|
||||||
|
fileName: string,
|
||||||
|
type: string = 'application/pdf'
|
||||||
|
): File => {
|
||||||
|
const blob = new Blob([arrayBuffer], { type })
|
||||||
|
return new File([blob], fileName, { type })
|
||||||
|
}
|
||||||
|
|
||||||
|
export class SigitFile extends File {
|
||||||
|
extension: string
|
||||||
|
isPdf: boolean
|
||||||
|
isImage: boolean
|
||||||
|
|
||||||
|
pages?: PdfPage[]
|
||||||
|
objectUrl?: string
|
||||||
|
|
||||||
|
constructor(file: File) {
|
||||||
|
super([file], file.name, { type: file.type })
|
||||||
|
this.isPdf = isPdf(this)
|
||||||
|
this.isImage = isImage(this)
|
||||||
|
this.extension = extractFileExtension(this.name)
|
||||||
|
}
|
||||||
|
|
||||||
|
async process() {
|
||||||
|
if (this.isPdf) this.pages = await pdfToImages(await this.arrayBuffer())
|
||||||
|
if (this.isImage) this.objectUrl = URL.createObjectURL(this)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getSigitFile = async (file: File) => {
|
||||||
|
const sigitFile = new SigitFile(file)
|
||||||
|
// Process sigit file
|
||||||
|
// - generate pages for PDF files
|
||||||
|
// - generate ObjectRL for image files
|
||||||
|
await sigitFile.process()
|
||||||
|
return sigitFile
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Takes an ArrayBuffer and converts to Sigit's Internal File type
|
||||||
|
* @param arrayBuffer
|
||||||
|
* @param fileName
|
||||||
|
*/
|
||||||
|
export const convertToSigitFile = async (
|
||||||
|
arrayBuffer: ArrayBuffer,
|
||||||
|
fileName: string
|
||||||
|
): Promise<SigitFile> => {
|
||||||
|
const type = getMediaType(extractFileExtension(fileName))
|
||||||
|
const file = toFile(arrayBuffer, fileName, type)
|
||||||
|
const sigitFile = await getSigitFile(file)
|
||||||
|
return sigitFile
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param fileNames - List of filenames to check
|
||||||
|
* @returns List of extensions and if all are same
|
||||||
|
*/
|
||||||
|
export const extractFileExtensions = (fileNames: string[]) => {
|
||||||
|
const extensions = fileNames.reduce((result: string[], file: string) => {
|
||||||
|
const extension = file.split('.').pop()
|
||||||
|
if (extension) {
|
||||||
|
result.push(extension)
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}, [])
|
||||||
|
|
||||||
|
const isSame = extensions.every((ext) => ext === extensions[0])
|
||||||
|
|
||||||
|
return { extensions, isSame }
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param fileName - Filename to check
|
||||||
|
* @returns Extension string
|
||||||
|
*/
|
||||||
|
export const extractFileExtension = (fileName: string) => {
|
||||||
|
const parts = fileName.split('.')
|
||||||
|
return parts[parts.length - 1]
|
||||||
|
}
|
||||||
|
|
||||||
|
export const getMediaType = (extension: string) => {
|
||||||
|
return MOST_COMMON_MEDIA_TYPES.get(extension)
|
||||||
|
}
|
||||||
|
|
||||||
|
export const isImage = (file: File) => {
|
||||||
|
const validImageMediaTypes = [
|
||||||
|
'image/png',
|
||||||
|
'image/jpeg',
|
||||||
|
'image/jpg',
|
||||||
|
'image/gif',
|
||||||
|
'image/svg+xml',
|
||||||
|
'image/bmp',
|
||||||
|
'image/x-icon'
|
||||||
|
]
|
||||||
|
|
||||||
|
return validImageMediaTypes.includes(file.type.toLowerCase())
|
||||||
|
}
|
||||||
|
@ -47,7 +47,7 @@ const filterMarksByPubkey = (marks: Mark[], pubkey: string): Mark[] => {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Takes Signed Doc Signatures part of Meta and extracts
|
* Takes Signed Doc Signatures part of Meta and extracts
|
||||||
* all Marks into one flar array, regardless of the user.
|
* all Marks into one flat array, regardless of the user.
|
||||||
* @param meta
|
* @param meta
|
||||||
*/
|
*/
|
||||||
const extractMarksFromSignedMeta = (meta: Meta): Mark[] => {
|
const extractMarksFromSignedMeta = (meta: Meta): Mark[] => {
|
||||||
|
@ -2,6 +2,12 @@ import { CreateSignatureEventContent, Meta } from '../types'
|
|||||||
import { fromUnixTimestamp, parseJson } from '.'
|
import { fromUnixTimestamp, parseJson } from '.'
|
||||||
import { Event, verifyEvent } from 'nostr-tools'
|
import { Event, verifyEvent } from 'nostr-tools'
|
||||||
import { toast } from 'react-toastify'
|
import { toast } from 'react-toastify'
|
||||||
|
import { extractFileExtensions } from './file'
|
||||||
|
import { handleError } from '../types/errors'
|
||||||
|
import {
|
||||||
|
MetaParseError,
|
||||||
|
MetaParseErrorType
|
||||||
|
} from '../types/errors/MetaParseError'
|
||||||
|
|
||||||
export enum SignStatus {
|
export enum SignStatus {
|
||||||
Signed = 'Signed',
|
Signed = 'Signed',
|
||||||
@ -16,58 +22,6 @@ export enum SigitStatus {
|
|||||||
Complete = 'Completed'
|
Complete = 'Completed'
|
||||||
}
|
}
|
||||||
|
|
||||||
type Jsonable =
|
|
||||||
| string
|
|
||||||
| number
|
|
||||||
| boolean
|
|
||||||
| null
|
|
||||||
| undefined
|
|
||||||
| readonly Jsonable[]
|
|
||||||
| { readonly [key: string]: Jsonable }
|
|
||||||
| { toJSON(): Jsonable }
|
|
||||||
|
|
||||||
export class SigitMetaParseError extends Error {
|
|
||||||
public readonly context?: Jsonable
|
|
||||||
|
|
||||||
constructor(
|
|
||||||
message: string,
|
|
||||||
options: { cause?: Error; context?: Jsonable } = {}
|
|
||||||
) {
|
|
||||||
const { cause, context } = options
|
|
||||||
|
|
||||||
super(message, { cause })
|
|
||||||
this.name = this.constructor.name
|
|
||||||
|
|
||||||
this.context = context
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Handle meta errors
|
|
||||||
* Wraps the errors without message property and stringify to a message so we can use it later
|
|
||||||
* @param error
|
|
||||||
* @returns
|
|
||||||
*/
|
|
||||||
function handleError(error: unknown): Error {
|
|
||||||
if (error instanceof Error) return error
|
|
||||||
|
|
||||||
// No message error, wrap it and stringify
|
|
||||||
let stringified = 'Unable to stringify the thrown value'
|
|
||||||
try {
|
|
||||||
stringified = JSON.stringify(error)
|
|
||||||
} catch (error) {
|
|
||||||
console.error(stringified, error)
|
|
||||||
}
|
|
||||||
|
|
||||||
return new Error(`[SiGit Error]: ${stringified}`)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Reuse common error messages for meta parsing
|
|
||||||
export enum SigitMetaParseErrorType {
|
|
||||||
'PARSE_ERROR_EVENT' = 'error occurred in parsing the create signature event',
|
|
||||||
'PARSE_ERROR_SIGNATURE_EVENT_CONTENT' = "err in parsing the createSignature event's content"
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SigitCardDisplayInfo {
|
export interface SigitCardDisplayInfo {
|
||||||
createdAt?: number
|
createdAt?: number
|
||||||
title?: string
|
title?: string
|
||||||
@ -88,7 +42,7 @@ export const parseNostrEvent = async (raw: string): Promise<Event> => {
|
|||||||
const event = await parseJson<Event>(raw)
|
const event = await parseJson<Event>(raw)
|
||||||
return event
|
return event
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
throw new SigitMetaParseError(SigitMetaParseErrorType.PARSE_ERROR_EVENT, {
|
throw new MetaParseError(MetaParseErrorType.PARSE_ERROR_EVENT, {
|
||||||
cause: handleError(error),
|
cause: handleError(error),
|
||||||
context: raw
|
context: raw
|
||||||
})
|
})
|
||||||
@ -108,8 +62,8 @@ export const parseCreateSignatureEventContent = async (
|
|||||||
await parseJson<CreateSignatureEventContent>(raw)
|
await parseJson<CreateSignatureEventContent>(raw)
|
||||||
return createSignatureEventContent
|
return createSignatureEventContent
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
throw new SigitMetaParseError(
|
throw new MetaParseError(
|
||||||
SigitMetaParseErrorType.PARSE_ERROR_SIGNATURE_EVENT_CONTENT,
|
MetaParseErrorType.PARSE_ERROR_SIGNATURE_EVENT_CONTENT,
|
||||||
{
|
{
|
||||||
cause: handleError(error),
|
cause: handleError(error),
|
||||||
context: raw
|
context: raw
|
||||||
@ -164,7 +118,7 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
|
|||||||
|
|
||||||
return sigitInfo
|
return sigitInfo
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
if (error instanceof SigitMetaParseError) {
|
if (error instanceof MetaParseError) {
|
||||||
toast.error(error.message)
|
toast.error(error.message)
|
||||||
console.error(error.name, error.message, error.cause, error.context)
|
console.error(error.name, error.message, error.cause, error.context)
|
||||||
} else {
|
} else {
|
||||||
@ -172,29 +126,3 @@ export const extractSigitCardDisplayInfo = async (meta: Meta) => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* @param fileNames - List of filenames to check
|
|
||||||
* @returns List of extensions and if all are same
|
|
||||||
*/
|
|
||||||
export const extractFileExtensions = (fileNames: string[]) => {
|
|
||||||
const extensions = fileNames.reduce((result: string[], file: string) => {
|
|
||||||
const extension = file.split('.').pop()
|
|
||||||
if (extension) {
|
|
||||||
result.push(extension)
|
|
||||||
}
|
|
||||||
return result
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const isSame = extensions.every((ext) => ext === extensions[0])
|
|
||||||
|
|
||||||
return { extensions, isSame }
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @param fileName - Filename to check
|
|
||||||
* @returns Extension string
|
|
||||||
*/
|
|
||||||
export const extractFileExtension = (fileName: string) => {
|
|
||||||
return fileName.split('.').pop()
|
|
||||||
}
|
|
||||||
|
@ -11,6 +11,7 @@ import {
|
|||||||
getEventHash,
|
getEventHash,
|
||||||
getPublicKey,
|
getPublicKey,
|
||||||
kinds,
|
kinds,
|
||||||
|
nip04,
|
||||||
nip19,
|
nip19,
|
||||||
nip44,
|
nip44,
|
||||||
verifyEvent
|
verifyEvent
|
||||||
@ -30,10 +31,26 @@ import { AuthState, Keys } from '../store/auth/types'
|
|||||||
import { RelaysState } from '../store/relays/types'
|
import { RelaysState } from '../store/relays/types'
|
||||||
import store from '../store/store'
|
import store from '../store/store'
|
||||||
import { Meta, SignedEvent, UserAppData } from '../types'
|
import { Meta, SignedEvent, UserAppData } from '../types'
|
||||||
import { getHash } from './hash'
|
import { getDefaultRelayMap } from './relays'
|
||||||
import { parseJson, removeLeadingSlash } from './string'
|
import { parseJson, removeLeadingSlash } from './string'
|
||||||
import { timeout } from './utils'
|
import { timeout } from './utils'
|
||||||
import { getDefaultRelayMap } from './relays'
|
import { getHash } from './hash'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Generates a `d` tag for userAppData
|
||||||
|
*/
|
||||||
|
const getDTagForUserAppData = async (): Promise<string | null> => {
|
||||||
|
const isLoggedIn = store.getState().auth?.loggedIn
|
||||||
|
const pubkey = store.getState().auth?.usersPubkey
|
||||||
|
|
||||||
|
if (!isLoggedIn || !pubkey) {
|
||||||
|
throw new Error(
|
||||||
|
'For generating d tag user must be logged in and a valid pubkey should exists in app Store'
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
return getHash(`938_${pubkey}`)
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param hexKey hex private or public key
|
* @param hexKey hex private or public key
|
||||||
@ -377,13 +394,13 @@ export const getUsersAppData = async (): Promise<UserAppData | null> => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Generate an identifier for the user's nip78
|
// Generate an identifier for the user's nip78
|
||||||
const hash = await getHash('938' + usersPubkey)
|
const dTag = await getDTagForUserAppData()
|
||||||
if (!hash) return null
|
if (!dTag) return null
|
||||||
|
|
||||||
// Define a filter for fetching events
|
// Define a filter for fetching events
|
||||||
const filter: Filter = {
|
const filter: Filter = {
|
||||||
kinds: [kinds.Application],
|
kinds: [kinds.Application],
|
||||||
'#d': [hash]
|
'#d': [dTag]
|
||||||
}
|
}
|
||||||
|
|
||||||
const encryptedContent = await relayController
|
const encryptedContent = await relayController
|
||||||
@ -578,14 +595,14 @@ export const updateUsersAppData = async (meta: Meta) => {
|
|||||||
if (!encryptedContent) return null
|
if (!encryptedContent) return null
|
||||||
|
|
||||||
// generate the identifier for user's appData event
|
// generate the identifier for user's appData event
|
||||||
const hash = await getHash('938' + usersPubkey)
|
const dTag = await getDTagForUserAppData()
|
||||||
if (!hash) return null
|
if (!dTag) return null
|
||||||
|
|
||||||
const updatedEvent: UnsignedEvent = {
|
const updatedEvent: UnsignedEvent = {
|
||||||
kind: kinds.Application,
|
kind: kinds.Application,
|
||||||
pubkey: usersPubkey!,
|
pubkey: usersPubkey!,
|
||||||
created_at: unixNow(),
|
created_at: unixNow(),
|
||||||
tags: [['d', hash]],
|
tags: [['d', dTag]],
|
||||||
content: encryptedContent
|
content: encryptedContent
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -693,9 +710,10 @@ const uploadUserAppDataToBlossom = async (
|
|||||||
// Convert the private key from hex to bytes
|
// Convert the private key from hex to bytes
|
||||||
const secretKey = hexToBytes(privateKey)
|
const secretKey = hexToBytes(privateKey)
|
||||||
// Encrypt the JSON string using the secret key
|
// Encrypt the JSON string using the secret key
|
||||||
const encrypted = nip44.v2.encrypt(
|
const encrypted = await nip04.encrypt(
|
||||||
stringified,
|
secretKey,
|
||||||
nip44ConversationKey(secretKey, getPublicKey(secretKey))
|
getPublicKey(secretKey),
|
||||||
|
stringified
|
||||||
)
|
)
|
||||||
|
|
||||||
// Create a blob from the encrypted data
|
// Create a blob from the encrypted data
|
||||||
@ -788,10 +806,7 @@ const getUserAppDataFromBlossom = async (url: string, privateKey: string) => {
|
|||||||
const pubkey = getPublicKey(secret)
|
const pubkey = getPublicKey(secret)
|
||||||
|
|
||||||
// Decrypt the encrypted data using the secret and public key
|
// Decrypt the encrypted data using the secret and public key
|
||||||
const decrypted = nip44.v2.decrypt(
|
const decrypted = await nip04.decrypt(secret, pubkey, encrypted)
|
||||||
encrypted,
|
|
||||||
nip44ConversationKey(secret, pubkey)
|
|
||||||
)
|
|
||||||
|
|
||||||
// Parse the decrypted JSON content
|
// Parse the decrypted JSON content
|
||||||
const parsedContent = await parseJson<{
|
const parsedContent = await parseJson<{
|
||||||
|
193
src/utils/pdf.ts
193
src/utils/pdf.ts
@ -1,18 +1,15 @@
|
|||||||
import { PdfFile, PdfPage } from '../types/drawing.ts'
|
import { PdfPage } from '../types/drawing.ts'
|
||||||
import * as PDFJS from 'pdfjs-dist'
|
|
||||||
import { PDFDocument } from 'pdf-lib'
|
import { PDFDocument } from 'pdf-lib'
|
||||||
import { Mark } from '../types/mark.ts'
|
import { Mark } from '../types/mark.ts'
|
||||||
|
|
||||||
PDFJS.GlobalWorkerOptions.workerSrc = new URL(
|
import * as PDFJS from 'pdfjs-dist'
|
||||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
import PDFJSWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?worker'
|
||||||
import.meta.url
|
if (!PDFJS.GlobalWorkerOptions.workerPort) {
|
||||||
).toString()
|
// Use workerPort and allow worker to be shared between all getDocument calls
|
||||||
|
const worker = new PDFJSWorker()
|
||||||
|
PDFJS.GlobalWorkerOptions.workerPort = worker
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Scale between the PDF page's natural size and rendered size
|
|
||||||
* @constant {number}
|
|
||||||
*/
|
|
||||||
const SCALE: number = 3
|
|
||||||
/**
|
/**
|
||||||
* Defined font size used when generating a PDF. Currently it is difficult to fully
|
* 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
|
* correlate font size used at the time of filling in / drawing on the PDF
|
||||||
@ -20,58 +17,28 @@ const SCALE: number = 3
|
|||||||
* This should be fixed going forward.
|
* This should be fixed going forward.
|
||||||
* Switching to PDF-Lib will most likely make this problem redundant.
|
* Switching to PDF-Lib will most likely make this problem redundant.
|
||||||
*/
|
*/
|
||||||
const FONT_SIZE: number = 40
|
export const FONT_SIZE: number = 16
|
||||||
/**
|
/**
|
||||||
* Current font type used when generating a PDF.
|
* Current font type used when generating a PDF.
|
||||||
*/
|
*/
|
||||||
const FONT_TYPE: string = 'Arial'
|
export const FONT_TYPE: string = 'Arial'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Converts a PDF ArrayBuffer to a generic PDF File
|
* A utility that transforms a drawing coordinate number into a CSS-compatible pixel string
|
||||||
* @param arrayBuffer of a PDF
|
|
||||||
* @param fileName identifier of the pdf file
|
|
||||||
*/
|
|
||||||
const toFile = (arrayBuffer: ArrayBuffer, fileName: string): File => {
|
|
||||||
const blob = new Blob([arrayBuffer], { type: 'application/pdf' })
|
|
||||||
return new File([blob], fileName, { type: 'application/pdf' })
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Converts a generic PDF File to Sigit's internal Pdf File type
|
|
||||||
* @param {File} file
|
|
||||||
* @return {PdfFile} Sigit's internal PDF File type
|
|
||||||
*/
|
|
||||||
const toPdfFile = async (file: File): Promise<PdfFile> => {
|
|
||||||
const data = await readPdf(file)
|
|
||||||
const pages = await pdfToImages(data)
|
|
||||||
return { file, pages, expanded: false }
|
|
||||||
}
|
|
||||||
/**
|
|
||||||
* Transforms an array of generic PDF Files into an array of Sigit's
|
|
||||||
* internal representation of Pdf Files
|
|
||||||
* @param selectedFiles - an array of generic PDF Files
|
|
||||||
* @return PdfFile[] - an array of Sigit's internal Pdf File type
|
|
||||||
*/
|
|
||||||
const toPdfFiles = async (selectedFiles: File[]): Promise<PdfFile[]> => {
|
|
||||||
return Promise.all(selectedFiles.filter(isPdf).map(toPdfFile))
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* A utility that transforms a drawing coordinate number into a CSS-compatible string
|
|
||||||
* @param coordinate
|
* @param coordinate
|
||||||
*/
|
*/
|
||||||
const inPx = (coordinate: number): string => `${coordinate}px`
|
export const inPx = (coordinate: number): string => `${coordinate}px`
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A utility that checks if a given file is of the pdf type
|
* A utility that checks if a given file is of the pdf type
|
||||||
* @param file
|
* @param file
|
||||||
*/
|
*/
|
||||||
const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
|
export const isPdf = (file: File) => file.type.toLowerCase().includes('pdf')
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Reads the pdf file binaries
|
* Reads the pdf file binaries
|
||||||
*/
|
*/
|
||||||
const readPdf = (file: File): Promise<string | ArrayBuffer> => {
|
export const readPdf = (file: File): Promise<string | ArrayBuffer> => {
|
||||||
return new Promise((resolve, reject) => {
|
return new Promise((resolve, reject) => {
|
||||||
const reader = new FileReader()
|
const reader = new FileReader()
|
||||||
|
|
||||||
@ -95,33 +62,55 @@ const readPdf = (file: File): Promise<string | ArrayBuffer> => {
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const getInnerContentWidth = () => {
|
||||||
|
// Fetch the first container element we find
|
||||||
|
const element = document.querySelector('#content-preview')
|
||||||
|
|
||||||
|
if (element) {
|
||||||
|
const style = getComputedStyle(element)
|
||||||
|
|
||||||
|
// Calculate width without padding
|
||||||
|
const widthWithoutPadding =
|
||||||
|
element.clientWidth - parseFloat(style.padding) * 2
|
||||||
|
|
||||||
|
return widthWithoutPadding
|
||||||
|
}
|
||||||
|
|
||||||
|
// Default value
|
||||||
|
return 620
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Converts pdf to the images
|
* Converts pdf to the images
|
||||||
* @param data pdf file bytes
|
* @param data pdf file bytes
|
||||||
*/
|
*/
|
||||||
const pdfToImages = async (data: string | ArrayBuffer): Promise<PdfPage[]> => {
|
export const pdfToImages = async (
|
||||||
const images: string[] = []
|
data: string | ArrayBuffer
|
||||||
|
): Promise<PdfPage[]> => {
|
||||||
|
const pages: PdfPage[] = []
|
||||||
const pdf = await PDFJS.getDocument(data).promise
|
const pdf = await PDFJS.getDocument(data).promise
|
||||||
const canvas = document.createElement('canvas')
|
const canvas = document.createElement('canvas')
|
||||||
|
const width = getInnerContentWidth()
|
||||||
|
|
||||||
for (let i = 0; i < pdf.numPages; i++) {
|
for (let i = 0; i < pdf.numPages; i++) {
|
||||||
const page = await pdf.getPage(i + 1)
|
const page = await pdf.getPage(i + 1)
|
||||||
const viewport = page.getViewport({ scale: SCALE })
|
|
||||||
|
const originalViewport = page.getViewport({ scale: 1 })
|
||||||
|
const scale = width / originalViewport.width
|
||||||
|
const viewport = page.getViewport({ scale: scale })
|
||||||
const context = canvas.getContext('2d')
|
const context = canvas.getContext('2d')
|
||||||
canvas.height = viewport.height
|
canvas.height = viewport.height
|
||||||
canvas.width = viewport.width
|
canvas.width = viewport.width
|
||||||
|
|
||||||
await page.render({ canvasContext: context!, viewport: viewport }).promise
|
await page.render({ canvasContext: context!, viewport: viewport }).promise
|
||||||
images.push(canvas.toDataURL())
|
pages.push({
|
||||||
|
image: canvas.toDataURL(),
|
||||||
|
width: originalViewport.width,
|
||||||
|
drawnFields: []
|
||||||
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
return Promise.resolve(
|
return pages
|
||||||
images.map((image) => {
|
|
||||||
return {
|
|
||||||
image,
|
|
||||||
drawnFields: []
|
|
||||||
}
|
|
||||||
})
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -129,7 +118,7 @@ const pdfToImages = async (data: string | ArrayBuffer): Promise<PdfPage[]> => {
|
|||||||
* Returns an array of encoded images where each image is a representation
|
* Returns an array of encoded images where each image is a representation
|
||||||
* of a PDF page with completed and signed marks from all users
|
* of a PDF page with completed and signed marks from all users
|
||||||
*/
|
*/
|
||||||
const addMarks = async (
|
export const addMarks = async (
|
||||||
file: File,
|
file: File,
|
||||||
marksPerPage: { [key: string]: Mark[] }
|
marksPerPage: { [key: string]: Mark[] }
|
||||||
) => {
|
) => {
|
||||||
@ -141,34 +130,39 @@ const addMarks = async (
|
|||||||
|
|
||||||
for (let i = 0; i < pdf.numPages; i++) {
|
for (let i = 0; i < pdf.numPages; i++) {
|
||||||
const page = await pdf.getPage(i + 1)
|
const page = await pdf.getPage(i + 1)
|
||||||
const viewport = page.getViewport({ scale: SCALE })
|
const viewport = page.getViewport({ scale: 1 })
|
||||||
const context = canvas.getContext('2d')
|
const context = canvas.getContext('2d')
|
||||||
canvas.height = viewport.height
|
canvas.height = viewport.height
|
||||||
canvas.width = viewport.width
|
canvas.width = viewport.width
|
||||||
await page.render({ canvasContext: context!, viewport: viewport }).promise
|
if (context) {
|
||||||
|
await page.render({ canvasContext: context, viewport: viewport }).promise
|
||||||
|
|
||||||
if (marksPerPage && Object.hasOwn(marksPerPage, i))
|
if (marksPerPage && Object.hasOwn(marksPerPage, i)) {
|
||||||
marksPerPage[i]?.forEach((mark) => draw(mark, context!))
|
marksPerPage[i]?.forEach((mark) => draw(mark, context))
|
||||||
|
}
|
||||||
|
|
||||||
images.push(canvas.toDataURL())
|
images.push(canvas.toDataURL())
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
return Promise.resolve(images)
|
canvas.remove()
|
||||||
|
|
||||||
|
return images
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Utility to scale mark in line with the PDF-to-PNG scale
|
* Utility to scale mark in line with the PDF-to-PNG scale
|
||||||
*/
|
*/
|
||||||
const scaleMark = (mark: Mark): Mark => {
|
export const scaleMark = (mark: Mark, scale: number): Mark => {
|
||||||
const { location } = mark
|
const { location } = mark
|
||||||
return {
|
return {
|
||||||
...mark,
|
...mark,
|
||||||
location: {
|
location: {
|
||||||
...location,
|
...location,
|
||||||
width: location.width * SCALE,
|
width: location.width * scale,
|
||||||
height: location.height * SCALE,
|
height: location.height * scale,
|
||||||
left: location.left * SCALE,
|
left: location.left * scale,
|
||||||
top: location.top * SCALE
|
top: location.top * scale
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -177,29 +171,32 @@ const scaleMark = (mark: Mark): Mark => {
|
|||||||
* Utility to check if a Mark has value
|
* Utility to check if a Mark has value
|
||||||
* @param mark
|
* @param mark
|
||||||
*/
|
*/
|
||||||
const hasValue = (mark: Mark): boolean => !!mark.value
|
export const hasValue = (mark: Mark): boolean => !!mark.value
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Draws a Mark on a Canvas representation of a PDF Page
|
* Draws a Mark on a Canvas representation of a PDF Page
|
||||||
* @param mark to be drawn
|
* @param mark to be drawn
|
||||||
* @param ctx a Canvas representation of a specific PDF Page
|
* @param ctx a Canvas representation of a specific PDF Page
|
||||||
*/
|
*/
|
||||||
const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
|
export const draw = (mark: Mark, ctx: CanvasRenderingContext2D) => {
|
||||||
const { location } = mark
|
const { location } = mark
|
||||||
|
ctx.font = FONT_SIZE + 'px ' + FONT_TYPE
|
||||||
ctx!.font = FONT_SIZE + 'px ' + FONT_TYPE
|
ctx.fillStyle = 'black'
|
||||||
ctx!.fillStyle = 'black'
|
const textMetrics = ctx.measureText(mark.value!)
|
||||||
const textMetrics = ctx!.measureText(mark.value!)
|
const textHeight =
|
||||||
|
textMetrics.actualBoundingBoxAscent + textMetrics.actualBoundingBoxDescent
|
||||||
const textX = location.left + (location.width - textMetrics.width) / 2
|
const textX = location.left + (location.width - textMetrics.width) / 2
|
||||||
const textY = location.top + (location.height + parseInt(ctx!.font)) / 2
|
const textY = location.top + (location.height + textHeight) / 2
|
||||||
ctx!.fillText(mark.value!, textX, textY)
|
ctx.fillText(mark.value!, textX, textY)
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Takes an array of encoded PDF pages and returns a blob that is a complete PDF file
|
* Takes an array of encoded PDF pages and returns a blob that is a complete PDF file
|
||||||
* @param markedPdfPages
|
* @param markedPdfPages
|
||||||
*/
|
*/
|
||||||
const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
|
export const convertToPdfBlob = async (
|
||||||
|
markedPdfPages: string[]
|
||||||
|
): Promise<Blob> => {
|
||||||
const pdfDoc = await PDFDocument.create()
|
const pdfDoc = await PDFDocument.create()
|
||||||
|
|
||||||
for (const page of markedPdfPages) {
|
for (const page of markedPdfPages) {
|
||||||
@ -217,30 +214,15 @@ const convertToPdfBlob = async (markedPdfPages: string[]): Promise<Blob> => {
|
|||||||
return new Blob([pdfBytes], { type: 'application/pdf' })
|
return new Blob([pdfBytes], { type: 'application/pdf' })
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Takes an ArrayBuffer of a PDF file and converts to Sigit's Internal Pdf File type
|
|
||||||
* @param arrayBuffer
|
|
||||||
* @param fileName
|
|
||||||
*/
|
|
||||||
const convertToPdfFile = async (
|
|
||||||
arrayBuffer: ArrayBuffer,
|
|
||||||
fileName: string
|
|
||||||
): Promise<PdfFile> => {
|
|
||||||
const file = toFile(arrayBuffer, fileName)
|
|
||||||
return toPdfFile(file)
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param marks - an array of Marks
|
* @param marks - an array of Marks
|
||||||
* @function hasValue removes any Mark without a property
|
* @function hasValue removes any Mark without a property
|
||||||
* @function scaleMark scales remaining marks in line with SCALE
|
|
||||||
* @function byPage groups remaining Marks by their page marks.location.page
|
* @function byPage groups remaining Marks by their page marks.location.page
|
||||||
*/
|
*/
|
||||||
const groupMarksByFileNamePage = (marks: Mark[]) => {
|
export const groupMarksByFileNamePage = (marks: Mark[]) => {
|
||||||
return marks
|
return marks
|
||||||
.filter(hasValue)
|
.filter(hasValue)
|
||||||
.map(scaleMark)
|
.reduce<{ [fileName: string]: { [page: number]: Mark[] } }>(byPage, {})
|
||||||
.reduce<{ [filename: string]: { [page: number]: Mark[] } }>(byPage, {})
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -251,30 +233,19 @@ const groupMarksByFileNamePage = (marks: Mark[]) => {
|
|||||||
* @param obj - accumulator in the reducer callback
|
* @param obj - accumulator in the reducer callback
|
||||||
* @param mark - current value, i.e. Mark being examined
|
* @param mark - current value, i.e. Mark being examined
|
||||||
*/
|
*/
|
||||||
const byPage = (
|
export const byPage = (
|
||||||
obj: { [filename: string]: { [page: number]: Mark[] } },
|
obj: { [filename: string]: { [page: number]: Mark[] } },
|
||||||
mark: Mark
|
mark: Mark
|
||||||
) => {
|
) => {
|
||||||
const filename = mark.fileName
|
const fileName = mark.fileName
|
||||||
const pageNumber = mark.location.page
|
const pageNumber = mark.location.page
|
||||||
const pages = obj[filename] ?? {}
|
const pages = obj[fileName] ?? {}
|
||||||
const marks = pages[pageNumber] ?? []
|
const marks = pages[pageNumber] ?? []
|
||||||
return {
|
return {
|
||||||
...obj,
|
...obj,
|
||||||
[filename]: {
|
[fileName]: {
|
||||||
...pages,
|
...pages,
|
||||||
[pageNumber]: [...marks, mark]
|
[pageNumber]: [...marks, mark]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export {
|
|
||||||
toFile,
|
|
||||||
toPdfFile,
|
|
||||||
toPdfFiles,
|
|
||||||
inPx,
|
|
||||||
convertToPdfFile,
|
|
||||||
addMarks,
|
|
||||||
convertToPdfBlob,
|
|
||||||
groupMarksByFileNamePage
|
|
||||||
}
|
|
||||||
|
@ -30,7 +30,6 @@ const findRelayListAndUpdateCache = async (
|
|||||||
authors: [hexKey]
|
authors: [hexKey]
|
||||||
}
|
}
|
||||||
|
|
||||||
console.count('findRelayListAndUpdateCache')
|
|
||||||
const event = await relayController.fetchEvent(eventFilter, lookUpRelays)
|
const event = await relayController.fetchEvent(eventFilter, lookUpRelays)
|
||||||
if (event) {
|
if (event) {
|
||||||
await localCache.addUserRelayListMetadata(event)
|
await localCache.addUserRelayListMetadata(event)
|
||||||
|
@ -31,4 +31,16 @@ const getLastSignersSig = (
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export { getLastSignersSig }
|
/**
|
||||||
|
* Checks if all signers have signed the sigit
|
||||||
|
* @param signers - an array of npubs of all signers from the Sigit
|
||||||
|
* @param signedBy - an array of npubs that have signed it already
|
||||||
|
*/
|
||||||
|
const isFullySigned = (
|
||||||
|
signers: `npub1${string}`[],
|
||||||
|
signedBy: `npub1${string}`[]
|
||||||
|
): boolean => {
|
||||||
|
return signers.every((signer) => signedBy.includes(signer))
|
||||||
|
}
|
||||||
|
|
||||||
|
export { getLastSignersSig, isFullySigned }
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
/**
|
/**
|
||||||
* Function will replace the middle of the string with 3 dots if length greater then
|
* Function will replace the middle of the string with ellipsis if length greater then
|
||||||
* offset value
|
* offset value
|
||||||
* @param str string to shorten
|
* @param str string to shorten
|
||||||
* @param offset of how many chars to keep in the beginning and the end
|
* @param offset of how many chars to keep in the beginning and the end
|
||||||
@ -9,10 +9,7 @@ export const shorten = (str: string, offset = 9) => {
|
|||||||
// return original string if it is not long enough
|
// return original string if it is not long enough
|
||||||
if (str.length < offset * 2 + 4) return str
|
if (str.length < offset * 2 + 4) return str
|
||||||
|
|
||||||
return `${str.slice(0, offset)}...${str.slice(
|
return `${str.slice(0, offset)}…${str.slice(str.length - offset, str.length)}`
|
||||||
str.length - offset,
|
|
||||||
str.length
|
|
||||||
)}`
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export const stringToHex = (str: string) => {
|
export const stringToHex = (str: string) => {
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import { PdfFile } from '../types/drawing.ts'
|
|
||||||
import { CurrentUserFile } from '../types/file.ts'
|
import { CurrentUserFile } from '../types/file.ts'
|
||||||
|
import { SigitFile } from './file.ts'
|
||||||
|
|
||||||
export const compareObjects = (
|
export const compareObjects = (
|
||||||
obj1: object | null | undefined,
|
obj1: object | null | undefined,
|
||||||
@ -75,13 +75,13 @@ export const timeout = (ms: number = 60000) => {
|
|||||||
* @param creatorFileHashes
|
* @param creatorFileHashes
|
||||||
*/
|
*/
|
||||||
export const getCurrentUserFiles = (
|
export const getCurrentUserFiles = (
|
||||||
files: { [filename: string]: PdfFile },
|
files: { [filename: string]: SigitFile },
|
||||||
fileHashes: { [key: string]: string | null },
|
fileHashes: { [key: string]: string | null },
|
||||||
creatorFileHashes: { [key: string]: string }
|
creatorFileHashes: { [key: string]: string }
|
||||||
): CurrentUserFile[] => {
|
): CurrentUserFile[] => {
|
||||||
return Object.entries(files).map(([filename, pdfFile], index) => {
|
return Object.entries(files).map(([filename, file], index) => {
|
||||||
return {
|
return {
|
||||||
pdfFile,
|
file,
|
||||||
filename,
|
filename,
|
||||||
id: index + 1,
|
id: index + 1,
|
||||||
...(!!fileHashes[filename] && { hash: fileHashes[filename]! }),
|
...(!!fileHashes[filename] && { hash: fileHashes[filename]! }),
|
||||||
@ -89,3 +89,32 @@ export const getCurrentUserFiles = (
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Utility function that generates a promise with a callback on each array item
|
||||||
|
* and retuns only non-null fulfilled results
|
||||||
|
* @param array
|
||||||
|
* @param cb callback that generates a promise
|
||||||
|
* @returns Array with the non-null results
|
||||||
|
*/
|
||||||
|
export const settleAllFullfilfedPromises = async <Item, FulfilledItem = Item>(
|
||||||
|
array: Item[],
|
||||||
|
cb: (arg: Item) => Promise<FulfilledItem>
|
||||||
|
) => {
|
||||||
|
// Run the callback on the array to get promises
|
||||||
|
const promises = array.map(cb)
|
||||||
|
|
||||||
|
// Use Promise.allSettled to wait for all promises to settle
|
||||||
|
const results = await Promise.allSettled(promises)
|
||||||
|
|
||||||
|
// Extract non-null values from fulfilled promises in a single pass
|
||||||
|
return results.reduce<NonNullable<FulfilledItem>[]>((acc, result) => {
|
||||||
|
if (result.status === 'fulfilled') {
|
||||||
|
const value = result.value
|
||||||
|
if (value) {
|
||||||
|
acc.push(value)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return acc
|
||||||
|
}, [])
|
||||||
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user