new release #190

Merged
b merged 68 commits from staging into main 2024-09-06 18:59:34 +00:00
5 changed files with 55 additions and 11 deletions
Showing only changes of commit ae08b07d74 - Show all commits

View File

@ -94,6 +94,7 @@ input {
} }
} }
// For pdf marks
.image-wrapper { .image-wrapper {
position: relative; position: relative;
-webkit-user-select: none; -webkit-user-select: none;
@ -109,6 +110,17 @@ input {
} }
} }
// For image rendering (uploaded image as a file)
.file-image {
-webkit-user-select: none;
user-select: none;
display: block;
width: 100%;
height: auto;
object-fit: contain; /* Ensure the image fits within the container */
}
[data-dev='true'] { [data-dev='true'] {
.image-wrapper { .image-wrapper {
// outline: 1px solid #ccc; /* Optional: for visual debugging */ // outline: 1px solid #ccc; /* Optional: for visual debugging */

View File

@ -475,13 +475,18 @@ export const DrawPDFFields = (props: Props) => {
return ( return (
<div className="files-wrapper"> <div className="files-wrapper">
{sigitFiles.map((file, i) => { {sigitFiles.map((file, i) => {
const name = file.name
return ( return (
<React.Fragment key={name}> <React.Fragment key={file.name}>
<div className="file-wrapper" id={`file-${name}`}> <div className="file-wrapper" id={`file-${file.name}`}>
{file.isPdf ? ( {file.isPdf && getPdfPages(file, i)}
getPdfPages(file, i) {file.isImage && (
) : ( <img
className="file-image"
src={file.objectUrl}
alt={file.name}
/>
)}
{!(file.isPdf || file.isImage) && (
<ExtensionFileBox extension={file.extension} /> <ExtensionFileBox extension={file.extension} />
)} )}
</div> </div>

View File

@ -46,6 +46,8 @@ const PdfItem = ({
/> />
) )
}) })
} else if (file.isImage) {
return <img className="file-image" src={file.objectUrl} alt={file.name} />
} else { } else {
return <ExtensionFileBox extension={file.extension} /> return <ExtensionFileBox extension={file.extension} />
} }

View File

@ -85,7 +85,7 @@ const SlimPdfView = ({
ref={(el) => (pdfRefs.current[id] = el)} ref={(el) => (pdfRefs.current[id] = el)}
className="file-wrapper" className="file-wrapper"
> >
{file.isPdf ? ( {file.isPdf &&
file.pages?.map((page, i) => { file.pages?.map((page, i) => {
const marks: Mark[] = [] const marks: Mark[] = []
@ -120,12 +120,18 @@ const SlimPdfView = ({
})} })}
</div> </div>
) )
}) })}
) : ( {file.isImage && (
<img
className="file-image"
src={file.objectUrl}
alt={file.name}
/>
)}
{!(file.isPdf || file.isImage) && (
<ExtensionFileBox extension={file.extension} /> <ExtensionFileBox extension={file.extension} />
)} )}
</div> </div>
{i < files.length - 1 && <FileDivider />} {i < files.length - 1 && <FileDivider />}
</React.Fragment> </React.Fragment>
) )

View File

@ -51,17 +51,22 @@ export const toFile = (
export class SigitFile extends File { export class SigitFile extends File {
extension: string extension: string
pages?: PdfPage[]
isPdf: boolean isPdf: boolean
isImage: boolean
pages?: PdfPage[]
objectUrl?: string
constructor(file: File) { constructor(file: File) {
super([file], file.name, { type: file.type }) super([file], file.name, { type: file.type })
this.isPdf = isPdf(this) this.isPdf = isPdf(this)
this.isImage = isImage(this)
this.extension = extractFileExtension(this.name) this.extension = extractFileExtension(this.name)
} }
async process() { async process() {
if (this.isPdf) this.pages = await pdfToImages(await this.arrayBuffer()) if (this.isPdf) this.pages = await pdfToImages(await this.arrayBuffer())
if (this.isImage) this.objectUrl = URL.createObjectURL(this)
} }
} }
@ -118,3 +123,17 @@ export const extractFileExtension = (fileName: string) => {
export const getMediaType = (extension: string) => { export const getMediaType = (extension: string) => {
return MOST_COMMON_MEDIA_TYPES.get(extension) return MOST_COMMON_MEDIA_TYPES.get(extension)
} }
export const isImage = (file: File) => {
const validImageMediaTypes = [
'image/png',
'image/jpeg',
'image/jpg',
'image/gif',
'image/svg+xml',
'image/bmp',
'image/x-icon'
]
return validImageMediaTypes.includes(file.type.toLowerCase())
}