EnvelopeGenerator/EnvelopeGenerator.Web/wwwroot/js/app.js

const ActionType = {
    Created: 0,
    Saved: 1,
    Sent: 2,
    EmailSent: 3,
    Delivered: 4,
    Seen: 5,
    Signed: 6,
    Rejected: 7,
}

class App {
    constructor(container, envelopeKey) {
        this.container = container
        this.envelopeKey = envelopeKey

        // Initialize classes
        console.debug('Initializing classes..')
        this.UI = new UI()
        this.Network = new Network()
        this.Annotation = new Annotation()

        this.Instance = null
        this.currentDocument = null
        this.currentReceiver = null
    }

    // This function will be called in the ShowEnvelope.razor page
    // and will trigger loading of the Editor Interface
    async init() {
        // Load the envelope from the database
        console.debug('Loading envelope from database..')
        const envelopeResponse = await this.Network.getEnvelope(this.envelopeKey)
        const envelopeError = !!envelopeResponse.error

        if (envelopeError) {
            return Swal.fire({
                title: 'Fehler',
                text: 'Umschlag konnte nicht geladen werden!',
                icon: 'error',
            })
        }

        this.currentDocument = envelopeResponse.data.envelope.documents[0]
        this.currentReceiver = envelopeResponse.data.receiver

        // Load the document from the filestore
        console.debug('Loading document from filestore')
        const documentResponse = await this.Network.getDocument(
            this.envelopeKey,
            this.currentDocument.id
        )
        const documentError = !!documentResponse.error

        if (documentError) {
            console.error(documentResponse.error)
            return Swal.fire({
                title: 'Fehler',
                text: 'Dokument konnte nicht geladen werden!',
                icon: 'error',
            })
        }

        const arrayBuffer = documentResponse.data

        // Load PSPDFKit
        console.debug('Loading PSPDFKit..')
        this.Instance = await this.UI.loadPSPDFKit(arrayBuffer, this.container)
        this.UI.configurePSPDFKit(this.Instance, this.handleClick.bind(this))

        this.Instance.addEventListener(
            'annotations.load',
            this.handleAnnotationsLoad.bind(this)
        )
        this.Instance.addEventListener(
            'annotations.change',
            this.handleAnnotationsChange.bind(this)
        )
        this.Instance.addEventListener(
            'annotations.create',
            this.handleAnnotationsCreate.bind(this)
        )

        // Load annotations into PSPDFKit
        console.debug('Loading annotations..')

        try {
            const annotations = this.Annotation.createAnnotations(
                this.currentDocument
            )
            const createdAnnotations = await this.Instance.create(annotations)

            await this.Network.openDocument(this.envelopeKey)
        } catch (e) {
            console.error(e)
        }
    }

    handleAnnotationsLoad(loadedAnnotations) {
        console.log('annotations loaded', loadedAnnotations.toJS())
    }

    handleAnnotationsChange() { }

    async handleAnnotationsCreate(createdAnnotations) {
        const annotation = createdAnnotations.toJS()[0]
        const isFormField = !!annotation.formFieldName
        const isSignature = !!annotation.isSignature

        if (isFormField === false && isSignature === true) {

            const left = annotation.boundingBox.left - 25
            const top = annotation.boundingBox.top - 25
            const width = 150
            const height = 75

            console.log(createdAnnotations)

            console.log(annotation)

            const imageUrl = await this.Annotation.createAnnotationFrameBlob(
                this.currentReceiver.name,
                this.currentReceiver.signature,
                width,
                height
            )

            const request = await fetch(imageUrl)
            const blob = await request.blob()
            const imageAttachmentId = await this.Instance.createAttachment(blob)

            const frameAnnotation = this.Annotation.createImageAnnotation(
                new PSPDFKit.Geometry.Rect({
                    left: left,
                    top: top,
                    width: width,
                    height: height,
                }),
                annotation.pageIndex,
                imageAttachmentId
            )

            this.Instance.create(frameAnnotation)
        }
    }

    async handleClick(eventType) {
        let result = false

        switch (eventType) {
            case 'RESET':
                result = await this.handleReset(null)

                if (result == true) {
                    Swal.fire({
                        title: 'Erfolg',
                        text: 'Dokument wurde zurückgesetzt',
                        icon: 'info',
                    })
                } else {
                    Swal.fire({
                        title: 'Fehler',
                        text: 'Dokument konnte nicht zurückgesetzt werden!',
                        icon: 'error',
                    })
                }

                break

            case 'FINISH':
                result = await this.handleFinish(null)

                if (result == true) {
                    // Redirect to success page after saving to database
                    window.location.href = `/EnvelopeKey/${this.envelopeKey}/Success`
                } else {
                    alert('Fehler beim Abschließen des Dokuments!')
                }

                break

            case 'REJECT':
                alert('Dokument abgelent!')
        }
    }

    async handleFinish(event) {
        // Save changes before doing anything
        try {
            await this.Instance.save()
        } catch (e) {
            console.error(e)
            return false
        }

        // Export annotation data and save to database
        try {
            const json = await this.Instance.exportInstantJSON()
            const postEnvelopeResult = await this.Network.postEnvelope(
                this.envelopeKey,
                this.currentDocument.id,
                JSON.stringify(json)
            )

            console.log(postEnvelopeResult)

            if (postEnvelopeResult === false) {
                return false
            }
        } catch (e) {
            console.error(e)
            return false
        }

        return true
    }

    async handleReset(event) {
        const result = await Swal.fire({
            title: 'Sind sie sicher?',
            text: 'Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?',
            icon: 'question',
        })

        if (result.isConfirmed) {
            const result = this.Annotation.deleteAnnotations(this.Instance)
            return true
        }

        if (result.isDimissed) {
            return true
        }

        return false
    }
}