EnvelopeGenerator/EnvelopeGenerator.Web/wwwroot/js/annotation.js

class Annotation {
    createAnnotations(document) {
        const annotations = []

        document.elements.forEach((element) => {
            console.log('Creating annotation for element', element.id)

            const [annotation, formField] =
                this.createAnnotationFromElement(element)
            annotations.push(annotation)
            annotations.push(formField)
        })

        return annotations
    }

    async deleteAnnotations(instance) {
        let pageAnnotations = (
            await Promise.all(
                Array.from({ length: instance.totalPageCount }).map(
                    (_, pageIndex) => instance.getAnnotations(pageIndex)
                )
            )
        )
            .flatMap((annotations) =>
                annotations.reduce(
                    (acc, annotation) => acc.concat(annotation),
                    []
                )
            )
            .filter(
                (annotation) =>
                    !!annotation.isSignature ||
                    annotation.description == 'FRAME'
            )
        //deleting all Annotations
        return await instance.delete(pageAnnotations)
    }

    async validateAnnotations(instance) {
        let pageAnnotations = (
            await Promise.all(
                Array.from({ length: instance.totalPageCount }).map(
                    (_, pageIndex) => instance.getAnnotations(pageIndex)
                )
            )
        )
            .flatMap((annotations) =>
                annotations.reduce(
                    (acc, annotation) => acc.concat(annotation),
                    []
                )
            )
            .map((annotation) => {
                console.log(annotation.toJS())
                return annotation
            })

        return true
    }

    createAnnotationFromElement(element) {
        const id = PSPDFKit.generateInstantId()
        const width = this.inchToPoint(element.width)
        const height = this.inchToPoint(element.height)
        const top = this.inchToPoint(element.top) - height / 2
        const left = this.inchToPoint(element.left) - width / 2
        const page = element.page - 1
        const annotation = this.createSignatureAnnotation(
            id,
            width,
            height,
            top,
            left,
            page
        )
        console.log(annotation)

        const formField = new PSPDFKit.FormFields.SignatureFormField({
            name: id,
            annotationIds: PSPDFKit.Immutable.List([annotation.id]),
        })
        console.log(formField)

        return [annotation, formField]
    }

    createSignatureAnnotation(id, width, height, top, left, pageIndex) {
        const annotation = new PSPDFKit.Annotations.WidgetAnnotation({
            id: id,
            pageIndex: pageIndex,
            formFieldName: id,
            boundingBox: new PSPDFKit.Geometry.Rect({
                width,
                height,
                top,
                left,
            }),
        })

        return annotation
    }

    async createFrameAnnotation(annotation, receiver) {
        const left = annotation.boundingBox.left - 25
        const top = annotation.boundingBox.top - 25
        const width = 150
        const height = 75

        const imageUrl = await this.Annotation.createAnnotationFrameBlob(
            receiver.name,
            width,
            height
        )
        const request = await fetch(imageUrl)
        const blob = await request.blob()

        const imageAttachmentId = await this.Instance.createAttachment(blob)
        const frameAnnotation = new PSPDFKit.Annotations.ImageAnnotation({
            pageIndex: annotation.pageIndex,
            isSignature: false,
            readOnly: true,
            locked: true,
            lockedContents: true,
            contentType: 'image/png',
            imageAttachmentId,
            description: 'FRAME',
            boundingBox: new PSPDFKit.Geometry.Rect({
                left: left,
                top: top,
                width: width,
                height: height,
            }),
        })
    }

    async createAnnotationFrameBlob(receiverName, width, height) {
        const canvas = document.createElement('canvas')
        canvas.width = width
        canvas.height = height

        const ctx = canvas.getContext('2d')

        const date = new Date()
        const dateString = date.toLocaleDateString('de-DE')

        const signatureLength = 100

        ctx.beginPath()

        ctx.moveTo(30, 10)
        ctx.lineTo(signatureLength, 10)

        ctx.moveTo(30, 10)
        ctx.arcTo(10, 10, 10, 30, 20)

        ctx.moveTo(10, 30)
        ctx.arcTo(10, 50, 30, 50, 20)

        ctx.moveTo(30, 50)
        ctx.lineTo(signatureLength, 50)

        ctx.strokeStyle = 'darkblue'
        ctx.stroke()

        ctx.fillStyle = 'black'
        ctx.font = '10px serif'
        ctx.fillText('Signed by', 30, 10)
        ctx.fillText(receiverName + ', ' + dateString, 15, 60)

        return new Promise((resolve) => {
            canvas.toBlob((blob) => {
                const url = URL.createObjectURL(blob)
                resolve(url)
            })
        })
    }

    inchToPoint(inch) {
        return inch * 72
    }
}