fix: page scrolling
This commit is contained in:
parent
6d881ccb45
commit
97c82718cb
@ -48,17 +48,17 @@
|
|||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
|
|
||||||
|
&.active {
|
||||||
|
background: #4c82a3;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.fileItem:hover {
|
.fileItem:hover {
|
||||||
transition: ease 0.2s;
|
transition: ease 0.2s;
|
||||||
background: #4c82a3;
|
background: #4c82a3;
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: #4c82a3;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.fileName {
|
.fileName {
|
||||||
|
@ -1,6 +1,6 @@
|
|||||||
import { PdfFile } from '../../types/drawing.ts'
|
import { PdfFile } from '../../types/drawing.ts'
|
||||||
import { CurrentUserMark } from '../../types/mark.ts'
|
import { CurrentUserMark } from '../../types/mark.ts'
|
||||||
import PdfPageItem from './PdfPageItem.tsx';
|
import PdfPageItem from './PdfPageItem.tsx'
|
||||||
|
|
||||||
interface PdfItemProps {
|
interface PdfItemProps {
|
||||||
pdfFile: PdfFile
|
pdfFile: PdfFile
|
||||||
@ -13,23 +13,31 @@ interface PdfItemProps {
|
|||||||
/**
|
/**
|
||||||
* Responsible for displaying pages of a single Pdf File.
|
* Responsible for displaying pages of a single Pdf File.
|
||||||
*/
|
*/
|
||||||
const PdfItem = ({ pdfFile, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfItemProps) => {
|
const PdfItem = ({
|
||||||
const filterByPage = (marks: CurrentUserMark[], page: number): CurrentUserMark[] => {
|
pdfFile,
|
||||||
return marks.filter((m) => m.mark.location.page === page);
|
currentUserMarks,
|
||||||
|
handleMarkClick,
|
||||||
|
selectedMarkValue,
|
||||||
|
selectedMark
|
||||||
|
}: PdfItemProps) => {
|
||||||
|
const filterByPage = (
|
||||||
|
marks: CurrentUserMark[],
|
||||||
|
page: number
|
||||||
|
): CurrentUserMark[] => {
|
||||||
|
return marks.filter((m) => m.mark.location.page === page)
|
||||||
}
|
}
|
||||||
return (
|
return pdfFile.pages.map((page, i) => {
|
||||||
pdfFile.pages.map((page, i) => {
|
return (
|
||||||
return (
|
<PdfPageItem
|
||||||
<PdfPageItem
|
page={page}
|
||||||
page={page}
|
key={i}
|
||||||
key={i}
|
currentUserMarks={filterByPage(currentUserMarks, i)}
|
||||||
currentUserMarks={filterByPage(currentUserMarks, i)}
|
handleMarkClick={handleMarkClick}
|
||||||
handleMarkClick={handleMarkClick}
|
selectedMarkValue={selectedMarkValue}
|
||||||
selectedMarkValue={selectedMarkValue}
|
selectedMark={selectedMark}
|
||||||
selectedMark={selectedMark}
|
/>
|
||||||
/>
|
)
|
||||||
)
|
})
|
||||||
}))
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default PdfItem
|
export default PdfItem
|
@ -126,6 +126,7 @@ const PdfMarking = (props: PdfMarkingProps) => {
|
|||||||
{currentUserMarks?.length > 0 && (
|
{currentUserMarks?.length > 0 && (
|
||||||
<div className={styles.pdfView}>
|
<div className={styles.pdfView}>
|
||||||
<PdfView
|
<PdfView
|
||||||
|
currentFile={currentFile}
|
||||||
files={files}
|
files={files}
|
||||||
handleMarkClick={handleMarkClick}
|
handleMarkClick={handleMarkClick}
|
||||||
selectedMarkValue={selectedMarkValue}
|
selectedMarkValue={selectedMarkValue}
|
||||||
|
@ -2,6 +2,7 @@ import styles from '../DrawPDFFields/style.module.scss'
|
|||||||
import { PdfPage } from '../../types/drawing.ts'
|
import { PdfPage } from '../../types/drawing.ts'
|
||||||
import { CurrentUserMark } from '../../types/mark.ts'
|
import { CurrentUserMark } from '../../types/mark.ts'
|
||||||
import PdfMarkItem from './PdfMarkItem.tsx'
|
import PdfMarkItem from './PdfMarkItem.tsx'
|
||||||
|
import { useEffect, useRef } from 'react'
|
||||||
interface PdfPageProps {
|
interface PdfPageProps {
|
||||||
page: PdfPage
|
page: PdfPage
|
||||||
currentUserMarks: CurrentUserMark[]
|
currentUserMarks: CurrentUserMark[]
|
||||||
@ -13,7 +14,22 @@ interface PdfPageProps {
|
|||||||
/**
|
/**
|
||||||
* Responsible for rendering a single Pdf Page and its Marks
|
* Responsible for rendering a single Pdf Page and its Marks
|
||||||
*/
|
*/
|
||||||
const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValue, selectedMark }: PdfPageProps) => {
|
const PdfPageItem = ({
|
||||||
|
page,
|
||||||
|
currentUserMarks,
|
||||||
|
handleMarkClick,
|
||||||
|
selectedMarkValue,
|
||||||
|
selectedMark
|
||||||
|
}: PdfPageProps) => {
|
||||||
|
useEffect(() => {
|
||||||
|
if (selectedMark !== null && !!markRefs.current[selectedMark.id]) {
|
||||||
|
markRefs.current[selectedMark.id]?.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'end'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [selectedMark])
|
||||||
|
const markRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={styles.pdfImageWrapper}
|
className={styles.pdfImageWrapper}
|
||||||
@ -23,21 +39,17 @@ const PdfPageItem = ({ page, currentUserMarks, handleMarkClick, selectedMarkValu
|
|||||||
marginTop: '10px'
|
marginTop: '10px'
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<img
|
<img draggable="false" src={page.image} style={{ width: '100%' }} />
|
||||||
draggable="false"
|
{currentUserMarks.map((m, i) => (
|
||||||
src={page.image}
|
<div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
|
||||||
style={{ width: '100%'}}
|
|
||||||
|
|
||||||
/>
|
|
||||||
{
|
|
||||||
currentUserMarks.map((m, i) => (
|
|
||||||
<PdfMarkItem
|
<PdfMarkItem
|
||||||
key={i}
|
key={i}
|
||||||
handleMarkClick={handleMarkClick}
|
handleMarkClick={handleMarkClick}
|
||||||
selectedMarkValue={selectedMarkValue}
|
selectedMarkValue={selectedMarkValue}
|
||||||
userMark={m}
|
userMark={m}
|
||||||
selectedMark={selectedMark}
|
selectedMark={selectedMark}
|
||||||
/>
|
/>
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
import { Box } from '@mui/material'
|
import { Box, Divider } from '@mui/material'
|
||||||
import PdfItem from './PdfItem.tsx'
|
import PdfItem from './PdfItem.tsx'
|
||||||
import { CurrentUserMark } from '../../types/mark.ts'
|
import { CurrentUserMark } from '../../types/mark.ts'
|
||||||
import { CurrentUserFile } from '../../types/file.ts'
|
import { CurrentUserFile } from '../../types/file.ts'
|
||||||
|
import { useEffect, useRef } from 'react'
|
||||||
|
|
||||||
interface PdfViewProps {
|
interface PdfViewProps {
|
||||||
files: CurrentUserFile[]
|
files: CurrentUserFile[]
|
||||||
@ -9,6 +10,7 @@ interface PdfViewProps {
|
|||||||
handleMarkClick: (id: number) => void
|
handleMarkClick: (id: number) => void
|
||||||
selectedMarkValue: string
|
selectedMarkValue: string
|
||||||
selectedMark: CurrentUserMark | null
|
selectedMark: CurrentUserMark | null
|
||||||
|
currentFile: CurrentUserFile | null
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -19,29 +21,48 @@ const PdfView = ({
|
|||||||
currentUserMarks,
|
currentUserMarks,
|
||||||
handleMarkClick,
|
handleMarkClick,
|
||||||
selectedMarkValue,
|
selectedMarkValue,
|
||||||
selectedMark
|
selectedMark,
|
||||||
|
currentFile
|
||||||
}: PdfViewProps) => {
|
}: PdfViewProps) => {
|
||||||
|
const pdfRefs = useRef<(HTMLDivElement | null)[]>([])
|
||||||
|
useEffect(() => {
|
||||||
|
if (currentFile !== null && !!pdfRefs.current[currentFile.id]) {
|
||||||
|
pdfRefs.current[currentFile.id]?.scrollIntoView({
|
||||||
|
behavior: 'smooth',
|
||||||
|
block: 'end'
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}, [currentFile])
|
||||||
const filterByFile = (
|
const filterByFile = (
|
||||||
currentUserMarks: CurrentUserMark[],
|
currentUserMarks: CurrentUserMark[],
|
||||||
hash: string
|
fileName: string
|
||||||
): CurrentUserMark[] => {
|
): CurrentUserMark[] => {
|
||||||
return currentUserMarks.filter(
|
return currentUserMarks.filter(
|
||||||
(currentUserMark) => currentUserMark.mark.pdfFileHash === hash
|
(currentUserMark) => currentUserMark.mark.fileName === fileName
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
const isNotLastPdfFile = (index: number, files: CurrentUserFile[]): boolean =>
|
||||||
|
!(index !== files.length - 1)
|
||||||
return (
|
return (
|
||||||
<Box sx={{ width: '100%' }}>
|
<Box sx={{ width: '100%' }}>
|
||||||
{files.map(({ pdfFile, hash }, i) => {
|
{files.map((currentUserFile, index, arr) => {
|
||||||
|
const { hash, pdfFile, filename, id } = currentUserFile
|
||||||
if (!hash) return
|
if (!hash) return
|
||||||
return (
|
return (
|
||||||
<PdfItem
|
<div
|
||||||
pdfFile={pdfFile}
|
id={pdfFile.file.name}
|
||||||
key={i}
|
ref={(el) => (pdfRefs.current[id] = el)}
|
||||||
currentUserMarks={filterByFile(currentUserMarks, hash)}
|
key={index}
|
||||||
selectedMark={selectedMark}
|
>
|
||||||
handleMarkClick={handleMarkClick}
|
<PdfItem
|
||||||
selectedMarkValue={selectedMarkValue}
|
pdfFile={pdfFile}
|
||||||
/>
|
currentUserMarks={filterByFile(currentUserMarks, filename)}
|
||||||
|
selectedMark={selectedMark}
|
||||||
|
handleMarkClick={handleMarkClick}
|
||||||
|
selectedMarkValue={selectedMarkValue}
|
||||||
|
/>
|
||||||
|
{isNotLastPdfFile(index, arr) && <Divider>File Separator</Divider>}
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
})}
|
})}
|
||||||
</Box>
|
</Box>
|
||||||
|
@ -338,32 +338,36 @@ export const CreatePage = () => {
|
|||||||
fileHashes[file.name] = hash
|
fileHashes[file.name] = hash
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log('file hashes: ', fileHashes)
|
||||||
|
|
||||||
return fileHashes
|
return fileHashes
|
||||||
}
|
}
|
||||||
|
|
||||||
const createMarks = (fileHashes: { [key: string]: string }) : Mark[] => {
|
const createMarks = (fileHashes: { [key: string]: string }): Mark[] => {
|
||||||
return drawnPdfs.flatMap((drawnPdf) => {
|
return drawnPdfs
|
||||||
const fileHash = fileHashes[drawnPdf.file.name];
|
.flatMap((drawnPdf) => {
|
||||||
return drawnPdf.pages.flatMap((page, index) => {
|
const fileHash = fileHashes[drawnPdf.file.name]
|
||||||
return page.drawnFields.map((drawnField) => {
|
return drawnPdf.pages.flatMap((page, index) => {
|
||||||
return {
|
return page.drawnFields.map((drawnField) => {
|
||||||
type: drawnField.type,
|
return {
|
||||||
location: {
|
type: drawnField.type,
|
||||||
page: index,
|
location: {
|
||||||
top: drawnField.top,
|
page: index,
|
||||||
left: drawnField.left,
|
top: drawnField.top,
|
||||||
height: drawnField.height,
|
left: drawnField.left,
|
||||||
width: drawnField.width,
|
height: drawnField.height,
|
||||||
},
|
width: drawnField.width
|
||||||
npub: drawnField.counterpart,
|
},
|
||||||
pdfFileHash: fileHash
|
npub: drawnField.counterpart,
|
||||||
}
|
pdfFileHash: fileHash,
|
||||||
|
fileName: drawnPdf.file.name
|
||||||
|
}
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
})
|
|
||||||
.map((mark, index) => {
|
.map((mark, index) => {
|
||||||
return {...mark, id: index }
|
return { ...mark, id: index }
|
||||||
});
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle errors during zip file generation
|
// Handle errors during zip file generation
|
||||||
@ -431,13 +435,9 @@ export const CreatePage = () => {
|
|||||||
|
|
||||||
if (!arraybuffer) return null
|
if (!arraybuffer) return null
|
||||||
|
|
||||||
return new File(
|
return new File([new Blob([arraybuffer])], `${unixNow}.sigit.zip`, {
|
||||||
[new Blob([arraybuffer])],
|
type: 'application/zip'
|
||||||
`${unixNow}.sigit.zip`,
|
})
|
||||||
{
|
|
||||||
type: 'application/zip'
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Handle errors during file upload
|
// Handle errors during file upload
|
||||||
@ -545,9 +545,7 @@ export const CreatePage = () => {
|
|||||||
: viewers.map((viewer) => viewer.pubkey)
|
: viewers.map((viewer) => viewer.pubkey)
|
||||||
).filter((receiver) => receiver !== usersPubkey)
|
).filter((receiver) => receiver !== usersPubkey)
|
||||||
|
|
||||||
return receivers.map((receiver) =>
|
return receivers.map((receiver) => sendNotification(receiver, meta))
|
||||||
sendNotification(receiver, meta)
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleCreate = async () => {
|
const handleCreate = async () => {
|
||||||
|
@ -14,6 +14,7 @@ export interface Mark {
|
|||||||
pdfFileHash: string
|
pdfFileHash: string
|
||||||
type: MarkType
|
type: MarkType
|
||||||
location: MarkLocation
|
location: MarkLocation
|
||||||
|
fileName: string
|
||||||
value?: string
|
value?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user