01-09-2023

EnvelopeGenerator.Web/Pages/ShowEnvelope.razor

@@ -24,7 +24,7 @@
         if (firstRender)
         {
             var module = await JS.InvokeAsync<IJSObjectReference>("import", "./js/app.js");
-            await module.InvokeVoidAsync("App.loadPDFFromUrl", "#container", $"/api/download/{document.Id}");
+            await module.InvokeVoidAsync("App.loadPDFFromUrl", "#container", document.Id);
         }
     }
 }

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
 
+const { List } = PSPDFKit.Immutable;
+const { Rect } = PSPDFKit.Geometry;
+const { SignatureFormField } = PSPDFKit.FormFields;
+const { DRAW, TYPE } = PSPDFKit.ElectronicSignatureCreationMode;
+
+
 export class App {
-    public static loadPDFFromUrl (container: string, url: string): void {
-        console.log("Loading PSPDFKit..");
-
-        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);
-            });
-    }
-
-    private static loadPSPDFKit(arrayBuffer: ArrayBuffer, container: string) {
-        PSPDFKit.load({
-            container: container,
-            document: arrayBuffer
-        })
-    }
-
-}
-
     // 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 {
+    public static async loadPDFFromUrl (container: string, documentId: number) {
-//    console.log("Loading PSPDFKit..");
+        console.debug("Loading PSPDFKit..");
 
-//    fetch(url, { credentials: "include" })
+        const arrayBuffer = await App.loadDocument(`/api/download/${documentId}`)
-//        .then(res => res.arrayBuffer())
+        const instance = await App.loadPSPDFKit(arrayBuffer, container)
-//        .then(arrayBuffer => loadPSPDFKit(arrayBuffer, container))
+        App.configurePSPDFKit(instance)
-//        .then(configurePSPDFKit)
+
-//        .then(instance => {
+        console.debug("PSPDFKit configured!")
-//            console.log("PSPDFKit loaded!")
+
-//        })
+        const id = PSPDFKit.generateInstantId()
-//        .catch(error => {
+        const annotation: WidgetAnnotation = App.createSignatureAnnotation(id, 150, 50, 50, 50, 0)
-//            console.error(error.message);
+
-//        });
+        const formField = new SignatureFormField({
-//}
+            name: id,
+            annotationIds: List([annotation.id])
+        })
+
+        console.debug("Annotation created.")
+
+        const [createdAnnotation] = await instance.create([annotation, formField])
+
+        console.debug(createdAnnotation)
+    }
+
+    // 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,
+            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
+    }
+
+}
 

EnvelopeGenerator.Web/wwwroot/js/app.js

