27-09-2023

2023-09-27 14:50:52 +02:00
parent e3a81bfdbf
commit 538a257848
1135 changed files with 4638 additions and 1758 deletions
--- a/EnvelopeGenerator.Web/Scripts/app.ts
+++ b/EnvelopeGenerator.Web/Scripts/app.ts
@@ -1,6 +1,6 @@
-import PSPDFKitType, { AnnotationsUnion } from "./index";
+import PSPDFKitType, { AnnotationsUnion, SignatureFormField as SignatureFormFieldType } from "./index";
 import { Instance, WidgetAnnotation, ToolbarItem } from "./index";
-import { EnvelopeResponse, Envelope, User, Element, Document } from "./interfaces";
+import { EnvelopeResponse, Envelope, User, Element, Document, IFunction } from "./interfaces";

 declare const PSPDFKit: typeof PSPDFKitType

@@ -10,34 +10,27 @@ const { SignatureFormField } = PSPDFKit.FormFields;
 const { DRAW, TYPE } = PSPDFKit.ElectronicSignatureCreationMode;
 const { DISABLED } = PSPDFKit.AutoSaveMode;

-const allowedToolbarItems: string[] = [
-    "sidebar-thumbnails",
-    "sidebar-document-ouline",
-    "sidebar-bookmarks",
-    "pager",
-    "pan",
-    "zoom-out",
-    "zoom-in",
-    "zoom-mode",
-    "spacer",
-    "search"
-]
-
 export class App {
    public static Instance: Instance;
-    public static currentDocument
+    public static currentDocument: Document;
+    public static envelopeKey: string;
+
+    public static ui: UI;

    // This function will be called in the ShowEnvelope.razor page
    // and will trigger loading of the Editor Interface
-    public static async loadPDFFromUrl (container: string, envelopeKey: string) {
+    public static async loadPDFFromUrl(container: string, envelopeKey: string) {
+        App.ui = new UI();
+
        console.debug("Loading PSPDFKit..");

        const envelopeObject: EnvelopeResponse = await App.loadData(`/api/get-data/${envelopeKey}`);
-        const document: Document = envelopeObject.envelope.documents[0];
+        App.envelopeKey = envelopeKey;
+        App.currentDocument = envelopeObject.envelope.documents[0];

        let arrayBuffer
        try {
-            arrayBuffer = await App.loadDocument(`/api/download/${envelopeKey}?id=${document.id}`);
+            arrayBuffer = await App.loadDocument(`/api/download/${envelopeKey}?id=${App.currentDocument.id}`);
        } catch (e) {
            console.error(e)
        }
@@ -50,29 +43,21 @@ export class App {

        const annotations: any[] = [];

-        document.elements.forEach(function (element: Element) {
-            console.log("Loading element")
-            console.debug("Page", element.page)
-            console.debug("Width / Height", element.width, element.height)
-            console.debug("Top / Left", element.top, element.left)
-
-            const id = PSPDFKit.generateInstantId()
-            const annotation: WidgetAnnotation = App.createSignatureAnnotation(id, element.width, element.height, element.top, element.left, element.page)
-
-            const formField = new SignatureFormField({
-                name: id,
-                annotationIds: List([annotation.id])
-            })
+        App.currentDocument.elements.forEach(function (element: Element) {
+            console.log("Creating annotation for element", element.id)

+            const [annotation, formField] = App.createAnnotationFromElement(element)
            annotations.push(annotation);
            annotations.push(formField);
+        })

-            console.debug("Annotation created.")
-        })    
+        const createdAnnotations = await App.Instance.create(annotations)

-        const [createdAnnotation] = await App.Instance.create(annotations)
+        console.debug(createdAnnotations)
+    }

-        console.debug(createdAnnotation)
+    private static inchToPoint(inch: number): number {
+        return inch * 72;
    }

    // Makes a call to the supplied url and fetches the binary response as an array buffer
@@ -87,22 +72,26 @@ export class App {
            .then(res => res.json());
    }

+    private static postDocument(url: string, buffer: ArrayBuffer): Promise<any> {
+        return fetch(url, { credentials: "include", method: "POST", body: buffer })
+            .then(res => res.json());
+    }
+
    // 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.
    private static loadPSPDFKit(arrayBuffer: ArrayBuffer, container: string): Promise<Instance> {
-        const annotationPresets = PSPDFKit.defaultAnnotationPresets;
-        console.log(annotationPresets)
-        annotationPresets.ink = {
-            lineWidth: 10
-        };
-
        return PSPDFKit.load({
            container: container,
            document: arrayBuffer,
            autoSaveMode: DISABLED,
-            annotationPresets,
-            electronicSignatures: {            
-                creationModes: [DRAW]
+            annotationPresets: App.ui.getPresets(),
+            electronicSignatures: {
+                creationModes: [DRAW, TYPE]
+            },
+            isEditableAnnotation: function (annotation: WidgetAnnotation) {
+                // Check if the annotation is a signature
+                // This will allow new signatures, but not allow edits.
+                return !annotation.isSignature;
            }
        })
    }
@@ -116,35 +105,57 @@ export class App {
            console.log("annotations changed")
        })

-        instance.addEventListener("annotations.create", (createdAnnotations) => {
-            const annotation: AnnotationsUnion = createdAnnotations[0];
-            console.log("annotations created", createdAnnotations.toJS());
+        instance.addEventListener("annotations.create", async (createdAnnotations) => {
+            console.log("annotations created", createdAnnotations.toJS());     
        })   

        const filteredItems: Array<ToolbarItem> = instance.toolbarItems
-            .filter((item) => allowedToolbarItems.includes(item.type))
+            .filter((item) => App.ui.allowedToolbarItems.includes(item.type))

-
-        const customItems: ToolbarItem[] = [
-            {
-                type: "custom",
-                id: "button-finish",
-                title: "Abschlie<69>en",
-                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>`,
-                onPress: this.handleFinish
-            }
-        ]
-
-        instance.setToolbarItems(filteredItems.concat(customItems))
+        instance.setToolbarItems(filteredItems.concat(App.ui.getToolbarItems(App.handleClick)))
    }

-    private static async handleFinish(event: any) {
-        await App.Instance.applyOperations([{ type: "flattenAnnotations" }])
+    public static async handleClick(eventType: string) {
+        switch (eventType) {
+            case "RESET":
+        await App.handleReset(null)
+        break;
+            case "FINISH":
+        await App.handleFinish(null)
+        break;
+        }
+    }

-        //await downloadDocument();
+    public static async handleFinish(event: any) {
+        await App.Instance.save();
+        const json = await App.Instance.exportInstantJSON()
+
+        console.log(json);
+
+        const buffer = await App.Instance.exportPDF({ flatten: true });
+        await App.uploadDocument(buffer, App.envelopeKey, App.currentDocument.id);
+
+        alert("Signatur wird gespeichert!")
+    }
+
+    public static async handleReset(event: any) {
+        if (confirm("Wollen Sie das Dokument und alle erstellten Signaturen zur<75>cksetzen?")) {
+            for (let i = 0; i < App.Instance.totalPageCount; i++) {
+                const annotations = await App.Instance.getAnnotations(i)
+                annotations.forEach((annotation) => {
+                    //console.log(annotation)
+                    // TODO: Delete only create signatures
+                    //App.Instance.delete(annotation.id)
+                })
+            }
+        }     
+    }
+
+    private static async uploadDocument(buffer: ArrayBuffer, envelopeKey: string, documentId: number) {
+        
+        const result = await App.postDocument(`/api/upload/${envelopeKey}/${documentId}`, buffer);
+
+        console.log(result)
    }

    private static async downloadDocument() {
@@ -176,6 +187,27 @@ export class App {
        }
    }

+    private static createAnnotationFromElement(element: Element): [annotation: WidgetAnnotation, formField: SignatureFormFieldType] {
+        const id = PSPDFKit.generateInstantId()
+        console.log("Creating Annotation", id)
+
+        const width = App.inchToPoint(element.width)
+        const height = App.inchToPoint(element.height)
+        const top = App.inchToPoint(element.top) - (height / 2)
+        const left = App.inchToPoint(element.left) - (width / 2)
+        const page = element.page - 1
+        const annotation: WidgetAnnotation = App.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]
+    }
+

    private static createSignatureAnnotation(id: string, width: number, height: number, top: number, left: number, pageIndex: number): WidgetAnnotation {     
        const annotation = new PSPDFKit.Annotations.WidgetAnnotation({
@@ -190,3 +222,65 @@ export class App {

 }

+
+class UI {
+    constructor() {
+
+    }
+
+    public allowedToolbarItems: string[] = [
+        "sidebar-thumbnails",
+        "sidebar-document-ouline",
+        "sidebar-bookmarks",
+        "pager",
+        "pan",
+        "zoom-out",
+        "zoom-in",
+        "zoom-mode",
+        "spacer",
+        "search"
+    ]    
+
+    public getToolbarItems = function (callback: any) {
+        const customItems: ToolbarItem[] = [
+            {
+                type: "custom",
+                id: "button-reset",
+                title: "Zur<75>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",
+                title: "Abschlie<69>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
+    }
+
+    public getPresets() {
+        const annotationPresets = PSPDFKit.defaultAnnotationPresets;
+        annotationPresets.ink = {
+            lineWidth: 10
+        };
+
+        annotationPresets.widget = {
+            readOnly: true
+        }
+
+        return annotationPresets;
+    }
+}
--- a/EnvelopeGenerator.Web/Scripts/index.d.ts
+++ b/EnvelopeGenerator.Web/Scripts/index.d.ts
--- a/EnvelopeGenerator.Web/Scripts/interfaces.ts
+++ b/EnvelopeGenerator.Web/Scripts/interfaces.ts
@@ -44,4 +44,6 @@ interface User {
    fullName: string;
 }

-export { EnvelopeResponse, Envelope, Document, Element, User }
+type IFunction<T = void> = (...args: Array<any>) => T;
+
+export { EnvelopeResponse, Envelope, Document, Element, User, IFunction }