fix(mark): scroll into marks, add scroll margin and forwardRef #183

Merged
enes merged 1 commits from 172-sign-marks-scroll into 174-add-users-updates 2024-09-05 09:09:12 +00:00
3 changed files with 49 additions and 40 deletions

View File

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

View File

@ -2,6 +2,8 @@ import { CurrentUserMark } from '../../types/mark.ts'
import styles from '../DrawPDFFields/style.module.scss'
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 {
userMark: CurrentUserMark
@ -14,13 +16,11 @@ interface PdfMarkItemProps {
/**
* Responsible for display an individual Pdf Mark.
*/
const PdfMarkItem = ({
selectedMark,
handleMarkClick,
selectedMarkValue,
userMark,
pageWidth
}: PdfMarkItemProps) => {
const PdfMarkItem = forwardRef<HTMLDivElement, PdfMarkItemProps>(
(
{ selectedMark, handleMarkClick, selectedMarkValue, userMark, pageWidth },
ref
) => {
const { location } = userMark.mark
const handleClick = () => handleMarkClick(userMark.mark.id)
const isEdited = () => selectedMark?.mark.id === userMark.mark.id
@ -29,9 +29,16 @@ const PdfMarkItem = ({
const { from } = useScale()
return (
<div
ref={ref}
onClick={handleClick}
className={`file-mark ${styles.drawingRectangle} ${isEdited() && styles.edited}`}
style={{
backgroundColor: selectedMark?.mark.npub
? `#${npubToHex(selectedMark?.mark.npub)?.substring(0, 6)}4b`
: undefined,
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)),
@ -44,5 +51,6 @@ const PdfMarkItem = ({
</div>
)
}
)
export default PdfMarkItem

View File

@ -48,16 +48,15 @@ const PdfPageItem = ({
alt={`page ${pageIndex + 1} of ${fileName}`}
/>
{currentUserMarks.map((m, i) => (
<div key={i} ref={(el) => (markRefs.current[m.id] = el)}>
<PdfMarkItem
key={i}
ref={(el) => (markRefs.current[m.id] = el)}
handleMarkClick={handleMarkClick}
selectedMarkValue={selectedMarkValue}
userMark={m}
selectedMark={selectedMark}
pageWidth={page.width}
/>
</div>
))}
{otherUserMarks.map((m, i) => {
return (