01-09-2023

EnvelopeGenerator.Web/Scripts/app.ts

@@ -1,48 +1,96 @@
 //import PSPDFKit, { Instance } from 'index.d.ts';
 import PSPDFKitType from "./index";
-import { Instance } from "./index";
-
+import { Instance, WidgetAnnotation } from "./index";
 declare const PSPDFKit: typeof PSPDFKitType
 
-export class App {
-    public static loadPDFFromUrl (container: string, url: string): void {
-        console.log("Loading PSPDFKit..");
+const { List } = PSPDFKit.Immutable;
+const { Rect } = PSPDFKit.Geometry;
+const { SignatureFormField } = PSPDFKit.FormFields;
+const { DRAW, TYPE } = PSPDFKit.ElectronicSignatureCreationMode;
 
-        fetch(url, { credentials: "include" })
-            .then(res => res.arrayBuffer())
-            .then(arrayBuffer => App.loadPSPDFKit(arrayBuffer, container))
-            .then(instance => {
-                console.log("PSPDFKit loaded!")
-                console.log(instance)
-            })
-            .catch(error => {
-                console.error(error.message);
-            });
+
+export class App {
+    // This function will be called in the ShowEnvelope.razor page
+    // and will trigger loading of the Editor Interface
+    public static async loadPDFFromUrl (container: string, documentId: number) {
+        console.debug("Loading PSPDFKit..");
+
+        const arrayBuffer = await App.loadDocument(`/api/download/${documentId}`)
+        const instance = await App.loadPSPDFKit(arrayBuffer, container)
+        App.configurePSPDFKit(instance)
+
+        console.debug("PSPDFKit configured!")
+
+        const id = PSPDFKit.generateInstantId()
+        const annotation: WidgetAnnotation = App.createSignatureAnnotation(id, 150, 50, 50, 50, 0)
+
+        const formField = new SignatureFormField({
+            name: id,
+            annotationIds: List([annotation.id])
+        })
+
+        console.debug("Annotation created.")
+
+        const [createdAnnotation] = await instance.create([annotation, formField])
+
+        console.debug(createdAnnotation)
     }
 
-    private static loadPSPDFKit(arrayBuffer: ArrayBuffer, container: string) {
-        PSPDFKit.load({
+    // Makes a call to the supplied url and fetches the binary response as an array buffer
+    private static loadDocument(url: string): Promise<ArrayBuffer> {
+        return fetch(url, { credentials: "include" })
+            .then(res => res.arrayBuffer())
+    }
+
+    // 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
+            document: arrayBuffer,
+            annotationPresets,
+            electronicSignatures: {            
+                creationModes: [TYPE, DRAW]
+            }
         })
     }
 
+    private static configurePSPDFKit(instance: Instance) {
+        instance.addEventListener("annotations.load", (loadedAnnotations) => {
+            console.log("annotations loaded", loadedAnnotations.toJS());
+        })
+
+        instance.addEventListener("annotations.change", () => {
+            console.log("annotations changed")
+        })
+
+        instance.addEventListener("annotations.create", (createdAnnotations) => {
+            console.log("annotations created", createdAnnotations.toJS());
+        })   
+    }
+
+
+    private static createSignatureAnnotation(id: string, x: number, y: 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
+            })
+        })
+
+        return annotation
+    }
+
 }
 
-// This function will be called in the ShowEnvelope.razor page
-// and will trigger loading of the Editor Interface
-//const loadPDFFromUrl = function (container: string, url: string): void {
-//    console.log("Loading PSPDFKit..");
-
-//    fetch(url, { credentials: "include" })
-//        .then(res => res.arrayBuffer())
-//        .then(arrayBuffer => loadPSPDFKit(arrayBuffer, container))
-//        .then(configurePSPDFKit)
-//        .then(instance => {
-//            console.log("PSPDFKit loaded!")
-//        })
-//        .catch(error => {
-//            console.error(error.message);
-//        });
-//}
-