From 33da049428769078f216093a75a06403a15625e2 Mon Sep 17 00:00:00 2001 From: enes Date: Thu, 15 Aug 2024 18:57:40 +0200 Subject: [PATCH] feat(create-page): intial layout and page styling Additional linting fixes --- src/components/DrawPDFFields/index.tsx | 157 +++++++-------- .../DrawPDFFields/style.module.scss | 15 +- src/pages/create/index.tsx | 189 ++++++++++-------- src/pages/create/style.module.scss | 10 +- 4 files changed, 188 insertions(+), 183 deletions(-) diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx index e98187c..1b36cd7 100644 --- a/src/components/DrawPDFFields/index.tsx +++ b/src/components/DrawPDFFields/index.tsx @@ -1,20 +1,15 @@ import { AccessTime, CalendarMonth, - ExpandMore, Gesture, - PictureAsPdf, Badge, Work, Close } from '@mui/icons-material' import { Box, - Typography, - Accordion, - AccordionDetails, - AccordionSummary, CircularProgress, + Divider, FormControl, InputLabel, MenuItem, @@ -53,7 +48,7 @@ export const DrawPDFFields = (props: Props) => { const [pdfFiles, setPdfFiles] = useState([]) const [parsingPdf, setParsingPdf] = useState(false) - const [showDrawToolBox, setShowDrawToolBox] = useState(false) + const [showDrawToolBox] = useState(true) const [selectedTool, setSelectedTool] = useState() const [toolbox] = useState([ @@ -95,6 +90,16 @@ export const DrawPDFFields = (props: Props) => { useEffect(() => { if (selectedFiles) { + /** + * 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) + } + setParsingPdf(true) parsePdfPages().finally(() => { @@ -105,7 +110,7 @@ export const DrawPDFFields = (props: Props) => { useEffect(() => { if (pdfFiles) props.onDrawFieldsChange(pdfFiles) - }, [pdfFiles]) + }, [pdfFiles, props]) /** * Drawing events @@ -132,12 +137,15 @@ export const DrawPDFFields = (props: Props) => { * @param event Mouse event * @param page PdfPage where press happened */ - const onMouseDown = (event: any, page: PdfPage) => { + const onMouseDown = ( + event: React.MouseEvent, + page: PdfPage + ) => { // Proceed only if left click if (event.button !== 0) return // Only allow drawing if mouse is not over other drawn element - const isOverPdfImageWrapper = event.target.tagName === 'IMG' + const isOverPdfImageWrapper = event.currentTarget.tagName === 'IMG' if (!selectedTool || !isOverPdfImageWrapper) { return @@ -185,7 +193,10 @@ export const DrawPDFFields = (props: Props) => { * @param event Mouse event * @param page PdfPage where moving is happening */ - const onMouseMove = (event: any, page: PdfPage) => { + const onMouseMove = ( + event: React.MouseEvent, + page: PdfPage + ) => { if (mouseState.clicked && selectedTool) { const lastElementIndex = page.drawnFields.length - 1 const lastDrawnField = page.drawnFields[lastElementIndex] @@ -216,7 +227,9 @@ export const DrawPDFFields = (props: Props) => { * @param event Mouse event * @param drawnField Which we are moving */ - const onDrawnFieldMouseDown = (event: any) => { + const onDrawnFieldMouseDown = ( + event: React.MouseEvent + ) => { event.stopPropagation() // Proceed only if left click @@ -239,11 +252,14 @@ export const DrawPDFFields = (props: Props) => { * @param event Mouse event * @param drawnField which we are moving */ - const onDranwFieldMouseMove = (event: any, drawnField: DrawnField) => { + const onDranwFieldMouseMove = ( + event: React.MouseEvent, + drawnField: DrawnField + ) => { if (mouseState.dragging) { const { mouseX, mouseY, rect } = getMouseCoordinates( event, - event.target.parentNode + event.currentTarget.parentNode as HTMLElement ) const coordsOffset = mouseState.coordsInWrapper @@ -272,7 +288,9 @@ export const DrawPDFFields = (props: Props) => { * @param event Mouse event * @param drawnField which we are resizing */ - const onResizeHandleMouseDown = (event: any) => { + const onResizeHandleMouseDown = ( + event: React.MouseEvent + ) => { // Proceed only if left click if (event.button !== 0) return @@ -288,11 +306,14 @@ export const DrawPDFFields = (props: Props) => { * @param event Mouse event * @param drawnField which we are resizing */ - const onResizeHandleMouseMove = (event: any, drawnField: DrawnField) => { + const onResizeHandleMouseMove = ( + event: React.MouseEvent, + drawnField: DrawnField + ) => { if (mouseState.resizing) { const { mouseX, mouseY } = getMouseCoordinates( event, - event.target.parentNode.parentNode + event.currentTarget.parentNode as HTMLElement ) const width = mouseX - drawnField.left @@ -313,7 +334,7 @@ export const DrawPDFFields = (props: Props) => { * @param drawnFileIndex drawn file index */ const onRemoveHandleMouseDown = ( - event: any, + event: React.MouseEvent, pdfFileIndex: number, pdfPageIndex: number, drawnFileIndex: number @@ -331,7 +352,9 @@ export const DrawPDFFields = (props: Props) => { * so select can work properly * @param event Mouse event */ - const onUserSelectHandleMouseDown = (event: any) => { + const onUserSelectHandleMouseDown = ( + event: React.MouseEvent + ) => { event.stopPropagation() } @@ -341,8 +364,11 @@ export const DrawPDFFields = (props: Props) => { * @param customTarget mouse coordinates relative to this element, if not provided * event.target will be used */ - const getMouseCoordinates = (event: any, customTarget?: any) => { - const target = customTarget ? customTarget : event.target + const getMouseCoordinates = ( + event: React.MouseEvent, + customTarget?: HTMLElement + ) => { + const target = customTarget ? customTarget : event.currentTarget const rect = target.getBoundingClientRect() const mouseX = event.clientX - rect.left //x position within the element. const mouseY = event.clientY - rect.top //y position within the element. @@ -354,31 +380,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 - */ - const hasExpandedPdf = () => { - return !!pdfFiles.filter((pdfFile) => !!pdfFile.expanded).length - } - - const handleAccordionExpandChange = (expanded: boolean, pdfFile: PdfFile) => { - pdfFile.expanded = expanded - - refreshPdfFiles() - setShowDrawToolBox(hasExpandedPdf()) - } - /** * Changes the drawing tool * @param drawTool to draw with @@ -398,19 +399,11 @@ export const DrawPDFFields = (props: Props) => { */ const getPdfPages = (pdfFile: PdfFile, pdfFileIndex: number) => { return ( - + <> {pdfFile.pages.map((page, pdfPageIndex: number) => { return (
{ onMouseMove(event, page) @@ -516,7 +509,7 @@ export const DrawPDFFields = (props: Props) => {
) })} - + ) } @@ -533,34 +526,26 @@ export const DrawPDFFields = (props: Props) => { } return ( - - - Draw fields on the PDFs: - - {pdfFiles.map((pdfFile, pdfFileIndex: number) => { - return ( - { - handleAccordionExpandChange(expanded, pdfFile) - }} - > - } - aria-controls={`panel${pdfFileIndex}-content`} - id={`panel${pdfFileIndex}header`} +
+ {pdfFiles.map((pdfFile, pdfFileIndex: number) => { + return ( + <> +
+ {getPdfPages(pdfFile, pdfFileIndex)} +
+ {pdfFileIndex < pdfFiles.length - 1 && ( + - - {pdfFile.file.name} - - - {getPdfPages(pdfFile, pdfFileIndex)} - - - ) - })} - + File Separator + + )} + + ) + })} {showDrawToolBox && ( @@ -569,7 +554,7 @@ export const DrawPDFFields = (props: Props) => { .filter((drawTool) => drawTool.active) .map((drawTool: DrawTool, index: number) => { return ( - { handleToolSelect(drawTool) @@ -578,12 +563,12 @@ export const DrawPDFFields = (props: Props) => { > {drawTool.icon} {drawTool.label} - +
) })} )} - + ) } diff --git a/src/components/DrawPDFFields/style.module.scss b/src/components/DrawPDFFields/style.module.scss index 7490d1f..0d84c4b 100644 --- a/src/components/DrawPDFFields/style.module.scss +++ b/src/components/DrawPDFFields/style.module.scss @@ -51,7 +51,6 @@ position: relative; -webkit-user-select: none; user-select: none; - margin-bottom: 10px; > img { display: block; @@ -81,7 +80,7 @@ } &.edited { - border: 1px dotted #01aaad + border: 1px dotted #01aaad; } .resizeHandle { @@ -124,3 +123,15 @@ padding: 5px 0; } } + +.fileWrapper { + display: flex; + flex-direction: column; + gap: 15px; +} + +.view { + display: flex; + flex-direction: column; + gap: 25px; +} diff --git a/src/pages/create/index.tsx b/src/pages/create/index.tsx index fe4ac7f..36e6584 100644 --- a/src/pages/create/index.tsx +++ b/src/pages/create/index.tsx @@ -64,6 +64,7 @@ import styles from './style.module.scss' import { PdfFile } from '../../types/drawing' import { DrawPDFFields } from '../../components/DrawPDFFields' import { Mark } from '../../types/mark.ts' +import { StickySideColumns } from '../../layouts/StickySideColumns.tsx' export const CreatePage = () => { const navigate = useNavigate() @@ -702,94 +703,110 @@ export const CreatePage = () => { <> {isLoading && } - setTitle(e.target.value)} - variant="outlined" - /> + + setTitle(e.target.value)} + variant="outlined" + /> - - handleSelectFiles(value)} + + handleSelectFiles(value)} + /> + + {selectedFiles.length > 0 && ( +
    + {selectedFiles.map((file, index) => ( +
  • + {file.name} + handleRemoveFile(file)}> + {' '} + +
    • + ))} +
+ )} + + + } + right={ + <> + + Add Counterparts + + + + setUserInput(e.target.value)} + helperText={error} + error={!!error} + /> + + Role + + + + + + + + + + + + + + + } + > + - - {selectedFiles.length > 0 && ( -
    - {selectedFiles.map((file, index) => ( -
  • - {file.name} - handleRemoveFile(file)}> - {' '} - -
    • - ))} -
- )} - - - - Add Counterparts - - - - setUserInput(e.target.value)} - helperText={error} - error={!!error} - /> - - Role - - - - - - - - - - - - - - - - + ) diff --git a/src/pages/create/style.module.scss b/src/pages/create/style.module.scss index 395936b..9304618 100644 --- a/src/pages/create/style.module.scss +++ b/src/pages/create/style.module.scss @@ -1,14 +1,6 @@ @import '../../styles/colors.scss'; .container { - display: flex; - flex-direction: column; - color: $text-color; - margin-top: 10px; - gap: 10px; - width: 550px; - max-width: 550px; - .inputBlock { display: flex; flex-direction: column; @@ -38,4 +30,4 @@ cursor: pointer; } } -} \ No newline at end of file +}