Improve annotation handling and UI stability

Updated `appsettings.UI.json` to adjust annotation properties for better alignment and positioning. Refactored `createAnnotations` and `createAnnotationFrameBlob` in `annotation.js` to improve readability, reusability, and asynchronous handling.

Enhanced the `App` class in `app.js` by introducing `signatureWidgets` for stable frame placement and added logic to find and update the nearest signature widget. Improved bounding box calculations and removed widget backgrounds after signing.

Refactored `handleAnnotationsCreate` to align with new logic and updated `app.min.js` to reflect these changes. General improvements include better code maintainability, reduced redundancy, and enhanced user experience.

EnvelopeGenerator.Web/wwwroot/js/annotation.js

@@ -11,13 +11,16 @@ async function createAnnotations(document, envelopeId, receiverId) {
 
         //#region signatures
         const id = generateId(envelopeId, receiverId, element.id, 'signature');
+
+        const boundingBox = new PSPDFKit.Geometry.Rect(annotParams.signature);
+        
         const annotation = new PSPDFKit.Annotations.WidgetAnnotation({
             id: id,
             pageIndex: page,
             formFieldName: id,
-            backgroundColor: PSPDFKit.Color.LIGHT_YELLOW,
+            backgroundColor: null,
             blendMode: 'normal',
-            boundingBox: new PSPDFKit.Geometry.Rect(annotParams.signature),
+            boundingBox: boundingBox,
         })
 
         const formField = new PSPDFKit.FormFields.SignatureFormField({
@@ -237,7 +240,7 @@ async function createAnnotationFrameBlob(receiverName, receiverSignature, timest
     Comp.SignatureProgress.SignedCount += 1;
     const canvas = document.createElement('canvas')
     const scale = 4
-    const fontSize = 10
+    const fontSize = 8
 
     canvas.width = width * scale
     canvas.height = height * scale
@@ -270,21 +273,17 @@ async function createAnnotationFrameBlob(receiverName, receiverSignature, timest
     ctx.moveTo(30 * scale, 50 * scale)
     ctx.lineTo(signatureLength, 50 * scale)
 
-    ctx.strokeStyle = 'darkblue'
+    ctx.strokeStyle = 'darkgray'
     ctx.stroke()
 
     ctx.fillStyle = 'black'
     ctx.font = `${fontSize * scale}px sans-serif`
     ctx.fillText((READ_AND_CONFIRM ? localized.confirmedBy : localized.signedBy) ?? 'Signed by', 15 * scale, 10 * scale)
-    ctx.fillText(receiverName, 15 * scale, 60 * scale)
-    ctx.fillText(signatureString, 15 * scale, 70 * scale)
+    ctx.fillText(receiverName, 15 * scale, 58.5 * scale)
+    ctx.fillText(signatureString, 15 * scale, 69 * scale)
 
-    return new Promise((resolve) => {
-        canvas.toBlob((blob) => {
-            const url = URL.createObjectURL(blob)
-            resolve(url)
-        })
-    })
+    const blob = await new Promise((resolve) => canvas.toBlob(resolve))
+    return URL.createObjectURL(blob)
 }
 
 //required