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
All checks were successful
Open PR on Staging / audit_and_check (pull_request) Successful in 34s
This commit is contained in:
commit
479cca2180
@ -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'] {
|
||||||
|
@ -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
|
||||||
|
@ -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 (
|
||||||
|
Loading…
Reference in New Issue
Block a user