Releasing new design #161

Merged
b merged 241 commits from staging into main 2024-08-21 11:38:25 +00:00
3 changed files with 54 additions and 33 deletions
Showing only changes of commit 17c91b5507 - Show all commits

View File

@ -49,7 +49,7 @@ interface Props {
} }
export const DrawPDFFields = (props: Props) => { export const DrawPDFFields = (props: Props) => {
const { selectedFiles } = props const { selectedFiles, onDrawFieldsChange, users } = props
const [pdfFiles, setPdfFiles] = useState<PdfFile[]>([]) const [pdfFiles, setPdfFiles] = useState<PdfFile[]>([])
const [parsingPdf, setParsingPdf] = useState<boolean>(false) const [parsingPdf, setParsingPdf] = useState<boolean>(false)
@ -94,6 +94,15 @@ export const DrawPDFFields = (props: Props) => {
}) })
useEffect(() => { useEffect(() => {
/**
* Reads the pdf binary files and converts it's pages to images
* creates the pdfFiles object and sets to a state
*/
const parsePdfPages = async () => {
const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles)
setPdfFiles(pdfFiles)
}
if (selectedFiles) { if (selectedFiles) {
setParsingPdf(true) setParsingPdf(true)
@ -104,8 +113,8 @@ export const DrawPDFFields = (props: Props) => {
}, [selectedFiles]) }, [selectedFiles])
useEffect(() => { useEffect(() => {
if (pdfFiles) props.onDrawFieldsChange(pdfFiles) if (pdfFiles) onDrawFieldsChange(pdfFiles)
}, [pdfFiles]) }, [onDrawFieldsChange, pdfFiles])
/** /**
* Drawing events * Drawing events
@ -132,12 +141,16 @@ export const DrawPDFFields = (props: Props) => {
* @param event Mouse event * @param event Mouse event
* @param page PdfPage where press happened * @param page PdfPage where press happened
*/ */
const onMouseDown = (event: any, page: PdfPage) => { const onMouseDown = (
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
// Only allow drawing if mouse is not over other drawn element // Only allow drawing if mouse is not over other drawn element
const isOverPdfImageWrapper = event.target.tagName === 'IMG' const target = event.target as HTMLElement
const isOverPdfImageWrapper = target.tagName === 'IMG'
if (!selectedTool || !isOverPdfImageWrapper) { if (!selectedTool || !isOverPdfImageWrapper) {
return return
@ -185,7 +198,10 @@ export const DrawPDFFields = (props: Props) => {
* @param event Mouse event * @param event Mouse event
* @param page PdfPage where moving is happening * @param page PdfPage where moving is happening
*/ */
const onMouseMove = (event: any, page: PdfPage) => { const onMouseMove = (
event: React.MouseEvent<HTMLDivElement>,
page: PdfPage
) => {
if (mouseState.clicked && selectedTool) { 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]
@ -216,7 +232,7 @@ export const DrawPDFFields = (props: Props) => {
* @param event Mouse event * @param event Mouse event
* @param drawnField Which we are moving * @param drawnField Which we are moving
*/ */
const onDrawnFieldMouseDown = (event: any) => { const onDrawnFieldMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
event.stopPropagation() event.stopPropagation()
// Proceed only if left click // Proceed only if left click
@ -239,11 +255,15 @@ export const DrawPDFFields = (props: Props) => {
* @param event Mouse event * @param event Mouse event
* @param drawnField which we are moving * @param drawnField which we are moving
*/ */
const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => { const onDranwFieldMouseMove = (
event: React.MouseEvent<HTMLDivElement>,
drawnField: DrawnField
) => {
const target = event.target as HTMLElement | null
if (mouseState.dragging) { if (mouseState.dragging) {
const { mouseX, mouseY, rect } = getMouseCoordinates( const { mouseX, mouseY, rect } = getMouseCoordinates(
event, event,
event.target.parentNode target?.parentNode as HTMLElement
) )
const coordsOffset = mouseState.coordsInWrapper const coordsOffset = mouseState.coordsInWrapper
@ -272,7 +292,7 @@ export const DrawPDFFields = (props: Props) => {
* @param event Mouse event * @param event Mouse event
* @param drawnField which we are resizing * @param drawnField which we are resizing
*/ */
const onResizeHandleMouseDown = (event: any) => { const onResizeHandleMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {
// Proceed only if left click // Proceed only if left click
if (event.button !== 0) return if (event.button !== 0) return
@ -288,11 +308,15 @@ export const DrawPDFFields = (props: Props) => {
* @param event Mouse event * @param event Mouse event
* @param drawnField which we are resizing * @param drawnField which we are resizing
*/ */
const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => { const onResizeHandleMouseMove = (
event: React.MouseEvent<HTMLSpanElement | HTMLDivElement>,
drawnField: DrawnField
) => {
const target = event.target as HTMLElement | null
if (mouseState.resizing) { if (mouseState.resizing) {
const { mouseX, mouseY } = getMouseCoordinates( const { mouseX, mouseY } = getMouseCoordinates(
event, event,
event.target.parentNode.parentNode target?.parentNode?.parentNode as HTMLElement
) )
const width = mouseX - drawnField.left const width = mouseX - drawnField.left
@ -313,7 +337,7 @@ export const DrawPDFFields = (props: Props) => {
* @param drawnFileIndex drawn file index * @param drawnFileIndex drawn file index
*/ */
const onRemoveHandleMouseDown = ( const onRemoveHandleMouseDown = (
event: any, event: React.MouseEvent<HTMLDivElement | HTMLSpanElement>,
pdfFileIndex: number, pdfFileIndex: number,
pdfPageIndex: number, pdfPageIndex: number,
drawnFileIndex: number drawnFileIndex: number
@ -331,7 +355,9 @@ export const DrawPDFFields = (props: Props) => {
* so select can work properly * so select can work properly
* @param event Mouse event * @param event Mouse event
*/ */
const onUserSelectHandleMouseDown = (event: any) => { const onUserSelectHandleMouseDown = (
event: React.MouseEvent<HTMLDivElement>
) => {
event.stopPropagation() event.stopPropagation()
} }
@ -341,8 +367,11 @@ export const DrawPDFFields = (props: Props) => {
* @param customTarget mouse coordinates relative to this element, if not provided * @param customTarget mouse coordinates relative to this element, if not provided
* event.target will be used * event.target will be used
*/ */
const getMouseCoordinates = (event: any, customTarget?: any) => { const getMouseCoordinates = (
const target = customTarget ? customTarget : event.target event: React.MouseEvent<HTMLDivElement | HTMLSpanElement>,
customTarget?: HTMLElement
) => {
const target = (customTarget ? customTarget : event.target) as HTMLElement
const rect = target.getBoundingClientRect() const rect = target.getBoundingClientRect()
const mouseX = event.clientX - rect.left //x position within the element. const mouseX = event.clientX - rect.left //x position within the element.
const mouseY = event.clientY - rect.top //y position within the element. const mouseY = event.clientY - rect.top //y position within the element.
@ -354,16 +383,6 @@ export const DrawPDFFields = (props: Props) => {
} }
} }
/**
* Reads the pdf binary files and converts it's pages to images
* creates the pdfFiles object and sets to a state
*/
const parsePdfPages = async () => {
const pdfFiles: PdfFile[] = await toPdfFiles(selectedFiles)
setPdfFiles(pdfFiles)
}
/** /**
* *
* @returns if expanded pdf accordion is present * @returns if expanded pdf accordion is present
@ -477,7 +496,7 @@ export const DrawPDFFields = (props: Props) => {
labelId="counterparts" labelId="counterparts"
label="Counterparts" label="Counterparts"
> >
{props.users.map((user, index) => { {users.map((user, index) => {
let displayValue = truncate( let displayValue = truncate(
hexToNpub(user.pubkey), hexToNpub(user.pubkey),
{ {

View File

@ -7,15 +7,17 @@ import {
isCurrentUserMarksComplete, isCurrentUserMarksComplete,
isCurrentValueLast isCurrentValueLast
} from '../../utils' } from '../../utils'
import { useState } from 'react' import React, { useState } from 'react'
interface MarkFormFieldProps { interface MarkFormFieldProps {
handleSubmit: (event: any) => void
handleSelectedMarkValueChange: (event: any) => void
selectedMark: CurrentUserMark
selectedMarkValue: string
currentUserMarks: CurrentUserMark[] currentUserMarks: CurrentUserMark[]
handleCurrentUserMarkChange: (mark: CurrentUserMark) => void handleCurrentUserMarkChange: (mark: CurrentUserMark) => void
handleSelectedMarkValueChange: (
event: React.ChangeEvent<HTMLInputElement>
) => void
handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void
selectedMark: CurrentUserMark
selectedMarkValue: string
} }
/** /**

View File

@ -1,4 +1,4 @@
import { MarkType } from "./drawing"; import { MarkType } from './drawing'
export interface CurrentUserMark { export interface CurrentUserMark {
id: number id: number