27-09-2023

EnvelopeGenerator.Web/wwwroot/js/app.js

@@ -39,18 +39,6 @@ var Rect = PSPDFKit.Geometry.Rect;
 var SignatureFormField = PSPDFKit.FormFields.SignatureFormField;
 var _a = PSPDFKit.ElectronicSignatureCreationMode, DRAW = _a.DRAW, TYPE = _a.TYPE;
 var DISABLED = PSPDFKit.AutoSaveMode.DISABLED;
-var allowedToolbarItems = [
-    "sidebar-thumbnails",
-    "sidebar-document-ouline",
-    "sidebar-bookmarks",
-    "pager",
-    "pan",
-    "zoom-out",
-    "zoom-in",
-    "zoom-mode",
-    "spacer",
-    "search"
-];
 var App = /** @class */ (function () {
     function App() {
     }
@@ -58,19 +46,21 @@ var App = /** @class */ (function () {
     // and will trigger loading of the Editor Interface
     App.loadPDFFromUrl = function (container, envelopeKey) {
         return __awaiter(this, void 0, void 0, function () {
-            var envelopeObject, document, arrayBuffer, e_1, _a, annotations, createdAnnotation;
+            var envelopeObject, arrayBuffer, e_1, _a, annotations, createdAnnotations;
             return __generator(this, function (_b) {
                 switch (_b.label) {
                     case 0:
+                        App.ui = new UI();
                         console.debug("Loading PSPDFKit..");
                         return [4 /*yield*/, App.loadData("/api/get-data/".concat(envelopeKey))];
                     case 1:
                         envelopeObject = _b.sent();
-                        document = envelopeObject.envelope.documents[0];
+                        App.envelopeKey = envelopeKey;
+                        App.currentDocument = envelopeObject.envelope.documents[0];
                         _b.label = 2;
                     case 2:
                         _b.trys.push([2, 4, , 5]);
-                        return [4 /*yield*/, App.loadDocument("/api/download/".concat(envelopeKey, "?id=").concat(document.id))];
+                        return [4 /*yield*/, App.loadDocument("/api/download/".concat(envelopeKey, "?id=").concat(App.currentDocument.id))];
                     case 3:
                         arrayBuffer = _b.sent();
                         return [3 /*break*/, 5];
@@ -87,30 +77,24 @@ var App = /** @class */ (function () {
                         console.debug(envelopeObject.envelope);
                         console.debug("PSPDFKit configured!");
                         annotations = [];
-                        document.elements.forEach(function (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);
-                            var id = PSPDFKit.generateInstantId();
-                            var annotation = App.createSignatureAnnotation(id, element.width, element.height, element.top, element.left, element.page);
-                            var formField = new SignatureFormField({
-                                name: id,
-                                annotationIds: List([annotation.id])
-                            });
+                        App.currentDocument.elements.forEach(function (element) {
+                            console.log("Creating annotation for element", element.id);
+                            var _a = App.createAnnotationFromElement(element), annotation = _a[0], formField = _a[1];
                             annotations.push(annotation);
                             annotations.push(formField);
-                            console.debug("Annotation created.");
                         });
                         return [4 /*yield*/, App.Instance.create(annotations)];
                     case 7:
-                        createdAnnotation = (_b.sent())[0];
-                        console.debug(createdAnnotation);
+                        createdAnnotations = _b.sent();
+                        console.debug(createdAnnotations);
                         return [2 /*return*/];
                 }
             });
         });
     };
+    App.inchToPoint = function (inch) {
+        return inch * 72;
+    };
     // 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" })
@@ -121,57 +105,132 @@ var App = /** @class */ (function () {
         return fetch(url, { credentials: "include" })
             .then(function (res) { return res.json(); });
     };
+    App.postDocument = function (url, buffer) {
+        return fetch(url, { credentials: "include", method: "POST", body: buffer })
+            .then(function (res) { return 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.
     App.loadPSPDFKit = function (arrayBuffer, container) {
-        var annotationPresets = PSPDFKit.defaultAnnotationPresets;
-        console.log(annotationPresets);
-        annotationPresets.ink = {
-            lineWidth: 10
-        };
         return PSPDFKit.load({
             container: container,
             document: arrayBuffer,
             autoSaveMode: DISABLED,
-            annotationPresets: annotationPresets,
+            annotationPresets: App.ui.getPresets(),
             electronicSignatures: {
-                creationModes: [DRAW]
+                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;
             }
         });
     };
     App.configurePSPDFKit = function (instance) {
+        var _this = this;
         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) {
-            var annotation = createdAnnotations[0];
-            console.log("annotations created", createdAnnotations.toJS());
-        });
+        instance.addEventListener("annotations.create", function (createdAnnotations) { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                console.log("annotations created", createdAnnotations.toJS());
+                return [2 /*return*/];
+            });
+        }); });
         var filteredItems = instance.toolbarItems
-            .filter(function (item) { return allowedToolbarItems.includes(item.type); });
-        var customItems = [
-            {
-                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\">\n                        <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\"/>\n                        <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\" />\n                      </svg>",
-                onPress: this.handleFinish
-            }
-        ];
-        instance.setToolbarItems(filteredItems.concat(customItems));
+            .filter(function (item) { return App.ui.allowedToolbarItems.includes(item.type); });
+        instance.setToolbarItems(filteredItems.concat(App.ui.getToolbarItems(App.handleClick)));
+    };
+    App.handleClick = function (eventType) {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a;
+            return __generator(this, function (_b) {
+                switch (_b.label) {
+                    case 0:
+                        _a = eventType;
+                        switch (_a) {
+                            case "RESET": return [3 /*break*/, 1];
+                            case "FINISH": return [3 /*break*/, 3];
+                        }
+                        return [3 /*break*/, 5];
+                    case 1: return [4 /*yield*/, App.handleReset(null)];
+                    case 2:
+                        _b.sent();
+                        return [3 /*break*/, 5];
+                    case 3: return [4 /*yield*/, App.handleFinish(null)];
+                    case 4:
+                        _b.sent();
+                        return [3 /*break*/, 5];
+                    case 5: return [2 /*return*/];
+                }
+            });
+        });
     };
     App.handleFinish = function (event) {
         return __awaiter(this, void 0, void 0, function () {
+            var json, buffer;
             return __generator(this, function (_a) {
                 switch (_a.label) {
-                    case 0: return [4 /*yield*/, App.Instance.applyOperations([{ type: "flattenAnnotations" }])
-                        //await downloadDocument();
-                    ];
+                    case 0: return [4 /*yield*/, App.Instance.save()];
                     case 1:
                         _a.sent();
+                        return [4 /*yield*/, App.Instance.exportInstantJSON()];
+                    case 2:
+                        json = _a.sent();
+                        console.log(json);
+                        return [4 /*yield*/, App.Instance.exportPDF({ flatten: true })];
+                    case 3:
+                        buffer = _a.sent();
+                        return [4 /*yield*/, App.uploadDocument(buffer, App.envelopeKey, App.currentDocument.id)];
+                    case 4:
+                        _a.sent();
+                        alert("Signatur wird gespeichert!");
+                        return [2 /*return*/];
+                }
+            });
+        });
+    };
+    App.handleReset = function (event) {
+        return __awaiter(this, void 0, void 0, function () {
+            var i, annotations;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        if (!confirm("Wollen Sie das Dokument und alle erstellten Signaturen zurücksetzen?")) return [3 /*break*/, 4];
+                        i = 0;
+                        _a.label = 1;
+                    case 1:
+                        if (!(i < App.Instance.totalPageCount)) return [3 /*break*/, 4];
+                        return [4 /*yield*/, App.Instance.getAnnotations(i)];
+                    case 2:
+                        annotations = _a.sent();
+                        annotations.forEach(function (annotation) {
+                            //console.log(annotation)
+                            // TODO: Delete only create signatures
+                            //App.Instance.delete(annotation.id)
+                        });
+                        _a.label = 3;
+                    case 3:
+                        i++;
+                        return [3 /*break*/, 1];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        });
+    };
+    App.uploadDocument = function (buffer, envelopeKey, documentId) {
+        return __awaiter(this, void 0, void 0, function () {
+            var result;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, App.postDocument("/api/upload/".concat(envelopeKey, "/").concat(documentId), buffer)];
+                    case 1:
+                        result = _a.sent();
+                        console.log(result);
                         return [2 /*return*/];
                 }
             });
@@ -215,6 +274,23 @@ var App = /** @class */ (function () {
             });
         });
     };