@@ -1,41 +1,127 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+var List = PSPDFKit.Immutable.List;
+var Rect = PSPDFKit.Geometry.Rect;
+var SignatureFormField = PSPDFKit.FormFields.SignatureFormField;
+var _a = PSPDFKit.ElectronicSignatureCreationMode, DRAW = _a.DRAW, TYPE = _a.TYPE;
 var App = /** @class */ (function () {
     function App() {
     }
-    App.loadPDFFromUrl = function (container, url) {
+    // This function will be called in the ShowEnvelope.razor page
-        console.log("Loading PSPDFKit..");
+    // and will trigger loading of the Editor Interface
-        fetch(url, { credentials: "include" })
+    App.loadPDFFromUrl = function (container, documentId) {
-            .then(function (res) { return res.arrayBuffer(); })
+        return __awaiter(this, void 0, void 0, function () {
-            .then(function (arrayBuffer) { return App.loadPSPDFKit(arrayBuffer, container); })
+            var arrayBuffer, instance, id, annotation, formField, createdAnnotation;
-            .then(function (instance) {
+            return __generator(this, function (_a) {
-            console.log("PSPDFKit loaded!");
+                switch (_a.label) {
-            console.log(instance);
+                    case 0:
-        })
+                        console.debug("Loading PSPDFKit..");
-            .catch(function (error) {
+                        return [4 /*yield*/, App.loadDocument("/api/download/".concat(documentId))];
-            console.error(error.message);
+                    case 1:
+                        arrayBuffer = _a.sent();
+                        return [4 /*yield*/, App.loadPSPDFKit(arrayBuffer, container)];
+                    case 2:
+                        instance = _a.sent();
+                        App.configurePSPDFKit(instance);
+                        console.debug("PSPDFKit configured!");
+                        id = PSPDFKit.generateInstantId();
+                        annotation = App.createSignatureAnnotation(id, 150, 50, 50, 50, 0);
+                        formField = new SignatureFormField({
+                            name: id,
+                            annotationIds: List([annotation.id])
+                        });
+                        console.debug("Annotation created.");
+                        return [4 /*yield*/, instance.create([annotation, formField])];
+                    case 3:
+                        createdAnnotation = (_a.sent())[0];
+                        console.debug(createdAnnotation);
+                        return [2 /*return*/];
+                }
+            });
         });
     };
+    // Makes a call to the supplied url and fetches the binary response as an array buffer
+    App.loadDocument = function (url) {
+        return fetch(url, { credentials: "include" })
+            .then(function (res) { return 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.
     App.loadPSPDFKit = function (arrayBuffer, container) {
-        PSPDFKit.load({
+        var annotationPresets = PSPDFKit.defaultAnnotationPresets;
+        console.log(annotationPresets);
+        annotationPresets.ink = {
+            lineWidth: 10
+        };
+        return PSPDFKit.load({
             container: container,
-            document: arrayBuffer
+            document: arrayBuffer,
+            annotationPresets: annotationPresets,
+            electronicSignatures: {
+                creationModes: [TYPE, DRAW]
+            }
         });
     };
+    App.configurePSPDFKit = function (instance) {
+        instance.addEventListener("annotations.load", function (loadedAnnotations) {
+            console.log("annotations loaded", loadedAnnotations.toJS());
+        });
+        instance.addEventListener("annotations.change", function () {
+            console.log("annotations changed");
+        });
+        instance.addEventListener("annotations.create", function (createdAnnotations) {
+            console.log("annotations created", createdAnnotations.toJS());
+        });
+    };
+    App.createSignatureAnnotation = function (id, x, y, top, left, pageIndex) {
+        var annotation = new PSPDFKit.Annotations.WidgetAnnotation({
+            id: id,
+            pageIndex: pageIndex,
+            formFieldName: id,
+            boundingBox: new Rect({
+                width: x,
+                height: y,
+                top: top,
+                left: left
+            })
+        });
+        return annotation;
+    };
     return App;
 }());
 export { App };
-// 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);
-//        });
-//}
 //# sourceMappingURL=app.js.map

EnvelopeGenerator.Web/wwwroot/js/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","sourceRoot":"","sources":["../../Scripts/app.ts"],"names":[],"mappings":"AAMA;IAAA;IAuBA,CAAC;IAtBiB,kBAAc,GAA5B,UAA8B,SAAiB,EAAE,GAAW;QACxD,OAAO,CAAC,GAAG,CAAC,oBAAoB,CAAC,CAAC;QAElC,KAAK,CAAC,GAAG,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,CAAC;aACjC,IAAI,CAAC,UAAA,GAAG,IAAI,OAAA,GAAG,CAAC,WAAW,EAAE,EAAjB,CAAiB,CAAC;aAC9B,IAAI,CAAC,UAAA,WAAW,IAAI,OAAA,GAAG,CAAC,YAAY,CAAC,WAAW,EAAE,SAAS,CAAC,EAAxC,CAAwC,CAAC;aAC7D,IAAI,CAAC,UAAA,QAAQ;YACV,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAA;YAC/B,OAAO,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAA;QACzB,CAAC,CAAC;aACD,KAAK,CAAC,UAAA,KAAK;YACR,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC,CAAC,CAAC;IACX,CAAC;IAEc,gBAAY,GAA3B,UAA4B,WAAwB,EAAE,SAAiB;QACnE,QAAQ,CAAC,IAAI,CAAC;YACV,SAAS,EAAE,SAAS;YACpB,QAAQ,EAAE,WAAW;SACxB,CAAC,CAAA;IACN,CAAC;IAEL,UAAC;AAAD,CAAC,AAvBD,IAuBC;;AAED,8DAA8D;AAC9D,mDAAmD;AACnD,0EAA0E;AAC1E,wCAAwC;AAExC,4CAA4C;AAC5C,yCAAyC;AACzC,oEAAoE;AACpE,kCAAkC;AAClC,6BAA6B;AAC7B,6CAA6C;AAC7C,YAAY;AACZ,2BAA2B;AAC3B,2CAA2C;AAC3C,aAAa;AACb,GAAG"}
+{"version":3,"file":"app.js","sourceRoot":"","sources":["../../Scripts/app.ts"],"names":[],"mappings":"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"}