03-11-23

EnvelopeGenerator.Web/wwwroot/js/annotation.js

@@ -20,7 +20,7 @@
             ))
         ).flatMap((annotations) =>
             annotations.reduce((acc, annotation) => acc.concat(annotation), [])
-        ).filter((annotation) => !!annotation.isSignature);
+        ).filter((annotation) => !!annotation.isSignature || annotation.description == "FRAME");
         //deleting all Annotations
         return await instance.delete(pageAnnotations);
     }
@@ -50,9 +50,9 @@
         const annotation = this.createSignatureAnnotation(id, width, height, top, left, page)
         console.log(annotation)
 
-        const formField = new SignatureFormField({
+        const formField = new PSPDFKit.FormFields.SignatureFormField({
             name: id,
-            annotationIds: List([annotation.id])
+            annotationIds: PSPDFKit.Immutable.List([annotation.id])
         })
         console.log(formField)
 
@@ -64,12 +64,54 @@
             id: id,
             pageIndex: pageIndex,
             formFieldName: id,
-            boundingBox: new Rect({ width, height, top, left })
+            boundingBox: new PSPDFKit.Geometry.Rect({ width, height, top, left })
         })
 
         return annotation
     }
 
+    async createAnnotationFrameBlob(receiverName, width, height) {
+        const canvas = document.createElement("canvas");
+        canvas.width = width;
+        canvas.height = height;
+
+        const ctx = canvas.getContext("2d");
+
+        const date = new Date();
+        const dateString = date.toLocaleDateString("de-DE");
+
+        const signatureLength = 100;
+
+        ctx.beginPath();
+
+        ctx.moveTo(30, 10);
+        ctx.lineTo(signatureLength, 10);
+
+        ctx.moveTo(30, 10);
+        ctx.arcTo(10, 10, 10, 30, 20);
+
+        ctx.moveTo(10, 30);
+        ctx.arcTo(10, 50, 30, 50, 20);
+
+        ctx.moveTo(30, 50);
+        ctx.lineTo(signatureLength, 50);
+
+        ctx.strokeStyle = "darkblue";
+        ctx.stroke();
+
+        ctx.fillStyle = "black";
+        ctx.font = "10px serif";
+        ctx.fillText("Signed by", 30, 10)
+        ctx.fillText(receiverName + ", " + dateString, 15, 60)
+
+        return new Promise(resolve => {
+            canvas.toBlob((blob) => {
+                const url = URL.createObjectURL(blob);
+                resolve(url)      
+            })
+        })
+    }
+
     inchToPoint(inch) {
         return inch * 72;
     }