Remove Blazor

EnvelopeGenerator.Web/wwwroot/js/annotation.js

@@ -0,0 +1,77 @@
+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);
+        //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 SignatureFormField({
+            name: id,
+            annotationIds: 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 Rect({ width, height, top, left })
+        })
+
+        return annotation
+    }
+
+    inchToPoint(inch) {
+        return inch * 72;
+    }
+}
+

EnvelopeGenerator.Web/wwwroot/js/app.js

@@ -0,0 +1,139 @@
+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 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];
+
+        // 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))
+
+        // Load annotations into PSPDFKit
+        console.debug("Loading annotations..")
+        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);
+    }
+
+    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;
+        }
+
+        // Flatten the annotations and save the document to disk 
+        try {
+            const buffer = await this.Instance.exportPDF({ flatten: true });
+            const postDocumentResult = await this.Network.postDocument(this.envelopeKey, this.currentDocument.id, buffer);
+
+            if (postDocumentResult === 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;
+        }
+    }
+}
+

EnvelopeGenerator.Web/wwwroot/js/network.js

@@ -0,0 +1,95 @@
+class Network {
+    getEnvelope(envelopeKey) {
+        return fetch(`/api/envelope/${envelopeKey}`, this.withCSRFToken({ credentials: "include" }))
+            .then(res => res.json());
+    }
+
+    getDocument(envelopeKey, documentId) {
+        return fetch(`/api/document/${envelopeKey}?index=${documentId}`, this.withCSRFToken({ credentials: "include" }))
+            .then(res => res.arrayBuffer());
+    }
+
+    postDocument(envelopeKey, documentId, buffer) {
+        const url = `/api/document/${envelopeKey}?index=${documentId}`;
+        const options = {
+            credentials: "include",
+            method: "POST",
+            body: buffer
+        }
+
+        console.debug("PostDocument/Calling url: " + url)
+        return fetch(url, this.withCSRFToken(options))
+            .then(this.handleResponse)
+            .then((res) => {
+                if (!res.ok) {
+                    return false;
+                };
+                return true;
+            });
+    }
+
+    postEnvelope(envelopeKey, documentId, jsonString) {
+        const url = `/api/envelope/${envelopeKey}?index=${documentId}`;
+        const options = {
+            credentials: "include",
+            method: "POST",
+            body: jsonString
+        }
+
+        console.debug("PostEnvelope/Calling url: " + url)
+        return fetch(url, this.withCSRFToken(options))
+            .then(this.handleResponse)
+            .then((res) => {
+                if (!res.ok) {
+                    return false;
+                };
+                return true;
+            });
+    }
+
+    postHistory(envelopeKey, actionType, actionDescription) {
+        const url = `/api/history/${envelopeKey}`;
+
+        const data = {
+            actionDescription: actionDescription,
+            actionType: actionType.toString()
+        }
+
+        const options = {
+            credentials: "include",
+            method: "POST",
+            headers: {
+                'Content-Type': "application/json; charset=utf-8"
+            },
+            body: JSON.stringify(data)
+        }
+
+        console.debug("PostHistory/Calling url: " + url)
+        return fetch(url, this.withCSRFToken(options))
+            .then(this.handleResponse)
+            .then((res) => {
+                if (!res.ok) {
+                    return false;
+                };
+                return true;
+            });
+    }
+
+    withCSRFToken(options) {
+        const token = (document.getElementsByName("__RequestVerificationToken")[0]).value;
+        let headers = options.headers;
+        options.headers = { ...headers, 'X-XSRF-TOKEN': token };
+
+        return options;
+    }
+
+    handleResponse(res) {
+        if (!res.ok) {
+            console.log(`Request failed with status ${res.status}`)
+            return res
+        } else {
+            return res
+        }
+    }
+}
+

EnvelopeGenerator.Web/wwwroot/js/ui.js

@@ -0,0 +1,107 @@
+class UI {
+    allowedToolbarItems = [
+        "sidebar-thumbnails",
+        "sidebar-document-ouline",
+        "sidebar-bookmarks",
+        "pager",
+        "pan",
+        "zoom-out",
+        "zoom-in",
+        "zoom-mode",
+        "spacer",
+        "search"
+    ]
+
+    // Load the PSPDFKit UI by setting a target element as the container to render in
+    // and a arraybuffer which represents the document that should be displayed.
+    loadPSPDFKit(arrayBuffer, container) {
+        return PSPDFKit.load({
+            container: container,
+            document: arrayBuffer,
+            autoSaveMode: "DISABLED",
+            annotationPresets: this.getPresets(),
+            electronicSignatures: {
+                creationModes: ["DRAW", "TYPE"]
+            },
+            isEditableAnnotation: function (annotation) {
+                // Check if the annotation is a signature
+                // This will allow new signatures, but not allow edits.
+                return !annotation.isSignature;
+            }
+        })
+    }
+
+    configurePSPDFKit(instance, handler) {
+        instance.addEventListener("annotations.load", (loadedAnnotations) => {
+            console.log("annotations loaded", loadedAnnotations.toJS());
+        })
+
+        instance.addEventListener("annotations.change", () => {
+            console.log("annotations changed")
+        })
+
+        instance.addEventListener("annotations.create", async (createdAnnotations) => {
+            console.log("annotations created");
+        })
+
+        const toolbarItems = this.getToolbarItems(instance, handler)
+        instance.setToolbarItems(toolbarItems)
+
+        console.debug("PSPDFKit configured!");
+    }
+
+    getToolbarItems(instance, handler) {
+        const customItems = this.getCustomItems(handler)
+        const defaultItems = this.getDefaultItems(instance.toolbarItems)
+        return defaultItems.concat(customItems)
+    }
+
+    getCustomItems = function (callback) {
+        const customItems = [
+            {
+                type: "custom",
+                id: "button-reset",
+                className: "button-reset",
+                title: "Zurücksetzen",
+                onPress() {
+                    callback("RESET")
+                },
+                icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
+                        <path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
+                        <path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
+                      </svg>`
+            },
+            {
+                type: "custom",
+                id: "button-finish",
+                className: "button-finish",
+                title: "Abschließen",
+                onPress() {
+                    callback("FINISH")
+                },
+                icon: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-check2-circle" viewBox="0 0 16 16">
+                        <path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z"/>
+                        <path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" />
+                      </svg>`
+            }
+        ]
+        return customItems
+    }
+
+    getDefaultItems(items) {
+        return items.filter((item) => this.allowedToolbarItems.includes(item.type))
+    }
+
+    getPresets() {
+        const annotationPresets = PSPDFKit.defaultAnnotationPresets;
+        annotationPresets.ink = {
+            lineWidth: 10
+        };
+
+        annotationPresets.widget = {
+            readOnly: true
+        }
+
+        return annotationPresets;
+    }
+}