+    App.createAnnotationFromElement = function (element) {
+        var id = PSPDFKit.generateInstantId();
+        console.log("Creating Annotation", id);
+        var width = App.inchToPoint(element.width);
+        var height = App.inchToPoint(element.height);
+        var top = App.inchToPoint(element.top) - (height / 2);
+        var left = App.inchToPoint(element.left) - (width / 2);
+        var page = element.page - 1;
+        var annotation = App.createSignatureAnnotation(id, width, height, top, left, page);
+        console.log(annotation);
+        var formField = new SignatureFormField({
+            name: id,
+            annotationIds: List([annotation.id])
+        });
+        console.log(formField);
+        return [annotation, formField];
+    };
     App.createSignatureAnnotation = function (id, width, height, top, left, pageIndex) {
         var annotation = new PSPDFKit.Annotations.WidgetAnnotation({
             id: id,
@@ -227,4 +303,54 @@ var App = /** @class */ (function () {
     return App;
 }());
 export { App };
+var UI = /** @class */ (function () {
+    function UI() {
+        this.allowedToolbarItems = [
+            "sidebar-thumbnails",
+            "sidebar-document-ouline",
+            "sidebar-bookmarks",
+            "pager",
+            "pan",
+            "zoom-out",
+            "zoom-in",
+            "zoom-mode",
+            "spacer",
+            "search"
+        ];
+        this.getToolbarItems = function (callback) {
+            var customItems = [
+                {
+                    type: "custom",
+                    id: "button-reset",
+                    title: "Zurücksetzen",
+                    onPress: function () {
+                        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\">\n                      <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\"/>\n                      <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\"/>\n                    </svg>"
+                },
+                {
+                    type: "custom",
+                    id: "button-finish",
+                    title: "Abschließen",
+                    onPress: function () {
+                        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\">\n                        <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\"/>\n                        <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\" />\n                      </svg>"
+                }
+            ];
+            return customItems;
+        };
+    }
+    UI.prototype.getPresets = function () {
+        var annotationPresets = PSPDFKit.defaultAnnotationPresets;
+        annotationPresets.ink = {
+            lineWidth: 10
+        };
+        annotationPresets.widget = {
+            readOnly: true
+        };
+        return annotationPresets;
+    };
+    return UI;
+}());
 //# sourceMappingURL=app.js.map