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 envelopeObject = await this.Network.getEnvelope(this.envelopeKey);
        this.currentDocument = envelopeObject.envelope.documents[0];
        this.currentReceiver = envelopeObject.receiver;

        console.log(envelopeObject)

        // Load the document from the filestore
        console.debug("Loading document from filestore")
        let arrayBuffer
        try {
            arrayBuffer = await this.Network.getDocument(this.envelopeKey, this.currentDocument.id);
        } catch (e) {
            console.error(e)
        }

        // 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)
        this.Instance.addEventListener("annotations.change", this.handleAnnotationsChange)
        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)

            const description = "Umschlag wurde geöffnet"
            await this.Network.postHistory(this.envelopeKey, ActionType.Seen, description);
        } catch (e) {
            console.error(e)
        }
        
    }

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

    handleAnnotationsChange() {}

    async handleAnnotationsCreate(createdAnnotations) {
        console.log("annotations created");

        console.log(createdAnnotations.toJS())

        const annotation = createdAnnotations.toJS()[0];
        const isFormField = !!annotation.formFieldName;
        const isSignature = !!annotation.isSignature;

        console.log("form field", isFormField, "signature", isSignature)

        //if (!isSignature) {
        //    return;
        //}

        //if (!(isFormField && isSignature)) {
        //    return;
        //}

        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(annotation.boundingBox)

            const imageUrl = await this.Annotation.createAnnotationFrameBlob(this.currentReceiver.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,
                }),
            });

            this.Instance.create(frameAnnotation);
            
        }    
    }

    async handleClick(eventType) {
        let result = false;

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

                if (result == true) {
                    alert("Dokument zurückgesetzt!");
                } else {
                    alert("Fehler beim Zurücksetzen des Dokuments!")
                }

                break;

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

                if (result == true) {
                    // TODO: Redirect to success page
                    alert("Dokument erfolgreich signiert!")
                } else {
                    alert("Fehler beim Abschließen des Dokuments!")
                }

                break;
        }
    }

    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))

            if (postEnvelopeResult === false) {
                return false;
            }

        } catch (e) {
            console.error(e);
            return false;
        }


        return true;

    }

     async handleReset(event) {
        if (confirm("Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?")) {
            const result = this.Annotation.deleteAnnotations(this.Instance)
            return true;
        } else {
            return true;
        }
    }
}