Compare commits

...

2 Commits

Author SHA1 Message Date
479cca2180 chore(git): merge pull request #183 from 172-sign-marks-scroll into 174-add-users-updates
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 34s
2024-09-05 09:09:11 +00:00
82b7b9f7ce fix(mark): scroll into marks, add scroll margin and forwardRef
Closes #172
2024-09-05 09:32:01 +02:00
3 changed files with 49 additions and 40 deletions

View File

@ -141,6 +141,8 @@ li {
color: black; color: black;
letter-spacing: normal; letter-spacing: normal;
border: 1px solid transparent; border: 1px solid transparent;
scroll-margin-top: $header-height + $body-vertical-padding;
} }
[data-dev='true'] { [data-dev='true'] {

View File

@ -2,6 +2,8 @@ import { CurrentUserMark } from '../../types/mark.ts'
import styles from '../DrawPDFFields/style.module.scss' import styles from '../DrawPDFFields/style.module.scss'
import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts' import { FONT_SIZE, FONT_TYPE, inPx } from '../../utils/pdf.ts'
import { useScale } from '../../hooks/useScale.tsx' import { useScale } from '../../hooks/useScale.tsx'
import { forwardRef } from 'react'
import { npubToHex } from '../../utils/nostr.ts'
interface PdfMarkItemProps { interface PdfMarkItemProps {
userMark: CurrentUserMark userMark: CurrentUserMark
@ -14,35 +16,41 @@ interface PdfMarkItemProps {
/** /**
* 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, ) => {
pageWidth const { location } = userMark.mark
}: PdfMarkItemProps) => { const handleClick = () => handleMarkClick(userMark.mark.id)
const { location } = userMark.mark const isEdited = () => selectedMark?.mark.id === userMark.mark.id
const handleClick = () => handleMarkClick(userMark.mark.id) const getMarkValue = () =>
const isEdited = () => selectedMark?.mark.id === userMark.mark.id isEdited() ? selectedMarkValue : userMark.currentValue
const getMarkValue = () => const { from } = useScale()
isEdited() ? selectedMarkValue : userMark.currentValue return (
const { from } = useScale() <div
return ( ref={ref}
<div onClick={handleClick}
onClick={handleClick} className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`} style={{
style={{ backgroundColor: selectedMark?.mark.npub
left: inPx(from(pageWidth, location.left)), ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
top: inPx(from(pageWidth, location.top)), : undefined,
width: inPx(from(pageWidth, location.width)), borderColor: selectedMark?.mark.npub
height: inPx(from(pageWidth, location.height)), ? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}`
fontFamily: FONT_TYPE, : undefined,
fontSize: inPx(from(pageWidth, FONT_SIZE)) left: inPx(from(pageWidth, location.left)),
}} top: inPx(from(pageWidth, location.top)),
> width: inPx(from(pageWidth, location.width)),
{getMarkValue()} height: inPx(from(pageWidth, location.height)),
</div> fontFamily: FONT_TYPE,
) fontSize: inPx(from(pageWidth, FONT_SIZE))
} }}
>
{getMarkValue()}
</div>
)
}
)
export default PdfMarkItem export default PdfMarkItem

View File

@ -48,16 +48,15 @@ const PdfPageItem = ({
alt={`page ${pageIndex + 1} of ${fileName}`} alt={`page ${pageIndex + 1} of ${fileName}`}
/> />
{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} pageWidth={page.width}
/> />
</div>
))} ))}
{otherUserMarks.map((m, i) => { {otherUserMarks.map((m, i) => {
return ( return (