25-09-2023

EnvelopeGenerator.Web/Scripts/app.ts

@@ -1,5 +1,6 @@
 import PSPDFKitType, { AnnotationsUnion } from "./index";
 import { Instance, WidgetAnnotation, ToolbarItem } from "./index";
+import { EnvelopeResponse, Envelope, User, Element, Document } from "./interfaces";
 
 declare const PSPDFKit: typeof PSPDFKitType
 
@@ -9,63 +10,67 @@ const { SignatureFormField } = PSPDFKit.FormFields;
 const { DRAW, TYPE } = PSPDFKit.ElectronicSignatureCreationMode;
 const { DISABLED } = PSPDFKit.AutoSaveMode;
 
-interface EnvelopeResponse {
-    receiverId: number;
-    envelope: Envelope;
-}
-
-interface Envelope {
-    id: number;
-    userId: number;
-    title: string;
-    contractType: number;
-    status: number;
-    uuid: string;
-}
-
-class Settings {
-    public static allowedToolbarItems: string[] = [
-        "sidebar-thumbnails",
-        "sidebar-document-ouline",
-        "sidebar-bookmarks",
-        "pager",
-        "pan",
-        "zoom-out",
-        "zoom-in",
-        "zoom-mode",
-        "spacer",
-        "search"
-    ]
-}
+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
 
     // 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) {
         console.debug("Loading PSPDFKit..");
 
-        const arrayBuffer = await App.loadDocument(`/api/download/${envelopeKey}`);
         const envelopeObject: EnvelopeResponse = await App.loadData(`/api/get-data/${envelopeKey}`);
+        const document: Document = envelopeObject.envelope.documents[0];
+
+        let arrayBuffer
+        try {
+            arrayBuffer = await App.loadDocument(`/api/download/${envelopeKey}?id=${document.id}`);
+        } catch (e) {
+            console.error(e)
+        }
 
         App.Instance = await App.loadPSPDFKit(arrayBuffer, container)
         App.configurePSPDFKit(this.Instance)
 
-        console.debug(envelopeObject.envelope.id);
+        console.debug(envelopeObject.envelope);
         console.debug("PSPDFKit configured!");
 
-        const id = PSPDFKit.generateInstantId()
-        const annotation: WidgetAnnotation = App.createSignatureAnnotation(id, 150, 50, 50, 50, 0)
+        const annotations: any[] = [];
 
-        const formField = new SignatureFormField({
-            name: id,
-            annotationIds: List([annotation.id])
-        })
+        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)
 
-        console.debug("Annotation created.")
+            const id = PSPDFKit.generateInstantId()
+            const annotation: WidgetAnnotation = App.createSignatureAnnotation(id, element.width, element.height, element.top, element.left, element.page)
 
-        const [createdAnnotation] = await App.Instance.create([annotation, formField])
+            const formField = new SignatureFormField({
+                name: id,
+                annotationIds: List([annotation.id])
+            })
+
+            annotations.push(annotation);
+            annotations.push(formField);
+
+            console.debug("Annotation created.")
+        })    
+
+        const [createdAnnotation] = await App.Instance.create(annotations)
 
         console.debug(createdAnnotation)
     }
@@ -117,7 +122,8 @@ export class App {
         })   
 
         const filteredItems: Array<ToolbarItem> = instance.toolbarItems
-            .filter((item) => Settings.allowedToolbarItems.includes(item.type))
+            .filter((item) => allowedToolbarItems.includes(item.type))
+
 
         const customItems: ToolbarItem[] = [
             {
@@ -171,17 +177,12 @@ export class App {
     }
 
 
-    private static createSignatureAnnotation(id: string, x: number, y: number, top: number, left: number, pageIndex: number): WidgetAnnotation {     
+    private static createSignatureAnnotation(id: string, width: number, height: number, top: number, left: number, pageIndex: number): WidgetAnnotation {     
         const annotation = new PSPDFKit.Annotations.WidgetAnnotation({
             id: id,
             pageIndex: pageIndex,
             formFieldName: id,
-            boundingBox: new Rect({
-                width: x,
-                height: y,
-                top: top,
-                left: left
-            })
+            boundingBox: new Rect({ width, height, top, left })
         })
 
         return annotation

EnvelopeGenerator.Web/Scripts/interfaces.ts

@@ -0,0 +1,47 @@
+interface EnvelopeResponse {
+    receiverId: number;
+    envelope: Envelope;
+}
+
+interface Envelope {
+    id: number;
+    userId: number;
+    title: string;
+    status: number;
+    statusTranslated: string;
+    contractType: number;
+    contractTypeTranslated: string;
+    subject: string;
+    uuid: string;
+    user: User;
+    documents: Document[];
+}
+
+interface Document {
+    id: number;
+    filepath: string;
+    filename: string;
+    elements: Element[];
+}
+
+interface Element {
+    id: number;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    page: number;
+    readOnly: boolean;
+}
+
+interface User {
+    id: number;
+    email: string;
+    name: string;
+    prename: string;
+    username: string;
+    language: string;
+    fullName: string;
+}
+
+export { EnvelopeResponse, Envelope, Document, Element, User }